diff --git a/src/content/roadmap/uxui-beginner.md b/src/content/roadmap/uxui-beginner.md index 22a41aa..7687ee0 100644 --- a/src/content/roadmap/uxui-beginner.md +++ b/src/content/roadmap/uxui-beginner.md @@ -33,6 +33,8 @@ User Interface หมายถึง ส่วนที่ผู้ใช้ส ### Design Tools - Figma +ในการออกแบบ Digital Product นั้น หนึ่งทักษะที่สำคัญที่สุดเลยก็คือความสามารถในการใช้โปรแกรมออกแบบ + Figma เป็นเครื่องมือที่ใช้ในการออกแบบ User Interface ที่เป็นที่นิยมมากสำหรับ Designer ในยุคปัจจุบัน มาดูกันว่าเราจะเริ่มต้นใช้งาน Figma เพื่อออกแบบ Product เช่นเว็บไซต์ หรือแอปพลิเคชันได้อย่างไรบ้าง - [การใช้งานโปรแกรม Figma เนื้อหาเต็ม 21 บท สำหรับนักออกแบบ UI/UX](https://www.youtube.com/watch?v=wfyKQfVYkZE) @@ -55,22 +57,26 @@ Figma เป็นเครื่องมือที่ใช้ในกา Prototype คือแบบจำลองของ Product ที่เราออกแบบขึ้นมาเพื่อให้ผู้ใช้สามารถทดสอบการใช้งานได้ก่อนจะปล่ อยออกมาเป็น Product ที่ให้ใช้จริง -เราสามารถสร้าง Prototype ได้ง่าย ๆ ด้วย Figma โดยการใช้งานเครื่องมือที่มีอยู่ใน Figma ได้เลย +เราสามารถสร้าง Prototype ได้ง่าย ๆ ด้วย Figma โดยการใช้งานเครื่องมือที่มีอยู่ใน Figma ได้เลย มาดูวิธีการสร้าง Prototype กัน - [Figma for Edu: Prototyping 101, new basics](https://www.youtube.com/watch?v=UUsysuFmVrA&t=70s) ## User Experience (UX) -User Experience หมายถึง ประสบการณ์ที่ผู้ใช้ได้รับจากการใช้งานสิ่งต่าง ๆ ที่เราออกแบบขึ้นมา ซึ่งมีความหมายว่าเราต้องการให้ผู้ใช้มีประสบการณ์ที่ดี และสะดวกสบายในการใช้งาน +User Experience หมายถึง ประสบการณ์ที่ผู้ใช้ได้รับจากการใช้งานสิ่งต่าง ๆ ที่เราออกแบบขึ้นมา + +ซึ่งในการออกแบบ Digital Product เรามีเป้าหมายในการสร้าง Product ที่สะดวกสบายในการใช้งาน และสามารถตอบสนองความต้องการของผู้ใช้ได้ - [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) -### UX Principles +### Design Thinking -แหล่งรวมหลักการออกแบบสำคัญสำหรับการสร้าง User Experience ที่ดี +หลักการที่สำคัญมากในการทำ Digital Product คือการคิดเชิงออกแบบ หรือ Design Thinking ซึ่งจะทำให้ -- [Laws of UX](https://lawsofux.com/) +- [กระบวนการคิดเชิงออกแบบ (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 @@ -78,10 +84,14 @@ User Experience หมายถึง ประสบการณ์ที่ผ - [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) -### Design Thinking +### Laws of UX -- [What Is Design Thinking? An Overview](https://www.youtube.com/watch?v=gHGN6hs2gZY) +แหล่งรวมหลักการ Best Practices ของออกแบบ User Experience + +- [Laws of UX](https://lawsofux.com/) ### Wireframing @@ -89,12 +99,18 @@ Wireframe คือ การวาดร่างเบื้องต้นข - [How To Create Your First Wireframe (A UX Tutorial)](https://www.youtube.com/watch?v=qpH7-KFWZRI) -### Information Architecture +### User Flow + +### Information Architecture (IA) + +Information Architecture คือ การวางแผนรูปแบบของข้อมูลใน Product ที่เราออกแบบขึ้นมา ซึ่งเป็นขั้นตอนที่สำคัญในการออกแบบ Product - [รู้จัก Information Architecture องค์ประกอบสำคัญในการทำ UX/UI Design](https://www.borntodev.com/2022/08/26/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-information-architecture/) - [Information Architecture guide for UX designers](https://www.youtube.com/watch?v=akWDacn5lIA) -### Sitemap +#### Sitemap + +Sitemap เป็น Information Architecture รูปแบบหนึ่ง ที่ใช้ในการแสดงโครงสร้างของเว็บไซต์ หรือแอปพลิเคชันนั้น ๆ โดยส่วนใหญ่จะมีการแสดงโครงสร้างของเว็บไซต์เป็นลูกศรที่เชื่อมต่อกัน ซึ่งจะอธิบายถึงความสัมพันธ์ และวิธีการเข้าถึงข้อมูลในเว็บไซต์นั้น ๆ - [Sitemap (แผนผังเว็บไซต์) คืออะไร?](https://medium.com/upskill-ux/sitemap-%E0%B9%81%E0%B8%9C%E0%B8%99%E0%B8%9C%E0%B8%B1%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-1a360039e549) - [What is a Sitemap in UX Design?](https://www.interaction-design.org/literature/article/ux-sitemap?srsltid=AfmBOoqM3HVmq7U2J59Xmjz6JKovxIubs6gvEtzXzE3lJyn0-VVI0HVY) @@ -102,6 +118,9 @@ Wireframe คือ การวาดร่างเบื้องต้นข ### UX Writing +UX Writing เป็นทักษะที่สำคัญในการออกแบบ Product ที่สำคัญอย่างหนึ่ง ซึ่งจะทำให้การสื่อสารใน User Interface นั้นเป็นไปอย่างชัดเจน ไม่สับสน และเข้าใจง่าย + +- [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) ### Design Critique @@ -110,6 +129,8 @@ Wireframe คือ การวาดร่างเบื้องต้นข ## Design Resources, Inspiration & References +แหล่งรวมเครื่องมือ แหล่งข้อมูล และแบบตัวอย่างสำหรับการออกแบบ Digital Product + ### Design Resources - [Design Resources](https://designresourc.es/) @@ -126,8 +147,9 @@ Wireframe คือ การวาดร่างเบื้องต้นข - [cryptodesign.club](https://cryptodesign.club/) - [PageFlows](https://pageflows.com/) -### YouTube Channels +### YouTube/Podcast Channels +- [ผักสด พอดแคสต์ (PUXOD Podcast)](https://puxodpodcast.pruxus.com/) - [AJ&Smart](https://www.youtube.com/@AJSmart) - [femke.deisgn](https://www.youtube.com/@femkedesign) - [Mizko](https://www.youtube.com/@Mizko)