chore(uxui): restructure and add new content

src/content/roadmap/uxui-beginner.md

@@ -10,7 +10,7 @@ level: 'beginner'
 
 ก่อนอื่นเลยต้องบอกว่า Roadmap ของ UX/UI Designer นั้นสามารถเรียนรู้<br />ให้จบได้ภายในเวลาประมาณ <strong>6 ชั่วโมง - 1 วัน</strong> เท่านั้นซึ่งแนะนำมาก ๆ ให้ทุกคนลองเรียนดู แล้วนำไปลองปรับใช้ในโปรเจกต์แรกของทุกคนกัน
 
-โดยในบทความนี้จะมีลิงก์ไปยังเว็บไซต์อื่น ๆ ซึ่งเพื่อน ๆ สามารถเรียนรู้ได้ด้วยตัวเองได้เลย !
+โดยในบทความนี้จะมีลิงก์ไปยังเว็บไซต์อื่น ๆ ซึ่งจะเรียงจากเนื้อหาที่รวดเร็วที่สุด จนถึงเนื้อหาที่ครอบคลุมที่สุด โดยสามารถเลือกเรียนลิงก์ไหนก็ได้ตามความสนใจของตัวเองเลย !
 
 ## 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