คู่มือ1
- 2. คู่มือเล่มนี้จัดทําขึ้น เพื่อให้ผู้ที่สนใจ เรื่องการออกแบบเว็บไซต์ได้ศึกษา ซึ่ง
สมาชิกในกลุ่มได้รับมอบหมายจากอาจารย์ปวริศ สารมะโน ให้จัดทําคู่มือเล่มนี้ขึ้นมา
หวังว่าคู่มือเล่มนี้จะเป็นประโยชน์แก่ผู้ที่ต้องการจะศึกษา ถ้าผิดพลาดประการใด
สมาชิกในกลุ่มก็ขออภัยไว้ ณ ที่นี้ด้วย
คณะผู้จัดทํา
ส่วนประกอบของเว็บไซต์ที่ดี 1
ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ 5
เรื่องในฉบับ 2
เรื่องในฉบับ 3
เรื่องในฉบับ 4
เรื่องในฉบับ 5
เรื่องในฉบับ 6
- 3. ส่วนประกอบของเว็บไซต์ที่ดี
ดังรูปที่เห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่
ด้วยกันทั้งหมด 6 ส่วนดังนี้
ตัวอย่างส่วนประกอบของเว็บไซต์
1.Containing block โดยปกติเราจะเขียน <div> หรือ
<table> ต่อจาก <body> เพื่อเอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์
ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะ
มีข้อดีอยู่ตรงที่ สามารถทําให้ปรับเปลี่ยนขนาดในการแสดงผลของ
เนื้อหาได้ หรือตําแหน่งการแสดงผลของเว็บไซต์ได้เช่น จัดกลาง ชิดซ้าย
หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือ
ลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทําได้ยากมาก
ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block
เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง
2.Logo เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทําให้ลูกค้าหรือ
ผู้ใช้งานจดจําเราได้ ด้วยเหตุนี้เองทําให้การออกแบบเว็บไซต์นั้น
จําเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตําแหน่งที่ควรจะวางโล
โก้ไว้คือตําแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่
อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งานจําได้ และสะดุดตา เรื่อง
ที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนําไปสู่หน้าแรกของ
เว็บไซต์เสมอ
- 4. 3.Navigation เป็นส่วนที่จะนําผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของ
เว็บไซต์ โดยสามารถทําให้อยู่ในแนวนอน หรือแนวตั้งก็ได้ หากสังเกต
hellomyweb.com เราจะทําทั้งแนวตั้งและแนวนอน โดยแนวนอนจะ
นําไปสู่เนื้อหาหน้าอื่นของเว็บไซต์ ส่วนแนวตั้งจะนําไปสู่เนื้อหาย่อยใน
หน้านั้น ตําแหน่งที่ควรจะวาง navigation เอาไว้คือสีเขียวทั้งหมด ถ้า
สังเกตดูจะพบว่าการวางตําแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของ
เว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่
ควรวางไว้ในตําแหน่งที่ผู้ใช้จะต้องเลื่อนขึ้นลง ซ้ายขวา
4.Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สําคัญมากที่สุด
หากผู้ใช้งานไม่สามารถเข้าถึงได้โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่
ทันที ตําแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตําแหน่งอื่นๆที่คิดว่าจะ
ทําให้ผู้หาเจอได้โดยไม่ลําบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มี
โฆษณาที่มากจนเกินไป ทําให้ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการ
ออกแบบที่ผิดพลาด
5.Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์
ต่างๆเอาไว้ หรือเป็นเนื้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่า
จําเป็นต้องมีหรือไม่ บอกได้ว่าจําเป็นอย่างยิ่ง footer จะเป็นตัวบอก
ผู้ชมว่าส่วนนี้คือล่างสุดของหน้าที่กําลังแสดงอยู่แล้วนะ ไม่มีเนื้อหา
เพิ่มเติมแล้ว
6.Whitespace พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็น
ความสําคัญของการเว้นพื้นที่ว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือ
ตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทําให้เว็บดูสวยงามขึ้น หรือ
ใช้พื้นที่มีมีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คํานึงว่าต้องมี
พื้นที่ว่างอยู่ในเว็บไซต์ จะทําให้เว็บของเรานั้นดูอึดอัดทันที การเว้น
ช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่าง
ระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทําให้เว็บของเราดูสบายตาขึ้น
แล้ว ยังทําให้เราสามารถกําหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจในจุด
นั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนําภาพหรือ
ตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้นจะเป็นที่สนใจของผู้ใช้ทันที
- 5. ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชม
เว็บไซต์
- ข้อมูลเกี่ยวกับบริษัท องค์กร สถานศึกษา
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คําถามยอดนิยม
- ข้อมูลในการติดต่อ
ข้อควรคํานึงถึงในการออกแบบเว็บไซต์
1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้
งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิด
และสีของตัวอักษรไม่มากจนเกินไปทําให้วุ่นวาย
2. ความสม่ําเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์
เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมี
ความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคํานึงถึง
ลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์
และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ
จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ
4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สําคัญที่สุดในเว็บไซต์
ดังนั้นควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และ
สมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ เนื้อหาไม่
ควรซ้ํากับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชัน ที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่าย
และใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคําอธิบายที่ชัดเจน
- 6. 6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์
กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้อง
สมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้า
กันลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จํากัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มาก
ที่สุดเลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหาสามารถแสดงผลได้
ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา
เป็นลักษณะสําคัฐสําหรับผู้ใช้ที่มีจํานวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหา
อย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือ
ได้
9. ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบ
การทํางานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทําหน้าที่ได้อย่าง
ถูก
1.การกําหนดวัตถุประสงค์ของเว็บไซต์ เว็บไซต์ส่วนใหญ่จะมี
การกําหนดวัตถุประสงค์ชัดเจน ผู้เข้าชมเว็บไซต์ต้องการข้อเท็จจริง เมื่อ
เข้าชมแล้วจะพยายามค้นหาข้อมูลหรือข้อเท็จจริงที่ต้องการ เว็บไซต์ที่มี
วัตถุประสงค์ที่ชัดเจน จะทําให้ผู้เข้าชมยอมรับเว็บไซต์โดยง่าย เช่น
ข้อมูลเพื่อการศึกษาจะให้ข้อมูลด้านการศึกษาอย่างชัดเจน ผู้ที่เข้ามา
เยี่ยมชมส่วนใหญ่จะเป็นนักศึกษาหรือผู้สนในในการศึกษาหลากหลาย
สาขาวิชา เป็นต้น การกําหนดวัตถุประสงค์เว็บไซต์ที่ชัดเจนก่อนการ
สร้างเว็บไซต์ จะทําให้ผู้สร้างเว็บไซต์มั่นใจได้ว่าเว็บไซต์จะประสบ
ผลสําเร็จตรงตามวัตถุประสงค์ของเว็บไซต์
2.การกําหนดกลุ่มเป้าหมาย ผู้ที่จะออกแบบเว็บไซต์จะต้อง
คํานึงถึงผู้ที่จะเข้าชมเว็บไซต์ว่าเป็นกลุ่มเป้าหมายที่สําคัญ ดังนั้นก่อนที่
จะออกแบบเว็บไซต์จะต้องวิเคราะห์กลุ่มเป้าหมายของเว็บไซต์ให้ชัดเจน
ว่าต้องการให้ใครมาเยี่ยมชม โดยดูวัตถุประสงค์ของเว็บไซต์ ว่าเว็บไซต์
นั้นๆมีการถ่ายทอดอะไรกับผู้เยี่ยมชมเว็บไซต์ก็จะทราบว่า
กลุ่มเป้าหมายของเว็บไซต์คือกลุ่มใด
ขั้นตอนการวางแผนเพื่อการออกแบบเว็บไซต์
- 7. 3.การวางแผนด้านเนื้อหา การออกแบบเว็บไซต์จะต้องมีการ
วางแผนให้ชัดเจนตั้งแต่เริ่มต้น เพราะถ้าหากมีการวางแผนด้านเนื้อหาไม่
ดี จะทําให้เว็บไซต์ไม่เป็นระเบียบ ส่งผลให้ผู้เข้าชมเว็บไซต์เกิดความ
สับสน การวางแผนด้านเนื้อหาควรตอบคําถามด้านต่างๆให้ได้ การสร้าง
แผนผังของเนื้อหาจะทําให้เราทราบว่า มีจํานวนเว็บเพจที่เกี่ยวข้อง
ปริมาณเท่านั้น หากเป็นเว็บไซต์ขนาดใหญ่ มีเว็บเพจจํานวนมาก ควรมี
การจัดกลุ่มของเนื้อหาทั้งหมดที่ความสัมพันธ์กันเป็นกลุ่มๆ
ตัวอย่างการสร้างแผนผังของเนื้อหา
4.การวางแผนโครงสร้างของเว็บไซต์ ในที่นี้ขออธิบายตาม
ระบบการจัดการเนื้อหา(Content Management System : CMS) ใน
การสร้างและจัดการเนื้อหาของเว็บไซต์ที่ได้ออกแบบไว้ ประกอบด้วย
การสร้างเนื้อหา(creation) การปรับปรุงเนื้อหา(updating) การ
กระจายเนื้อหา(distribution) การตีพิมพ์เนื้อหา(publishing) การ
ค้นหาเนื้อหา(discovery) CMS เปิดทางให้ผู้ใช้งานสามารถตีพิมพ์ได้
หลายลักษณะ เช่น ข่าว การประกาศ กรณีศึกษา ประวัติบุคคล
บทความ หนังสือพิมพ์ ข้อมูลสินค้า หนังสือรับรอง ลิงค์ที่สําคัญ
แหล่งข้อมูลออนไลน์
5.การวางแผนการผลิตเว็บเพจ ควรเข้าใจหลักการของเว็บไซต์
ก่อนว่า เว็บไซต์เปรียบเสมือนการไหลของข้อมูล ซึ่งจะทําให้ผู้เข้าเยี่ยม
ชมเว็บไซต์ได้รับข้อมูลอย่างเป็นลําดับ ขั้นตอน ถ้าหากผู้สร้างเว็บไซต์ไม่
มีการวางแผน เว็บไซต์ก็จะเริ่มต้นไม่ถูก ไม่รู้ว่าจะเริ่มต้นจากตรงไหนดี
ที่สําคัญที่สุดคือควรออกแบบให้ง่ายที่สุด และรวดเร็วที่สุดสําหรับ
ผู้ใช้งานหรือผู้เข้าเยี่ยมชมเว็บไซต์
- 9. 2.การทํางานจริงในการออกแบบและพัฒนาเว็บเพจ(on- pro-
duction) แบ่งได้เป็น2ส่วน คือ
2.1การออกแบบเว็บเพจ นับเป็นขั้นตอนในการออกแบบ
รูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกทางหน้าเว็บเพจ โดย
โปรแกรมที่นิยมนํามาใช้ในการออกแบบคือ โฟโต้ชอป หรือ ไฟล์เวิร์ก ซึ่ง
จะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่างๆ เช่น ชื่อ
เว็บไซต์ โลโก้ รูปไอคอน ภาพเคลื่อนไหว แบรนเนอร์โฆษณา เป็นต้น
2.2การพัฒนาเว็บเพจ หลังจากออกแบบโครงร่างของเว็บเพจ
และแต่ละหน้าเว็บเพจแล้ว ขั้นตอนต่อไปคือ การดําเนินการสร้างเว็บเพจ
ซึ่งรวมถึงการจัดหาองค์ประกอบที่ต้องนํามาใช้ เช่น สื่อมัลติมีเดีย
ภาพกราฟิก แบบฟอร์มต่างๆ และการสร้างไฟล์รูปภาพ/เสียง ที่เกี่ยวข้อง
กับเนื้อหา ซึ่งต้องคํานึงถึงรูปแบบของไฟล์ที่นํามาใช้และสอดคล้องกับ
ซอฟต์แวร์ที่ใช้ในการพัฒนาด้วย จากนั้นนําภาพและเสียงมาเก็บไว้ในได
เร็กทอรี่หรือโฟลเดอร์ที่กําหนดไว้ แล้วนําข้อมูลทั้งหมดที่รวบรวมไว้จากที่
กล่าวมาข้างต้น มาสร้างเป็นเว็บไซต์ด้วยภาษา HTML หรือเครื่องมือใน
การสร้างเว็บเพจอื่นตามแนวคิดที่ได้ออกแบบไว้แล้ว ซึ่งรวมถึงการเขียน
โปรแกรมสคริปต์ในการใช้งานด้วย
3.การสรุปงานเพื่อส่งมอบ(post- production) ประกอบด้วย
3.1การทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบ
เว็บเพจที่สร้างขึ้นแบบออฟไลน์ โดยยังไม่ได้มีการนําเว็บไซต์เข้าสู่
อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บเบราว์เซอร์
เช่น ใช้โปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ ตรวจสอบตัวอย่างเว็บเพจ
หน้าต่างๆที่สร้างไว้ ว่ามีความเหมาะสมหรือไม่ พร้อมกับทําการแก้ไข
ปรับปรุงจนเป็นที่น่าพอใจ
3.2การเผยแพร่เว็บไซต์ เมื่อทดสอบเว็บไซต์จนสมบูรณ์แล้ว
ขั้นตอนในการเผยแพร่ผ่านเว็บไซต์ คือ การเผยแพร่ให้คนทั่วไปได้รู้จัก
หรือเรียกว่าการนําเว็บไซต์ขึ้นเซิร์ฟเวอร์ หรือการอัพโหลด ซึ่งเป็นการ
ถ่ายโอนเว็บเพจและส่วนประกอบอื่น เช่น ไฟล์ภาพ ไฟล์เพลงประกอบ
เป็นต้น ไปฝากไว้ที่โฮสต์
3.3การบํารุงรักษาเว็บไซต์ เป็นการปรับปรุงเนื้อหา
ภาพประกอบ หรือการปรับปรุงเว็บไซต์ให้เป็นปัจจุบัน ซึ่งถือเป็น
ขั้นตอนที่สําคัญ ผู้เข้าชมเว็บมักใช้เวลาในการค้นหาและเปิดผ่าน
เว็บไซต์ต่างๆอย่างรวดเร็ว หากพบว่าเว็บไซต์ที่ผู้สร้างนําเสนอไม่ได้มี
การปรับปรุงเปลี่ยนแปลงหรือมีข้อมูลใหม่ๆเพิ่มขึ้นเลย ผู้เข้าชมเว็บก็
อาจลดจํานวนลงเรื่อยๆ เรื่อยๆ จนกลายเป็นเว็บที่ไม่มีคนเข้ามาชม
- 10. หลักในการออกแบบโครงสร้างเว็บไซต์
1. กําหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้าง
เว็บไซต์นี้ทําเพื่ออะไร
2. ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้าง
ต้องการสื่อสาร ข้อมูลอะไรที่พวกเขาต้องการโดยขั้นตอนนี้ควรปฏิบัติ
ควบคู่ไปกับขั้นตอนที่หนึ่ง
3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การ
ออกแบบเว็บไซต์ต้องมีการจัดโครงสร้างหรือจัดระเบียบข้อมูลที่ชัดเจน
4. กําหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจาก
วัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผู้ใช้ควรทําอะไรบ้าง
จํานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด
5. หลังจากนั้น จึงทําการสร้างเว็บไซต์แล้วนําไปทดลองเพื่อหา
ข้อผิดพลาดและทําการแก้ไขปรับปรุง แล้วจึงนําเข้าสู่เครือข่าย
อินเทอร์เน็ตเป็นขั้นสุดท้าย
ความสําคัญของสีที่มีต่อการออกแบบเว็บไซต์
สีเป็นองค์ประกอบที่มีความละเอียดซับซ้อน และต้องอาศัย
ความเชี่ยวชาญในการผสมผสานความแตกต่างของสี ให้สามารถเข้ากัน
ได้อย่างลงตัว โดยสามารถสรุปความสําคัญในการเลือกใช้สีเพื่อการ
ออกแบบเว็บ ได้ดังนี้
1.การดึงดูดความสนใจของผู้เยี่ยมชม เนื่องจากสิ่งแรกที่
มองเห็นได้จากเว็บคือ สี ซึ่งเป็นสิ่งที่ช่วยกําหนดบรรยากาศ และ
ความรู้สึกโดยรวมของเว็บไซต์
2.การนําสีมาใช้กับองค์ประกอบต่างๆของเว็บเพจ เนื่องจากใน
หน้าเว็บมีข้อมูลปริมาณมาก ผู้ออกแบบมักใช้โทนสีในการจัดกลุ่มข้อมูล
เช่น ตัวอักษร รูปภาพ ลิงค์ และพื้นหลัง เป็นต้น เพื่อความสะดวกต่อ
การเข้าใช้งานของผู้เยี่ยมชมเว็บไซต์
3.การเชื่อมโยงองค์ประกอบหน้าเว็บเข้าด้วยกัน ผู้ออกแบบ
สามารถใช้การไล่ระดับสีหรือโทนสี เพื่อเชื่อมโยงองค์ประกอบแต่ละ
ส่วนไว้ด้วยกัน ให้หน้าเว็บมรความเป็นเอกภาพได้
- 11. การจัดองค์ประกอบภาพ
หลักการจัดองค์ประกอบของภาพอยู่ 2 หลักด้วยกัน ได้แก่
1. การสร้างเอกภาพ ส่วนวิธีการสร้างเอกภาพนั้น มีหลักอยู่
ด้วยกัน 3 ข้อ ได้แก่
1.1 สร้างความใกล้ชิดให้กับองค์ประกอบ วิธีที่ง่ายที่สุดก็คือ
การจัดวางองค์ประกอบให้มีความเหมาะสม ลองดูรูปข้างล่างนี้ก็จะรู้เอง
ว่ารูปไหนมีเอกภาพแล้วอันไหนไม่มีเอกภาพ ซึ่งแตกต่างกันแค่การจัด
องค์ประกอบ
4.การสร้างอารมณ์และความรู้สึก การเลือกใช้สีแต่ละสี ล้วนมีผล
ต่อความรู้สึกของผู้เยี่ยมชมเว็บไซต์ เช่น สีแดงกระตุ้นให้เกดความสนใจ
อยากรู้ มีชีวิตชีวา หรือสีดํา กระคุ้นให้เกิดความน่าลึกลับ น่าค้นหา เป็น
ต้น
5.การสร้างสัญลักษณ์หรือเป็นตัวแทนขององค์กร ส่วนใหญ่
องค์กรขนาดใหญ่จะมีการสร้างสัญลักษณ์ที่เป็นตัวแทนขององค์กร ทั้งนี้
อาจอยู่ในรูปแบบเครื่องหมายการค้าหรือสีสันต่างๆ ที่ผู้เยี่ยมชมเว็บไซต์
มองเห็นแล้วทราบทันทีว่าเป็นสัญลักษณ์องค์กรใด โดยใช้สีประจําองค์กร
มาใช้ร่วมกับการออกแบบหน้าเว็บ
อย่างไรก็ตาม การเลือกใช้สีในการออกแบบเว็บเพจนั้น หาก
เลือกใช้สีไม่เหมาะสมอาจสร้างความลําบากในการอ่านหรือรบกวน
สายตาผู้เยี่ยมชม รวมทั้งอาจทําให้การสื่อความหมายไม่ถูกต้อง การ
เลือกใช้สีต่างๆนั้น ต้องเข้าใจถึงการแสดงผลของเว็บเพจใน
สภาพแวดล้อมที่แตกต่างกัน
- 12. 1.2 สร้างความซ้ํากันขององค์ประกอบ การจัดองค์ประกอบ
โดยการใช้วิธีการทําซ้ํากันไปเรื่อยๆไม่ว่าจะเป็นเส้น จุด สี หรือ
รูปลักษณะอื่นๆ จะทําให้ผู้ชมรู้สึกว่าเป็นพวกพ้องเดียวกัน และจะทําให้
เกิดความเป็นเอกภาพขึ้นมาในงานได้ ตัวอย่างนี้หาดูได้ในหลายๆงาน
เช่นงานที่ทําเป็นเส้นพริ้วๆหลายๆเส้น ซ้ํากันไปซ้ํากันมา
1.3 สร้างความต่อเนื่องขององค์ประกอบ ความต่อเนื่องเราจะ
สร้างมาจากเส้น หรือทิศทางขององค์ประกอบที่อยู่ภายในงานของเรา ซึ่ง
จะนําสายตาของผู้ที่ได้ชมงานของเราไปในทิศทางที่เราได้กําหนด และ
เกิดความต่อเนื่องเพื่อเล่าเรื่องราวไหลไปภายในงาน ต่อเนื่องเป็นเรื่อง
เป็นราวเดียวกันและเป็นลําดับขั้น และจะทําให้เกิดเป็นเรื่องราวขึ้นในใจ
ของผู้ที่ได้ดู ในหลักการข้อนี้เราจะสามารถนํามาใช้ในการบังคับสายตา
ของผู้ที่ดูงานไปจบที่ สิ่งที่เราต้องการจะให้ความสําคัญได้ ลองหาดูตาม
ป้ายโฆษณา ที่เวลาเราดูที่รูปแล้วจะไปจบที่จุดสุดท้ายเป็นพวก Logo
หรือ สินค้า ที่ต้องการจะโฆษณา
2. การสร้างจุดเด่น เน้นจุดสําคัญ จุดเด่นจะทําให้ผู้ชมสามารถ
ที่จะจับประเด็นในความหมายของงานที่เราต้องการจะสื่อได้ โดยมี
หลักการสร้างจุดสนใจได้ 3 วิธีด้วยกัน ได้แก่
2.1 การวางจุดสนใจในงาน หลักการนี้ถือว่าเป็นหลักการที่
สําคัญหลักการหนึ่ง สิ่งที่สําคัญก็คือเราต้องรู้ว่าเราต้องการที่จะเน้นอะไร
ในงานของเรา แล้วก็วางสิ่งที่เราให้ความสําคัญไว้ในตําแหน่งที่สําคัญ
จากรูปหมายเลข 1 คือต่ําแหน่งที่สําคัญที่สุดไล่มาจนถึงหมายเลข
5 คือตําแหน่งที่มีความสําคัญน้อยที่สุด
- 14. 2.Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรง
ข้ามกันในวงจรสี เช่น สีฟ้าจะตรงข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสี
เขียว สามารถนํามาใช้งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดีและ
ไม่ดี หากไม่รู้หลักพื้นฐานในการใช้งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่
ควรใช้ในพื้นที่ปริมาณเท่ากันในงาน ควรใช้สีใดสีหนึ่งจํานวน 80% อีก
ฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นที่ของงาน
โดยรวม จะทําให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่นของ
ภาพ
ตัวอย่างเว็บไซต์ที่ใช้สีตัดกันหรือสีตรงกันข้าม
3.Triad คือ การเลือกสีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยม
ด้านเท่ามาใช้งาน
ตัวอย่างเว็บไซต์ที่ใช้สีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่า
มาใช้งาน
- 15. 4.Analogic หรือสีข้างเคียงกัน การเลือกสีใดสีหนึ่งขึ้นมาใช้งาน
พร้อมกับสีที่อยู่ติดกันอีกข้างละสี หรือก็คือสีสามสีอยู่ติดกันในวงจรสี
นั่นเอง
ตัวอย่างเว็บไซต์ที่ใช้สีใกล้เคียงกัน
องค์ประกอบด้านข้อความ
ข้อความ จัดเป็นองค์ประกอบหลักสําคัญที่สุดในการออกแบบ
เว็บไซต์การออกแบบข้อความที่ดี ผู้ออกแบบต้องคํานึงถึงองค์ประกอบ
ย่อยหลายด้าน เช่น รูปแบบตัวอักษร ขนาดตัวอักษร ความหนาแน่น
ตัวอักษร สีของข้อความ และการจัดความสัมพันธ์ข้อความและภาพให้
สอดคล้องกับองค์ประกอบอื่น ๆ เช่น ภาพ และกราฟิกบนหน้าจอ
รูปแบบและขนาดตัวอักษร
มีงานวิจัยเกี่ยวกับขนาดตัวอักษรทั้งภาษาไทยเละภาษอังกฤษ
พบว่าผู้อ่านตัว อักษรตัวพิมพ์ภาษไทยหรือภาษาต่าง ๆ ขนาด 80
ตัวอักษรต่อบรรทัดน้อยกว่า การอ่าน ตัวอักษรขนาดขนาด 40
ตัวอักษรต่อบรรทัด ในขณะที่ความเข้าใจ จากการอ่านควรอยู่ระหว่าง
19-37 พอยต์ ในขณะที่ตัวหนังสือปกติมีขนาด 12-19 พอยต์ ส่วน
รูปแบบของตัวอักษรควรใช้ตัวที่อ่านง่ายสบายตาหากตัวอักษรที่ไม่ใช่
ส่วนของเนื้อหาหลัก เช่น ตัวอักษร หัวเรื่องใหญ่ ตัวอักษรประกอบการ
ออกแบบ หรือตัวอักษรพิเศษอื่น ๆ ผู้ออกแบบอาจใช้ตัวอักษรรูปแบบ
และขนาดต่าง ๆ กันออกไป ๆ ได้ แต่ไม่ควรมี ความหนาแน่นของ
ตัวอักษรมากเกินไป
- 16. ความหนาแน่นของ ตัวอักษร ส่วนใหญ่รวมถึงความหนาแน่นของ
องค์ประกอบอื่นบนจอภาพเข้าไปด้วย ผลการวิจัยพบว่า ผู้เรียนชอบ
จอภาพที่มีความหนาแน่นปานกลางหรือประมาณ 40 % ของพื้นที่
หน้าจอมากที่สุด และจะเลือกจอภาพที่มีความหนาแน่นสูง หรือประมาณ
50 % ของพื้นที่หน้าจอ มากว่าจอภาพที่มีความหนาแน่นต่ํา นอกจากนี้
ยังพบว่าในวิชาที่มีเนื้อหายาก ผู้เรียนจะชอบจอภาพ ที่มีความแน่นสูง
เนื่องจากจอภาพที่มีความหนาแน่นขององค์ประกอบต่าง ๆ สูง จะมี
ข้อมูลที่ช่วยให้ความเข้าใจเนื้อหาและแนวคิดหลักต่าง ๆ ชัดเจนและ
ต่อเนื่องขึ้น
สีข้อความ เป็นองค์ประกอบหน้าจอ ที่ช่วยกระตุ้นความน่าสนใจ
การ สีเป็นตัวกระตุ้นประสาทการรับรู้ที่สําคัญ การใช้สีที่เหมาะสม
จะช่วยให้อ่านง่าย และสบายตา ผลงานวิจัยพบว่านักเรียนส่วนใหญ่ชอบ
คู่อักษรสีขาว หรือเหลือง บนพื้นน้ําเงิน อักษรเขียวบนพื้นดํา และอักษร
ดําบนพื้นเหลือง หากใช้พื้นสีเทา คู่สีที่ผู้เรียนชอบ คือ สีฟ้า สีม่วง และสี
ดํา สีที่ชอบน้อยคือ ควรใช้พื้นหลังเป็นสีเข้มมากกว่าสีอ่อนเป็นพื้นหลัง
ซึ่งระยะยาวจะช่วยลดความล้าของสายตา ในการอ่านจอภาพอัน
เนื่องมาจากความจ้าของสีพื้น
รูปแบบของตัวอักษรที่ใช้ในการทําเว็บไซต์
ตัวอักษรที่เราใช้งานกันอยู่ในปัจจุบันจะแบ่งออกเป็น 4 รูปแบบ
ใหญ่ ๆ คือ
1.Font แบบ Serif จะดูเป็นระเบียบ เป็นทางการ เหมาะจะใช้
ในงานที่เป็นทางการ และต้องการความน่าเชื่อถือมากๆ
Font แบบ San Serif จะอ่านง่าย ดูทันสมัยมากกว่าแบบอื่น
ๆ เหมาะจะใช้ในงานที่ต้องการ ความทันสมัยออกแนวไม่เป็นทางการ
มากนัก
ตัวอย่างFont แบบ Serif
ตัวอย่างFont แบบ San Serif
- 17. 3..Font แบบ Antique จะเหมาะกับงานที่ต้องการแสดงความ
ชัดเจนของยุคสมัย หรือต้องการอามรณ์ย้อยยุคนิดหน่อย
4.Font แบบ Script เหมาะกังานที่ไม่เป็นทางการ ต้องการ
ความเป็นกันเองและดูสนุกสนานมากกว่าแบบอื่นๆ หรือในบางกรณี
Font แบบนี้จะใช้ในงานที่ต้องการข้อความที่ดูเหมือนเป็นลายมือเขียน
ตัวอย่างFont แบบ Antique
ตัวอย่างFont แบบ Script
วิธีเลือก Font ไปใช้ในงานออกแบบ
การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคํานึงง่าย ๆ อยู่ 2
ข้อคือ
1. ความหมายต้องเข้ากัน หมายความว่า ความหมายของคํา
และ Font ที่เลือกใช้ควรจะไปด้วยกันได้ เช่น คําว่าน่ารักก็ควรจะใช้
Font ที่ดูน่ารักไปด้วย ไม่ควรใช้ Font ที่ดูเป็นทางการดังภาพตัวอย่าง
ตัวอย่างfont
- 18. 2. อารมณ์ของฟอนต์ และอารมณ์ของงานต้องไปในทิศทาง
เดียวกัน เช่น งานที่ต้องการความน่าเชื่อถือก็จะเลือกใช้ Font แบบ Ser-
if ที่ดูหนักแน่น น่าเชื่อถือ ส่วนงานที่ต้องการความฉูดฉาดอย่างโปสเตอร์
ลดราคาก็ควรจะเลือกใช้ Font ที่เป็นกันเองไม่เป็นทางการมากนักอย่าง
Font ในกลุ่ม Script เป็นต้น
ตัวอย่างอารมณ์ของฟอนต์ และอารมณ์ของงานที่เป็นไปในทิศทาง
เดียวกัน
การวางตําแหน่งตัวอักษร
มีข้อควรคํานึงถึงไว้ให้อยู่ 3 ข้อคือ
1.ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลง
ล่าง โดยมีรัศมีการกวาดสายตาตามลําดับ ดังนั้นถ้าอยากให้อ่านง่าย
ควรจะวางเรียงลําดับให้ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมา
ทําให้เสียความหมายของข้อความไป
2.จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัว
ใหญ่ๆ อยู่เพียงชุดเดียว จึงจะเป็นจุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วน
จุดอื่น ๆ ขนาดควรจะเล็กลงมาตามลําดับความสําคัญ
3.ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทําให้กลายเป็น
งานที่อ่านยากและชวนปวดศรีษะมากกว่าชวนอ่าน ถ้าจําเป็นจริง ๆ
แนะนําให้ใช้ Font เดิมแต่ไม่ตกแต่งพวกขนาด, ความหนาหรือ
กําหนดให้เอียงบ้าง เพื่อเพิ่มความน่าสนใจไม่ให้งานดูน่าเบื่อแบบนี้จะ
ดีกว่า
- 19. บรรณานุกรม
โซนซ่า. (2549). ประเภทของเว็บไซต์. ค้นเมื่อ 24 กรกฏาคม
2556. จาก http://www.zoneza.com
วิชาการพัฒนางานบนเว็บ. (2551). การออกแบบโครงสร้างเว็บไซต์.
ค้นเมื่อ 24 กรกฏาคม 2556. จาก http://sites.google.com
/site/class0223/webdesign.
วิทยาลัยสารพัดช่างพระนคร. (2549). โครงสร้างเว็บไซต์. ค้นเมื่อ 24
กรกฏาคม 2556. จาก http://202.29.42.235/~eleaning/
index. php?option=com_content&view.
สาวิตรี ลุ่มงาม. (2554). แนวทางการพัฒนาเว็บไซต์. ค้นเมื่อ 24
กรกฏาคม 2556. จาก http://www.cybered.co.th/
warnuts/wbi/index3.htm .
Hellomyweb. (2554). ส่วนประกอบของเว็บไซต์ที่ดี. ค้นเมื่อ 24
กรกฏาคม 2556. จาก http://www.hellomyweb.com /
index.php/main/content/134 .
