การออกแบบ UI and UX Design สำหรับเว็บไทย
การออกแบบ UI and UX Design สำหรับเว็บไทย
1. UX/UI สําหรับเว็บไทย
2. ทําเว็บ 12 ปี ครูอาสาฯ ไอทีวัลเลย์แม่ฮ่องสอน
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 / เวิร์ค “รู้ว่าอยากได้อะไร อย่างไร ยิ่งใช้ยิ่งชอบ” “ประทับใจในแรกพบ”
17. UI UX ผลลัพธ์ กระบวนการ
18. UI DESIGN
19. Skeuomorphic vs Flat จําลองจากของจริงที่จับต้องได้ (มีข้อจำกัดในการโต้ตอบ เช่น กดได้อย่างเดียว) สร้างจักรวาลใหม่ (โต้ตอบได้หลากหลายเช่น กดแช่/ปาดซ้ายขวา)
20. Almost Flat Material Apple / iOS (ไม่มีชื่อเรียกเป็นทางการ) Google / Android (มีชื่อเรียกเป็นทางการ)
21. UX DESIGN
22. Data / Information ก็เหมือนถ้อยคำของหญิงสาว แม้จะพูดว่าต้องการอะไร แต่ Insight จริงๆ อาจจะไม่ใช่ก็ได้
23. ที่มา: http://impatientdesigner.com/what-exactly-is-ux-design
24. WIREFRAME / พิมพ์เขียว ช่วยในการสรุปประเด็นของการออกแบบ ที่มา: http://marketingyourwebshop.webnode.nl/what-are-wireframes/
25. ที่มา: https://dribbble.com/shots/861429-Wireflow
26. ตัวอย่าง Wireframe แบบเพิ่มรายละเอียด
27. เว็บไทย/ภาษาไทย มีข้อจํากัดอย่างไร?
28. แบบอักษรไม่มีหัว แบบอักษรมีหัว SERIF / SANS SERIF ประเภทของตัวอักษร ข้อความต้องสามารถอ่านได้ง่าย
29. การตัดคํา หัวข้อมักมีขนาดยาว คอลัมน์ควรกว้างพอสมควร
30. สระ วรรณยุกต์ ต้องมี line-height อย่างน้อย 1.5-1.6
31. รก? การออกแบบเหมือนการปรุงอาหาร คนไทยชอบเครื่องปรุงเยอะๆ
32. สื่อสารทางเดียว? เว็บไทยมักชินกับการพูดฝ่ายเดียว ควรปรับปรุง
33. ผู้ใช้ 2 ประเภท รู้ว่าตนเองต้องการอะไร: ไม่รู้ว่าตนเองต้องการอะไร: ก่อให้เกิด UI 2 แบบ Search / เข้า Google Browse / เข้า Facebook
34. 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 ฯลฯ
35. UX/UI สําหรับเว็บไทย เม่น @MennStudio • @SeedThems
ที่มา https://www.slideshare.net/MennStudio/ux-ui-63975380