คิดจะทำเว็บให้สวย ต้องเรียนรู้หลักเกณฑ์กันบ้าง
การได้มีโอกาสเป็นคณะทำงานจัดทำเว็บของสำนักงาน ก.ก. ทำให้ผมมีความจำเป็นเป็นอย่างยิ่งในการหาความรู้มาเพิ่มพูนให้กับตัวเอง โดยเฉพาะอย่างยิ่งความรู้เกี่ยวกับการออกแบบและจัดทำเว็บและกราฟฟิคต่าง ๆ (แม้จะมีอยู่บ้างแต่ก็น้อยนิดเหลือเกิน)
ผมซื้อหนังสือมาเล่มหนึ่ง เป็นหนังสือออกแบบสร้างเว็บสวยด้วยตนเอง กับ SHOP+DREAM CS3 ซึ่งเป็นฉบับที่ปรับปรุงใหม่ แล้วก็ได้ความรู้ในส่วนของกฎพื้นฐานของการออกแบบเว็บสวย อยากนำมาบอกเล่าและแบ่งปัน กันครับ...
กฎพื้นฐานของการออกแบบเว็บ
ในกฎพื้นฐานนี้จะกล่าวถึงเรื่อง สีหรือโทนสีของเว็บ การเลือกใช้ตัวอักษร การจัดวางตำแหน่งของข้อความ และการจัดวาง Layout ที่เหมาะสม...
เริ่มต้นด้วยเรื่องของ สี
การใช้สีสันที่สวยงามและเหมาะสมกับเนื้อหาของเว็บเป็นเรื่องสำคัญ และสียังช่วยเพิ่มน้ำหนักให้กับเนื้อหาของเว็บให้น่าเชื่อถือยิ่งขึ้น แต่ละสีมีความหมายดังนี้
- สีแดง : เป็นตัวแทนของเลือด ให้ความรู้สึกถึงพลัง ตื่นเต้น เร่าร้อน เซ็กซี่ และให้ความรู้สึกด้านลบ เช่น ความก้าวร้าว รุนแรง สามารถควบคุมโดยการนำโทนสีอื่นมาผสมให้ดูเบาลงได้
- สีส้ม : เป็นตัวแทนของความเป็นมิตร ควบอบอุ่นของจิตใจ และเปลวไฟ
- สีเหลือง : เป็นสีของแสงอาทิตย์ ความหวัง ความสดใจ ความทันสมัย และดึงดูดสายตา แต่ไม่เหมาะกับการออกแบบโดยการใช้สีนี้เพียงสีเดียว
- สีเขียว : เป็นสีธรรมชาติ เช่น ต้นไม้ ป่าเขา ชีวิต ความสงบนิ่ง หรือการพักผ่อน ความรู้สึกตรงข้าม หมายถึง การเน่าเปื่อย ย่อยสลาย หรือสารพิษ (เช่นสีเขียวอมเทา)
- สีน้ำเงิน : แสดงถึงความเยือกเย็น จิตวิญญาณ ความหรูหรา ความรู้สึกด้านลบ เช่น ความเศร้าสร้อย สิ้นหวัง ความหดหู่ ความเฉื่อยชา (สีน้ำเงินเทา/สีฟ้าเทา)
- สีม่วง : แสดงถึงจินตนาการ ความสนุกสนาน ความตื่นตัว และความฝัน ความรู้สึกด้านลบ เช่น ความบ้าคลั่ง หรือฝันร้าย
- สีเทา : เป็นสีให้ความรู้สึกสุภาพ สุขุม สงบ มั่นคง ทางตรงข้ามให้ความรู้สึกแบบทึม ๆ โศกเศร้า หม่นหมอง
- สีขาว : ให้ความรู้สึกเรียบง่าย สะอาด โล่งสบาย บริสุทธ (ทำให้เว็บอ่านง่าย สบายตา)
ถัดมาเรื่องของตัวอักษร (Typography)
- ไม่ควรใช้ฟอนต์หลากหลายรูปแบบเกินไป เพราะจะทำให้เว็บขาดความเป็นเอกภาพหรือความเป็นหนึ่งเดียว ปกติจะใช้ฟอนต์ที่มีรูปแบบต่างกันเพื่อแยกระหว่างหัวข้อและส่วนที่เป็นข้อความเท่านั้น
- เลือกฟอนต์ที่อ่านง่ายที่สุด ฟอนต์แปลก ๆ ใช้สร้างข้อความสั้น ๆ ก็พอ
สำหรับรูปแบบของฟอนต์ มีลักษณะต่าง ๆ ดังนี้
- ฟอนต์แบบ Serif หรือฟอนต์แบบมีเชิง (ภาษาอังกฤษ) เป็นรูปแบบที่ให้ความรู้สึกแบบคลาสสิค ดูเก่าแก่ และค่อนข้างเป็นทางการ และฟอนต์ลักษณะนี้สามารถอ่านได้ง่ายที่สุด เพราะมีทฤษฎีอ้างอิงบอกว่า เชิงของตัวอักษรที่ยื่นออกมาทำให้สายตาของเราสามารถอ่านตัวอักษรได้ต่อเนื่องแบบตัวต่อตัวเลยทีเดียว
- ฟอนต์แบบ Sans-serif หรือฟอนต์แบบไม่มีเชิง (ภาษาอังกฤษ) ให้ความรู้สึกเรียบง่ายและความทันสมัย ซึ่งฟอนต์ลักษณะนี้ก็อ่านได้ง่ายเช่นกัน แต่จะเหมาะกับที่เป็นข้อความสั้น ๆ มากกว่า
- ฟอนต์แบบมีหัวที่มีอยู่ในภาษาไทย เป็นรูปแบบฟอนต์ที่เหมาะสมกับข้อความยาว ๆ เช่นเดียวกับฟอนต์แบบ Serif เพราะอ่านได้ง่าย
- ฟอนต์แบบไม่มีหัว เป็นรูปแบบฟอนต์ที่ดูทันสมัยและเรียบง่าย แต่ถ้าต้องนำไปใช้กับข้อความยาว ๆ จะทำให้ดูลำบาก เพราะตัวอักษรแต่ละตัวจะดูห่างกันเกินไป และด้วยความที่ตัวอักษรไม่มีหัวนี่เอง จึงทำให้เกิดความสับสนระหว่างตัวอักษรบางตัว จึงเหมาะสมกับข้อความสั้น ๆ มากกว่า
การจัดข้อความ ปกติดวงตาของเราจะมองตัวอักษรจากทางซ้ายแล้วไล่ไปทางขวาจนจบบรรทัด แล้วกลับมาเริ่มต้นที่ด้านซ้ายอีกครั้ง ถ้าเราจัดตัวอักษรไว้ตรงกลาง จะทำให้เมื่ออ่านข้อความจบบรรทัดดวงตาจะกวาดหาข้อความบรรทัดใหม่ได้ยากขึ้นเป็น 2 เท่า เพราะฉะนั้น ควรจัดข้อความแบบปกติชิดซ้าย จะดีกว่าการจัดข้อความไว้กลางหน้า
การควบคุม Theme การออกแบบเว็บที่ดีจะต้องควบคุม Theme ให้ได้ ทั้งโทนสี ตัวอักษร รูปภาพ และ Layout ของทุกหน้าให้ใกล้เคียงกัน เพื่อให้เว็บมีความเป็นเอกภาพ ส่วนใหญ่จะใช้รูปแบบหัวเดิมและจัดวาง Layout ที่คล้ายกัน หรือสีของลิงค์ที่เหมือนกันทุก ๆ หน้า
การคำนึงถึงการใช้งานได้ง่ายและเป็นธรรมชาติ มีการคำนึงถึงระบบ Navigation หรือการเชื่อมโยงของเว็บเพจแต่ละหน้าให้ดี คือ เมื่อคลิกเข้าไปที่หน้าใดก็ตาม จะต้องกลับมาที่หน้าแรกได้ในคลิกเดียวเท่านั้น และต้องระลึกอยู่เสมอว่าห้ามให้ผู้ใช้คลิกปุ่ม Back บนเบราเซอร์เพื่อกลับมาที่หน้าแรกหรือหัวข้อหลักเด็ดขาด เพราะนั่นเป็นสิ่งที่ผู้ใช้เว็บรับไม่ได้ เพราะซับซ้อนยุ่งยากเกินไป
การทำให้เว็บโหลดเร็ว อย่างทำให้เกิดอาการคลิกแล้วรอนาน การตกแต่งหน้าเว็บเพจต้องหลีกเลี่ยงการใช้ภาพกราฟฟิคที่มีขนาดใหญ่ หรือการใช้ภาพเคลื่อนไหว ใช้เพลง เอฟเฟคต่าง ๆ ที่ต้องใช้เวลาในการโหลดนาน เพราะจะทำให้ผู้เข้ามาดูเกิดอาการเบื่อหน่ายและปิดหน้าเว็บไปก่อนที่จะได้ดู
ข้อมูลที่เหลือ เอาไว้มาให้อ่านตอนต่อไปนะครับ
สำหรับข้อมูลที่นำมาเสนอ ได้มาจากหนังสือ ออกแบบสร้างเว็บสวยด้วยตนเอง ของ สนพ. Digi Art ครับ
ความเห็น (4)
- มาเรียนรู้ข้อมูลดี ๆ น่าสนใจ
- ขอบพระคุณค่ะ
รออ่านตอนต่อไปค่ะ
รออ่านตอนต่อไปค่ะ
ขอบคุณครับ คุณ
และพี่ 