เมื่อวานได้รับเชิญไปพูดงาน จิบกาแฟคนทำเว็บ ในหัวข้อ Web Design Trend 2014
ในแง่แนวโน้มการออกแบบ ขอสรุปสั้นๆ ดังนี้
ปัจจัยในปัจจุบัน:
- อินเทอร์เน็ตเร็ว
- คนใช้มือถือเข้าเว็บอย่างแพร่หลาย
- คนสมาธิสั้น ยาวไปไม่อ่าน
- คอมพิวเตอร์แพร่หลาย คนคุ้นเคยกับการใช้คอมพอควร
ผลลัพธ์:
ทำให้การทำเว็บในปัจจุบัน สามารถใส่เนื้อหาได้หลากหลาย ทั้งข้อความ / รูปภาพ / วิดีโอ แต่ว่าต้องสั้น กระชับ เข้าใจง่าย แบ่งเนื้อหาเป็นส่วนๆ (section) โดยแต่ละส่วนมีประเด็นชัดเจน เหมือน Presentation / Keynote 1 หน้า เพราะคนมีสมาธิสั้น
สั้นชนาดที่ The Next Web กล่าวว่า ถ้าไม่ใช่บล็อก การนำเสนอส่วนใหญ่มักจะไม่เกิน 250 ตัวอักษร
ส่วนในแง่การออกแบบกราฟฟิค ก็เปลี่ยนจากการที่ต้องจำลอง “ภาพ/ไอคอนจากรูปเสมือนจริง” มาเป็นการใช้ “ภาพ/ไอคอน ที่เรียบง่าย (Flat Design) เพราะคนมีพื้นฐานคอมพิวเตอร์กันพอสมควรแล้ว ไม่จำเป็นต้องจำลองภาพจากของจริงมา (ซึ่งมีข้อจำกัดคือ เรากระทำกับของชิ้นนั้นได้ไม่กี่แบบ เพราะติดกับความเป็นจริง เช่น รูปปุ่ม ต้องกด ไม่สามารถปาดซ้ายขวาได้) ในขณะที่ใช้ icon ลายเส้นที่เรียบง่าย สามารถกระทำได้หลากหลาย (เช่น ปาด, กดแช่, กดแล้วเปลี่ยนรูปเป็นแบบอื่นๆ ได้อิสระ ฯลฯ)
และนอกจากนั้น หลายๆ เว็บ คนเริ่มเข้าด้วยมือถือมากกว่าคอมพิวเตอร์แล้ว นั่นแปลว่า เราต้องเตรียมเว็บให้แสดงผลบนมือถือได้เร็วและอ่านง่ายด้วย ซึ่งแนวทางหลักๆ เรียกว่าการทำเว็บแบบ Responsive ส่วนรายละเอียดมากกว่านั้น คือการใช้เทคนิค Mobile First (เขียน CSS เพื่อให้มือถือประมวลผลน้อย ส่วนคอมพิวเตอร์ประมวลผลมาก แนะนำให้อ่าน บทความเรื่องกริด )
ตัวอย่างเทคนิคต่างๆ ที่นิยมใช้
(รวมๆ ตัวอย่างจาก designmodo, The Next Web, line25.com)
Parallax
- http://wagerfield.github.io/parallax/
- http://samyarn.com/happynewyear/2012/
- http://samyarn.com/happynewyear/2014/
Video Background
Scroll Activated Animations
ตัวอย่างการดีไซน์เป็น Section (จะเห็นว่าเลิกใช้ Sidebar ไปเลย)
Large hero area – รูป หรือวิดีโอ อธิบายสั้นๆ ว่าเว็บนี้ทำอะไร
Flat Design
Large Web Font
One Page
Fixed Header
เพิ่มเติม
มีคนถามว่าทำไมดีไซน์ไทยต้องรก ในขณะที่ดีไซน์ฝรั่งหรือญี่ปุ่นนั้นกลับเรียบง่ายและ minimal
ผมเองชื่นชอบแนวคิดเรื่องอาหารและวัตถุดิบ (ถ้าจำไม่ผิดน่าจะเป็น อ.นิธิ เอียวศรีวงศ์ ที่เขียนประเด็นนี้ไว้) เลยตอบว่า
คาดว่า เพราะรากของแต่ละวัฒนธรรมนั้นต่างกัน เราเป็นประเทศที่เคยชินกับการใช้วัตถุดิบเลว (ผักริมรั้ว, วัวแก่ปลดประจำการ) มาทำอาหาร ทำให้เราเด่นเรื่องการปรุงรส ใส่สารพัดเครื่องปรุง เพื่อกลบรสวัตถุดิบ เช่น ทำต้มยำ, ส้มตำ, น้ำพริก
ในขณะที่ต่างประเทศนั้น ไม่ได้มีอาหารอุดมสมบูรณ์เหมือนเรา ต้องปลูกหรือเลี้ยงเพื่อทำอาหาร ทำให้เค้ามีวัตถุดิบที่ดีกว่า เลยโฟกัสที่รสชาติของวัตถุดิบมากกว่าการปรุง ซึ่งกระทบมาถึงการออกแบบที่เน้นเนื้อหามากกว่าการนำเสนอ (ในขณะที่ของเรานั้นมักกลับกัน)
ประเทศเราจึงมักจะเน้นรก ส่วนหลายประเทศนั้นเน้นเรียบ
บางส่วนในประเด็นนี้ ผมเคยเขียนบล็อกไว้ที่ การออกแบบนั้นเหมือนการปรุงอาหาร
ขอบคุณรูปจากเพื่อนๆ คร้าบ
เพิ่มเติม
จากคุณปอง: Web Publishing ไทยกับความท้าทายในปี 2014
