Skip to content

Commit

Permalink
chore(article): update title description
Browse files Browse the repository at this point in the history
  • Loading branch information
betich committed Oct 21, 2024
1 parent 6c5b9ea commit 06da764
Showing 1 changed file with 32 additions and 10 deletions.
42 changes: 32 additions & 10 deletions src/content/roadmap/uxui-beginner.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -55,53 +57,70 @@ 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

วิธีการค้นคว้าเพื่อให้ได้ข้อมูลที้ต้องการสำหรับการนำไปออกแบบ 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)

### 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

Wireframe คือ การวาดร่างเบื้องต้นของ Product ที่เราออกแบบขึ้นมา ซึ่งเป็นขั้นตอนที่สำคัญในการออกแบบ Product

- [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)
- [How To Plan A Website Sitemap - EASY STEP BY STEP](https://www.youtube.com/watch?v=O3BXKqlfHGs)

### 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
Expand All @@ -110,6 +129,8 @@ Wireframe คือ การวาดร่างเบื้องต้นข

## Design Resources, Inspiration & References

แหล่งรวมเครื่องมือ แหล่งข้อมูล และแบบตัวอย่างสำหรับการออกแบบ Digital Product

### Design Resources

- [Design Resources](https://designresourc.es/)
Expand All @@ -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)
Expand Down

0 comments on commit 06da764

Please sign in to comment.