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