SlideShare uma empresa Scribd logo
1 de 37
Baixar para ler offline
เม่น
@MennStudio • @SeedThemes
UX/UI
สําหรับเว็บไทย
ทําเว็บ 12 ปี
ครูอาสาฯ
ไอทีวัลเลย์แม่ฮ่องสอน
เม่น
2
SeedThemes.com 

WordPress Theme Marketplace 

Flipped Classroom
MUSE Foundation

Co-living Space
เม่น
Pai • Maehongson • Thailand
การออกแบบ
การออกแบบ
การแก้ปัญหา
คือ
การแก้ปัญหา
คือ
การออกแบบ ที่ดี
การออกแบบ
การแก้ปัญหา
คือ
ที่ดี
ที่ยาก
การออกแบบ
คือ
ที่ดี
และแพง
การแก้ปัญหา ที่ยาก
การออกแบบ
การแก้ปัญหา
คือ
ที่ดี
ที่ยาก
และแพง
ให้กับคนจํานวนมาก
UX / UI
UX / UI
สวย
USER INTERFACE
UX / UI
สวย
USER INTERFACEUSER EXPERIENCE
เวิร์ค
สวย แต่ ไม่เวิร์ค
ไม่สวย แต่ เวิร์ค
UI / สวย
UX / เวิร์ค
“รู้ว่าอยากได้อะไร อย่างไร ยิ่งใช้ยิ่งชอบ”
“ประทับใจในแรกพบ”
ดีไซน์
สถิติ
UI / สวย
UX / เวิร์ค
“รู้ว่าอยากได้อะไร อย่างไร ยิ่งใช้ยิ่งชอบ”
“ประทับใจในแรกพบ”
UX / UI สำหรับเว็บไทย
UI
UX
ผลลัพธ์
กระบวนการ
UI DESIGN
Skeuomorphic vs Flat
จําลองจากของจริงที่จับต้องได้
(มีข้อจำกัดในการโต้ตอบ
เช่น กดได้อย่างเดียว)
สร้างจักรวาลใหม่
(โต้ตอบได้หลากหลายเช่น กดแช่/ปาดซ้ายขวา)
Almost Flat
Material
Apple / iOS
(ไม่มีชื่อเรียกเป็นทางการ)
Google / Android
(มีชื่อเรียกเป็นทางการ)
UX DESIGN
Data / Information ก็เหมือนถ้อยคำของหญิงสาว แม้จะพูดว่าต้องการอะไร แต่ Insight จริงๆ อาจจะไม่ใช่ก็ได้
UX / UI สำหรับเว็บไทย
ที่มา: 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

Mais conteúdo relacionado

Mais procurados

พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)Dr.Kridsanapong Lertbumroongchai
 
การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)Dr.Kridsanapong Lertbumroongchai
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)
การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)
การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)Dr.Kridsanapong Lertbumroongchai
 
ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...
ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...
ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...Dr.Kridsanapong Lertbumroongchai
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
 
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)Dr.Kridsanapong Lertbumroongchai
 
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)Dr.Kridsanapong Lertbumroongchai
 
อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)Dr.Kridsanapong Lertbumroongchai
 
การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)Dr.Kridsanapong Lertbumroongchai
 
หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)
หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)
หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)Dr.Kridsanapong Lertbumroongchai
 
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)Dr.Kridsanapong Lertbumroongchai
 
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขายการเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขายDr.Kridsanapong Lertbumroongchai
 
Digital Disruption กับการเปลี่ยนแปลงยุค Next Normal
Digital Disruption  กับการเปลี่ยนแปลงยุค Next NormalDigital Disruption  กับการเปลี่ยนแปลงยุค Next Normal
Digital Disruption กับการเปลี่ยนแปลงยุค Next NormalDr.Kridsanapong Lertbumroongchai
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Anna Dahlström
 
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซการออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซCC Nakhon Pathom Rajabhat University
 

Mais procurados (20)

พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)การจัดวางตัวอักษร (Typography)
การจัดวางตัวอักษร (Typography)
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)
การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)
การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Using Computer Interaction Systems)
 
ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...
ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...
ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ (Interaction System in Software Deve...
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
การปฏิสัมพันธ์และโมเดลปฏิสัมพันธ์ (Interaction and Interactive Model)
 
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction)
 
อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)อัตลักษณ์องค์กร (Corporate Identity: C.I.)
อัตลักษณ์องค์กร (Corporate Identity: C.I.)
 
การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
การออกแบบกราฟิกส่วนประสานงานกับผู้ใช้ (Graphical User Interface)
 
Gifographic
GifographicGifographic
Gifographic
 
หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)
หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)
หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Basic Principle of Interacion)
 
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
 
Professional Experience Portfolio Resume Email
Professional Experience Portfolio Resume EmailProfessional Experience Portfolio Resume Email
Professional Experience Portfolio Resume Email
 
What is UX?
What is UX?What is UX?
What is UX?
 
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขายการเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
การเพิ่มโอกาสทางธุรกิจโดยการสร้างเครือข่ายและช่องทางการขาย
 
Digital Disruption กับการเปลี่ยนแปลงยุค Next Normal
Digital Disruption  กับการเปลี่ยนแปลงยุค Next NormalDigital Disruption  กับการเปลี่ยนแปลงยุค Next Normal
Digital Disruption กับการเปลี่ยนแปลงยุค Next Normal
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
 
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซการออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
การออกแบบระบบและการออกแบบยูสเซอร์อินเตอร์เฟซ
 

Semelhante a UX / UI สำหรับเว็บไทย

Presentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอมPresentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอมluckana9
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointsuwanna5
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointnuting
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointsommabat
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointchaimoung
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointphuttarak
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointplernlypim
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointrawikan
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointae2201
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointcar_net
 
Creating Thai WordPress Themes in 2017
Creating Thai WordPress Themes in 2017Creating Thai WordPress Themes in 2017
Creating Thai WordPress Themes in 2017SeedThemes
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointkulyawee
 
แผนFlashหน่วย1
แผนFlashหน่วย1แผนFlashหน่วย1
แผนFlashหน่วย1Junya Punngam
 
ความหมายและความสำคัญของโครงงานคอมพิวเตอร์
ความหมายและความสำคัญของโครงงานคอมพิวเตอร์ความหมายและความสำคัญของโครงงานคอมพิวเตอร์
ความหมายและความสำคัญของโครงงานคอมพิวเตอร์Chatchaphun Sent Work
 

Semelhante a UX / UI สำหรับเว็บไทย (19)

Presentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอมPresentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอม
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Creating Thai WordPress Themes in 2017
Creating Thai WordPress Themes in 2017Creating Thai WordPress Themes in 2017
Creating Thai WordPress Themes in 2017
 
User experience design
User experience designUser experience design
User experience design
 
User experience design
User experience designUser experience design
User experience design
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Pr by nitiya
Pr by nitiyaPr by nitiya
Pr by nitiya
 
แผนFlashหน่วย1
แผนFlashหน่วย1แผนFlashหน่วย1
แผนFlashหน่วย1
 
ความหมายและความสำคัญของโครงงานคอมพิวเตอร์
ความหมายและความสำคัญของโครงงานคอมพิวเตอร์ความหมายและความสำคัญของโครงงานคอมพิวเตอร์
ความหมายและความสำคัญของโครงงานคอมพิวเตอร์
 
Prodesktop
ProdesktopProdesktop
Prodesktop
 

UX / UI สำหรับเว็บไทย