More Related Content
Similar to ความรู้การออกแบบเว็บไซต์
Similar to ความรู้การออกแบบเว็บไซต์ (20)
More from Ta'May Pimkanok
More from Ta'May Pimkanok (6)
ความรู้การออกแบบเว็บไซต์
- 5. ตัวอย่างส่วนประกอบของเว็บไซต์
ดังรูปทีเห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่
ด้วยกันทั้งหมด 6 ส่วนดังนี้
1.Containing block โดยปกติเราจะเขียน <div> หรือ <table>
ต่อจาก <body> เพือเอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์ก่อน เพือ
เอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะมีข้อดีอยู่
ตรงที สามารถท่าให้ปรับเปลียนขนาดในการแสดงผลของเนื้อหาได้
หรือต่าแหน่งการแสดงผลของเว็บไซต์ได้เช่น จัดกลาง ชิดซ้าย หรือชิด
ขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริมทีใส่ตัวหนังสือลงไป
ก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะท่าได้ยากมาก ดังนั้น
ทุกครั้งทีออกแบบเว็บไซต์อย่างลืมทีจะสร้าง containing block เอาไว้
ใส่เนื้อหาทั้งหมดก่อน เพือความสะดวกของเราเอง
2.Logo เป็นสัญลักษณ์ทีแสดงถึงตัวตนของเรา ท่าให้ลูกค้าหรือ
ผู้ใช้งานจดจ่าเราได้ ด้วยเหตุนี้เองท่าให้การออกแบบเว็บไซต์นั้น
จ่าเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิง ส่วนต่าแหน่งทีควรจะวางโล
โก้ไว้คือต่าแหน่งทีเป็นสีม่วงทั้งหมดนันเอง จะสังเกตได้ว่าจะเป็นส่วนที
อยู่ด้านบนของเว็บไซต์ทั้งหมด เพือให้ผู้ใช้งานจ่าได้ และสะดุดตา เรือง
ทีต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมือคลิกจะน่าไปสู่หน้าแรก
ของเว็บไซต์เสมอ
3.Navigation เป็นส่วนทีจะน่าผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของ
เว็บไซต์ โดยสามารถท่าให้อยู่ในแนวนอน หรือแนวตั้งก็ได้ หากสังเกต
hellomyweb.com เราจะท่าทั้งแนวตั้งและแนวนอน โดยแนวนอนจะ
น่าไปสู่เนื้อหาหน้าอืนของเว็บไซต์ ส่วนแนวตั้งจะน่าไปสู่เนื้อหาย่อยใน
หน้านั้น ต่าแหน่งทีควรจะวาง navigation เอาไว้คือสีเขียวทั้งหมด ถ้า
สังเกตดูจะพบว่าการวางต่าแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของ
เว็บไซต์ หรือจะพูดอีกอย่างคือส่วนทีเมือผู้ใช้เปิดมาก็ต้องเจอได้ทันที
ไม่ควรวางไว้ในต่าแหน่งทีผู้ใช้จะต้องเลือนขึ้นลง ซ้ายขวา
4.Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนทีส่าคัญมากทีสุด
หากผู้ใช้งานไม่สามารถเข้าถึงได้โดยง่ายผู้ใช้งานจะเปลียนไปชมเว็บ
ใหม่ทันที ต่าแหน่งทีควรวางเนื้อหาไว้คือสีแดง หรือต่าแหน่งอืนๆทีคิด
ว่าจะท่าให้ผู้หาเจอได้โดยไม่ล่าบาก หากสังเกตดูจะพบว่าเว็บไซต์บาง
เว็บไซต์มีโฆษณาทีมากจนเกินไป ท่าให้ผู้ใช้งานหาเนื้อหาไม่เจอ นัน
ถือเป็นการออกแบบทีผิดพลาด
- 6. 5.Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์
ต่างๆเอาไว้ หรือเป็นเนื้อหาทีเกียวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่า
จ่าเป็นต้องมีหรือไม่ บอกได้ว่าจ่าเป็นอย่างยิง footer จะเป็นตัวบอกผู้ชม
ว่าส่วนนี้คือล่างสุดของหน้าทีก่าลังแสดงอยู่แล้วนะ ไม่มีเนื้อหาเพิมเติม
แล้ว
6.Whitespace พื้นทีว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็น
ความส่าคัญของการเว้นพื้นทีว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือ
ตัวหนังสือเข้าไปให้มากทีสุดเพราะคิดว่าจะท่าให้เว็บดูสวยงามขึ้น หรือ
ใช้พื้นทีมีมีอยู่ให้คุ้มค่าทีสุด หากเราออกแบบโดยไม่ได้ค่านึงว่าต้องมี
พื้นทีว่างอยู่ในเว็บไซต์ จะท่าให้เว็บของเรานั้นดูอึดอัดทันที การเว้น
ช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่าง
ระหว่างภาพ เนื้อหาต่างๆ นอกจากจะท่าให้เว็บของเราดูสบายตาขึ้น
แล้ว ยังท่าให้เราสามารถก่าหนดจุดทีจะให้ผู้ใช้งานเว็บรู้สึกสนใจในจุด
นั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และน่าภาพหรือ
ตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้นจะเป็นทีสนใจของผู้ใช้ทันที
ข้อมูลหลักทีควรมีอยู่ในเว็บไซต์
ซึงข้อมูลต่อไปนี้ เป็นสิงทีผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมือเข้าไปชม
เว็บไซต์
- ข้อมูลเกียวกับบริษัท องค์กร สถานศึกษา
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสือมวลชน
- ค่าถามยอดนิยม
- ข้อมูลในการติดต่อ
ข้อควรค่านึงถึงในการออกแบบเว็บไซต์
1. ความเรียบง่าย ได้แก่ มีรูปแบบทีเรียบง่าย ไม่ซับซ้อน และใช้
งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรทีเคลือนไหวอยู่ตลอดเวลา ชนิด
และสีของตัวอักษรไม่มากจนเกินไปท่าให้วุ่นวาย
2. ความสม่าเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น
รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมี
ความคล้ายคลึงกันตลอดทั้งเว็บไซต์
- 7. 3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรค่านึงถึงลักษณะ
ขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และ
ลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดู
น่าเชือถือไม่เหมือนสวนสนุก ฯลฯ
4. เนื้อหาทีมีประโยชน์ เนื้อหาเป็นสิงทีส่าคัญทีสุดในเว็บไซต์
ดังนั้นควรจัดเตรียมเนื้อหาและข้อมูลทีผู้ใช้ต้องการให้ถูกต้อง และ
สมบูรณ์ มีการปรับปรุงและเพิมเติมให้ทันเหตุการณ์อยู่เสมอ เนื้อหาไม่
ควรซ้่ากับเว็บไซต์อืน จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชัน ทีใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่าย
และใช้งานสะดวก ใช้กราฟิกทีสือความหมายร่วมกับค่าอธิบายทีชัดเจน
6. ลักษณะทีน่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์
กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกทีจะต้อง
สมบูรณ์ การใช้สี การใช้ตัวอักษรทีอ่านง่าย สบายตา การใช้โทนสีที
เข้ากันลักษณะหน้าตาทีน่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละ
บุคคล
7. การใช้งานอย่างไม่จ่ากัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มาก
ทีสุดเลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหาสามารถแสดง
ผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มี
ปัญหาเป็นลักษณะส่าคัฐส่าหรับผู้ใช้ทีมีจ่านวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหา
อย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และ
เชือถือได้
9. ลิงค์ต่างๆ จะต้องเชือมโยงไปหน้าทีมีอยู่จริงและถูกต้อง ระบบ
การท่างานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและท่าหน้าทีได้อย่าง
ถูก
ขั้นตอนการวางแผนเพือการออกแบบเว็บไซต์
1.การก่าหนดวัตถุประสงค์ของเว็บไซต์ เว็บไซต์ส่วนใหญ่จะมีการ
ก่าหนดวัตถุประสงค์ชัดเจน ผู้เข้าชมเว็บไซต์ต้องการข้อเท็จจริง เมือเข้า
ชมแล้วจะพยายามค้นหาข้อมูลหรือข้อเท็จจริงทีต้องการ เว็บไซต์ทีมี
วัตถุประสงค์ทีชัดเจน จะท่าให้ผู้เข้าชมยอมรับเว็บไซต์โดยง่าย เช่น
- 8. ข้อมูลเพือการศึกษาจะให้ข้อมูลด้านการศึกษาอย่างชัดเจน ผู้ทีเข้ามา
เยียมชมส่วนใหญ่จะเป็นนักศึกษาหรือผู้สนในในการศึกษาหลากหลาย
สาขาวิชา เป็นต้น การก่าหนดวัตถุประสงค์เว็บไซต์ทีชัดเจนก่อนการ
สร้างเว็บไซต์ จะท่าให้ผู้สร้างเว็บไซต์มันใจได้ว่าเว็บไซต์จะประสบ
ผลส่าเร็จตรงตามวัตถุประสงค์ของเว็บไซต์
2.การก่าหนดกลุ่มเป้าหมาย ผู้ทีจะออกแบบเว็บไซต์จะต้อง
ค่านึงถึงผู้ทีจะเข้าชมเว็บไซต์ว่าเป็นกลุ่มเป้าหมายทีส่าคัญ ดังนั้นก่อนที
จะออกแบบเว็บไซต์จะต้องวิเคราะห์กลุ่มเป้าหมายของเว็บไซต์ให้
ชัดเจน ว่าต้องการให้ใครมาเยียมชม โดยดูวัตถุประสงค์ของเว็บไซต์ ว่า
เว็บไซต์นั้นๆมีการถ่ายทอดอะไรกับผู้เยียมชมเว็บไซต์ก็จะทราบว่า
กลุ่มเป้าหมายของเว็บไซต์คือกลุ่มใด
3.การวางแผนด้านเนื้อหา การออกแบบเว็บไซต์จะต้องมีการ
วางแผนให้ชัดเจนตั้งแต่เริมต้น เพราะถ้าหากมีการวางแผนด้านเนื้อหา
ไม่ดี จะท่าให้เว็บไซต์ไม่เป็นระเบียบ ส่งผลให้ผู้เข้าชมเว็บไซต์เกิดความ
สับสน การวางแผนด้านเนื้อหาควรตอบค่าถามด้านต่างๆให้ได้ การ
สร้างแผนผังของเนื้อหาจะท่าให้เราทราบว่า มีจ่านวนเว็บเพจที
เกียวข้องปริมาณเท่านั้น หากเป็นเว็บไซต์ขนาดใหญ่ มีเว็บเพจจ่านวน
มาก ควรมีการจัดกลุ่มของเนื้อหาทั้งหมดทีความสัมพันธ์กันเป็นกลุ่มๆ
4.การวางแผนโครงสร้างของเว็บไซต์ ในทีนี้ขออธิบายตามระบบ
การจัดการเนื้อหา(Content Management System : CMS) ในการ
สร้างและจัดการเนื้อหาของเว็บไซต์ทีได้ออกแบบไว้ ประกอบด้วย การ
สร้างเนื้อหา(creation) การปรับปรุงเนื้อหา(updating) การกระจาย
เนื้อหา(distribution) การตีพิมพ์เนื้อหา(publishing) การค้นหาเนื้อหา
(discovery) CMS เปิดทางให้ผู้ใช้งานสามารถตีพิมพ์ได้หลายลักษณะ
เช่น ข่าว การประกาศ กรณีศึกษา ประวัติบุคคล บทความ หนังสือพิมพ์
ข้อมูลสินค้า หนังสือรับรอง ลิงค์ทีส่าคัญ แหล่งข้อมูลออนไลน์
5.การวางแผนการผลิตเว็บเพจ ควรเข้าใจหลักการของเว็บไซต์
ก่อนว่า เว็บไซต์เปรียบเสมือนการไหลของข้อมูล ซึงจะท่าให้ผู้เข้าเยียม
ชมเว็บไซต์ได้รับข้อมูลอย่างเป็นล่าดับ ขั้นตอน ถ้าหากผู้สร้างเว็บไซต์
ไม่มีการวางแผน เว็บไซต์ก็จะเริมต้นไม่ถูก ไม่รู้ว่าจะเริมต้นจาก
- 9. ตรงไหนดี ทีส่าคัญทีสุดคือควรออกแบบให้ง่ายทีสุด และรวดเร็วทีสุด
ส่าหรับผู้ใช้งานหรือผู้เข้าเยียมชมเว็บไซต์
6.การวางแผนระบบเนวิเกชัน เป็นการน่าแผนผังโครงสร้าง
เว็บไซต์จากการวางแผนเว็บไซต์ มาวางแผนระบบเนวิเกชัน
ขั้นตอนการพัฒนาเว็บไซต์
กระบวนการพัฒนาเว็บไซต์สามารถจ่าแนกได้3ขั้นตอน ดังนี้
1.การ เตรียมการ แล ะการ วาง แผ น ง าน ( pre-production)
เปรียบเสมือนเข็มทิศทีจะชี้น่าทางหรือบ่งบอกให้ผู้พัฒนาเว็บไซต์ทราบ
ว่า ควรจะต้องเดินทางไปในทิศทางใด
1.1การเตรียมก่อนการด่าเนินการ ประกอบด้วย ก่าหนด
วัตถุประสงค์และเป้าหมายของเว็บไซต์ ก่าหนดชือเว็บไซต์ และชือยูอาร์
แอล ก่าหนดกลุ่มเป้าหมายทีจะให้เข้าชมเว็บไซต์ และศึกษากลุ่มคู่แข่ง
1.2การวางแผนการด่าเนินการ หลังการเตรียมก่อนการ
ด่าเนินการ ควรมีการวางแผนไว้ล่วงหน้า เพือให้การพัฒนาเว็บไซต์มี
แนวทางทีชัดเจน
1.3การรวบรวมและวิเคราะห์โครงสร้าง เป็นขั้นตอนทีต่อจาก
การวางแผนการด่าเนินการ เนืองจากเนื้อหาและข้อมูลเป็นสิงทีเชิญ
ชวนให้ผู้อืนเข้ามาเยียมชมเว็บไซต์
2.การท่างานจริงในการออกแบบและพัฒนาเว็บเพจ(on- production)
แบ่งได้เป็น2ส่วน คือ
- 10. 2.1การออกแบบเว็บเพจ นับเป็นขั้นตอนในการออกแบบรูปร่าง
โครงสร้างและลักษณะทางด้านกราฟิกทางหน้าเว็บเพจ โดยโปรแกรมที
นิยมน่ามาใช้ในการออกแบบคือ โฟโต้ชอป หรือ ไฟล์เวิร์ก ซึงจะช่วย
ในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่างๆ เช่น ชือ
เว็บไซต์ โลโก้ รูปไอคอน ภาพเคลือนไหว แบรนเนอร์โฆษณา เป็นต้น
2.2การพัฒนาเว็บเพจ หลังจากออกแบบโครงร่างของเว็บเพจ
และแต่ละหน้าเว็บเพจแล้ว ขั้นตอนต่อไปคือ การด่าเนินการสร้างเว็บ
เพจ ซึงรวมถึงการจัดหาองค์ประกอบทีต้องน่ามาใช้ เช่น สือมัลติมีเดีย
ภาพกราฟิก แบบฟอร์มต่างๆ และการสร้างไฟล์รูปภาพ/เสียง ที
เกียวข้องกับเนื้อหา ซึงต้องค่านึงถึงรูปแบบของไฟล์ทีน่ามาใช้และ
สอดคล้องกับซอฟต์แวร์ทีใช้ในการพัฒนาด้วย จากนั้นน่าภาพและเสียง
มาเก็บไว้ในไดเร็กทอรีหรือโฟลเดอร์ทีก่าหนดไว้ แล้วน่าข้อมูลทั้งหมดที
รวบรวมไว้จากทีกล่าวมาข้างต้น มาสร้างเป็นเว็บไซต์ด้วยภาษา HTML
หรือเครืองมือในการสร้างเว็บเพจอืนตามแนวคิดทีได้ออกแบบไว้แล้ว
ซึงรวมถึงการเขียนโปรแกรมสคริปต์ในการใช้งานด้วย
3.การสรุปงานเพือส่งมอบ(post- production) ประกอบด้วย
3.1การทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบเว็บ
เพจทีสร้างขึ้นแบบออฟไลน์ โดยยังไม่ได้มีการน่าเว็บไซต์เข้าสู่
อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บเบราว์เซอร์
เช่น ใช้โปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ ตรวจสอบตัวอย่างเว็บเพจ
หน้าต่างๆทีสร้างไว้ ว่ามีความเหมาะสมหรือไม่ พร้อมกับท่าการแก้ไข
ปรับปรุงจนเป็นทีน่าพอใจ
3.2การเผยแพร่เว็บไซต์ เมือทดสอบเว็บไซต์จนสมบูรณ์แล้ว
ขั้นตอนในการเผยแพร่ผ่านเว็บไซต์ คือ การเผยแพร่ให้คนทัวไปได้
รู้จัก หรือเรียกว่าการน่าเว็บไซต์ขึ้นเซิร์ฟเวอร์ หรือการอัพโหลด ซึงเป็น
การถ่ายโอนเว็บเพจและส่วนประกอบอืน เช่น ไฟล์ภาพ ไฟล์เพลง
ประกอบ เป็นต้น ไปฝากไว้ทีโฮสต์
3.3การ บ่ารุงรักษาเว็บไซต์ เป็นการปรับปรุงเนื้อหา
ภาพประกอบ หรือการปรับปรุงเว็บไซต์ให้เป็นปัจจุบัน ซึงถือเป็น
ขั้นตอนทีส่าคัญ ผู้เข้าชมเว็บมักใช้เวลาในการค้นหาและเปิดผ่าน
- 11. เว็บไซต์ต่างๆอย่างรวดเร็ว หากพบว่าเว็บไซต์ทีผู้สร้างน่าเสนอไม่ได้มี
การปรับปรุงเปลียนแปลงหรือมีข้อมูลใหม่ๆเพิมขึ้นเลย ผู้เข้าชมเว็บก็
อาจลดจ่านวนลงเรือยๆ เรือยๆ จนกลายเป็นเว็บทีไม่มีคนเข้ามาชม
หลักในการออกแบบโครงสร้างเว็บไซต์
1. ก่าหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้าง
เว็บไซต์นี้ท่าเพืออะไร
2. ศึกษาคุณลักษณะของผู้ทีเข้ามาใช้ว่ากลุ่มเป้าหมายใดทีผู้สร้าง
ต้องการสือสาร ข้อมูลอะไรทีพวกเขาต้องการโดยขั้นตอนนี้ควรปฏิบัติ
ควบคู่ไปกับขั้นตอนทีหนึง
3. วางแผนเกียวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การ
ออกแบบเว็บไซต์ต้องมีการจัดโครงสร้างหรือจัดระเบียบข้อมูลทีชัดเจน
4. ก่าหนดรายละเอียดให้กับโครงสร้าง ซึงพิจารณาจาก
วัตถุประสงค์ทีตั้งไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผู้ใช้ควรท่าอะไรบ้าง
จ่านวนหน้าควรมีเท่าใด มีการเชือมโยง มากน้อยเพียงใด
5. หลังจากนั้น จึงท่าการสร้างเว็บไซต์แล้วน่าไปทดลองเพือหา
ข้อผิดพลาดและท่าการแก้ไขปรับปรุง แล้วจึงน่าเข้าสู่เครือข่าย
อินเทอร์เน็ตเป็นขั้นสุดท้าย
ความส่าคัญของสีทีมีต่อการออกแบบเว็บไซต์
สีเป็นองค์ประกอบทีมีความละเอียดซับซ้อน และต้องอาศัยความ
เชียวชาญในการผสมผสานความแตกต่างของสี ให้สามารถเข้ากันได้
- 12. อย่างลงตัว โดยสามารถสรุปความส่าคัญในการเลือกใช้สีเพือการ
ออกแบบเว็บ ได้ดังนี้
1.การดึงดูดความสนใจของผู้เยียมชม เนืองจากสิงแรกทีมองเห็น
ได้จากเว็บคือ สี ซึงเป็นสิงทีช่วยก่าหนดบรรยากาศ และความรู้สึก
โดยรวมของเว็บไซต์
2.การน่าสีมาใช้กับองค์ประกอบต่างๆของเว็บเพจ เนืองจากใน
หน้าเว็บมีข้อมูลปริมาณมาก ผู้ออกแบบมักใช้โทนสีในการจัดกลุ่มข้อมูล
เช่น ตัวอักษร รูปภาพ ลิงค์ และพื้นหลัง เป็นต้น เพือความสะดวกต่อการ
เข้าใช้งานของผู้เยียมชมเว็บไซต์
3.การเชือมโยงองค์ประกอบหน้าเว็บเข้าด้วยกัน ผู้ออกแบบ
สามารถใช้การไล่ระดับสีหรือโทนสี เพือเชือมโยงองค์ประกอบแต่ละ
ส่วนไว้ด้วยกัน ให้หน้าเว็บมรความเป็นเอกภาพได้
4.การสร้างอารมณ์และความรู้สึก การเลือกใช้สีแต่ละสี ล้วนมีผลต่อ
ความรู้สึกของผู้เยียมชมเว็บไซต์ เช่น สีแดงกระตุ้นให้เกดความสนใจ
อยากรู้ มีชีวิตชีวา หรือสีด่า กระคุ้นให้เกิดความน่าลึกลับ น่าค้นหา เป็น
ต้น
5.การสร้างสัญลักษณ์หรือเป็นตัวแทนขององค์กร ส่วนใหญ่
องค์กรขนาดใหญ่จะมีการสร้างสัญลักษณ์ทีเป็นตัวแทนขององค์กร ทั้งนี้
อาจอยู่ในรูปแบบเครืองหมายการค้าหรือสีสันต่างๆ ทีผู้เยียมชมเว็บไซต์
มองเห็นแล้วทราบทันทีว่าเป็นสัญลักษณ์องค์กรใด โดยใช้สีประจ่า
องค์กรมาใช้ร่วมกับการออกแบบหน้าเว็บ
อย่างไรก็ตาม การเลือกใช้สีในการออกแบบเว็บเพจนั้น หาก
เลือกใช้สีไม่เหมาะสมอาจสร้างความล่าบากในการอ่านหรือรบกวน
สายตาผู้เยียมชม รวมทั้งอาจท่าให้การสือความหมายไม่ถูกต้อง การ
เลือกใช้สีต่างๆนั้น ต้องเข้าใจถึงการแสดงผลของเว็บเพจใน
สภาพแวดล้อมทีแตกต่างกัน
การจัดองค์ประกอบภาพ
หลักการจัดองค์ประกอบของภาพอยู่ 2 หลักด้วยกัน ได้แก่
- 13. 1. การสร้างเอกภาพ ส่วนวิธีการสร้างเอกภาพนั้น มีหลักอยู่
ด้วยกัน 3 ข้อ ได้แก่
1.1 สร้างความใกล้ชิดให้กับองค์ประกอบ วิธีทีง่ายทีสุดก็คือการ
จัดวางองค์ประกอบให้มีความเหมาะสม ลองดูรูปข้างล่างนี้ก็จะรู้เองว่ารูป
ไหนมีเอกภาพแล้วอันไหนไม่มีเอกภาพ ซึงแตกต่างกันแค่การจัด
องค์ประกอบ
1.2 สร้างความซ้่ากันขององค์ประกอบ การจัดองค์ประกอบโดยการใช้
วิธีการท่าซ้่ากันไปเรือยๆไม่ว่าจะเป็นเส้น จุด สี หรือรูปลักษณะอืนๆ จะ
ท่าให้ผู้ชมรู้สึกว่าเป็นพวกพ้องเดียวกัน และจะท่าให้เกิดความเป็น
เอกภาพขึ้นมาในงานได้ ตัวอย่างนี้หาดูได้ในหลายๆงาน เช่นงานทีท่า
เป็นเส้นพริ้วๆหลายๆเส้น ซ้่ากันไปซ้่ากันมา
1.3 สร้างความต่อเนืองขององค์ประกอบ ความต่อเนืองเราจะ
สร้างมาจากเส้น หรือทิศทางขององค์ประกอบทีอยู่ภายในงานของเรา
ซึงจะน่าสายตาของผู้ทีได้ชมงานของเราไปในทิศทางทีเราได้ก่าหนด
และเกิดความต่อเนืองเพือเล่าเรืองราวไหลไปภายในงาน ต่อเนืองเป็น
เรืองเป็นราวเดียวกันและเป็นล่าดับขั้น และจะท่าให้เกิดเป็นเรืองราวขึ้น
ในใจของผู้ทีได้ดู ในหลักการข้อนี้เราจะสามารถน่ามาใช้ในการบังคับ
สายตาของผู้ทีดูงานไปจบที สิงทีเราต้องการจะให้ความส่าคัญได้ ลอง
หาดูตามป้ายโฆษณา ทีเวลาเราดูทีรูปแล้วจะไปจบทีจุดสุดท้ายเป็นพวก
Logo หรือ สินค้า ทีต้องการจะโฆษณา
2. การสร้างจุดเด่น เน้นจุดส่าคัญ จุดเด่นจะท่าให้ผู้ชมสามารถทีจะจับ
ประเด็นในความหมายของงานทีเราต้องการจะสือได้ โดยมีหลักการ
สร้างจุดสนใจได้ 3 วิธีด้วยกัน ได้แก่
2.1 การวางจุดสนใจในงาน หลักการนี้ถือว่าเป็นหลักการที
ส่าคัญหลักการหนึง สิงทีส่าคัญก็คือเราต้องรู้ว่าเราต้องการทีจะเน้น
อะไรในงานของเรา แล้วก็วางสิงทีเราให้ความส่าคัญไว้ในต่าแหน่งที
ส่าคัญ
- 14. จากรูปหมายเลข 1 คือต่าแหน่งทีส่าคัญทีสุดไล่มาจนถึงหมายเลข 5 คือ
ต่าแหน่งทีมีความส่าคัญน้อยทีสุด
2.2การสร้างความแตกต่างในงาน การสร้างความแตกต่างจะเป็น
ตัวก่าหนดความน่าสนใจและความโดดเด่นในงานของเราได้ดี แต่ก็อย่า
ให้มันหลุดกรอบไปจะท่าให้ขาดเอกภาพได้ นีคือข้อควรระวังอีกข้อหนึง
หลักในการสร้างความแตกต่าง มีง่ายๆดังนี้
- การสร้างขนาดทีแตกต่าง
- ความแตกต่างกันทีรูปร่างขององค์ประกอบ
- รูปลักษณ์หรือลักษณ์ทีแตกต่าง
2.3 การวางแยกองค์ประกอบให้โดดเด่น พูดง่ายๆก็คือ วางให้
โดด และเด่น กว่าคนอืน
เทคนิคการน่าสีไปใช้งาน
เทคนิคการเลือกใช้สีแบบสูตรส่าเร็จจะมีอยู่หลายรูปแบบ แต่แบบที
นิยมให้งานกันเป็นหลักจะมีอยู่ 4 รูปแบบ คือ
1.Mono หรือเอกรงค์ จะเป็นการใช้สีทีไปในโทนเดียวกันทั้งหมด
เช่น จุดเด่นเป็นสีแดง สีส่วนทีเหลือก็จะเป็นสีทีใกล้เคียงกับสีแดง โดย
ใช้วิธีลดน้่าหนักความเข้มของสีแดงลงไป
- 15. 2.Complement คือ สีทีตัดกันหรือสีตรงกันข้าม เป็นสีทีอยู่ตรง
ข้ามกันในวงจรสี เช่น สีฟ้าจะตรงข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับ
สีเขียว สามารถน่ามาใช้งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดี
และไม่ดี หากไม่รู้หลักพื้นฐานในการใช้งาน การใช้สีตรงข้ามหรือสีตัด
กัน ไม่ควรใช้ในพื้นทีปริมาณเท่ากันในงาน ควรใช้สีใดสีหนึงจ่านวน
80% อีกฝ่ายหนึงต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นทีของ
งานโดยรวม จะท่าให้ความตรงข้ามกันของพื้นทีน้อยกลายเป็นจุดเด่น
ของภาพ
องค์ประกอบด้านข้อความ
ข้อความ จัดเป็นองค์ประกอบหลักส่าคัญทีสุดในการออกแบบ
เว็บไซต์การออกแบบข้อความทีดี ผู้ออกแบบต้องค่านึงถึงองค์ประกอบ
ย่อยหลายด้าน เช่น รูปแบบตัวอักษร ขนาดตัวอักษร ความหนาแน่น
ตัวอักษร สีของข้อความ และการจัดความสัมพันธ์ข้อความและภาพให้
สอดคล้องกับองค์ประกอบอืน ๆ เช่น ภาพ และกราฟิกบนหน้าจอ
รูปแบบและขนาดตัวอักษร
มีงานวิจัยเกียวกับขนาดตัวอักษรทั้งภาษาไทยเละภาษอังกฤษ
พบว่าผู้อ่านตัว อักษรตัวพิมพ์ภาษไทยหรือภาษาต่าง ๆ ขนาด 80
ตัวอักษรต่อบรรทัดน้อยกว่า การอ่าน ตัวอักษรขนาดขนาด 40 ตัวอักษร
ต่อบรรทัด ในขณะทีความเข้าใจ จากการอ่านควรอยู่ระหว่าง 19-37
พอยต์ ในขณะทีตัวหนังสือปกติมีขนาด 12-19 พอยต์ ส่วนรูปแบบของ
ตัวอักษรควรใช้ตัวทีอ่านง่ายสบายตาหากตัวอักษรทีไม่ใช่ส่วนของ
เนื้อหาหลัก เช่น ตัวอักษร หัวเรืองใหญ่ ตัวอักษรประกอบการออกแบบ
หรือตัวอักษรพิเศษอืน ๆ ผู้ออกแบบอาจใช้ตัวอักษรรูปแบบและขนาด
ต่าง ๆ กันออกไป ๆ ได้ แต่ไม่ควรมี ความหนาแน่นของตัวอักษรมาก
เกินไป
- 16. ความหนาแน่นของ ตัวอักษร ส่วนใหญ่รวมถึงความหนาแน่นของ
องค์ประกอบอืนบนจอภาพเข้าไปด้วย ผลการวิจัยพบว่า ผู้เรียนชอบ
จอภาพทีมีความหนาแน่นปานกลางหรือประมาณ 40 % ของพื้นที
หน้าจอมากทีสุด และจะเลือกจอภาพทีมีความหนาแน่นสูง หรือประมาณ
50 % ของพื้นทีหน้าจอ มากว่าจอภาพทีมีความหนาแน่นต่า นอกจากนี้
ยังพบว่าในวิชาทีมีเนื้อหายาก ผู้เรียนจะชอบจอภาพ ทีมีความแน่นสูง
เนืองจากจอภาพทีมีความหนาแน่นขององค์ประกอบต่าง ๆ สูง จะมี
ข้อมูลทีช่วยให้ความเข้าใจเนื้อหาและแนวคิดหลักต่าง ๆ ชัดเจนและ
ต่อเนืองขึ้น
สีข้อความ เป็นองค์ประกอบหน้าจอ ทีช่วยกระตุ้นความน่าสนใจ
การ สีเป็นตัวกระตุ้นประสาทการรับรู้ทีส่าคัญ การใช้สีทีเหมาะสม
จะช่วยให้อ่านง่าย และสบายตา ผลงานวิจัยพบว่านักเรียนส่วนใหญ่
ชอบคู่อักษรสีขาว หรือเหลือง บนพื้นน้่าเงิน อักษรเขียวบนพื้นด่า และ
อักษรด่าบนพื้นเหลือง หากใช้พื้นสีเทา คู่สีทีผู้เรียนชอบ คือ สีฟ้า สีม่วง
และสีด่า สีทีชอบน้อยคือ ควรใช้พื้นหลังเป็นสีเข้มมากกว่าสีอ่อนเป็นพื้น
หลัง ซึงระยะยาวจะช่วยลดความล้าของสายตา ในการอ่านจอภาพอัน
เนืองมาจากความจ้าของสีพื้น
รูปแบบของตัวอักษรทีใช้ในการท่าเว็บไซต์
ตัวอักษรทีเราใช้งานกันอยู่ในปัจจุบันจะแบ่งออกเป็น 4 รูปแบบใหญ่ ๆ
คือ
1.Font แบบ Serif จะดูเป็นระเบียบ เป็นทางการ เหมาะจะใช้ใน
งานทีเป็นทางการ และต้องการความน่าเชือถือมากๆFont แบบ San
Serif จะอ่านง่าย ดูทันสมัยมากกว่าแบบอืน ๆ เหมาะจะใช้ในงานที
ต้องการ ความทันสมัยออกแนวไม่เป็นทางการมากนัก
3..Font แบบ Antique จะเหมาะกับงานทีต้องการแสดงความ
ชัดเจนของยุคสมัย หรือต้องการอามรณ์ย้อยยุคนิดหน่อย
4.Font แบบ Script เหมาะกังานทีไม่เป็นทางการ ต้องการความ
เป็นกันเองและดูสนุกสนานมากกว่าแบบอืนๆ หรือในบางกรณี Font
แบบนี้จะใช้ในงานทีต้องการข้อความทีดูเหมือนเป็นลายมือเขียน
วิธีเลือก Font ไปใช้ในงานออกแบบ
- 17. การเลือก Font ไปใช้ในงานออกแบบมีข้อควรค่านึงง่าย ๆ อยู่ 2 ข้อคือ
ความหมายต้องเข้ากัน หมายความว่า ความหมายของค่าและ
Font ทีเลือกใช้ควรจะไปด้วยกันได้ เช่น ค่าว่าน่ารักก็ควรจะใช้ Font
ทีดูน่ารักไปด้วย ไม่ควรใช้ Font ทีดูเป็นทางการอารมณ์ของฟอนต์ และ
อารมณ์ของงานต้องไปในทิศทางเดียวกัน เช่น งานทีต้องการความ
น่าเชือถือก็จะเลือกใช้ Font แบบ Serif ทีดูหนักแน่น น่าเชือถือ ส่วน
งานทีต้องการความฉูดฉาดอย่างโปสเตอร์ลดราคาก็ควรจะเลือกใช้
Font ทีเป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็น
ต้น
1. การวางต่าแหน่งตัวอักษร
มีข้อควรค่านึงถึงไว้ให้อยู่ 3 ข้อคือ
1.ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลง
ล่าง โดยมีรัศมีการกวาดสายตาตามล่าดับ ดังนั้นถ้าอยากให้อ่านง่าย
ควรจะวางเรียงล่าดับให้ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมา
ท่าให้เสียความหมายของข้อความไป
2.จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัว
ใหญ่ๆ อยู่เพียงชุดเดียว จึงจะเป็นจุดเด่นทีมองเห็นได้ง่าย ไม่สับสน
ส่วนจุดอืน ๆ ขนาดควรจะเล็กลงมาตามล่าดับความส่าคัญ
3.ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะท่าให้กลายเป็น
งานทีอ่านยากและชวนปวดศรีษะมากกว่าชวนอ่าน ถ้าจ่าเป็นจริง ๆ
แนะน่าให้ใช้ Font เดิมแต่ไม่ตกแต่งพวกขนาด, ความหนาหรือ
ก่าหนดให้เอียงบ้าง เพือเพิมความน่าสนใจไม่ให้งานดูน่าเบือแบบนี้จะ
ดีกว่า
- 19. วิชาการพัฒนางานบนเว็บ. (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 .
