diff --git a/public/images/double-diamond-design-process.png b/public/images/double-diamond-design-process.png new file mode 100644 index 0000000..7b19aae Binary files /dev/null and b/public/images/double-diamond-design-process.png differ diff --git a/src/content/roadmap/uxui-beginner.md b/src/content/roadmap/uxui-beginner.md index aa5b491..36e2b5a 100644 --- a/src/content/roadmap/uxui-beginner.md +++ b/src/content/roadmap/uxui-beginner.md @@ -10,7 +10,7 @@ level: 'beginner' ก่อนอื่นเลยต้องบอกว่า Roadmap ของ UX/UI Designer นั้นสามารถเรียนรู้
ให้จบได้ภายในเวลาประมาณ 6 ชั่วโมง - 1 วัน เท่านั้นซึ่งแนะนำมาก ๆ ให้ทุกคนลองเรียนดู แล้วนำไปลองปรับใช้ในโปรเจกต์แรกของทุกคนกัน -โดยในบทความนี้จะมีลิงก์ไปยังเว็บไซต์อื่น ๆ ซึ่งเพื่อน ๆ สามารถเรียนรู้ได้ด้วยตัวเองได้เลย ! +โดยในบทความนี้จะมีลิงก์ไปยังเว็บไซต์อื่น ๆ ซึ่งจะเรียงจากเนื้อหาที่รวดเร็วที่สุด จนถึงเนื้อหาที่ครอบคลุมที่สุด โดยสามารถเลือกเรียนลิงก์ไหนก็ได้ตามความสนใจของตัวเองเลย ! ## What is UX/UI Design? @@ -21,50 +21,51 @@ UX/UI แบ่งออกมาเป็นสองอย่างหลั - [world's shortest UI/UX design course](https://www.youtube.com/watch?v=wIuVvCuiJhU) - [Become a UI/UX designer in 2024 - A step by step guide](https://www.youtube.com/watch?v=HmKwiEmJIdM) - [UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma](https://www.youtube.com/watch?v=c9Wg6Cb_YlU) +- [UX/UI Design Roadmap 2024](https://roadmap.uxuiopen.com/) และนอกจากนั้น ยังมีแหล่งรวม Guidelines สำหรับการออกแบบ Product เพื่อให้ผู้ใช้สามารถใช้งานได้ง่ายที่สุดด้วย - [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) - [Material Design](https://material.io/design) -## User Interface (UI) - -User Interface หมายถึง ส่วนที่ผู้ใช้สัมผัสได้ ซึ่งเป็นส่วนที่เราออกแบบขึ้นมา ซึ่งมีความหมายว่าเราต้องการให้ผู้ใช้สามารถใช้งานได้ง่ายและสวยงาม - -### Design Tools - Figma - -ในการออกแบบ Digital Product นั้น หนึ่งทักษะที่สำคัญที่สุดเลยก็คือความสามารถในการใช้โปรแกรมออกแบบ +## Design Processes -Figma เป็นเครื่องมือที่ใช้ในการออกแบบ User Interface ที่เป็นที่นิยมมากสำหรับ Designer ในยุคปัจจุบัน มาดูกันว่าเราจะเริ่มต้นใช้งาน Figma เพื่อออกแบบ Product เช่นเว็บไซต์ หรือแอปพลิเคชันได้อย่างไรบ้าง - -- [การใช้งานโปรแกรม Figma เนื้อหาเต็ม 21 บท สำหรับนักออกแบบ UI/UX](https://www.youtube.com/watch?v=wfyKQfVYkZE) -- [world's shortest Figma course](https://www.youtube.com/watch?v=1pW_sk-2y40) -- [Introducing Figma: A Beginners Tutorial (2023 UI UX Design)](https://www.youtube.com/watch?v=JGLfyTDgfDc) -- [Figma UI Design Tutorial: Get Started in Just 24 Minutes!](https://www.youtube.com/watch?v=FTFaQWZBqQ8) -- [New to Figma? Get started with "Figma for beginners" tutorials](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) +### Design Thinking -### Graphic Design Fundamentals +หลักการที่สำคัญมากในการทำ Digital Product คือการคิดเชิงออกแบบ หรือ Design Thinking ซึ่งจะทำให้ -เราสามารถนำหลักการออกแบบกราฟิกมาใช้ในการออกแบบ Product ให้สวยงาม น่าใช้มากขึ้น โดยหลักการเบื้องต้นมีประมาณนี้ +- [กระบวนการคิดเชิงออกแบบ (Design Thinking) เครื่องมือสำคัญของการสร้างความสำเร็จให้องค์กร](https://th.hrnote.asia/orgdevelopment/190702-design-thinking/) +- [Design Thinking (DT)](https://www.interaction-design.org/literature/topics/design-thinking?srsltid=AfmBOop99PTGbvrAv4SoiI76qFfcbDzGWcKx0n3FZtiCgy7siuN_RXfX) +- [What Is Design Thinking? An Overview](https://www.youtube.com/watch?v=gHGN6hs2gZY) +- [IDEO: Design Thinking](https://designthinking.ideo.com/) -#### Design Principles +### Double Diamond Design Process -- [Design Priciples](https://www.interaction-design.org/literature/topics/design-principles) -- [4 Foundational UI Design Principles | C.R.A.P.](https://www.youtube.com/watch?v=uwNClNmekGU) -- [Beginning Graphic Design: Fundamentals](https://www.youtube.com/watch?v=YqQx75OPRa0&t=3s) -- [Design basics - by Figma](https://www.figma.com/resource-library/design-basics/) +![Double Diamond Design Process](/images/double-diamond-design-process.png) -#### Color Theory +Double Diamond Design Process คือกระบวนการออกแบบที่ใช้ในการแก้ปัญหา และสร้าง Product ที่ดีที่สุดให้กับผู้ใช้ โดยแบ่งเป็น 4 ขั้นตอนหลัก ๆ และ 2 ส่วนด้วยกัน -- [60-30-10 Color Rule](https://www.youtube.com/watch?v=UWwNIMHFdW4) +- [Double Diamond Design Process กระบวนการคิด ฝึกความคิดสร้างสรรค์ ยุคใหม่](https://codegeniusacademy.com/double-diamond/) +- [Double Diamond Design Process – The Best Framework for a Successful Product Design](https://arc.net/l/quote/ggzyvcrc) -### Prototyping +## Design Research Methods -Prototype คือแบบจำลองของ Product ที่เราออกแบบขึ้นมาเพื่อให้ผู้ใช้สามารถทดสอบการใช้งานได้ก่อนจะปล่ อยออกมาเป็น Product ที่ให้ใช้จริง +วิธีการค้นคว้าเพื่อให้ได้ข้อมูลที้ต้องการสำหรับการนำไปออกแบบ Product -เราสามารถสร้าง Prototype ได้ง่าย ๆ ด้วย Figma โดยการใช้งานเครื่องมือที่มีอยู่ใน Figma ได้เลย มาดูวิธีการสร้าง Prototype กัน +- [Research Methods | Definitions, Types, Examples](https://www.scribbr.com/category/methodology/) +- [When to Use Which User-Experience Research Methods](https://www.nngroup.com/articles/which-ux-research-methods/) +- [UX Research - Get Started With Qualitative User Research (2023)](https://www.youtube.com/watch?v=bAARmsv1tms) +- [How To Conduct User Interviews (UX Design)](https://www.youtube.com/watch?v=Q_m1-3mCyiI) -- [Figma for Edu: Prototyping 101, new basics](https://www.youtube.com/watch?v=UUsysuFmVrA&t=70s) +card sorting +cognitive walkthrough +competitive analysis +ethnographic research +focus groups +heuristic evaluation +interviews +surveys +swot analysis ## User Experience (UX) @@ -75,36 +76,22 @@ User Experience หมายถึง ประสบการณ์ที่ผ - [How to teach yourself UX Design (no bootcamps, no courses)](https://www.youtube.com/watch?v=hvBGy8ewZNc) - [UX Design: How To Get Started (A Full Guide)](https://www.youtube.com/watch?v=t0aCoqXKFOU) -### Design Thinking - -หลักการที่สำคัญมากในการทำ Digital Product คือการคิดเชิงออกแบบ หรือ Design Thinking ซึ่งจะทำให้ - -- [กระบวนการคิดเชิงออกแบบ (Design Thinking) เครื่องมือสำคัญของการสร้างความสำเร็จให้องค์กร](https://th.hrnote.asia/orgdevelopment/190702-design-thinking/) -- [Design Thinking (DT)](https://www.interaction-design.org/literature/topics/design-thinking?srsltid=AfmBOop99PTGbvrAv4SoiI76qFfcbDzGWcKx0n3FZtiCgy7siuN_RXfX) -- [What Is Design Thinking? An Overview](https://www.youtube.com/watch?v=gHGN6hs2gZY) - -### Research Methods - -วิธีการค้นคว้าเพื่อให้ได้ข้อมูลที้ต้องการสำหรับการนำไปออกแบบ Product - -- [Research Methods | Definitions, Types, Examples](https://www.scribbr.com/category/methodology/) -- [When to Use Which User-Experience Research Methods](https://www.nngroup.com/articles/which-ux-research-methods/) -- [UX Research - Get Started With Qualitative User Research (2023)](https://www.youtube.com/watch?v=bAARmsv1tms) -- [How To Conduct User Interviews (UX Design)](https://www.youtube.com/watch?v=Q_m1-3mCyiI) - ### Laws of UX แหล่งรวมหลักการ Best Practices ของออกแบบ User Experience - [Laws of UX](https://lawsofux.com/) -### Wireframing +### Experience Mapping -Wireframe คือ การวาดร่างเบื้องต้นของ Product ที่เราออกแบบขึ้นมา ซึ่งเป็นขั้นตอนที่สำคัญในการออกแบบ Product +#### User Journey -- [How To Create Your First Wireframe (A UX Tutorial)](https://www.youtube.com/watch?v=qpH7-KFWZRI) +#### User Flow + +User Flow หรือ เส้นทางของผู้ใช้ คือ แผนผังที่แสดงเส้นทางการใช้งานเว็บไซต์หรือแอพลิเคชันของเรา เริ่มตั้งแต่ขั้นตอนแรกในการเริ่มต้นใช้งานไปจนถึงการดำเนินการในขั้นตอนสุดท้าย ซึ่งจะบอกรายละเอียดในแต่ละขั้นตอนของการใช้งานส่วนต่าง ๆ ในเว็บไซต์หรือแอพลิเคชันว่ามีการทำงานหรือโต้ตอบกับผู้ใช้งานอย่างไรบ้าง -### User Flow +- [User Flow (เส้นทางของผู้ใช้) คืออะไร?](https://medium.com/upskill-ux/user-flow-%E0%B9%80%E0%B8%AA%E0%B9%89%E0%B8%99%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B9%83%E0%B8%8A%E0%B9%89-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-dfc2d28682b1) +- [How To Create A User Flow: A Step-By-Step Guide](https://careerfoundry.com/en/blog/ux-design/how-to-create-a-user-flow/) ### Information Architecture (IA) @@ -121,16 +108,81 @@ Sitemap เป็น Information Architecture รูปแบบหนึ่ง - [What is a Sitemap in UX Design?](https://www.interaction-design.org/literature/article/ux-sitemap?srsltid=AfmBOoqM3HVmq7U2J59Xmjz6JKovxIubs6gvEtzXzE3lJyn0-VVI0HVY) - [How To Plan A Website Sitemap - EASY STEP BY STEP](https://www.youtube.com/watch?v=O3BXKqlfHGs) -### UX Writing +### Wireframing + +Wireframe คือ การวาดร่างเบื้องต้นของ Product ที่เราออกแบบขึ้นมา ซึ่งเป็นขั้นตอนที่สำคัญในการออกแบบ Product + +- [How To Create Your First Wireframe (A UX Tutorial)](https://www.youtube.com/watch?v=qpH7-KFWZRI) + +### Prototyping + +Prototype คือแบบจำลองของ Product ที่เราออกแบบขึ้นมาเพื่อให้ผู้ใช้สามารถทดสอบการใช้งานได้ก่อนจะปล่ อยออกมาเป็น Product ที่ให้ใช้จริง + +เราสามารถสร้าง Prototype ได้ง่าย ๆ ด้วย Figma โดยการใช้งานเครื่องมือที่มีอยู่ใน Figma ได้เลย มาดูวิธีการสร้าง Prototype กัน + +- [Figma for Edu: Prototyping 101, new basics](https://www.youtube.com/watch?v=UUsysuFmVrA&t=70s) +- [Ultimate Guide to Prototyping in Figma](https://www.uiprep.com/blog/ultimate-guide-to-prototyping-in-figma) + +### Mesauring the Impact + +#### A/B Testing + +#### Usability Testing + +#### Analytics + +## User Interface (UI) + +User Interface หมายถึง ส่วนที่ผู้ใช้สัมผัสได้ ซึ่งเป็นส่วนที่เราออกแบบขึ้นมา ซึ่งมีความหมายว่าเราต้องการให้ผู้ใช้สามารถใช้งานได้ง่ายและสวยงาม + +### Design Tools - Figma + +ในการออกแบบ Digital Product นั้น หนึ่งทักษะที่สำคัญที่สุดเลยก็คือความสามารถในการใช้โปรแกรมออกแบบ + +Figma เป็นเครื่องมือที่ใช้ในการออกแบบ User Interface ที่เป็นที่นิยมมากสำหรับ Designer ในยุคปัจจุบัน มาดูกันว่าเราจะเริ่มต้นใช้งาน Figma เพื่อออกแบบ Product เช่นเว็บไซต์ หรือแอปพลิเคชันได้อย่างไรบ้าง + +- [การใช้งานโปรแกรม Figma เนื้อหาเต็ม 21 บท สำหรับนักออกแบบ UI/UX](https://www.youtube.com/watch?v=wfyKQfVYkZE) +- [world's shortest Figma course](https://www.youtube.com/watch?v=1pW_sk-2y40) +- [Introducing Figma: A Beginners Tutorial (2023 UI UX Design)](https://www.youtube.com/watch?v=JGLfyTDgfDc) +- [Figma UI Design Tutorial: Get Started in Just 24 Minutes!](https://www.youtube.com/watch?v=FTFaQWZBqQ8) +- [New to Figma? Get started with "Figma for beginners" tutorials](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) + +### Graphic Design Fundamentals + +เมื่อเราสามารถใช้โปรแกรมออกแบบกราฟิกได้แล้ว เราสามารถนำหลักการออกแบบกราฟิกมาใช้ในการออกแบบ Product ให้สวยงาม น่าใช้มากขึ้น + +#### Design Principles + +หลักการการออกแบบเบื้องต้นมีประมาณนี้ + +- [Design Priciples](https://www.interaction-design.org/literature/topics/design-principles) +- [Beginning Graphic Design: Fundamentals](https://www.youtube.com/watch?v=YqQx75OPRa0&t=3s) +- [Design basics - by Figma](https://www.figma.com/resource-library/design-basics/) + +### Brand Identity + +Brand Identity ไม่ว่าจะเป็นรูปแบบการใช้สี แบบอักขระ ตราสัญลักษณ์ การใช้คำ เป็นส่วนสำคัญในการออกแบบ Product ให้สื่อถึงความหมายในแบบเดียวกัน + +- [What Is Branding? 4 Minute Crash Course.](https://www.youtube.com/watch?v=sO4te2QNsHY) +- [How to Design a Brand Identity (full process)](https://www.youtube.com/watch?v=N6fRAAX9ums) +- [The Ultimate Guide to Create a Brand Identity [FREE TOOLKIT]](https://www.columnfivemedia.com/how-to-create-a-brand-identity/) + +#### Design System + +ในการออกแบบ Digital Product นั้น เราสามารถสร้าง Design System ขึ้นมาเพื่อให้การออกแบบ Product ของเรามีความสม่ำเสมอ และสื่อถึงความหมายเดียวกันได้ + +- [[Figma] Introduction to design systems](https://www.youtube.com/watch?v=Dtd40cHQQlk&list=PLXDU_eVOJTx6vqOWJSWH87Zb5-riiG63A) +- [[Figma] Design systems 101: What is a design system?](https://www.figma.com/blog/design-systems-101-what-is-a-design-system/) +- [[Figma] Design systems 102: How to build your design system](https://www.figma.com/blog/design-systems-102-how-to-build-your-design-system/) +- [(Bonus) Tokens, variables, and styles - Update: Introduction to design systems](https://www.youtube.com/watch?v=JyCmacSyDY4) -UX Writing เป็นทักษะที่สำคัญในการออกแบบ Product ที่สำคัญอย่างหนึ่ง ซึ่งจะทำให้การสื่อสารใน User Interface นั้นเป็นไปอย่างชัดเจน ไม่สับสน และเข้าใจง่าย +## Design Handoff -- [UX Writing คืออะไร? ทำความรู้จักกับศาสตร์แห่งการสื่อสารบน Digital Product](https://www.youtube.com/watch?v=LvFr-MDKM8Q&t=112s) -- [UX Writing in 60 seconds!](https://www.youtube.com/watch?v=t5Dq6GnQwTo) +เมื่อเราได้ออกแบบ User Interface ของเรามาเสร็จแล้ว เราจะต้องส่งให้ Developer ได้นำ Design นี้ไปไปทำต่อให้กลายเป็นเว็บไซต์หรือแอปพลิเคชันจริง -### Design Critique +ซึ่งการส่งงานหรือ Handoff ให้นักพัฒนาสามารถเข้าใจได้ง่ายนั้น จะทำให้ช่วยลดเวลาในการพัฒนา และลดความสับสนในการทำงานของทั้งสองฝ่ายได้ -- [Level up your UX design skills in 8 mins!](https://www.youtube.com/watch?v=g_rhKzX16f0) +- [Guide to Developer Handoff: A collection of best practices from the experts](https://www.figma.com/best-practices/guide-to-developer-handoff/) ## Design Resources, Inspiration & References