ในภาพรวมนี้ คุณจะได้เห็นแต่ละเทรนด์และตัวอย่างที่สวยงามที่จะสร้างแรงบันดาลใจให้กับโปรเจ็กต์ต่อไปของคุณ
1. รูปแบบที่ไม่ธรรมดา
รูปที่ 1
2. เค้าโครงหน้าเดียว
รูปที่ 2
3. เค้าโครงหลายคอลัมน์
รูปที่ 3
4. ภาพประกอบขนาดยักษ์และกราฟิกที่มีชีวิตชีวา
รูปที่ 4
5. พื้นที่สีขาวมากขึ้นกว่าเดิม
รูปที่ 5
6. องค์ประกอบการออกแบบทางสังคม
รูปที่ 6
7. การนำทางด้วยการสนทนา
รูปที่ 7
8. แท็บไดนามิก
รูปที่ 8
9. ช่องค้นหาขนาดใหญ่
รูปที่ 9
10. เพิ่มเอฟเฟ็กต์ภาพในการจำแนกประเภท
รูปที่ 10
11. อวตารของผู้แต่ง
รูปที่ 11
12. ไอคอนและสัญลักษณ์ภาพ
รูปที่ 12
13. ดัชนีแท็ก (แทนที่แท็กคลาวด์)
รูปที่ 13
14. ใช้ภาพประกอบในบล็อก
รูปที่ 14
15. การวาดภาพสีน้ำ
รูปที่ 15
16. การเขียนด้วยลายมือ
รูปที่ 16
17. ย้อนยุค
รูปที่ 17
18. ใช้วัสดุอินทรีย์ อิฐ และภาพถ่ายเป็นพื้นหลัง
รูปภาพ 18
19. ทำเครื่องหมายซีล
รูปที่ 19
20. ป้ายราคา
รูปที่ 20
21. ริบบิ้น
รูปที่ 21
เลย์เอาต์ที่ไม่ธรรมดา
ดังที่แสดงใน 40 เลย์เอาต์การออกแบบที่เป็นนวัตกรรมใหม่: เลย์เอาต์ที่ไม่ธรรมดาเมื่อไม่กี่เดือนก่อน เรากำลังสังเกตเห็นแนวโน้มที่แข็งแกร่งต่อเลย์เอาต์ที่เป็นส่วนตัวและเป็นนวัตกรรมมากขึ้น แทนที่จะใช้เลย์เอาต์ที่เหมือนกล่องแบบกล่องแบบดั้งเดิม นักออกแบบกำลังทดลองใช้วิธีใหม่ๆ ในการจัดโครงสร้าง การนำเสนอ และการแสดงข้อมูล
ในการออกแบบเลย์เอาต์ที่ไม่ธรรมดาเหล่านี้ ความคิดสร้างสรรค์โดยรวมมักมีความสำคัญและน่าจดจำมากกว่าเนื้อหาเฉพาะ ถึงกระนั้น การใช้งาน การพิมพ์ และการออกแบบภาพก็ไม่ค่อยถูกมองข้ามและดำเนินการด้วยความระมัดระวัง เค้าโครงที่เป็นนวัตกรรมได้รับความนิยมเป็นพิเศษในโครงการขนาดใหญ่ บริษัทออกแบบเว็บไซต์ และเว็บไซต์ส่งเสริมการขาย (เช่น กิจกรรมเชิงพาณิชย์ของบริษัทขนาดใหญ่) แต่ก็ได้รับความนิยมในบล็อกเช่นกัน
รูปที่ 22
เมื่อพูดถึงความคิดสร้างสรรค์ เส้นแบ่งระหว่างการออกแบบที่ใช้งานได้และไม่สามารถใช้งานได้นั้นไม่ชัดเจน ดังนั้นการทดสอบการใช้งานจึงมีความสำคัญอย่างยิ่ง เนื่องจากแนวคิดใหม่สามารถทำลายสิ่งที่มีอยู่บนเว็บไซต์ได้ บ่อยครั้งเป็นความคิดที่ดีที่จะมีความสมดุลระหว่างการออกแบบที่สร้างสรรค์ คลาสสิก และแบบดั้งเดิม ซึ่งหมายถึงการพยายามหาสมดุลระหว่างการออกแบบที่ใช้งานได้ "ที่ไม่มีวันทำลายได้" (หรือแม้แต่น่าเบื่อในที่สุด) กับการออกแบบที่สร้างสรรค์แต่ใช้ไม่ได้ โปรดจำไว้ว่า แนวคิดต้องใช้เวลาในการเติบโต: คิดใหม่ แก้ไข ปรับแต่ง ปรับปรุง และบูรณาการเข้ากับการออกแบบของคุณในที่สุด
นักออกแบบได้รับการสนับสนุนอย่างยิ่งให้แยกตัวออกจากแบบแผนของเค้าโครงกล่องแบบเดิมๆ และลองแนวทางใหม่ๆ และแนวคิดที่กล้าหาญและบ้าบิ่นของคุณเอง แสดงความสามารถของคุณ!
รูปที่ 23
รูปที่ 24
รูปที่ 25
รูปที่ 26
รูปที่ 27
รูปที่ 28
เค้าโครงหน้าเดียว
อีกวิธีหนึ่งที่นักออกแบบมักใช้เพื่อสร้างความประทับใจแก่ผู้เยี่ยมชมคือสิ่งที่เรียกว่าเค้าโครงหน้าเดียว: เค้าโครงนี้ใช้หน้าเดียวในการนำเสนอเนื้อหาของเว็บไซต์ ไม่ได้หมายความว่าการออกแบบเหล่านี้มีความเรียบง่ายเสมอไป (ตามหลักการ "น้อยแต่มาก") ในทางกลับกัน การออกแบบประเภทนี้มักจะซับซ้อนมาก มีรูปภาพที่สมบูรณ์และเอฟเฟกต์ภาพเคลื่อนไหวที่สดใส ดังนั้นจึงใช้เวลาโหลดสักครู่
รูปที่ 32
เมื่อผู้ใช้คลิกตัวเลือกการนำทาง หน้าจะเปลี่ยนไป (เปลี่ยนแปลงบางส่วน) และเนื้อหาใหม่ของ http://www.knowsky.com จะปรากฏในบริเวณที่แสดงเนื้อหาก่อนหน้า เอฟเฟกต์การเลื่อนการนำทางและการเลื่อนในเลย์เอาต์นี้ได้รับการสนับสนุนโดยไลบรารี JavaScript สาธารณะ
ข้อได้เปรียบหลักสำหรับผู้ใช้มาจากข้อเท็จจริงง่ายๆ ที่ว่าการขยับเมาส์และการคลิกน้อยลงเป็นสิ่งจำเป็นเพื่อให้ได้ข้อมูลที่ต้องการ เนื่องจากแนวทางนี้เป็นแนวทางใหม่ จึงเป็นโอกาสที่ดีสำหรับผู้ใช้ที่อาจสับสนในการใช้การนำทางแบบเดิมๆ มีบางสถานการณ์ที่เวอร์ชัน "คงที่" อาจมีประโยชน์หรือจำเป็น ตัวอย่างเช่น คุณจะต้องจัดเตรียมเวอร์ชันอื่นสำหรับเครื่องมือค้นหาและผู้ใช้ที่ปิดใช้งาน JavaScript
รูปที่ 33
รูปที่ 34
รูปที่ 35
เค้าโครงแบบหลายคอลัมน์
หลายคอลัมน์ (มากกว่า 3 คอลัมน์) ไม่จำเป็นต้องหมายถึงการออกแบบที่ซับซ้อน ในทางกลับกัน หากออกแบบอย่างถูกต้อง คอลัมน์หลายคอลัมน์จะมีประโยชน์มากสำหรับผู้เยี่ยมชม เนื่องจากคอลัมน์เหล่านี้ให้ภาพรวมที่ดีขึ้นของตัวเลือกการนำทางที่มองเห็นได้ ทำให้ผู้ใช้สามารถค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว
ในช่วงไม่กี่ปีที่ผ่านมา เราได้เห็นเนื้อหาเว็บไซต์เพิ่มมากขึ้น ซึ่งทำให้ความสนใจและเวลาที่ผู้ใช้ลงทุนในเว็บไซต์ลดลง (ดูรายละเอียดใน ReadWriteWeb) ดังนั้นจึงไม่น่าแปลกใจที่นักออกแบบพยายามค้นหาวิธีที่กระชับมากขึ้นในการนำเสนอข้อมูล เพื่อให้ผู้เยี่ยมชมสามารถอยู่บนเว็บไซต์ได้นานที่สุดและค้นหาเนื้อหาได้ง่ายขึ้น
รูปที่ 36
วิธีหนึ่งในการบรรลุเป้าหมายนี้คือการใช้เค้าโครงที่มีคอลัมน์ที่อยู่ติดกันหลายคอลัมน์ ความคิดนี้สมเหตุสมผลดี ความละเอียดของหน้าจอเพิ่มขึ้นในช่วงไม่กี่ปีที่ผ่านมา (อย่างไรก็ตาม สิ่งนี้อาจเปลี่ยนแปลงได้หากเน็ตบุ๊กเช่น Asus Eee PC มีจำหน่ายอย่างแพร่หลาย) ทำให้ผู้ใช้มีพื้นที่ในแนวนอนมากขึ้น และทำให้นักออกแบบมีพื้นที่เพิ่มเติมในการกรอกเนื้อหา
ผลการวิจัยพบว่านักออกแบบจำนวนมากขึ้นเรื่อยๆ ใช้คอลัมน์ในการออกแบบของตนมากขึ้นเรื่อยๆ การวิจัยของเราพบแนวโน้มที่ชัดเจนต่อสิ่งที่เรียกว่าเค้าโครงหลายคอลัมน์ ซึ่งโดยทั่วไปจะมีความกว้างคงที่ 850 พิกเซลบนหน้าจอ 1,000 พิกเซล มักใช้หลายคอลัมน์ในเค้าโครงนิตยสารและโครงการขนาดใหญ่ ในโครงร่างเหล่านี้ กริดมักใช้เพื่อให้แน่ใจว่าโครงสร้างสมดุล ลำดับชั้น และลำดับ
เมื่อใช้เค้าโครงแบบหลายคอลัมน์ ความสำคัญของช่องว่างที่ใช้งานอยู่และระหว่างแต่ละคอลัมน์ไม่สามารถกล่าวเกินจริงได้ (พื้นที่สีขาวที่ใช้งานอยู่จงใจเว้นว่างไว้เพื่อแสดงโครงสร้างของหน้าได้ดีขึ้น และเน้นส่วนต่างๆ ของเนื้อหา)
ด้วยเหตุนี้ นักออกแบบจึงมักใช้หลัก "Shneiderman" ("แสดงภาพใหญ่ก่อน แสดงรายละเอียดในภายหลัง") โดยให้ภาพรวมของฟังก์ชันการทำงานแก่ผู้ใช้ จากนั้นให้รายละเอียดตามความต้องการ - ในภายหลังเมื่อมีการคลิกลิงก์ (Mozilla Labs เป็นตัวอย่างที่สำคัญ)
รูปที่ 37
รูปที่ 38
รูปที่ 39
รูปที่ 29
รูปที่ 30
รูปที่ 31