หน้าเว็บ

Lecture

LECTURE

1.รูปแบบการออกแบบเว็บไซต์

เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไม่มากนัก ซึ่งการออกแบบหน้าตาเว็บไซต์ส่วนใหญ่จะมองดูองค์ประกอบขององค์กร หน่วยงาน หรือเนื้อหาเรื่องที่นำเสนอเป็นหลัก ซึ่งการออกแบบหน้าตของเว็บไซต์มีอยู่ 3 แบบ คือ
1.1 การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหา
เป็นการออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบหน้าตารูปแบบง่าย  เช่น มีเมนูสารบัญ และเนื้อหา

1.2 การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก
เป็นการออกแบบเว็บไซต์ที่เน้นภาพกราฟิกที่สวยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop สำหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้เวลาในการโหลดเว็บนาน

1.3การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา
เป็นการออกแบบเว็บที่นิยมในปัจจุบันซึ่งประกอบด้วยข้อความ รูปภาพ โดยมีการจัดองค์ประกอบต่าง ๆ เพื่อให้เว็บน่าสนใจ




2.ส่วนประกอบของหน้าเว็บ 

หน้าเว็บออกเป็นส่วนประกอบหลัก 3 ส่วน 1.ส่วนหัว (Page Header) 2.ส่วนเนื้อหา (Page Body)
3.ส่วนท้าย (Page Footer) แบ่งเพ ือการออกแบบรายละเอียดในแต่ละส่วนได้อย่าง เหมาะสมทาํให้สามารถจดัวางกราฟิกและตัวอักษรสําคัญ ลงในแต่ละบริเวณอย่างมีเหตุผลและเป็นประโยชน์



3.Hamburger Menu

หลาย ๆ คนที่ไม่ได้อยู่ในวงการเว็บดีไซน์มักไม่ค่อยเชื่อ ตอนผมบอกว่าเมนูที่เป็นขีด ๆ 3 อันมันเรียกว่า Hamburger Menu ซึ่งก็ขอยืนยันว่าเค้าเรียกแบบนั้นจริง ๆ ครับ ไม่เชื่อลอง Google ดูได้

ที่มาที่ไปของ Hamburger Menu โดย Demacmedia.com ที่มาที่ไปของชื่อ Hamburger Menu โดย Demacmedia.com
ต้นเหตุของการทำเมนูเป็นขีดสามขีดในเว็บดีไซน์ มาจากปัญหาว่า ในหน้าจอเล็ก ๆ พวก Smartphone พื้นที่การแสดงเมนูไม่พอ จึงต้องเปลี่ยนเมนูเป็นปุ่มสำหรับกดแล้วเปิดเมนูขึ้นมาแทน ซึ่งเค้าก็ใช้ขีดสามขีดแทนปุ่มเปิดเมนูกันทั่วโลก จนกลายเป็นหน้าตาบังคับของเมนู Responsive ทั่วโลกแล้ว

ตัวอย่างของ Hamburger Menu บนเว็บไซตื Designil ตัวอย่างของ Hamburger Menu บนเว็บไซต์ Designil.com

แน่นอนว่าเว็บไซต์ในมือถือที่เราเปิดกัน 90% ใช้ Pattern การทำเมนูแบบแฮมเบอร์เกอร์ และผมเชื่อว่าดีไซเนอร์หลาย ๆ ท่านที่เข้ามาอ่านบทความนี้อาจจะเคยใช้ในงานดีไซน์ของตัวเองด้วยครับ มันกลายเป็นหนึ่งในเทรนด์ที่ฮิตที่สุด และเป็นเทรนด์ที่ทำร้าย UX เว็บไซต์มากที่สุดด้วยครับ








ไม่มีความคิดเห็น:

แสดงความคิดเห็น