พื้นฐานการออกแบบ, ความรู้ด้าน UX / UI โดยเฉพาะสำหรับเว็บไซต์ภาษาไทย

1. เม่น
@MennStudio • @SeedThemes
UX/UI
สําหรับเว็บไทย

2. ทําเว็บ 12 ปี
ครูอาสาฯ
ไอทีวัลเลย์แม่ฮ่องสอน
เม่น
2

3. SeedThemes.com
WordPress Theme Marketplace
Flipped Classroom
MUSE Foundation
Co-living Space
เม่น
Pai • Maehongson • Thailand

4. การออกแบบ

5. การออกแบบ
การแก้ปัญหา
คือ

6. การแก้ปัญหา
คือ
การออกแบบ ที่ดี

7. การออกแบบ
การแก้ปัญหา
คือ
ที่ดี
ที่ยาก

8. การออกแบบ
คือ
ที่ดี
และแพง
การแก้ปัญหา ที่ยาก

9. การออกแบบ
การแก้ปัญหา
คือ
ที่ดี
ที่ยาก
และแพง
ให้กับคนจํานวนมาก

10. UX / UI

11. UX / UI
สวย
USER INTERFACE

12. UX / UI
สวย
USER INTERFACEUSER EXPERIENCE
เวิร์ค

13. สวย แต่ ไม่เวิร์ค

14. ไม่สวย แต่ เวิร์ค

15. UI / สวย
UX / เวิร์ค
“รู้ว่าอยากได้อะไร อย่างไร ยิ่งใช้ยิ่งชอบ”
“ประทับใจในแรกพบ”

16. ดีไซน์
สถิติ
UI / สวย
UX / เวิร์ค
“รู้ว่าอยากได้อะไร อย่างไร ยิ่งใช้ยิ่งชอบ”
“ประทับใจในแรกพบ”

18. UI
UX
ผลลัพธ์
กระบวนการ

19. UI DESIGN

20. Skeuomorphic vs Flat
จําลองจากของจริงที่จับต้องได้
(มีข้อจำกัดในการโต้ตอบ
เช่น กดได้อย่างเดียว)
สร้างจักรวาลใหม่
(โต้ตอบได้หลากหลายเช่น กดแช่/ปาดซ้ายขวา)

21. Almost Flat
Material
Apple / iOS
(ไม่มีชื่อเรียกเป็นทางการ)
Google / Android
(มีชื่อเรียกเป็นทางการ)

22. UX DESIGN

23. Data / Information ก็เหมือนถ้อยคำของหญิงสาว แม้จะพูดว่าต้องการอะไร แต่ Insight จริงๆ อาจจะไม่ใช่ก็ได้

25. ที่มา: http://impatientdesigner.com/what-exactly-is-ux-design

26. WIREFRAME / พิมพ์เขียว
ช่วยในการสรุปประเด็นของการออกแบบ
ที่มา: http://marketingyourwebshop.webnode.nl/what-are-wireframes/

27. ที่มา: https://dribbble.com/shots/861429-Wireflow

28. ตัวอย่าง Wireframe แบบเพิ่มรายละเอียด

29. เว็บไทย/ภาษาไทย
มีข้อจํากัดอย่างไร?

30. แบบอักษรไม่มีหัว
แบบอักษรมีหัว
SERIF / SANS SERIF
ประเภทของตัวอักษร
ข้อความต้องสามารถอ่านได้ง่าย

31. การตัดคํา
หัวข้อมักมีขนาดยาว
คอลัมน์ควรกว้างพอสมควร

32. สระ วรรณยุกต์
ต้องมี line-height อย่างน้อย 1.5-1.6

33. รก?
การออกแบบเหมือนการปรุงอาหาร
คนไทยชอบเครื่องปรุงเยอะๆ

34. สื่อสารทางเดียว?
เว็บไทยมักชินกับการพูดฝ่ายเดียว ควรปรับปรุง

35. ผู้ใช้ 2 ประเภท
รู้ว่าตนเองต้องการอะไร:
ไม่รู้ว่าตนเองต้องการอะไร:
ก่อให้เกิด UI 2 แบบ
Search / เข้า Google
Browse / เข้า Facebook

36. DESIGN PATTERN
http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html
http://gotgroove.com/ecommerce-blog/7-top-ui-design-trends-2015-beyond/
อยากได้ตัวอย่างงานออกแบบ ค้นคําว่า web design inspriation
อยากได้ตัวอย่าง ui ค้นคําว่า ui pattern
แล้วเพิ่มคีย์เวิร์ดประเภทงานที่ต้องการ เช่น Hotel, Form ฯลฯ

37. UX/UI
สําหรับเว็บไทย
เม่น
@MennStudio • @SeedThemes