หน่วยที่ 2 หลักการออกแบบเว็บไซ์

บทที่ 2

หลักการออกแบบเว็บไซต์

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

2.1 การวางโครงสร้างเว็บไซต์

    2.1.1 ความหมายของการวางโครงสร้างเว็บไซต์

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

รูปที่ 2.1 ตัอย่างการางโครงสร้างเว็บไซต์ 

2.1.2  หลักการออกแบบโครงสร้างเว็บไซต์ มีดังต่อไปนี้

            1.การกำหนดวัตถุประสงค์ (Target) คือ การกำหนดขอบเขตของเว็บไซต์ โยคำนึงถึงกลุ่มเป้าหมาย

2.การกำหนดวิเคราะห์สภาพปัญหา(Problem) คือ การวิเคราะห์ถึงสภาพปัญหาที่อาจจะเกิดขึ้น

3.การวางแผนการทำงาน (Plan)  คือ การนำวัตถุประสงค์และการวิเคราะห์สภาพปัญหาเพื่อเป็นแนวทางในการออกแบบเว็บไซต์

4.การดำเนินงาน(Action)  คือ การลงมือสร้างและพัฒนาเว็บไซต์ตามแผนการดำเนินงานที่วางไว้

5.ทดลองใช้งาน (Test)  คือ การทดสอบหรือการทดลองการใช้งานเว็บไซต์ก่อนให้ผู้ใช้งานเว็บไซต์ได้ใช้จริงเพื่อหาข้อบกพร่องของเว็บไซต์

6.แก้ไขปรับปรุง (Correct) คือ การนำข้อที่บกพร่องจากการทดลองใช้งานมาแก้ไขปรังปรุงก่อนให้ผู้ใช้งานเว็บไซต์ได้ใช้งานจริง

2.1.3  รูปแบบโครงสร้างเว็บไซต์

  การออกแบบโครงการสร้างเว็บไซต์ขึ้นอยู่กับลักษณะของข้อมูล ความเหมาะสมและความต้องการของกลุ่มเป้าหมาย โดยมีรูปแบบหลักๆ 4  รูปแบบ ดังต่อไปนี้

1.โครงสร้างแบบเรียงลำดับ (Sequential Structure ) คือ โครงสร้างพื้นฐานหรือโครงสร้างแบบลำดับขั้นตอนที่นิยมใช้กันทั่วไปเพราะง่ายต่อการจัดระบบข้อมูล

รูปที่ 2.2 โครงสร้างแบบเรียงลำดับ

2.โครงสร้างแบบลำดับขั้น  (   Hierarchical Structure)  คือ การจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหาออกเป็นส่วนต่างๆ และมีรายละเอียดย่อยๆในแต่ละเว็บเพจ

รูปที่ 2.3 โครงสร้างแบบลำดับชั้น

3.โครงสร้างแบบตาราง (Grid Structure) คือ การจัดระบบโครงสร้างที่มีความซับซ้อนมากกว่าโครงสร้างแบบลำดับขั้น โดยการออกแบบที่มีความยืดหยุ่น เพิ่มการเชื่อมโยงถึงกันได้

รูปที่ 2.4 โครงสร้างแบบตาราง

4.โครงสร้างแบบใยแมงมุม(Web Structure ) คือ โครงสร้างที่มีความยืดหยุ่นมากที่สุด โดยหน้าเว็บเพจทุกหน้าสามารถเชื่อมโยงหากันได้ทั้งหมด รวมทั้งสามารถเชื่อมโยงไปเว็บไซต์หรือลิงค์ภายนอก

  รูปที่ 2.5 โครงสร้างแบบใยแมงมุม

2.2 การกำหนดขนาดและการโหลดหน้าเว็บเพจที่แสดงผล

2.2.1 การกำหนดขนาดของเว็บเพจ

การกำหนดขนาดหน้าเว็บเพจในแต่ละหน้าควรกำหนดตามมาตรฐานหรือตามหลักความต้องการออกแบบเพราะการออกแบบเว็บเพจที่ได้ตามมาตรฐานสากลเป็นเว็บเพจที่สามารถแสดงผลได้อย่างเหมาะสมไม่มีขนาดเล็กหรือขนาดใหญ่จนเกินไป

ดังนั้น  การกำหนดหน้าเว็บเพจควรออกแบบให้เหมาะสมกับชิ้นงานและคำนึงถึงความต้องการของกลุ่มเป้าหมาย  เช่น การออกแบบหน้าเว็บเพจแบบเต็มหน้าจอ  สามารถใส่เนื้อหาได้จำนวนมากเป็นต้น

และปัจจุบันนี้การออกแบบหน้าเว็บเพจมีขนาดหลากหลายขึ้นอยู่ตามต้องการของผู้ใช้ โดยการกำหนดขนาดความกว้างของหน้าเว็บเพจนิยมใช้ขนาด 1024 PX และแบบเต็มหน้าจอ และการเลือกขนาดเว็บเพจขึ้นอยู่กับความเหมาะสมเนื้อหาหรือผู้ใช้งานเป็นหลัก

            2.2.2 การโหลดหน้าเว็บเพจเพื่อแสดงผล

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

1.สเปคเครื่องคอมพิวเตอร์

2.อินเทอร์เน็ตช้า

3.เว็บไซต์ที่ไม่คำนึงถึงการโหลดหน้าเพจเป็นต้น

รูปที่ 2.6 เว็บไซต์ที่ออกแบบโดยคำนึงถึงการโหลดหน้าเว็บเพจ

2.3 ระบบนำทางเว็บไซต์                                                                                            

 ระบบนำทางเว็บไซต์ หรือเรียกว่า เครื่องมือนำทาง (Navigator) คือ เครื่องมือที่เชื่อมโยงไปหน้าเว็บเพจต่างๆ เพื่อให้ผู้ใช้งานเข้าถึงเนื้อหาได้อย่างรวดเร็ว และไม่เกิดความสับสนในการเยี่ยมชมเว็บไซต์.

            2.3.1 องค์ประกอบของระบบนำทางเว็บไซต์

1.เครื่องมือนำทาง คือ เครื่องมือที่ทำหน้าที่ในการเชื่อมโยงไปหน้าเว็บเพจต่างๆ ตามผู้พัฒนาเว็บไซต์ได้กำหนด 

รูปที่ 2.7 เครื่องมือนำทางของเว็บไซต์

2.เครื่องมือบอกตำแหน่ง คือ เครื่องมือที่บอกตำแหน่งหน้าเว็บเพจที่ใช้งานอยู่เพื่อให้ผู้ใช้งานทราบสถานะการใช้งานปัจจุบัน

รูปที่ 2.8 เครื่องมือบอกตำแหน่ง

            2.3.2 คุณลักษณะที่ดีของระบบนำทางเว็บไซต์

1.สามารถมองตำแหน่งที่เห็นได้ชัดเข้าถึงได้ง่าย

2.มีข้อความกำกับชัดเจนเพื่อความรวดเร็วในการใช้งาน

3.อยู่ในตำแหน่งเดียวกันในทุกเว็บเพจ

4.บอกตำแหน่งที่กำลังใช้งาน

5.มีลิงค์ให้คลิกกลับหน้าหลัก Home Page เสมอ

6.มีการตอบสนองเมื่อนำเมาส์ไปชี้

7.จำนวนรายการพอเหมาะไม่มากจนเกินไป

2.4 การเตรียมข้อมูล

การเตรียมข้อมูลเพื่อนำไปใส่ในหน้าเว็บเพจเป็นสิ่งที่สำคัญและควรให้ความสำคัญกับเนื้อหารูปภาพ และภาพเคลื่อนไหวต่างๆ เพราะการนำข้อมูลเหล่านี้มาใส่ในหน้าเว็บเพจแล้ว ผู้ใช้สามารถเข้ามาเยี่ยมชมเว็บไซต์ได้.

            2.4.1 ข้อมูลในรูปแบบตัวอักษร

ข้อมูลในรูปแบบตัวอักษร คือ ข้อมูลที่อยู่ในรูปแบบของตัวอักษร เนื้อหา ข้อความ ซึ่งมีความสำคัญเป็นอย่างมาก เพราะตัวอักษรเป็นลายลักษณ์อักษรที่สามารถสื่อสารได้ด้วยการอ่านได้และเข้าใจกับคำสั่งนั้นๆ

2.4.2 ข้อมูลในรูปแบบรูปภาพ

ข้อมูลในรูปแบบรูปภาพ คือ ข้อมูลที่อยู่ในรูปแบบของไฟล์ภาพ ซึ่งไฟล์รูปภาพที่นิยมนำมาใช้ในการพัฒนาเว็บไซต์ ได้แก่ .JPEG .PNG .GIF เป็นต้น

JPEG คือ ไฟล์ที่ภาพถ่ายหรือไฟล์ภาพที่มีความชัด แต่พื้นหลังของภาพไม่มีความโปร่งใส

รูปที่ 2.9 รูปภาพ .JPEG

PNG คือ ไฟล์ภาพที่มีการตัดต่อดัดแปลง และกำหนดให้พื้นหลังเป็นโปร่งใส

รูปที่ 2.10 รูปภาพ .PNG

GIF คือ ไฟล์ภาพที่สามารถเคลื่อนไหวได้ นิยมทำเป็นป้ายโฆษณาบนเว็บ

รูปที่ 2.11 รูปภาพ .GIF

2.4.3 ข้อมูลในรูปแบบเสียง

ข้อมูลในรูปแบบเสียง คือ การนำไฟล์เสียงต่างๆ เข้ามาใส่ในหน้าเว็บเพจที่ต้องการ เพื่อสร้างความตื่นเต้นและสร้างบรรยากาศการเยี่ยมชมเว็บไซต์ เช่น เสียงเพลง วิทยุออนไลน์ เสียงพระ เป็นต้น

2.4.4 ข้อมูลในรูปแบบวีดีโอ

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

2.5 การใช้รูปภาพ

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

รูปที่ 2.12 การค้นหารูปภาพผ่าน www.google.com

2.6 การใช้สี

การสร้างและการพัฒนาเว็บไซต์ที่สามารถดึงดูดความสนใจจากผู้ใช้งานได้ ขึ้นอยู่กับการออกแบบที่สนองความต้องการของผู้เข้าใช้งานด้วยการออกแบบที่คำนึงถึงหลักความเป็นจริง ดังนั้น การเลือกสีจึงมีหลักเกณฑ์ในการออกแบบ โดยใช้หลักจิตวิทยาเข้ามาช่วยในการเลือกใช้สีให้เหมาะสมกับชิ้นงาน.

2.6.1 สีฟ้าและสีน้ำเงิน

สีฟ้าและสีน้ำเงินให้ความรู้สึกสงบ สดใส สุภาพ เคร่งขรึม รอบคอบ สง่างาม มีศักดิ์ศรีสูงศักดิ์ เป็นระเบียบ ถ่อมตน สามารถลดความตื่นเต้น และช่วยทำให้มีสมาธิ

รูปที่ 2.13 เว็บเพจที่เลือกใช้สีฟ้าและสีน้ำเงิน

2.6.2 สีส้ม

สีส้มให้ความรู้สึก ความอบอุ่น ความสดใส ร้อน มีชีวิตชีวา วัยรุ่น ความคึกคะนอง การปลดปล่อย ความเปรี้ยว ควรเลือกใช้ร่วมกับสีอื่นเพื่อไม่ให้เว็บเพจรู้สึกร้อนเกินไป

รูปที่ 2.14 เว็บเพจที่เลือกใช้สีส้ม

2.6.3 สีเหลือง

สีเหลืองเป็นสีแห่งการแผ่กระจาย อำนาจบารมี ความร่าเริง ความเบิกบานสดชื่น เร้าอารมณ์ และเรียกร้องความสนใจให้ความรู้สึกแจ่มใส ชีวิตใหม่ ความสดใหม่

รูปที่ 2.15 เว็บเพจที่เลือกใช้สีเหลือง

2.6.4 สีเขียว

สีเขียวเป็นสีที่ทำให้มีความรู้สึกร่มเย็น สร้างความรู้สึกเย็นสบาย ช่วยผ่อนคลายความเครียดได้ให้ความรู้สึก สงบ เงียบ ร่มรื่น การพักผ่อน การผ่อนคลาย ธรรมชาติ ความปลอดภัย ปกติ ความสุขความสุขุม เยือกเย็น

รูปที่ 2.16 เว็บเพจที่เลือกใช้สีเขียว

2.6.5 สีขาว

สีขาวให้ความรู้สึก แสงสว่าง อ่อนโยน บริสุทธิ์ สะอาด สดใส เบาบาง เปิดเผย การเกิดความรัก ความหวัง ความจริง ความเมตตา ความศรัทธา ความดีงาม

รูปที่ 2.17 เว็บเพจที่เลือกใช้สีขาว

2.6.6 สีเทา

สีเทาให้ความรู้สึก ความสงบ ความเงียบ สุภาพ เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา สุขุม ถ่อมตน แต่สร้างความรู้สึกหม่นหมองได้

รูปที่ 2.18 เว็บเพจที่เลือกใช้สีเทา

2.7 การใช้แบบอักษร

การเลือกใช้แบบอักษรเป็นองค์ประกอบหนึ่งที่ทำให้เว็บเพจมีความน่าสนใจเพิ่มขึ้น เช่น การทำเว็บเพจเกี่ยวกับวัฒนธรรมไทย ควรใช้แบบอักษรลายไทย และการเลือกใช้แบบอักษรควรเลือกใช้ให้เหมาะสมกับเนื้อหา และสามารถอ่านออกได้ง่ายขึ้นในปัจจุบันการออกแบบและสร้างเว็บเพจได้มีการนำแบบอักษรต่างๆ มาใช้ในการออกแบบเพื่อให้มีความสอดคล้องกับเนื้อหา โดยมีตัวอักษรจากเครื่อง (Font Default) และนิยมเลือกใช้