Page 1
เมน@MennStudio • @SeedThemes
UX/UIสาหรบเวบไทย
Page 2
ทาเวบ 12 ปครอาสาฯ ไอทวลเลยแมฮองสอน
เมน
2
Page 3
SeedThemes.com WordPress Theme Marketplace Flipped Classroom
MUSE FoundationCo-living Space
เมนPai • Maehongson • Thailand
Page 5
การออกแบบ
การแกปญหา
คอ
Page 6
การแกปญหา
คอ
การออกแบบ ทด
Page 7
การออกแบบ
การแกปญหา
คอ
ทด
ทยาก
Page 8
การออกแบบ
คอ
ทดและแพง
การแกปญหา ทยาก
Page 9
การออกแบบ
การแกปญหา
คอ
ทด
ทยาก
และแพง
ใหกบคนจานวนมาก
Page 11
UX / UIสวย
USER INTERFACE
Page 12
UX / UIสวย
USER INTERFACEUSER EXPERIENCE
เวรค
Page 15
UI / สวย
UX / เวรค“รวาอยากไดอะไร อยางไร ยงใชยงชอบ”
“ประทบใจในแรกพบ”
Page 16
ดไซน
สถต
UI / สวย
UX / เวรค“รวาอยากไดอะไร อยางไร ยงใชยงชอบ”
“ประทบใจในแรกพบ”
Page 18
UI
UX
ผลลพธ
กระบวนการ
Page 20
Skeuomorphic vs Flat
จาลองจากของจรงทจบตองได (มขอจำกดในการโตตอบ เชน กดไดอยางเดยว)
สรางจกรวาลใหม (โตตอบไดหลากหลายเชน กดแช/ปาดซายขวา)
Page 21
Almost Flat
Material
Apple / iOS (ไมมชอเรยกเปนทางการ)
Google / Android (มชอเรยกเปนทางการ)
Page 23
Data / Information กเหมอนถอยคำของหญงสาว แมจะพดวาตองการอะไร แต Insight จรงๆ อาจจะไมใชกได
Page 25
ทมา: http://impatientdesigner.com/what-exactly-is-ux-design
Page 26
WIREFRAME / พมพเขยว ชวยในการสรปประเดนของการออกแบบ
ทมา: http://marketingyourwebshop.webnode.nl/what-are-wireframes/
Page 27
ทมา: https://dribbble.com/shots/861429-Wireflow
Page 28
ตวอยาง Wireframe แบบเพมรายละเอยด
Page 29
เวบไทย/ภาษาไทย มขอจากดอยางไร?
Page 30
แบบอกษรไมมหวแบบอกษรมหว
SERIF / SANS SERIF
ประเภทของตวอกษร
ขอความตองสามารถอานไดงาย
Page 31
การตดคาหวขอมกมขนาดยาว
คอลมนควรกวางพอสมควร
Page 32
สระ วรรณยกตตองม line-height อยางนอย 1.5-1.6
Page 33
รก?การออกแบบเหมอนการปรงอาหาร คนไทยชอบเครองปรงเยอะๆ
Page 34
สอสารทางเดยว?เวบไทยมกชนกบการพดฝายเดยว ควรปรบปรง
Page 35
ผใช 2 ประเภท
รวาตนเองตองการอะไร: ไมรวาตนเองตองการอะไร:
กอใหเกด UI 2 แบบ
Search / เขา Google Browse / เขา Facebook
Page 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 ฯลฯ
Page 37
UX/UIสาหรบเวบไทย
เมน@MennStudio • @SeedThemes