SlideShare a Scribd company logo
1 ทฤษฎีการออกแบบเว็บไซต์
2 ทฤษฎีการออกแบบเว็บไซต์
3 ทฤษฎีการออกแบบเว็บไซต์
4 ทฤษฎีการออกแบบเว็บไซต์
5 ทฤษฎีการออกแบบเว็บไซต์
6 ทฤษฎีการออกแบบเว็บไซต์
Web Site
7 ทฤษฎีการออกแบบเว็บไซต์
ความหมายของเว็บไซต์
(WEB SITE)
8 ทฤษฎีการออกแบบเว็บไซต์
ว็บไซต์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูล
เอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ
ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารต่าง ๆ
เหล่านี้ว่า เว็บเพจ (Web Page) และเรียกเว็บหน้าแรก
ของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) หรืออาจ
กล่าวได้ว่า เว็บไซต์ก็คือเว็บเพจอย่างน้อยสองหน้าที่มี
ลิงก์ (Links) ถึงกัน ตามหลักคำ�ว่า เว็บไซต์จะใช้สำ�หรับ
ผู้ที่มีคอมพิวเตอร์แบบเซิร์ฟเวอร์หรือจดทะเบียนเป็น
ของตนเองเรียบร้อยแล้วเช่น www.google.co.th ซึ่ง
เป็นเว็บไซต์ที่ให้บริการสืบค้นข้อมูลเป็นต้น
	 เว็บไซต์ (Web Site) ยังงเป็นศูนย์รวบรวม
ความรู้และแหล่งข้อมูลต่างๆ อาทิ เช่น ข่าวสาร
ประชาสัมพันธ์ บันเทิง กีฬา เป็นต้น ปัจจุบันเว็บไซต์
ได้เข้ามามีบทบาทในแวดวงธุรกิจแทบทุกชนิด ไม่ว่า
จะเป็นในรูปแบบของบริษัท ร้านค้า ชั้นนำ� ต่างๆทั่วไป
เหตุผลหนึ่งในการมีเว็บไซต์นั้น เพื่อเป็นการเพิ่มความ
น่าเชื่อถือให้กับธุรกิจนั้นๆ อีกทั้งเว็บไซต์ยังสามารถ
ตอบสนองและครอบคลุมผู้บริโภคหรือกลุ่มเป้าหมาย
ได้อย่างไม่มีขีดจำ�กัดอีกด้วย เพราะสามารถเข้าเยี่ยม
ชมข้อมูลเว็บซ์จากอินเตอร์เน็ตได้ทั่วโลก
เว็บไซต์ (Web Site)
เ
ความหมายของเว็บไซต์
9 ทฤษฎีการออกแบบเว็บไซต์
	 ขั้นตอนแรกในการขอเริ่มใช้บริการเว็บไซต์นั้น
นักลงทุนจะต้องไปติดต่อกับตัวแทนจำ�หน่าย เพื่อ
ขอจดทะเบียนชื่อเว็บไซต์ ( Domain name ) และ
พื้นที่ในจัดทำ�เว็บไซด์ ( hosting ) ก่อน โดยการจด
ทะเบียนขอใช้บริการเว็บไซด์นั้น จะมีสกุลดอทให้
เลือกหลากหลายประเภท
โดยปัจจุบันเทคโนโลยีในการพัฒนาเว็บสามารถแบ่ง
ออกได้เป็น 3 ยุคด้วยกัน คือ
	 1)/Static/Web/เป็นการเขียนเว็บไซต์แบบ
ธรรมดาที่สร้างด้วยภาษา HTML อย่างเดียวหรือ
อาจมีภาษาสคริปต์ทางฝั่งไคลเอนต์ (Client-Side
Script) เช่น JavaScript และ VBScript ร่วมด้วย ซึ่ง
ลักษณะของ Static Web จะมีเนื้อหาและรูปแบบ
คงที่ไม่มีการเปลี่ยนแปลงใด ๆ จนกว่าจะมีการแก้ไข
ข้อมูลที่เครื่องเซิร์ฟเวอร์
	 2)/Dynamic/Web/เป็นการพัฒนาต่อมา
จากยุคของ Static Web มีการใช้สคริปต์ทางฝั่ง
เซิร์ฟเวอร์ (Server-Side Script) มาช่วยในการ
เพิ่มความสามารถของเอกสาร HTML ในการติดต่อ
กับฝั่งเซิร์ฟเวอร์ โดยอาศัยการประมวลผลของเว็บ
เซิร์ฟเวอร์เพื่อทำ�งาน ลักษณะของ Dynamic Web
คือสามารถเปลี่ยนแปลงเนื้อหาหรือรูปแบบของ
เว็บไซต์ได้เรื่อย ๆ ตามวัน ตามเวลา หรือตามที่ผู้ใช้
ร้องขอ ซึ่งเทคโนโลยีที่ใช้พัฒนาเว็บแบบ Dynamic
10 ทฤษฎีการออกแบบเว็บไซต์
ในช่วงแรกคือ CGI (Common Gateway Interface) ภาษาที่ใช้เขียนสคริปต์นี้เช่น
C และ Perl ต่อมาได้มีการพัฒนาเทคโนโลยีที่มีการทำ�งานคล้าย ๆ CGI เพื่อทำ�งาน
ทางฝั่งเซิร์ฟเวอร์หลายค่าย อาทิเช่น ASP (Microsoft), PHP (Open Source) และ
JSP (Sun Microsystems)
	 3) Web Services คือแอพพลิเคชั่นหรือโปรแกรมที่ทำ�งานอย่างใดอย่างหนึ่ง
ในลักษณะให้บริการ โดยจะถูกเรียกใช้งานแอพพลิเคชั่นจากโปรแกรมอื่น ๆ คือ
PHP, ASP, JAVA และ Python ผ่านทางหน้าเว็บ จุดประสงค์หลักของ Web Ser-
vices คือการทำ�ให้เครื่องคอมพิวเตอร์ต่างชนิดกัน สามารถติดต่อและแลกเปลี่ยน
ข้อมูลกันได้ ถึงแม้จะใช้โปรแกรมทำ�งานหรือระบบปฏิบัติการที่แตกต่างกัน โดยจะ
ใช้ภาษา XML เป็นภาษากลางในการสื่อสารผ่านเครื่องคอมพิวเตอร์นั้น ๆ
11 ทฤษฎีการออกแบบเว็บไซต์
12 ทฤษฎีการออกแบบเว็บไซต์
ขั้นตอนการพัฒนาเว็บไซต์
1.	 กำ�หนดวัตถุประสงค์ของเว็บไซต์ ว่าจะจัดทำ�เว็บไซต์
เกี่ยวกับอะไร เช่นท่องเที่ยว บันเทิง เป็นต้น
2.	 กำ�หนดกลุ่มผู้ชมเป้าหมาย เพื่อที่จะได้จัดโทนสี รูปภาพ
กราฟิก หน้าตาของเว็บเพจให้เหมาะสมกับกลุ่มเป้าหมาย
3.	 เตรียมแหล่งข้อมูล เพื่อที่จะได้นำ�เนื้อหาสาระมานำ�เสนอ
ได้อย่างครบถ้วนและสมบูรณ์
13 ทฤษฎีการออกแบบเว็บไซต์
4.	 เตรียมทักษะหรือบุคลากร เนื่องจากเว็บไซต์ที่มีเนื้อหา
มากๆ ก็จำ�เป็นต้องมีบุลลากรเพื่อพัฒนาเว็บไซต์ ไม่ว่าจะ
เป็นการดูแลเว็บเซิร์ฟเวอร์ กราฟิกดีไซน์ ทีมีความรู้ความ
สามารถเฉพาะด้าน เป็นต้น
5.	 เตรียมทรัพยากรต่าง ๆ เท่าที่มีความจำ�เป็น เช่น
โปรแกรมต่างๆ ทั้งในด้านระบบฐานข้อมูล และมัลติมีเดีย
โปรแกรมสร้างภาพเคลื่อนไหว เป็นต้น
14 ทฤษฎีการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
15 ทฤษฎีการออกแบบเว็บไซต์
การวางแผน
การเตรียมข้อมูล
การเตรียมสิ่งต่าง ๆ ที่จำ�เป็น
การจัดโครงสร้างข้อมูล
โครงสร้างและสารบัญของเว็บไซต์
การออกแบบเว็บไซต์
ส่วนประกอบของหน้าเว็บเพจ
16 ทฤษฎีการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
	 ลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ
เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนา
เว็บไซต์
ห
	 1. การวางแผน
การวางแผนนับว่ามีความสำ�คัญมากในการสร้างเว็บไซต์ เพื่อให้การทำ�งานใน
ขั้นตอนต่าง ๆ มีแนว ทางที่ชัดเจนและสามารถปฏิบัติได้ตามที่ตั้งเป้าไว้ ซึ่ง
ประกอบด้วย
		 1.1 การกำ�หนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำ�หนด
เนื้อหาและจุดประสงค์ของเว็บไซต์ที่จะสร้าง นับเป็นสิ่งสำ�คัญอย่างมากในการ
เริ่มต้นสร้างเว็บไซต์เลยทีเดียว เพื่อให้เห็นภาพว่าเราต้องการนำ�เสนอข้อมูล
แบบใด เช่น เว็บไซต์เพื่อให้ข้อมูลข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า
เป็นต้น เมื่อสามารถกำ�หนดจุดประสงค์ของเว็บไซต์ได้แล้ว เงื่อนไขเหล่านี้จะ
เป็นตัวกำ�หนดโครง สร้างรูปแบบรวมถึงหน้าตา และสีเว็บไซต์ของเราด้วย
		 1.2 การกำ�หนดกลุ่มเป้าหมาย
เพื่อให้การสร้างและออกแบบเว็บไวต์ได้รับความนิยม การกำ�หนดกลุ่มเป้า
หมายในการเข้าชมเว็บไซต์ก็นับว่ามีส่วนสำ�คัญไม่น้อย เช่น เว็บไซต์สำ�หรับ
เยาวชน นักเรียน นักศึกษาในการค้นหาข้อมูล หรือเว็บไซต์สำ�หรับบุคคลทั่วไป
ที่เข้าไปใช้บริการต่าง ๆ เป็นต้น
17 ทฤษฎีการออกแบบเว็บไซต์
	 2. การเตรียมข้อมูล
เนื้อหาหรือข้อมูลจัดว่าเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ และต้อง
ทราบว่าข้อมูลข่าวสารต่าง ๆ สามารถนำ�มาจากแหล่งใดบ้าง เช่น การคิดนำ�เสนอ
ข้อมูลด้วยตัวเอง หรือนำ�ข้อมูลที่น่าสนใจมาจากสื่ออื่น เช่น หนังสือพิมพ์ แมกกาซีน
เว็บไซต์ และที่สำ�คัญ ขออนุญาตเจ้าของบทความก่อนเพื่อป้องกันเรื่องลิขสิทธิ์ด้วย
	 3. การเตรียมสิ่งต่าง ๆ ที่จำ�เป็น
ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำ�หรัสร้าง
เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝาก
เว็บไซต์ (Web Hosting) เป็นต้น
	 4. การจัดโครงสร้างข้อมูล
เมื่อได้ข้อมูลต่าง ๆ เช่น กำ�หนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำ�หนดกลุ่ม
เป้าหมาย การเตรียมข้อมูล การเตรียมสิ่งต่าง ๆ ที่จำ�เป็นจากขั้นแรกเรียบร้อยแล้ว
ในขั้นตอนนี้ เราจะจัดระบบเพื่อใช้เป็นกรอบสำ�หรับการออกแบบและดำ�เนินการใน
ขั้นตอนต่อไป ซึ่งมีรายละเอียด ดังนี้
	 •โครงสร้างและสารบัญของเว็บไซต์
	 •การใช้ระบบนำ�ผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบ
นำ�ทาง (Navigation)
	 •องค์ประกอบที่ต้องนำ�มาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ
	 •การกำ�หนดรูปแบบและลักษณะของเว็บเพจ
	 •การกำ�หนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำ�มาใช้ในเว็บไซต์
	 •การบริการเสริมต่าง ๆ
	 •การออกแบบเว็บไซต์
18 ทฤษฎีการออกแบบเว็บไซต์
	 นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิก
ของหน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ
Fireworks ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น
ชื่อเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น
ในการออกแบบเว็บไซต์นั้นยังต้องคำ�นึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ
ที่ไม่ใช่ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้น
กรอบเพื่อความสวยงามและดึง ดูดผู้เยี่ยมชมด้วย
	 5. โครงสร้างและสารบัญของเว็บไซต์
	 การใช้ระบบนำ�ผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่า
ระบบนำ�ทาง (Navigation) องค์ประกอบที่ต้องนำ�มาใช้ เช่น สื่อมัลติมีเดีย ภาพ
กราฟิก แบบฟอร์มต่าง ๆการกำ�หนดรูปแบบและลักษณะของเว็บเพจ การกำ�หนด
ฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำ�มาใช้ในเว็บไซต์ การบริการเสริมต่าง
ๆ หลักการออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจ สามารถทำ�ได้หลาย
ระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมาย
ที่ต้องการนำ�เสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่น และนำ�เสนอข้อมูลเกี่ยวกับ
ความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บที่หลากหลายใช้ลูกเล่น
ได้มากกว่าเว็บที่นำ�เสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ ทั้งนี้หลักการออกแบบ
เว็บเพจ สามารถแบ่งได้ 3 ลักษณะ คือ
19 ทฤษฎีการออกแบบเว็บไซต์
	 1. แบบลำ�ดับขั้น ( Hierarchy ) เป็นการจัด
แสดงหน้าเว็บเรียงตามลำ�ดับกิ่งก้าน แตกแขนงต่อเนื่อง
ไปเหมือนต้นไม้กลับหัว เหมาะสำ�หรับการนำ�เสนอ
ข้อมูล ที่มีการแบ่งเป็นหมวดหมู่ที่ไม่มากนัก และมี
ข้อมูลย่อยไม่ลึกมาก เช่นเว็บไซต์แนะนำ� ประวัติส่วนตัว
ที่มีข้อมูล 4 - 5 หน้าเป็นต้น
	 2. แบบเชิงเส้น ( Linear ) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทาง
เดียว เหมาะสำ�หรับการนำ�เสนอข้อมูลที่เป็นรูปภาพ เช่นเว็บไซต์นำ�เสนอสไลด์จาก
Microsoft PowerPoint
	 3. แบบผสม ( Combination ) เป็นการ
จัดหน้าเว็บชนิดผสมระหว่างแบบลำ�ดับขั้น และ
แบบเชิงเส้น มักจะเป็นแบบที่นิยมใช้กันอย่าง
แพร่หลายในปัจจุบัน เนื่องจากสามารถควบคุม
การนำ�เสนอและการเรียกดูได้สะดวก และ
รวดเร็ว
20 ทฤษฎีการออกแบบเว็บไซต์
	 6. การออกแบบเว็บไซต์
นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของ
หน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ Fire-
works ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อ
เว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น
ในการออกแบบเว็บไซต์นั้นยังต้องคำ�นึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ
ที่ไม่ใช่ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้น
กรอบเพื่อความสวยงามและดึง ดูดผู้เยี่ยมชมด้วย
	 7. ส่วนประกอบของหน้าเว็บเพจ
เราสามารถจำ�แนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้
		1. ส่วนหัว (Page Header) น่าจะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็น
ส่วนที่แสดงชื่อ
เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สำ�หรับข้ามไปยังหน้าเว็บอื่น
		2. ส่วนเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่ง
เป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพ
เคลื่อนไหว เป็นต้น
		3. ส่วนท้าย (Page Footer) จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ
ส่วนมากใช้สำ�หรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมล
แอดเดรสของผู้ดูแลเว็บไซต์สำ�หรับติดต่อกับทางเว็บไซต์
21 ทฤษฎีการออกแบบเว็บไซต์
	 8. แนวคิดในการออกแบบ
ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่าง การดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพื่อศึกษาเป็น
ตัวอย่างนั้น นับเป็นวิธีการที่ง่ายที่สุด แต่ก็ควรนำ�ไปประยุกต์ใช้ให้เหมาะสมกับเนื้อหา
และกลุ่มเป้าหมายของเราด้วยศึกษาจากสื่อสิ่งพิมพ์ในรูปแบบต่าง ๆ สื่อสิ่งพิมพ์ในที่
นี้ ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบรชัวร์ หรือหนังสือบางเล่มที่มีรูปแบบและ
จุดดึงดูดความสนใจ สามารถนำ�มาประยุกต์ใช้ในเว็บไซต์ของเราได้เช่นกัน
องค์ประกอบที่ควรมีในเว็บเพจ
	 องค์ประกอบทั่วไป
1. ชื่อของเว็บเพจ (Title)
2. ประวัติและรูปภาพผู้จัดทำ� (Profile/Picture)
3. การเชื่อมโยงภายในและภายนอกเว็บ (Links)
4. การแสดงที่อยู่ของเว็บ : URL
5. วัน/เวลาที่สร้างเว็บ (Date/Time)
6. การปรับปรุงครั้งล่าสุด (Update)
7. ผู้จัดทำ�เว็บ : (created by)
8. การสงวนลิขสิทธิ์ (Copy right)
9. การติดต่อผู้จัดทำ�เว็บ (contract /e-mail)
10. สถานที่ติดต่อของเว็บ (Address)
11. บราวเซอร์ที่เหมาะสมสำ�หรับการชม (Browser )
12. ขนาดหน้าจอที่เหมาะสมในการชม (Bested View)
13. คำ�ถามที่ถูกถามบ่อย FAQ (Frequency Asked Question)
14. ความช่วยเหลือ (Help)
22 ทฤษฎีการออกแบบเว็บไซต์
องค์ประกอบพิเศษ
1. สมุดเยี่ยม (Guest book)
2. ฝากข้อความ (Web board)
3. กระดานข่าว (Bulletin Board)
4. กระทู้ ( Webboard )
5. แบบสำ�รวจ (Web poll)
6. จำ�นวนผู้เข้าชม (Counter)
7. ห้องสนทนา (Chat Room)
8. สถิติทุกประเภท (Web state)
9. เทคนิคพิเศษด้วยโปรแกรมสคริปต์ (Java script, VBscript , cgi,asp,php)
10. โปรแกรมพิเศษสนับสนุน (Download)
11. สไลด์สรุปบรรยาย (Presentation)
23 ทฤษฎีการออกแบบเว็บไซต์
24 ทฤษฎีการออกแบบเว็บไซต์
หลักและทฤษฎีในการออกแบบ
องค์ประกอบของงานกราฟิก
ทฤษฎีสีและการสื่อความหมายในอารมณ์ต่างๆ
25 ทฤษฎีการออกแบบเว็บไซต์
สีและการนำ�ไปใช้
ตัวอักษร
การจัดองค์ประกอบ
26 ทฤษฎีการออกแบบเว็บไซต์
หลักและทฤษฎีในการออกแบบ
องค์ประกอบของงานกราฟิก
งค์ประกอบหลัก ๆ ในงานกราฟิกจะแบ่งออกได้ คือ เส้น, รูปร่าง, รูปทรง, น้ำ�
หนัก, พื้นผิว, ที่ว่าง, สี และตัวอักษร
1.เส้น (Line)
อ
ลักษณะของเส้น (Line) แบบต่าง ๆ
	 ตามตารางมาตรฐานแล้วจะพูดถึงเรื่องนี้ว่าเป็นเรื่องของจุด เส้น ระนาบ แต่
ถ้าจะเอาให้เข้าใจง่าย ๆ ก็เพียงแต่เข้าใจว่าความหมายของเส้นก็คือ การที่จุดหลาย
ๆ จุด ถูกนำ�มาวางต่อเนื่องจนกลายเป็นเส้นรูปทรงต่าง ๆ ขึ้นมา รูปทรงของเส้นที่
จะสื่อออกมาถึงความรู้สึกที่แตกต่างกันออกไป
•	 เส้นแนวนอน ให้ความรู้สึกสงบ ราบเรียบ
•	 เส้นตรงแนวตั้ง ให้ความรู้สึกมั่นคงแข็งแรง
•	 เส้นทแยง ให้ความรู้สึกไม่มั่นคง รวดเร็ว แสดงถึงเคลื่อนไหว
•	 เส้นตัดกัน ให้ความรู้สึกประสาน แข็งแกร่ง หนาแน่น
•	 เส้นโค้ง ให้ความรู้สึกอ่อนช้อย อ่อนน้อม
•	 เส้นประ ให้ความรู้สึก โปร่ง ไม่สมบูรณ์ หรือในบางกรณีอาจจะใช้เป็น
สัญลักษณ์ในการแสดงถึงส่วนที่ถูกซ่อนเอาไว้
27 ทฤษฎีการออกแบบเว็บไซต์
•	 เส้นโค้งก้นหอย ให้ความรู้สึกเคลื่อนไหวไม่มีที่สิ้นสุด
•	 เส้นโค้งแบบคลื่น ให้ความรู้สึกถึงการเคลื่อนไหวอย่างนิ่มนวล
•	 เส้นซิกแซ็ก ให้ความรู้สึก น่ากลัว อันตราย
ส่วนใหญ่แล้วเส้นจะมีอยู่ทุกๆ งานออกแบบ โดยถูกนำ�ไปใช้ร่วมกับองค์ประกอบ
ต่างๆ จนสื่อถึงอารมณ์ของผลงานออกมาได้ ในแบบที่ต้องการ ดังนั้น การเลือกใช้
เส้นเข้ามาเป็นส่วนประกอบในงานของเราจึงถือว่าเป็นสิ่งที่ต้องคำ�นึงถึงเป็นอันดับ
แรก
2. รูปร่าง (Shape), รูปทรง (Form) ,น้ำ�หนัก (Value)
รูปร่าง :
เป็นองค์ประกอบต่อเนื่องมาจากเส้น
เกิดจากการนำ�เส้นแบบต่าง ๆ มาต่อ
กันจนได้รูปร่าง 2 มิติที่มีความกว้าง
และความยาว (หรือความสูง) ในทางศิลปะจะแบ่งรูปร่างออกเป็น 2 แบบคือ รูป
ร่างที่คุ้นตา แบบที่เห็นแล้วรู้เลยว่านั่นคืออะไร เช่นดอกไม้ หรือคน และอีกแบบ
หนึ่งจะเป็นรูปร่างแบบฟรีฟอร์ม เป็นแนวที่ใช้รูปร่างสื่อความหมายที่จินตนาการไว้
ออกมา ไม่มีรูปทรงที่แน่นอน แต่ดูแล้วเกิดจินตนาการถึงอารมณ์ที่ต้องการสื่อได้
	 รูปทรง : เป็นรูปร่างที่มิติเพิ่มขึ้นมากลายเป็นงาน 3 มิติคือ มีความลึกเพิ่ม
เข้ามาด้วย
	 น้ำ�หนัก : เป็นส่วนที่มาเสริมให้ดูออกว่ารูปทรงมีน้ำ�หนักขนาดไหนเบา หรือ
หนัก ทึบ หรือโปร่งแสง น้ำ�หนักจะเกิดจากการเติมสีและแสงแรเงาลงไปในรูปทรง
จนได้ผลลัพธ์ออกมาตามที่ต้องการ
28 ทฤษฎีการออกแบบเว็บไซต์
ในการทำ�งานกราฟิกรูปร่างจะมีผลอย่างมากต่ออารมณ์ของงาน เช่น ถ้าต้องการ
งานที่อารมณ์ผู้หญิงจัด ๆ เพียงแค่ใส่รูปของดอกไม้ลงไปก็จะสามารถแสดงอารมณ์
ได้อย่างชัดเจน หรือในงานที่ต้องการให้มีมิติมากขึ้นก็อาจจะเป็นรูปทรงของดอกไม้
ในมุมมองที่แปลกตา ก็จะสามารถสื่ออารมณ์ที่ต้องการออกไปได้พร้อมกับเป็นการ
สร้างความน่าสนใจเพิ่มขึ้นมาอีกด้วย
	 3.พื้นผิว (Texture)
	 ในงานออกแบบกราฟิก พื้นผิวจะเป็นอีกหนึ่งองค์ประกอบที่ช่วยสื่ออารมณ์
ของงานออกมาได้ชัดเจนมากขึ้น เช่น ถ้าเราเลือกพิมพ์งานลงในกระดาษ Glossy
ที่เงาและแวววาว งานนั้นจะสื่อกอกไปได้ทันทีว่า “หรู มีระดับ” หรือ ถ้าเราใส่
ลวดลายที่ดูคล้าย ๆ สนิม หรือรอยเปื้อนลงไปในงานก็จะสื่อได้ทันทีถึง “ความ
เก่า” ดังนั้นในการทำ�งาน นักออกแบบจึงควรเลือกสร้างพื้นผิวทั้งในองค์ประกอบ
ต่าง ๆ ที่ใส่ลงไปในภาพ รวมทั้งวัสดุที่ใช้พิมพ์งานดังกล่าวลงไป ก็จะสามารถช่วย
สื่อความหมายที่ต้องการได้อย่างเหมาะสม
29 ทฤษฎีการออกแบบเว็บไซต์
	 4.ที่ว่าง (Space)
	 อาจจะจะเกิดจากความตั้งใจหรือไม่ตั้งใจของนักออกแบบก็ได้ ที่ว่างไม่ได้
หมายความถึงพื้นที่ว่างเปล่าในงานเพียงอย่างเดียว แต่หมายถึงรวมไปถึงพื้นที่ที่
ไม่สำ�คัญหรือ Background ด้วย ในการออกแบบงานกราฟิกที่ว่างจะเป็นตัวช่วย
ในงานดูไม่หนักจนเกินไป และถ้าควบคุมพื้นที่ว่างนี้ให้ดี ๆ ที่ว่างก็จะเป็นตัวที่ช่วย
เสริมจุดเด่นให้เห็นได้ชัดเจนมากขึ้น
	 5. สี (Color)
สีของงานกราฟิก ถือเป็นหัวใจหลักสำ�คัญเลยก็
ว่าได้ เพราะการเลือกใช้สีจะแสดงถึงอารมณ์ที่
ต้องการได้ชัดเจนมากกว่าส่วนประกอบอื่น ๆ
ทั้งหมด เช่น สีโทนร้อน สำ�หรับงานที่ต้องการ
ความตื่นเต้น ท้าทาย หรือสีโทนเย็นสำ�หรับงาน
ต้องการให้ดูสุภาพ สบาย ๆ สำ�หรับเรื่องสีเป็นเรื่อง
ที่ต้องพูดถึงละเอียดมากกง่าหัวข้ออื่น ๆ ดังนั้นจึง
ขอยกไปอธิบายไว้เป็นเรื่องใหญ่ ๆ ในหัวข้อต่อไป
30 ทฤษฎีการออกแบบเว็บไซต์
	 6.ตัวอักษร (Type)
	 ตัวอักษรเป็นสิ่งสำ�คัญไม่เป็นรองใคร เมื่อต้องทำ�งานกราฟิกดีไซน์ ในเรื่อง
งานกราฟิกที่ดีบางงาน นักออกแบบอาจจะใช้เพียงแค่ตัวอักษรและสีเป็นส่วน
ประกอบเพียงสองอย่าง เพื่อสร้างสรรค์งานที่สามารถสื่อความหมายออกมาได้ใน
ดีไซน์ที่สวยงาม ดังนั้น เรื่องนี้จะต้องยกไปอธิบายให้ละเอียดมากขึ้นในหัวข้อใหญ่
ๆ ต่อไปจากเรื่องสี
ทฤษฎีสีและการสื่อความหมายในอารมณ์ต่างๆ
	 ถ้าจะรู้จักสีให้ลึกซึ้งถึงขั้นเลือกใช้ได้อารมณ์ที่ต้องการได้ ก็ต้องมาทำ�ความ
เข้าใจกับ 3 เรื่องเหล่านี้ คือ สีเกิดจากอะไร, แต่ละสีมีความหมายอย่างไร และ
เทคนิคการนำ�สีไปใช้ให้ได้อย่างใจต้องการทำ�อย่างไรกันก่อน
สีเกิดจากอะไร?
ในปัจจุบันแหล่งกำ�เนิดสีจะมีอยู่ 3 ชนิดคือ
	 สีที่เกิดจากแสง เกิดจากการหักเหของ
แสงผ่านแท่งแก้วปริซึมมี 3 สีคือ สีแดง (Red),
สีเขียว (Green) และสีน้ำ�เงิน (Blue) เรียกรวม
กันว่า RGB นำ�มาผสมกันจนเกิดเป็นสีสันต่าง
ๆ มากมาย ตัวอย่างอุปกรณ์ที่ใช้แหล่งกำ�เนิด
สีแบบนี้ เช่น โทรทัศน์หรือจอคอมฯ ของเรา
นั่นเองสีที่เกิดจากแสง RGB
31 ทฤษฎีการออกแบบเว็บไซต์
	 สีเกิดจากหมึกสีในการพิมพ์ เกิดจาก
การผสมหมึกพิมพ์ทั้ง 4 สีในเครื่องพิมพ์คือ สี
ฟ้า, สีม่วงแดง, สีเหลือง และสีดำ� เรียกรวม
กันว่า CMYK จนได้ออกมาเป็นสีสันต่าง
ๆ ตามที่ต้องการ ในการทำ�งานกราฟิก ถ้า
หากว่าเป็นงานที่นำ�ไปพิมพ์ตามแท่นพิมพ์แล้ว
นักออกแบบก็ควรจะเลือกใช้โหมดสีแบบนี้ทุก
ครั้ง เพื่อให้ได้ผลลัพธ์ที่ออกมาตรงกับที่เห็น
ในจอคอมฯ ที่ทำ�งานอยู่
สีเกิดจากหมึกสีในการพิมพ์ CMYK
•	 สีที่เกิดจากธรรมชาติเป็นสีที่ได้จากธรรมชาติ จากกระบวนการสังเคราะห์
ทางเคมี 3 สีคือ สีแดง สีเหลืองและสีน้ำ�เงิน หลังจากนั้นจึงนำ�มาผสมกันจนเกิด
เป็นสีอื่นๆ แหล่งกำ�เนิดสีแบบที่เราเรียนกันมาในคลาสศิลปะตั้งแต่เด็กจนโต ที่
เรียกกันว่าแม่สีก็คือสีแบบนี้นั่นเอง
	 การผสมสีไว้ใช้งานจะใช้งานจะใช้วิธีผสมจากสีที่เกิดจากสีที่เกิดธรรมชาติ
โดยเริ่มผสมจากแม่สี หรือสีขั้นที่หนึ่ง ไปจนเป็นสีขั้นที่สองและขั้นที่สามตาก
ลำ�ดับภาพแต่ละสีมีความหมายอย่างไร?
สีที่เกิดจากธรรมชาติเป็นสีที่ได้จากธรรมชาติ
32 ทฤษฎีการออกแบบเว็บไซต์
	 หลังจากรู้จักการผสมสีกันไปแล้ว ต่อไปก็จะต้องมารู้จักกับจิตวิทยาของสีที่
จะมีผลต่ออารมณ์ของผู้พบเห็นกันสีอะไรให้ความรู้สึกอย่างไรบ้าง เราจะมาดูกัน
ตามรายละเอียดต่อไปนี้
•	 สีแดง ให้ความรู้สึกอันตราย เร่าร้อน รุนแรง มั่นคง อุดมสมบูรณ์
•	 สีส้ม ให้ความรู้สึกสว่าง เร่าร้อน ฉูดฉาด
•	 สีเหลือง ให้ความรู้สึกสว่าง สดใส สดชื่น ระวัง
•	 สีเขียว ให้ความรู้สึกงอกงาม พักผ่อน สดชื่น
•	 สีน้ำ�เงิน ให้ความรู้สึกสงบ ผ่อนคลาย สง่างาม ทึม
•	 สีม่วง ให้ความรู้สึกหนัก สงบ มีเลศนัย
•	 สีน้ำ�ตาล ให้ความรู้สึกเก่า หนัก สงบเงียบ
•	 สีขาว ให้ความรู้สึกบริสุทธิ์ สะอาด ใหม่ สดใส
•	 สีดำ� ให้ความรู้สึกหนัก หดหู่ เศร้าใจ ทึบตัน
•	 สีทองเงินและสีมันวาว แสดงถึงความรู้สึกมั่นคง
•	 สีดำ�กับสีขาว แสดงถึงความรู้สึกทางอารมณ์ที่ถูกกดดัน
•	 สีเทาปานกลาง แสดงถึงความนิ่งเฉย สงบ
•	 สีเขียวแก่ผสมสีเทา แสดงถึงความสลด รันทดใจ ชรา
33 ทฤษฎีการออกแบบเว็บไซต์
ตัวอย่างภาพที่ออกแบบโดยการเลือกใช้สีต่าง ๆ
	 ความรู้สึกเกี่ยวกับสีที่กล่าวมาจะเป็นความรู้สึกแบบกลาง ๆ ที่เป็นส่วนใหญ่
ในโลก แต่นอกจากที่กล่าวมาแล้ว ในบางพื้นที่หรือบางวัฒนธรรม อิทธิพลของ
สีจะแตกต่างกันออกไปตามประสบการณ์ของแต่ละบุคคล วัฒนธรรม ประเพณี
ขนบธรรมเนียม หรือค่านิยมของแต่ละกลุ่มชน
	 นอกจากแต่ละสีจะสร้างความรู้สึก
ด้วยตนเองแล้ว เมื่อนำ�มาใช้ร่วมกันเรา
ยังสามารถแบ่งสีออกเป็น 2 วรรณะ เพื่อ
สร้างอารมณ์ที่แตกต่างกันออกไปเมื่อใช้
งานร่วมกันได้อีก
การแบ่งสีออกเป็นสีโทนร้อนและสีโทนเย็น
34 ทฤษฎีการออกแบบเว็บไซต์
•	 สีทีอยู่ในวรรณะร้อน (Warm Tone Color) ได้แก่ สีเหลืองส้ม สีส้ม สีแดง และ
สีม่วงแดง สีกลุ่มนี้เมื่อใช้ในงานจะรู้สึกอบอุ่น ร้อนแรง สนุกสนาน
•	 สีที่อยู่ในวรรณะเย็น (Cool Tone Color) ได้แก่ สีเขียว สีฟ้า สีม่วงคราม สี
กลุ่มนี้เมื่อใช้งานจะได้ความรู้สึกสดชื่น เย็นสบาย
สีและการนำ�ไปใช้
	 เทคนิคการนำ�สีไปใช้งานมีอยู่มากมายหลายวิธี แต่ทุกวิธีจะชี้ไปที่
วัตถุประสงค์เดียวหลัก ๆ คือ ใช้สีเพิ่มความโดดเด่นให้กับจุดเด่นในภาพ และใช้สี
ตกแต่งส่วนอื่น ๆ ของภาพให้ได้ภาพรวมออกมาในอารมณ์ที่ต้องการ
เทคนิคการเลือกสีจะมีสูตรสำ�เร็จให้เลือกใช้งานอยู่บ้าง คือ วิธีโยงความสัมพันธ์
จากวงล้อสี ก่อนนะทำ�งานทุกครั้ง และนำ�ว่าให้เปิดไฟล์วงล้อสีขึ้นมา แล้วเลือกสีห
ลัก ๆ สำ�หรับใช้ในการทำ�งานก่อน
35 ทฤษฎีการออกแบบเว็บไซต์
เทคนิคการเลือกใช้สีแบบสูตรสำ�เร็จจะมีอยู่หลายรูปแบบ แต่แบบที่นิยมให้งานกัน
เป็นหลักจะมีอย่า 4 รูปแบบ คือ
•	 Mono หรือเอกรงค์ จะเป็นการใช้สีที่
ไปในโทนเดียวกันทั้งหมด เช่น จุดเด่นเป็นสี
แดง สีส่วนที่เหลือก็จะเป็นสีที่ใกล้เคียงกับสี
แดง โดยใช้วิธีลดน้ำ�หนักความเข้มของสีแดง
ลงไป
•	 Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรงข้ามกันในวงจร
สีเช่น สีฟ้าจะตรงข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสีเขียว สามารถนำ�มาใช้งาน
ได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดีและไม่ดี หากไม่รู้หลักพื้นฐานในการใช้
งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ควรใช้ในพื้นที่ปริมาณเท่ากันในงาน ควรใช้สีใด
สีหนึ่งจำ�นวน 80% อีกฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นที่
ของงานโดยรวม จะทำ�ให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่นของภาพ
36 ทฤษฎีการออกแบบเว็บไซต์
•	 Triad คือ การเลือกสีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่ามาใช้งาน
•	 Analogic หรือสีข้างเคียงกัน การเลือกสีใดสีหนึ่งขึ้นมาใช้งานพร้อมกับสีที่อยู่ติด
กันอีกข้างละสี หรือก็คือสีสามสีอยู่ติดกันในวงจรสีนั่นเอง
37 ทฤษฎีการออกแบบเว็บไซต์
ตัวอักษร
ตัวอักษรที่เราใช้งานกันอยู่ในปัจจุบันจะแบ่งออก
เป็น 4 รูปแบบใหญ่ ๆ คือ
•	 Font แบบ Serif จะดูเป็นระเบียบ เป็น
ทางการ เหมาะจะใช้ในงานที่เป็นทางการ และ
ต้องการความน่าเชื่อถือมากๆ
•	 Font แบบ San Serif จะอ่านง่าย ดูทัน
สมัยมากกว่าแบบอื่น ๆ เหมาะจะใช้ในงานที่
ต้องการ ความทันสมัยออกแนวไม่เป็นทางการ
มากนัก
•	 Font แบบ Antique จะเหมาะกับงาน
ที่ต้องการแสดงความชัดเจนของยุคสมัย หรือ
ต้องการอามรณ์ย้อยยุคนิดหน่อย
•	 Font แบบ Script เหมาะกังานที่ไม่
เป็นทางการ ต้องการความเป็นกันเองและดู
สนุกสนานมากกว่าแบบอื่นๆ หรือในบางกรณี
Font แบบนี้จะใช้ในงานที่ต้องการข้อความที่ดู
เหมือนเป็นลายมือเขียน
38 ทฤษฎีการออกแบบเว็บไซต์
หลังจากรู้จัก Font กันดีขึ้นแล้ว ในหัวข้อต่อไปเราจะมาพูดถึงวิธี
เลือกใช้งาน Font ให้เหมาะสมกับงานออกแบบกัน
วิธีเลือก Font ไปใช้ในงานออกแบบ
การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคำ�นึงง่าย ๆ อยู่ 2 ข้อคือ
	 1. ความหมายต้องเข้ากัน หมายความว่า ความหมายของคำ�และ Font ที่
เลือกใช้ควรจะไปด้วยกันได้ เช่น คำ�ว่าน่ารักก็ควรจะใช้ Font ที่ดูน่ารักไปด้วย ไม่
ควรใช้ Font ที่ดูเป็นทางการดังภาพตัวอย่าง
	 2. อารมณ์ของฟอนต์ และอารมณ์ของงานต้องไปในทิศทางเดียวกัน เช่น
งานที่ต้องการความน่าเชื่อถือก็จะเลือกใช้ Font แบบ Serif ที่ดูหนักแน่น น่าเชื่อ
ถือ ส่วนงานที่ต้องการความฉูดฉาดอย่างโปสเตอร์ลดราคาก็ควรจะเลือกใช้ Font
ที่เป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็นต้น
39 ทฤษฎีการออกแบบเว็บไซต์
	 นอกจากการเลือก Font มาใช้งานแล้ว การวางตำ�แหน่งตัวอักษรก็เป็นอีกเรื่องหนึ่ง
ที่มีความสำ�คัญกับการทำ�งาน สำ�หรับการวางตำ�แหน่งตัวอักษร มีข้อควรคำ�นึงถึงไว้ให้อยู่
3 ข้อคือ
	 1.	 ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลงล่าง โดยมี
รัศมีการกวาดสายตาตามลำ�ดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลำ�ดับให้ดีด้วย
ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมาทำ�ให้เสียความหมายของข้อความไป
	 2.	 จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัวใหญ่ๆ อยู่
เพียงชุดเดียว จึงจะเป็นจุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วนจุดอื่น ๆ ขนาดควรจะเล็ก
ลงมาตามลำ�ดับความสำ�คัญ
	 3.	 ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทำ�ให้กลายเป็นงานที่อ่าน
ยากและชวนปวดศรีษะมากกว่าชวนอ่าน ถ้าจำ�เป็นจริง ๆ แนะนำ�ให้ใช้ Font เดิมแต่ไม่
ตกแต่งพวกขนาด, ความหนาหรือกำ�หนดให้เอียงบ้าง เพื่อเพิ่มความน่าสนใจไม่ให้งานดู
น่าเบื่อแบบนี้จะดีกว่า
การจัดองค์ประกอบ
	 สาหรับงานออกกราฟิกดีไซน์สิ่งสาคัญที่สุดคือ การจัดวางองค์ประกอบลงในงาน
ออกแบบ หรือที่จะมักจะนิยมเรียกกันสั้น ว่าการวางคอมโพส
	 การวางคอมโพส คือ การวางองค์ประกอบต่าง ๆ เช่น เส้น สี ตัวอักษร หรือรูปภาพ
มาวางเข้าด้วยกันในพื้นที่ ๆ หนึ่งเพื่อสร้างผลงานที่สามารถสื่อสารสิ่งที่ต้องการออกมา
ก่อนจะนาองค์ประกอบมาจัดคอมโพส นักออกแบบควรจะรู้ก่อนว่า องค์ประกอบแต่ละ
แบบสื่อถึงอารมณ์อะไรบ้าง เช่น เส้นแบบไหนสื่อถึงอารมณ์อย่างอย่างไร หรืออักษรแบบ
ไหนสามารถนามาใช้กับงานที่อยู่ได้อย่างเหมาะสม ถ้าหากไม่รู้ถึงความหมายขององค์
ประกอบเหล่านี้ ก็จะไม่สามารถคบคุมให้งานออกแบบที่ทาอยู่เสร็จออกมาเป็นงานใน
อารมณ์ที่ต้องการได้
40 ทฤษฎีการออกแบบเว็บไซต์
การประเมินคุณภาพเว็บไซต์
41 ทฤษฎีการออกแบบเว็บไซต์
ความทันสมัย (Currency)
เนื้อหาและข้อมูล (Content and Information)
ความน่าเชื่อถือ (Authority)
การเชื่อมโยงข้อมูล (Navigation)
การปฏิบัติจริง (Experience)
ความเป็นมัลติมีเดีย (Multimedia)
การให้ข้อมูล (treatment)
การเข้าถึงข้อมูล (Access)
ความหลากหลายของข้อมูล (Miscellaneous)
42 ทฤษฎีการออกแบบเว็บไซต์
การประเมินคุณภาพเว็บไซต์
( ปรัชญนันท์,2555 : เว็บไซต์ ) การออกแบบและพัฒนาเว็บได้เพิ่ม
ขึ้นโดยลำ�ดับและนับวันจะยิ่งทวีจำ�นวนขึ้น ในปัจจุบันมีเว็บเพจออนไลน์ใน
ระบบอินเทอร์เน็ตนับร้อย ๆ ล้านเว็บ แต่มีคำ�ถามสำ�คัญที่ต้องมาหาคำ�ตอบ
ก็คือ เว็บแบบไหนที่มีคุณภาพดี เว็บแบบใดจึงจะถือว่าเป็นเว็บที่มีคุณค่า
และเหมาะสมสำ�หรับนำ�มาใช้ประโยชน์ เป็นเรื่องที่ต้องตอบคำ�ถามกันอยู่เสมอ
และยังไม่มีคำ�ตอบที่ชัดเจน เมื่อพิจารณาแบบประเมินเว็บเพจของ ดร.แนน
ซี อีเวอร์ฮาร์ท (Everhart, 1996) ภาควิชาบรรณารักษและสารสนเทศศาสตร์
มหาวิทยาลัยเซนต์จอห์น รัฐนิวยอร์ค สหรัฐอเมริกา ซึ่งกำ�หนดระดับการให้
คะแนนเอาไว้อย่างน่าสนใจและน่าจะนำ�มาขยายความ เพื่อประโยชน์ในการ
ประเมินคุณภาพของเว็บสำ�หรับนักออกแบบและพัฒนาเว็บ รวมถึงผู้ที่เกี่ยวข้อง
ในการจัดสารสนเทศผ่านระบบอินเทอร์เน็ต จะได้มีแนวทางในการตรวจสอบ
และประเมินคุณภาพที่สามารถอธิบายเหตุผลได้
43 ทฤษฎีการออกแบบเว็บไซต์
โดยแนวคิดของอีเวอร์ฮาร์ท จะมีด้วยกัน 9 ด้านคือ
	 1. ความทันสมัย (Currency)
	 2. เนื้อหาและข้อมูล (Content and Information)
	 3. ความน่าเชื่อถือ (Authority)
	 4. การเชื่อมโยงข้อมูล (Navigation)
	 5. การปฏิบัติจริง (Experience)
	 6. ความเป็นมัลติมีเดีย (Multimedia)
	 7. การให้ข้อมูล (treatment)
	 8. การเข้าถึงข้อมูล (Access)
	 9. ความหลากหลายของข้อมูล (Miscellaneous)
เนื่องจากแนวคิดทั้ง 9 ด้านยังขาดรายละเอียดและเหตุผล ดังนั้นเพื่อให้เข้าใจ
ถึงเหตุผลและที่มาของระดับการประเมิน จึงจำ�เป็นต้องขยายความและชี้ให้เห็น
ว่าเหตุผลที่ต้องประเมินเว็บไซต์ในแต่ละด้านนั้นคืออะไร
1. ความทันสมัย
ความทันสมัยของเว็บไซต์ จัดเป็นหัวข้อสำ�คัญของการพัฒนาข้อมูล
สารสนเทศผ่านระบบอินเทอร์เน็ต เนื่องจากข้อมูลสารสนเทศที่ปรากฎอยู่
ในเว็บไซต์จะเป็นประโยชน์ต่อผู้ใช้งานก็เมื่อ ข้อมูลนั่นเป็นข้อมูลที่ใหม่ ทัน
ต่อสถานการณ์และได้รับการปรับปรุงแก้ไขตามระยะเวลาอย่างเหมาะสม การ
ประเมินเว็บไซต์ในด้านของความทันสมัยควรประเมินใน 3 ส่วนด้วยกันคือ
-	 เว็บไซต์แสดงวันที่ปรับปรุงข้อมูลครั้งล่าสุด
-	 เว็บไซต์แสดงการปรับปรุงข้อมูลอยู่เสมอเป็นปัจจุบัน
-	 เว็บไซต์แสดงสถิติของจำ�นวนการเข้าใช้และปรับปรุงข้อมูล
44 ทฤษฎีการออกแบบเว็บไซต์
	 2. เนื้อหาและข้อมูล
เว็บไซต์ต้องมีเนื้อหาและข้อมูลที่เป็นประโยชน์ เป็นสิ่งที่ตรวจสอบและ
วัดความเป็นเว็บไซต์ที่ดีได้ง่าย รวมทั้งสามารถประเมินคุณค่าของเว็บไซต์ได้อย่าง
ชัดเจน โดยเฉพาะถ้าเว็บไซต์มีเนื้อหาข้อมูลที่ตรงตามหลักสูตรและการเรียนการ
สอนของนักเรียน หรือทำ�ให้เป็นเนื้อหาข้อมูลประกอบการเรียนตามหลักสูตรและน่า
สนใจชวนติดตามย่อมเป็นประโยชน์
สิ่งสำ�คัญที่สุดของข้อมูลและเนื้อหาในเว็บไซต์ก็คือ ความถูกต้องของเนื้อหา
เป็นคำ�ถามที่ถูกถามมากที่สุดของการออกแบบและพัฒนาเว็บก็คือ ความน่าเชื่อถือ
ของเว็บ และคำ�ตอบก็คือ ถ้าเนื้อหาของเว็บมีความถูกต้องนั่นคือความน่าเชื่อถือที่
สำ�คัญที่สุด ซึ่งเป็นสิ่งที่พิสูจน์ยากที่สุด และหาคำ�รับรองหรือยืนยันได้ยาก ผู้ที่
สืบค้นเข้ามาในเว็บและต้องการนำ�ข้อมูลไปใช้ประโยชน์ ก็ย่อมไม่ทราบว่าข้อมูล
ที่นำ�เสนอบนเว็บไซต์นั้นถูกต้องหรือไม่ เพราะผู้ใช้ข้อมูลก็เพียงต้องการข้อมูลหรือ
ไม่ค้นหาข้อมูลนำ�ไปใช้ไม่ใช่ผู้ที่จะต้องตรวจสอบความถูกต้องของข้อมูล ความถูก
ต้องจึงต้องมีองค์ประกอบอื่น ๆ เข้ามาเกี่ยวข้องเช่น ข้อมูลนั้นเป็นข้อมูลหน่วยงานที่
นำ�มาจากสื่ออื่น ๆ ที่เคยเผยแพร่แล้ว เช่น การเผยแพร่ข้อมูลโรคติดต่อต่าง ๆ ที่เคย
อยู่ในแผ่นพับใบปลิว ก็นำ�มาสร้างเว็บไซต์เป็นต้น ข้อมูลจึงจะน่าเชื่อถือมากที่สุด
หรือโดยเฉพาะข้อมูลจากตำ�ราโดยตรง
เมื่อเนื้อหามีความถูกต้องสมบูรณ์สิ่งที่ต้องคำ�นึงต่อไปคือ เนื้อหาและข้อมูล
ต้องเป็นไปตามวัตถุประสงค์ในการจัดทำ�เว็บไซต์ เนื้อหาและข้อมูลตรงตามชื่อและ
สอดคล้องกับหน่วยงานที่ดำ�เนินการอย่างชัดเจน จึงจะถือได้ว่าเว็บไซต์มีความถูก
ต้อง เนื้อหาและข้อมูลควรจะมีลักษณะเป็นภาษาเขียนเพื่อให้น่าเชื่อถือและสละ
สลวย มีลักษณะการใช้ภาษาที่สุภาพ ไม่ใช้ภาษาพูด ไม่หยาบคาย และมีการใช้
ภาษาที่เป็นทางการ การพิมพ์ไม่ผิดพลาด การใช้สระ พยัญชนะต่าง ๆ มีความถูก
ต้องสมบูรณ์ถือว่าเว็บไซต์มีคุณภาพดี
45 ทฤษฎีการออกแบบเว็บไซต์
	 3. ความน่าเชื่อถือ
เว็บไซต์ที่มีคุณภาพไม่ใช่เพียงแต่ทันสมัย มีเนื้อหาและข้อมูลที่ดี ความ
น่าเชื่อถือต่อเว็บไซต์เป็นเรื่องสำ�คัญในจะนำ�เอาข้อมูลไปอ้างอิงหรือใช้ประโยชน์
เพราะข้อมูลและเนื้อหาจะได้ถูกนำ�ไปใช้ประโยชน์ก็ด้วยเหตุผลที่ว่าเว็บนั้นน่าเชื่อ
ถือ เช่น ถ้าต้องการข้อมูลเกี่ยวกับโรคติดต่อ ข้อมูลที่น่าเชื่อถือที่สุดก็ควรเป็น
ข้อมูลของกระทรวงสาธารณสุข หรือโรงพยาบาลต่าง ๆ นั่นหมายความว่า ผู้
เข้าไปใช้ประโยชน์จากเว็บก็จะพยายามหาข้อมูลจากเว็บที่เกี่ยวข้องกับเรื่องที่
ต้องการ ทันสมัยและมีข้อมูลเนื้อหาที่ดี แต่ที่สำ�คัญคือเว็บต้องน่าเชื่อถือนั่นเอง
ความน่าเชื่อถือของเว็บไซต์นั่นคือ ผู้จัดทำ�เว็บเป็นผู้ที่เกี่ยวข้องโดยตรงกับ
เนื้อหา หรือเป็นองค์กรที่รับผิดชอบด้านนั้นโดยตรง โดยแสดงความรับผิดชอบ
ในเว็บอย่างชัดเจน แสดงให้เห็นได้จากส่วนที่สงวนลิขสิทธิ์และผู้รับผิดชอบภายใน
เว็บ ซึ่งนิยมแสดงไว้ด้านล่างของเว็บไซต์ โดยรวมถึงความทันสมัยนั่นคือเวลาที่
ปรับปรุงครั้งล่าสุดนั่นเอง ตัวอย่างของความน่าเชื่อถือเช่น
- การสงวนลิขสิทธิ์ของเว็บ Copyright ã All Rights Reserved
- ผู้รับผิดชอบ Webmaster Prachyanun Nilsook
- ตำ�แหน่งหน้าที่ผู้จัดทำ� หัวหน้าศูนย์เทคโนโลยีสารสนเทศและการ
สื่อสาร
- ติดต่อ Email : prachyanun@hotmail.com โทร : 01-
7037515
- ที่อยู่ของหน่วยงาน วิทยาลัยเทคนิคสมุทรสงคราม อ.เมืองฯ
จ.สมุทรสงคราม
ถ้าหน่วยงานหรือองค์กรมีความน่าเชื่อถือสูง เพียงแต่โดเมนเนมก็สามารถบ่ง
บอกความน่าเชื่อถือได้เช่นกัน
46 ทฤษฎีการออกแบบเว็บไซต์
	 4. การเชื่อมโยงข้อมูล
การประเมินเว็บไซด์ที่ดีควรจะแสดงการเชื่อมโยงไปยังส่วนต่างๆ ในรูป
แบบที่เข้าใจง่าย และอ่านได้อย่างชัดเจน การเชื่อมโยงภายในเว็บไซด์ จะมีชื่อ
เรียกว่า ลิงค์ (Link) การลิงค์หรือการเชื่อมโยงนั้น ถ้าหน้าแรกสามารถบอก
ได้ว่า เว็บไซด์นั้นมีการจัดการอย่างไร มีเงื่อนไขในการเชื่อมโยงอย่างไร และมี
อย่างไรที่จำ�เป็นต้องเชื่อมโยงไปบ้าง ลักษณะอย่างนี้อาจจะมีหน้าพิเศษต่างหากที่
เรียกว่า แผนภูมิเว็บไซด์ หรือ site map
อีกคำ�หนึ่ง สำ�หรับการเชื่อมโยงในลักษณะทั่วไปของเว็บเพจ คือคำ�ว่า
navigation หมายถึงเส้นทางซึ่งเมื่อเปิดเข้าสู่หน้าแรกและมีโฮมเพจ และต้องการ
เชื่อมโยงหรือไปในเส้นทางใดภายในเว็บไซด์ สิ่งเหล่านี้เรียกว่า navigation bar
ดังนั้น ผู้ที่ออกแบบเว็บไซด์และมีการเชื่อมโยงได้ดี มีการจัดองค์ประกอบได้ดีจะ
ทำ�ให้เว็บไซด์นั้นสามารถเชื่อมโยงได้กันทุกเว็บ และเป็นไปตามวัตถุประสงค์ของ
เว็บไซด์
ลักษณะการเชื่อมโยงภายในเว็บไซด์ ควรจะแสดงรูปแบบที่ชัดเจนหรือ
ที่เรียกว่า Hypertext นั้นก็คือ ตัวหนังสือที่มีการเชื่อมโยงจะมีการขีดเส้นใต้ไว้
อย่างชัดเจน หรือถ้าไม่มีการขีดเส้นใต้เมื่อเลื่อนเม้าส์ผ่านไปยังบริเวณที่เป็นตัว
อักษรจะปรากฏเป็นรูปมือ ซึ่งรูปแบบเว็บไซด์ที่มีคุณภาพและชัดเจน ส่วนที่เป็น
Hypertext และมีการเชื่อมโยงนั้นควรวางรูปแบบที่ชัดเจน เมื่อเลื่อนเม้าส์เข้าไป
ในส่วนที่เป็น Hypertext ก็ควรจะเปลี่ยนแปลงเป็นรูปมือ สี และแบ็คกราวน์
ของตัวอักษรก็อาจจะเปลี่ยนไป ซึ่งทำ�ให้ง่ายต่อการสังเกต การเชื่อมโยงที่ดี ตัวที่
ทำ�หน้าที่การเชื่อมโยงควรจะอ่านง่ายและสื่อความหมายชัดเจน เป็นในลักษณะ
เดียวกันกับวัตถุประสงค์ของเว็บไซด์ ตัวเชื่อมโยงหรือ ลิงค์ควรจะง่ายต่อการ
สังเกตและมีขนาดเหมาะสม ตัวเชื่อมโยงควรจะมีเหตุมีผลสอดคล้องกันทั้งกลุ่ม
47 ทฤษฎีการออกแบบเว็บไซต์
เช่น ถ้ามีเมนูที่ทำ�หน้าที่ในการเชื่อมโยงไปยังเว็บเพจต่างๆ เมนูทั้งกลุ่มนั้นควรมี
ลักษณะที่สอดคล้องกัน ตัวอย่าง เช่น ถ้าทำ�เป็นร้านหนังสือหรือห้องสมุด เมนู
ที่เป็นตัวเชื่อมโยงหรือตัวลิงค์ควรจะมีลักษณะรูปหนังสือ ตะกร้าใส่หนังสือ ที่คั่น
หนังสือ หรือลักษณะใดลักษณะหนึ่งที่เกี่ยวข้องกันกับห้องสมุดหรือหนังสือในชุด
เดียวกัน
	 5. การนำ�ไปใช้งานจริง
เว็บเพจที่ดีควรจะมีเนื้อหาเป็นไปตามวัตถุประสงค์ที่กำ�หนดไว้ และมี
การแสดงผลอย่างรวดเร็จ ในเว็บเพจต้องทำ�ให้ผู้เข้าชมรู้สึกว่าไม่เสียเวลา ไม่
ไร้ประโยชน์หรือเว็บเพจไม่เป็นไปตามวัตถุประสงค์ ผู้ออกแบบต้องคำ�นึงเสมอ
ว่า ในการนำ�ไปใช้งานจริง ผู้สืบคืนข้อมูล หรือผู้เข้าชมเว็บเพจย่อมเข้ามาเพื่อ
คิดว่าเว็บเพจที่จัดทำ�นั้นมีวัตถุประสงค์ตามหัวเรื่องของเว็บเพจ เช่น เว็บเพจมี
วัตถุประสงค์ต้องการเผยแพร่ ข่าวสาร เกี่ยวกับเรื่องเอดส์ เมื่อเข้ามาแล้วก็ควร
จะเกี่ยวข้องเรื่องราวของเอดส์ ไม่ใช่เป็นการโฆษณาขายยาหรือโฆษณาชวนเชื่อ
ซึ่งลักษณะแบบนี้จะไม่เป็นไปตามวัตถุประสงค์ จะทำ�ให้ผู้เข้าชมรู้สึกว่าเสียเวลา
ในการเข้าเยี่ยมชม นอกจากนั้นเนื้อหา และการออกแบบเมื่อนำ�ไปใช้งานจริงควร
คำ�นึงว่าเว็บเพจต้องเป็นที่ดึงดูดสายตาของผู้เข้าชม ทำ�ให้เกิดความน่าสนใจตลอด
เวลา และดึงดูดให้ผู้เข้าชมใช้เวลานานในการค้นหาข้อมูล ชวนติดตามอยู่ตลอด
เวลา
	 6.ความเป็นมัลติมีเดีย
ความเป็น multimedia สำ�หรับเว็บไซด์เป็นเรื่องที่ค่อนข้างยาก
เนื่องจากเว็บไซด์ต้องออนไลน์อยู่ในระบบอินเตอร์เน็ต ในข้อจำ�กัดของแบนด์วิท
และความเร็วในการนำ�เสนอ จึงยากที่จะทำ�ให้เว็บไซด์แต่ละเว็บไซด์มีความเป็น
multimedia ดังนั้น องค์ประกอบที่สำ�คัญของความเป็น multimedia
48 ทฤษฎีการออกแบบเว็บไซต์
ของเว็บก็คือ เว็บไซด์ไม่สามารถมีปฎิสัมพันธ์กับผู้เข้าชมได้ทันที เนื่องจากการ
ออกแบบเว็บไม่สามารถทำ�ให้ใช้เทคนิคหรือกระบวนการได้มากมายอย่างที่เป็น
stand alone ภายในระบบ ดังนั้นความเป็น multimedia ของเว็บไซด์ จึงหมาย
ถึงการจัดทำ�ภาพประกอบ เสียง ภาพเคลื่อนไหว ภาพวิดีโอ หรือภาพนิ่ง โดย
เป็นการเสริมหรือเพิ่มให้เว็บไซด์มีคุณค่า และที่สำ�คัญmultimedia ที่นำ�มาใช้ต้อง
สอดคล้องกับเนื้อหา และเป็นประโยชน์ในการสร้างความเข้าใจให้กับผู้เข้าชมเว็บ
ไซด์
	 7. การให้ข้อมูล
ในการให้ข้อมูลภายในเว็บไซด์ ข้อมูลที่สำ�คัญควรจะเข้าถึงได้ง่ายและ
รวดเร็ว โดยไม่มีความสลับซับซ้อน แต่การนำ�เสนอข้อมูลควรมีการจัดรูปแบบ
และหมวดหมู่ของข้อมูลอย่างเป็นระบบ เพื่อให้ง่ายต่อการตรวจสอบและใช้งาน
ข้อมูลเหมือน ความลำ�เอียงเนื่องจากแนวคิดที่ไม่ตรงกันควรได้รับการแก้ไข แต่ละ
เว็บไซด์ในกลุ่มของพนักงานจะมีเจ้าหน้าที่บางคนเข้ามาเกี่ยวข้องเพื่อช่วยให้
ข้อมูลเป็นไปอย่างเหมาะสม นอกจากนี้ข้อมูลที่ใช้ควรมีเนื้อหาที่ทันสมัย ทันต่อ
เหตุการณ์ โดยแสดงได้จากวันเวลาที่ปรับปรุง ขณะเดียวกันเมื่อจัดทำ�เว็บไซด์ตาม
วัตถุประสงค์แล้ว เว็บไซด์ควรจะสอดคล้องกับกลุ่มเป้าหมายของเว็บ ถ้าเว็บไซด์
นั้นจัดทำ�ได้ตรงกับกลุ่มเป้าหมาย เช่น กลุ่มนักศึกษา หรือวัยรุ่น ก็จะทำ�ให้เว็บนั้น
ได้รับความนิยม แสดงถึงคุณภาพของผู้ดำ�เนินการจัดทำ�เว็บนั่นเอง
	 8.การเข้าถึงข้อมูล
สิ่งที่สำ�คัญที่สุดก็คือ เว็บไซต์สามารถแสดงผลข้อมูลได้อย่างรวดเร็ว เมื่อ
ผู้ใช้เข้าสู่เว็บไซต์ นั่นหมายถึง เมื่อผู้ใช้ต้องการเข้าสู่เว็บไซต์โดยการพิมพ์ที่อยู่ของ
เว็บเช่น URL หรือโดเมนเนม (Domain Name) แล้วกดปุ่ม Enter
49 ทฤษฎีการออกแบบเว็บไซต์
การแสดงผลของหน้าแรกจะต้องปรากฎอย่างรวดเร็วโดยไม่เสียเวลานานจะ
ทำ�ให้ผู้ใช้รู้สึกพึงพอใจ แต่ถ้าเว็บใดออกแบบให้มีกราฟิกส์ ภาพเคลื่อนไหว
และเนื้อหาจำ�นวนมาก เว็บนั้นก็จะแสดงผลได้ช้า ก็จะทำ�ให้ผู้ใช้รอและเบื่อ
หน่าย การให้ผู้ใช้รอบ้างย่อมรับได้ แต่ถ้าผู้ใช้รอนานเกินไปก็อาจเบื่อหน่าย
และเปลี่ยนไปเว็บอื่นในที่สุด
การเข้าถึงข้อมูลในเว็บไซต์นอกจากจะแสดงผลรวดเร็วแล้ว เว็บไซต์ควร
หาได้สะดวกจากเว็บประเภทสืบค้นข้อมูลหรือ Search Engine หรือเว็บได้
Add URL เอาไว้ใน Search Engine เช่นGoogle หรือ Yahoo ถ้าเป็น
ในประเทศไทยก็เช่น Sanook , Sansarn ก็จะทำ�ให้ผู้ใช้สามารถสืบค้นจาก
เครื่องมือสืบค้นได้รวดเร็ว การโหลดของเว็บได้อย่างรวดเร็วทำ�ให้เสียเวลา
น้อยลงในการค้นหาข้อมูล เว็บไซต์ที่แสดงผลจากการค้นหาได้รวดเร็ว ย่อม
เป็นที่นิยมของผู้ใช้เพราะค้นเจอเสมอ แสดงว่าเข้าถึงข้อมูลได้รวดเร็ว
	 9. ความหลากหลายของข้อมูล
ประเด็นสำ�คัญในส่วนของข้อมูลก็คือ เว็บควรมีความหลากหลายและ
มีเรื่องที่เป็นประโยชน์หลาย ๆ เรื่อง มีความน่าเชื่อถือและตรวจสอบข้อมูลได้
ข้อมูลนั้นก็จะได้ความนิยมและแนะนำ�กันให้เข้ามาชมอีก กรณีที่เว็บมีข้อมูล
ไม่มากมายนัก แต่เว็บมีข้อมูลสำ�คัญเพียงพอไม่ยาวเกินไป ไม่สั้นมากเกินไป
ก็เพียงพอใช้ประโยชน์ได้เหมาะสม องค์ประกอบในการประเมินอื่น ๆ ของ
ความหลากหลายข้อมูลได้แก่
		9.1 เว็บไซต์ได้รับรางวัล เป็นประเด็นในการประเมินคุณภาพ
ประการหนึ่ง เช่น เว็บได้รับรางวัลยอดนิยม หรือเว็บได้รับการโหวตในสาขาใด
ๆ หรือเว็บมีการจัดลำ�ดับว่ามีผู้เข้าใช้มาก ล้วนแต่เป็นตัวบ่งบอกคุณภาพได้
50 ทฤษฎีการออกแบบเว็บไซต์
		 9.2 เว็บไซต์ไม่มีเรื่องต้องเสียค่าใช้จ่าย เป็นเว็บที่ให้ข้อมูลโดยไม่คิด
ค่าใช้จ่ายก็ควรได้รับการประเมินระดับดี
		 9.3 เว็บไซต์มีปฏิสัมพันธ์ระหว่างผู้ดูแลกับผู้ใช้ เช่น มีการตอบคำ�ถาม
มีการฝากข้อมูลและข้อความและตอบคำ�ถามสม่ำ�เสมอ แสดงว่าเป็นเว็บที่ดีในการ
บริการ
		 9.4 เว็บไซต์ที่มีการสมัครและจัดเก็บข้อมูลของผู้ใช้เอาไว้เป็นความ
ลับ และเมื่อเรียกใช้ก็มีการกำ�หนดรหัสเข้าและรหัสผ่าน แสดงถึงการบริการและ
บริหารเว็บอย่างมีคุณภาพได้
		 9.5 เว็บไซต์มีข้อมูลที่สามารถผิดออกมาทางเครื่องพิมพ์ได้ โดยไม่ต้อง
เปลี่ยนแปลงแก้ไขใด ๆ ก่อนการพิมพ์ แสดงว่าออกมาเป็นอย่างดี แสดงผลได้
อย่างเป็นระเบียบ นำ�ข้อมูลไปใช้ได้โดยตรง
		 9.6 ข้อมูลที่นำ�เสนอในเว็บไซต์มีขนาดสั้นและไม่มีองค์ประกอบ
มากมาย จนละเลยข้อมูล เว็บนั้นแสดงว่ามีระบบข้อมูลที่ดี
		 9.7 เว็บไซต์ที่มีเครื่องมือสืบค้นเป็นของตนเอง แสดงว่าเว็บอาจมีขนาด
ใหญ่แต่มีระบบการค้นหาข้อมูลภายในเว็บของตนเองได้ โดยไม่ต้องหาเส้นทาง
เข้าสู่เว็บอย่างยุ่งยากดังนั้นจะเห็นได้ว่า การประเมินเว็บไซต์ทางการศึกษาหรือ
ข้อมูลสารสนเทศอันจะเป็นประโยชน์กับบุคคลทั่วไป ตามแนวคิดทั้ง 9 ด้านล้วน
แล้วแต่เป็นสิ่งจำ�เป็นในการออกแบบเว็บไซต์ ซึ่งเว็บใดที่สามารถออกแบบได้ตาม
แนวคิดทั้ง 9 ด้านก็ถือว่าเป็นเว็บไซต์ที่ดีเยี่ยม การจัดลำ�ดับคะแนนก็สามารถ
เรียงลำ�ดับตามแนวคิด โดยแบ่งเป็นส่วนคะแนนต่าง ๆ ได้ตามลำ�ดับ ก็จะทำ�ให้
ได้แบบประเมินคุณภาพของเว็บไซต์ในลักษณะของการประเมินทางด้านข้อมูล
สารสนเทศ อันจะทำ�ให้ทราบได้ว่าเว็บไซต์ใดเหมาะสมและเป็นประโยชน์ ผู้ใช้
บริการเว็บและผู้ออกแบบเว็บก็จะได้ประโยชน์ด้วยกันทุกฝ่าย เว็บไซต์ที่สร้างขึ้น
ก็จะมีคุณภาพและเป็นเว็บที่ดีบนอินเทอร์เน็ตต่อไป
51 ทฤษฎีการออกแบบเว็บไซต์
บรรณานุกรม
สุปรีดี สุวรรณบูรณ์.(2554). หลักการและทฤษีการออกแบบ ค้นคว้าจาก :
http://www.design-dd.com/blog/component/content/arti-
cle/145-2010-04-26-12-59-01.htmlกมลรัฐ อินทรทัศน์ และ พรทิพย์ เย็นจะบก.2554.
การประชาสัมพันธ์ ค้นคว้าจาก:
	 http://www.ipesp.ac.th/learning/thai/chapter7-5.html
ความหมายของการเรียนการสอนผ่านเว็บ.(2555) ค้นคว้าจาก:
	 http://www.kroobannok.com/133
ความหมายของเว็บไซต์.(2553) ค้นคว้าจาก:
	 http://school.obec.go.th/pp_school/html/Web1.html
กิตติ ภักดีวัฒนะกุล (2540). การออกแบบและการพัฒนาเว็บไซต์ ค้นคว้าจาก :
	 http://jarungsakiwebdesign.blogspot.com/
กิตติ ภักดีวัฒนะกุล (2540).การออกแบบโครงสร้างเว็บเพจ ค้นคว้าจาก :
	 http://jarungsakiwebdesign.blogspot.com/
วัศพล โรจน์ประเสริฐสุด.(2010).บทเรียนออนไลน์. All Rights Reserved. ค้นจาก : 	
	 http://202.29.42.235/~eleaning/index.php?option=com_
content&view=article&id=13
ประเภทและองค์ประกอบของของเว็บไซต์.(2553). ค้นคว้าจาก :
	 http://www.websuay.com/th/web_page/web_component
การประเมินคุณภาพเว็บไซต์ (Promote wed). ค้นคว้าจาก:
http://202.29.52.57/~chanida/Electronics/ chapter_8_Web%20promotion.
ppt
52 ทฤษฎีการออกแบบเว็บไซต์

More Related Content

What's hot

การค้นหาข้อมูลทางอินเทอร์เน็ต
การค้นหาข้อมูลทางอินเทอร์เน็ตการค้นหาข้อมูลทางอินเทอร์เน็ต
การค้นหาข้อมูลทางอินเทอร์เน็ตmildthebest
 
หนังสือเล่มเล็กทฤษฏี
หนังสือเล่มเล็กทฤษฏีหนังสือเล่มเล็กทฤษฏี
หนังสือเล่มเล็กทฤษฏีDiiDy Moowhan Lesikagirl
 
Search Engine
Search  EngineSearch  Engine
Search Engine
MrsZippy
 
หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1Ton TC Tmsb
 
การค้นหาข้อมูลจากอินเทอร์เน็ต
การค้นหาข้อมูลจากอินเทอร์เน็ตการค้นหาข้อมูลจากอินเทอร์เน็ต
การค้นหาข้อมูลจากอินเทอร์เน็ตPangMy
 
Unit10
Unit10Unit10
Unit10pui003
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 

What's hot (7)

การค้นหาข้อมูลทางอินเทอร์เน็ต
การค้นหาข้อมูลทางอินเทอร์เน็ตการค้นหาข้อมูลทางอินเทอร์เน็ต
การค้นหาข้อมูลทางอินเทอร์เน็ต
 
หนังสือเล่มเล็กทฤษฏี
หนังสือเล่มเล็กทฤษฏีหนังสือเล่มเล็กทฤษฏี
หนังสือเล่มเล็กทฤษฏี
 
Search Engine
Search  EngineSearch  Engine
Search Engine
 
หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1
 
การค้นหาข้อมูลจากอินเทอร์เน็ต
การค้นหาข้อมูลจากอินเทอร์เน็ตการค้นหาข้อมูลจากอินเทอร์เน็ต
การค้นหาข้อมูลจากอินเทอร์เน็ต
 
Unit10
Unit10Unit10
Unit10
 
Chapter4
Chapter4Chapter4
Chapter4
 

Similar to หนังสือเล่มเล็ก4

หน่วยที่ 02
หน่วยที่ 02หน่วยที่ 02
หน่วยที่ 02Nuytoo Naruk
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์Supaporn Pakdeemee
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบJiJee Pj
 
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบSamorn Tara
 
Unit2
Unit2Unit2
นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 
หวิว
หวิวหวิว
หวิวViewMik
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
ดรีม
ดรีมดรีม
ดรีมsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
Website
WebsiteWebsite

Similar to หนังสือเล่มเล็ก4 (20)

หน่วยที่ 02
หน่วยที่ 02หน่วยที่ 02
หน่วยที่ 02
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บกระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
 
Webbasic
WebbasicWebbasic
Webbasic
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบ
 
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
 
Website
WebsiteWebsite
Website
 
Yuu
YuuYuu
Yuu
 
New
NewNew
New
 
Ten
TenTen
Ten
 
Unit2
Unit2Unit2
Unit2
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 
หวิว
หวิวหวิว
หวิว
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 
โบ
โบโบ
โบ
 
Best
BestBest
Best
 
หมวย
หมวยหมวย
หมวย
 
ดรีม
ดรีมดรีม
ดรีม
 
หมวย
หมวยหมวย
หมวย
 
Website
WebsiteWebsite
Website
 

หนังสือเล่มเล็ก4

  • 8. 8 ทฤษฎีการออกแบบเว็บไซต์ ว็บไซต์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูล เอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารต่าง ๆ เหล่านี้ว่า เว็บเพจ (Web Page) และเรียกเว็บหน้าแรก ของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) หรืออาจ กล่าวได้ว่า เว็บไซต์ก็คือเว็บเพจอย่างน้อยสองหน้าที่มี ลิงก์ (Links) ถึงกัน ตามหลักคำ�ว่า เว็บไซต์จะใช้สำ�หรับ ผู้ที่มีคอมพิวเตอร์แบบเซิร์ฟเวอร์หรือจดทะเบียนเป็น ของตนเองเรียบร้อยแล้วเช่น www.google.co.th ซึ่ง เป็นเว็บไซต์ที่ให้บริการสืบค้นข้อมูลเป็นต้น เว็บไซต์ (Web Site) ยังงเป็นศูนย์รวบรวม ความรู้และแหล่งข้อมูลต่างๆ อาทิ เช่น ข่าวสาร ประชาสัมพันธ์ บันเทิง กีฬา เป็นต้น ปัจจุบันเว็บไซต์ ได้เข้ามามีบทบาทในแวดวงธุรกิจแทบทุกชนิด ไม่ว่า จะเป็นในรูปแบบของบริษัท ร้านค้า ชั้นนำ� ต่างๆทั่วไป เหตุผลหนึ่งในการมีเว็บไซต์นั้น เพื่อเป็นการเพิ่มความ น่าเชื่อถือให้กับธุรกิจนั้นๆ อีกทั้งเว็บไซต์ยังสามารถ ตอบสนองและครอบคลุมผู้บริโภคหรือกลุ่มเป้าหมาย ได้อย่างไม่มีขีดจำ�กัดอีกด้วย เพราะสามารถเข้าเยี่ยม ชมข้อมูลเว็บซ์จากอินเตอร์เน็ตได้ทั่วโลก เว็บไซต์ (Web Site) เ ความหมายของเว็บไซต์
  • 9. 9 ทฤษฎีการออกแบบเว็บไซต์ ขั้นตอนแรกในการขอเริ่มใช้บริการเว็บไซต์นั้น นักลงทุนจะต้องไปติดต่อกับตัวแทนจำ�หน่าย เพื่อ ขอจดทะเบียนชื่อเว็บไซต์ ( Domain name ) และ พื้นที่ในจัดทำ�เว็บไซด์ ( hosting ) ก่อน โดยการจด ทะเบียนขอใช้บริการเว็บไซด์นั้น จะมีสกุลดอทให้ เลือกหลากหลายประเภท โดยปัจจุบันเทคโนโลยีในการพัฒนาเว็บสามารถแบ่ง ออกได้เป็น 3 ยุคด้วยกัน คือ 1)/Static/Web/เป็นการเขียนเว็บไซต์แบบ ธรรมดาที่สร้างด้วยภาษา HTML อย่างเดียวหรือ อาจมีภาษาสคริปต์ทางฝั่งไคลเอนต์ (Client-Side Script) เช่น JavaScript และ VBScript ร่วมด้วย ซึ่ง ลักษณะของ Static Web จะมีเนื้อหาและรูปแบบ คงที่ไม่มีการเปลี่ยนแปลงใด ๆ จนกว่าจะมีการแก้ไข ข้อมูลที่เครื่องเซิร์ฟเวอร์ 2)/Dynamic/Web/เป็นการพัฒนาต่อมา จากยุคของ Static Web มีการใช้สคริปต์ทางฝั่ง เซิร์ฟเวอร์ (Server-Side Script) มาช่วยในการ เพิ่มความสามารถของเอกสาร HTML ในการติดต่อ กับฝั่งเซิร์ฟเวอร์ โดยอาศัยการประมวลผลของเว็บ เซิร์ฟเวอร์เพื่อทำ�งาน ลักษณะของ Dynamic Web คือสามารถเปลี่ยนแปลงเนื้อหาหรือรูปแบบของ เว็บไซต์ได้เรื่อย ๆ ตามวัน ตามเวลา หรือตามที่ผู้ใช้ ร้องขอ ซึ่งเทคโนโลยีที่ใช้พัฒนาเว็บแบบ Dynamic
  • 10. 10 ทฤษฎีการออกแบบเว็บไซต์ ในช่วงแรกคือ CGI (Common Gateway Interface) ภาษาที่ใช้เขียนสคริปต์นี้เช่น C และ Perl ต่อมาได้มีการพัฒนาเทคโนโลยีที่มีการทำ�งานคล้าย ๆ CGI เพื่อทำ�งาน ทางฝั่งเซิร์ฟเวอร์หลายค่าย อาทิเช่น ASP (Microsoft), PHP (Open Source) และ JSP (Sun Microsystems) 3) Web Services คือแอพพลิเคชั่นหรือโปรแกรมที่ทำ�งานอย่างใดอย่างหนึ่ง ในลักษณะให้บริการ โดยจะถูกเรียกใช้งานแอพพลิเคชั่นจากโปรแกรมอื่น ๆ คือ PHP, ASP, JAVA และ Python ผ่านทางหน้าเว็บ จุดประสงค์หลักของ Web Ser- vices คือการทำ�ให้เครื่องคอมพิวเตอร์ต่างชนิดกัน สามารถติดต่อและแลกเปลี่ยน ข้อมูลกันได้ ถึงแม้จะใช้โปรแกรมทำ�งานหรือระบบปฏิบัติการที่แตกต่างกัน โดยจะ ใช้ภาษา XML เป็นภาษากลางในการสื่อสารผ่านเครื่องคอมพิวเตอร์นั้น ๆ
  • 12. 12 ทฤษฎีการออกแบบเว็บไซต์ ขั้นตอนการพัฒนาเว็บไซต์ 1. กำ�หนดวัตถุประสงค์ของเว็บไซต์ ว่าจะจัดทำ�เว็บไซต์ เกี่ยวกับอะไร เช่นท่องเที่ยว บันเทิง เป็นต้น 2. กำ�หนดกลุ่มผู้ชมเป้าหมาย เพื่อที่จะได้จัดโทนสี รูปภาพ กราฟิก หน้าตาของเว็บเพจให้เหมาะสมกับกลุ่มเป้าหมาย 3. เตรียมแหล่งข้อมูล เพื่อที่จะได้นำ�เนื้อหาสาระมานำ�เสนอ ได้อย่างครบถ้วนและสมบูรณ์
  • 13. 13 ทฤษฎีการออกแบบเว็บไซต์ 4. เตรียมทักษะหรือบุคลากร เนื่องจากเว็บไซต์ที่มีเนื้อหา มากๆ ก็จำ�เป็นต้องมีบุลลากรเพื่อพัฒนาเว็บไซต์ ไม่ว่าจะ เป็นการดูแลเว็บเซิร์ฟเวอร์ กราฟิกดีไซน์ ทีมีความรู้ความ สามารถเฉพาะด้าน เป็นต้น 5. เตรียมทรัพยากรต่าง ๆ เท่าที่มีความจำ�เป็น เช่น โปรแกรมต่างๆ ทั้งในด้านระบบฐานข้อมูล และมัลติมีเดีย โปรแกรมสร้างภาพเคลื่อนไหว เป็นต้น
  • 15. 15 ทฤษฎีการออกแบบเว็บไซต์ การวางแผน การเตรียมข้อมูล การเตรียมสิ่งต่าง ๆ ที่จำ�เป็น การจัดโครงสร้างข้อมูล โครงสร้างและสารบัญของเว็บไซต์ การออกแบบเว็บไซต์ ส่วนประกอบของหน้าเว็บเพจ
  • 16. 16 ทฤษฎีการออกแบบเว็บไซต์ หลักการออกแบบเว็บไซต์ ลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนา เว็บไซต์ ห 1. การวางแผน การวางแผนนับว่ามีความสำ�คัญมากในการสร้างเว็บไซต์ เพื่อให้การทำ�งานใน ขั้นตอนต่าง ๆ มีแนว ทางที่ชัดเจนและสามารถปฏิบัติได้ตามที่ตั้งเป้าไว้ ซึ่ง ประกอบด้วย 1.1 การกำ�หนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำ�หนด เนื้อหาและจุดประสงค์ของเว็บไซต์ที่จะสร้าง นับเป็นสิ่งสำ�คัญอย่างมากในการ เริ่มต้นสร้างเว็บไซต์เลยทีเดียว เพื่อให้เห็นภาพว่าเราต้องการนำ�เสนอข้อมูล แบบใด เช่น เว็บไซต์เพื่อให้ข้อมูลข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า เป็นต้น เมื่อสามารถกำ�หนดจุดประสงค์ของเว็บไซต์ได้แล้ว เงื่อนไขเหล่านี้จะ เป็นตัวกำ�หนดโครง สร้างรูปแบบรวมถึงหน้าตา และสีเว็บไซต์ของเราด้วย 1.2 การกำ�หนดกลุ่มเป้าหมาย เพื่อให้การสร้างและออกแบบเว็บไวต์ได้รับความนิยม การกำ�หนดกลุ่มเป้า หมายในการเข้าชมเว็บไซต์ก็นับว่ามีส่วนสำ�คัญไม่น้อย เช่น เว็บไซต์สำ�หรับ เยาวชน นักเรียน นักศึกษาในการค้นหาข้อมูล หรือเว็บไซต์สำ�หรับบุคคลทั่วไป ที่เข้าไปใช้บริการต่าง ๆ เป็นต้น
  • 17. 17 ทฤษฎีการออกแบบเว็บไซต์ 2. การเตรียมข้อมูล เนื้อหาหรือข้อมูลจัดว่าเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ และต้อง ทราบว่าข้อมูลข่าวสารต่าง ๆ สามารถนำ�มาจากแหล่งใดบ้าง เช่น การคิดนำ�เสนอ ข้อมูลด้วยตัวเอง หรือนำ�ข้อมูลที่น่าสนใจมาจากสื่ออื่น เช่น หนังสือพิมพ์ แมกกาซีน เว็บไซต์ และที่สำ�คัญ ขออนุญาตเจ้าของบทความก่อนเพื่อป้องกันเรื่องลิขสิทธิ์ด้วย 3. การเตรียมสิ่งต่าง ๆ ที่จำ�เป็น ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำ�หรัสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝาก เว็บไซต์ (Web Hosting) เป็นต้น 4. การจัดโครงสร้างข้อมูล เมื่อได้ข้อมูลต่าง ๆ เช่น กำ�หนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำ�หนดกลุ่ม เป้าหมาย การเตรียมข้อมูล การเตรียมสิ่งต่าง ๆ ที่จำ�เป็นจากขั้นแรกเรียบร้อยแล้ว ในขั้นตอนนี้ เราจะจัดระบบเพื่อใช้เป็นกรอบสำ�หรับการออกแบบและดำ�เนินการใน ขั้นตอนต่อไป ซึ่งมีรายละเอียด ดังนี้ •โครงสร้างและสารบัญของเว็บไซต์ •การใช้ระบบนำ�ผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบ นำ�ทาง (Navigation) •องค์ประกอบที่ต้องนำ�มาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ •การกำ�หนดรูปแบบและลักษณะของเว็บเพจ •การกำ�หนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำ�มาใช้ในเว็บไซต์ •การบริการเสริมต่าง ๆ •การออกแบบเว็บไซต์
  • 18. 18 ทฤษฎีการออกแบบเว็บไซต์ นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิก ของหน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ Fireworks ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น ในการออกแบบเว็บไซต์นั้นยังต้องคำ�นึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ ที่ไม่ใช่ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้น กรอบเพื่อความสวยงามและดึง ดูดผู้เยี่ยมชมด้วย 5. โครงสร้างและสารบัญของเว็บไซต์ การใช้ระบบนำ�ผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่า ระบบนำ�ทาง (Navigation) องค์ประกอบที่ต้องนำ�มาใช้ เช่น สื่อมัลติมีเดีย ภาพ กราฟิก แบบฟอร์มต่าง ๆการกำ�หนดรูปแบบและลักษณะของเว็บเพจ การกำ�หนด ฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำ�มาใช้ในเว็บไซต์ การบริการเสริมต่าง ๆ หลักการออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจ สามารถทำ�ได้หลาย ระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมาย ที่ต้องการนำ�เสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่น และนำ�เสนอข้อมูลเกี่ยวกับ ความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บที่หลากหลายใช้ลูกเล่น ได้มากกว่าเว็บที่นำ�เสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ ทั้งนี้หลักการออกแบบ เว็บเพจ สามารถแบ่งได้ 3 ลักษณะ คือ
  • 19. 19 ทฤษฎีการออกแบบเว็บไซต์ 1. แบบลำ�ดับขั้น ( Hierarchy ) เป็นการจัด แสดงหน้าเว็บเรียงตามลำ�ดับกิ่งก้าน แตกแขนงต่อเนื่อง ไปเหมือนต้นไม้กลับหัว เหมาะสำ�หรับการนำ�เสนอ ข้อมูล ที่มีการแบ่งเป็นหมวดหมู่ที่ไม่มากนัก และมี ข้อมูลย่อยไม่ลึกมาก เช่นเว็บไซต์แนะนำ� ประวัติส่วนตัว ที่มีข้อมูล 4 - 5 หน้าเป็นต้น 2. แบบเชิงเส้น ( Linear ) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทาง เดียว เหมาะสำ�หรับการนำ�เสนอข้อมูลที่เป็นรูปภาพ เช่นเว็บไซต์นำ�เสนอสไลด์จาก Microsoft PowerPoint 3. แบบผสม ( Combination ) เป็นการ จัดหน้าเว็บชนิดผสมระหว่างแบบลำ�ดับขั้น และ แบบเชิงเส้น มักจะเป็นแบบที่นิยมใช้กันอย่าง แพร่หลายในปัจจุบัน เนื่องจากสามารถควบคุม การนำ�เสนอและการเรียกดูได้สะดวก และ รวดเร็ว
  • 20. 20 ทฤษฎีการออกแบบเว็บไซต์ 6. การออกแบบเว็บไซต์ นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของ หน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ Fire- works ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อ เว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น ในการออกแบบเว็บไซต์นั้นยังต้องคำ�นึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ ที่ไม่ใช่ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้น กรอบเพื่อความสวยงามและดึง ดูดผู้เยี่ยมชมด้วย 7. ส่วนประกอบของหน้าเว็บเพจ เราสามารถจำ�แนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้ 1. ส่วนหัว (Page Header) น่าจะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็น ส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สำ�หรับข้ามไปยังหน้าเว็บอื่น 2. ส่วนเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่ง เป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพ เคลื่อนไหว เป็นต้น 3. ส่วนท้าย (Page Footer) จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำ�หรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมล แอดเดรสของผู้ดูแลเว็บไซต์สำ�หรับติดต่อกับทางเว็บไซต์
  • 21. 21 ทฤษฎีการออกแบบเว็บไซต์ 8. แนวคิดในการออกแบบ ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่าง การดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพื่อศึกษาเป็น ตัวอย่างนั้น นับเป็นวิธีการที่ง่ายที่สุด แต่ก็ควรนำ�ไปประยุกต์ใช้ให้เหมาะสมกับเนื้อหา และกลุ่มเป้าหมายของเราด้วยศึกษาจากสื่อสิ่งพิมพ์ในรูปแบบต่าง ๆ สื่อสิ่งพิมพ์ในที่ นี้ ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบรชัวร์ หรือหนังสือบางเล่มที่มีรูปแบบและ จุดดึงดูดความสนใจ สามารถนำ�มาประยุกต์ใช้ในเว็บไซต์ของเราได้เช่นกัน องค์ประกอบที่ควรมีในเว็บเพจ องค์ประกอบทั่วไป 1. ชื่อของเว็บเพจ (Title) 2. ประวัติและรูปภาพผู้จัดทำ� (Profile/Picture) 3. การเชื่อมโยงภายในและภายนอกเว็บ (Links) 4. การแสดงที่อยู่ของเว็บ : URL 5. วัน/เวลาที่สร้างเว็บ (Date/Time) 6. การปรับปรุงครั้งล่าสุด (Update) 7. ผู้จัดทำ�เว็บ : (created by) 8. การสงวนลิขสิทธิ์ (Copy right) 9. การติดต่อผู้จัดทำ�เว็บ (contract /e-mail) 10. สถานที่ติดต่อของเว็บ (Address) 11. บราวเซอร์ที่เหมาะสมสำ�หรับการชม (Browser ) 12. ขนาดหน้าจอที่เหมาะสมในการชม (Bested View) 13. คำ�ถามที่ถูกถามบ่อย FAQ (Frequency Asked Question) 14. ความช่วยเหลือ (Help)
  • 22. 22 ทฤษฎีการออกแบบเว็บไซต์ องค์ประกอบพิเศษ 1. สมุดเยี่ยม (Guest book) 2. ฝากข้อความ (Web board) 3. กระดานข่าว (Bulletin Board) 4. กระทู้ ( Webboard ) 5. แบบสำ�รวจ (Web poll) 6. จำ�นวนผู้เข้าชม (Counter) 7. ห้องสนทนา (Chat Room) 8. สถิติทุกประเภท (Web state) 9. เทคนิคพิเศษด้วยโปรแกรมสคริปต์ (Java script, VBscript , cgi,asp,php) 10. โปรแกรมพิเศษสนับสนุน (Download) 11. สไลด์สรุปบรรยาย (Presentation)
  • 26. 26 ทฤษฎีการออกแบบเว็บไซต์ หลักและทฤษฎีในการออกแบบ องค์ประกอบของงานกราฟิก งค์ประกอบหลัก ๆ ในงานกราฟิกจะแบ่งออกได้ คือ เส้น, รูปร่าง, รูปทรง, น้ำ� หนัก, พื้นผิว, ที่ว่าง, สี และตัวอักษร 1.เส้น (Line) อ ลักษณะของเส้น (Line) แบบต่าง ๆ ตามตารางมาตรฐานแล้วจะพูดถึงเรื่องนี้ว่าเป็นเรื่องของจุด เส้น ระนาบ แต่ ถ้าจะเอาให้เข้าใจง่าย ๆ ก็เพียงแต่เข้าใจว่าความหมายของเส้นก็คือ การที่จุดหลาย ๆ จุด ถูกนำ�มาวางต่อเนื่องจนกลายเป็นเส้นรูปทรงต่าง ๆ ขึ้นมา รูปทรงของเส้นที่ จะสื่อออกมาถึงความรู้สึกที่แตกต่างกันออกไป • เส้นแนวนอน ให้ความรู้สึกสงบ ราบเรียบ • เส้นตรงแนวตั้ง ให้ความรู้สึกมั่นคงแข็งแรง • เส้นทแยง ให้ความรู้สึกไม่มั่นคง รวดเร็ว แสดงถึงเคลื่อนไหว • เส้นตัดกัน ให้ความรู้สึกประสาน แข็งแกร่ง หนาแน่น • เส้นโค้ง ให้ความรู้สึกอ่อนช้อย อ่อนน้อม • เส้นประ ให้ความรู้สึก โปร่ง ไม่สมบูรณ์ หรือในบางกรณีอาจจะใช้เป็น สัญลักษณ์ในการแสดงถึงส่วนที่ถูกซ่อนเอาไว้
  • 27. 27 ทฤษฎีการออกแบบเว็บไซต์ • เส้นโค้งก้นหอย ให้ความรู้สึกเคลื่อนไหวไม่มีที่สิ้นสุด • เส้นโค้งแบบคลื่น ให้ความรู้สึกถึงการเคลื่อนไหวอย่างนิ่มนวล • เส้นซิกแซ็ก ให้ความรู้สึก น่ากลัว อันตราย ส่วนใหญ่แล้วเส้นจะมีอยู่ทุกๆ งานออกแบบ โดยถูกนำ�ไปใช้ร่วมกับองค์ประกอบ ต่างๆ จนสื่อถึงอารมณ์ของผลงานออกมาได้ ในแบบที่ต้องการ ดังนั้น การเลือกใช้ เส้นเข้ามาเป็นส่วนประกอบในงานของเราจึงถือว่าเป็นสิ่งที่ต้องคำ�นึงถึงเป็นอันดับ แรก 2. รูปร่าง (Shape), รูปทรง (Form) ,น้ำ�หนัก (Value) รูปร่าง : เป็นองค์ประกอบต่อเนื่องมาจากเส้น เกิดจากการนำ�เส้นแบบต่าง ๆ มาต่อ กันจนได้รูปร่าง 2 มิติที่มีความกว้าง และความยาว (หรือความสูง) ในทางศิลปะจะแบ่งรูปร่างออกเป็น 2 แบบคือ รูป ร่างที่คุ้นตา แบบที่เห็นแล้วรู้เลยว่านั่นคืออะไร เช่นดอกไม้ หรือคน และอีกแบบ หนึ่งจะเป็นรูปร่างแบบฟรีฟอร์ม เป็นแนวที่ใช้รูปร่างสื่อความหมายที่จินตนาการไว้ ออกมา ไม่มีรูปทรงที่แน่นอน แต่ดูแล้วเกิดจินตนาการถึงอารมณ์ที่ต้องการสื่อได้ รูปทรง : เป็นรูปร่างที่มิติเพิ่มขึ้นมากลายเป็นงาน 3 มิติคือ มีความลึกเพิ่ม เข้ามาด้วย น้ำ�หนัก : เป็นส่วนที่มาเสริมให้ดูออกว่ารูปทรงมีน้ำ�หนักขนาดไหนเบา หรือ หนัก ทึบ หรือโปร่งแสง น้ำ�หนักจะเกิดจากการเติมสีและแสงแรเงาลงไปในรูปทรง จนได้ผลลัพธ์ออกมาตามที่ต้องการ
  • 28. 28 ทฤษฎีการออกแบบเว็บไซต์ ในการทำ�งานกราฟิกรูปร่างจะมีผลอย่างมากต่ออารมณ์ของงาน เช่น ถ้าต้องการ งานที่อารมณ์ผู้หญิงจัด ๆ เพียงแค่ใส่รูปของดอกไม้ลงไปก็จะสามารถแสดงอารมณ์ ได้อย่างชัดเจน หรือในงานที่ต้องการให้มีมิติมากขึ้นก็อาจจะเป็นรูปทรงของดอกไม้ ในมุมมองที่แปลกตา ก็จะสามารถสื่ออารมณ์ที่ต้องการออกไปได้พร้อมกับเป็นการ สร้างความน่าสนใจเพิ่มขึ้นมาอีกด้วย 3.พื้นผิว (Texture) ในงานออกแบบกราฟิก พื้นผิวจะเป็นอีกหนึ่งองค์ประกอบที่ช่วยสื่ออารมณ์ ของงานออกมาได้ชัดเจนมากขึ้น เช่น ถ้าเราเลือกพิมพ์งานลงในกระดาษ Glossy ที่เงาและแวววาว งานนั้นจะสื่อกอกไปได้ทันทีว่า “หรู มีระดับ” หรือ ถ้าเราใส่ ลวดลายที่ดูคล้าย ๆ สนิม หรือรอยเปื้อนลงไปในงานก็จะสื่อได้ทันทีถึง “ความ เก่า” ดังนั้นในการทำ�งาน นักออกแบบจึงควรเลือกสร้างพื้นผิวทั้งในองค์ประกอบ ต่าง ๆ ที่ใส่ลงไปในภาพ รวมทั้งวัสดุที่ใช้พิมพ์งานดังกล่าวลงไป ก็จะสามารถช่วย สื่อความหมายที่ต้องการได้อย่างเหมาะสม
  • 29. 29 ทฤษฎีการออกแบบเว็บไซต์ 4.ที่ว่าง (Space) อาจจะจะเกิดจากความตั้งใจหรือไม่ตั้งใจของนักออกแบบก็ได้ ที่ว่างไม่ได้ หมายความถึงพื้นที่ว่างเปล่าในงานเพียงอย่างเดียว แต่หมายถึงรวมไปถึงพื้นที่ที่ ไม่สำ�คัญหรือ Background ด้วย ในการออกแบบงานกราฟิกที่ว่างจะเป็นตัวช่วย ในงานดูไม่หนักจนเกินไป และถ้าควบคุมพื้นที่ว่างนี้ให้ดี ๆ ที่ว่างก็จะเป็นตัวที่ช่วย เสริมจุดเด่นให้เห็นได้ชัดเจนมากขึ้น 5. สี (Color) สีของงานกราฟิก ถือเป็นหัวใจหลักสำ�คัญเลยก็ ว่าได้ เพราะการเลือกใช้สีจะแสดงถึงอารมณ์ที่ ต้องการได้ชัดเจนมากกว่าส่วนประกอบอื่น ๆ ทั้งหมด เช่น สีโทนร้อน สำ�หรับงานที่ต้องการ ความตื่นเต้น ท้าทาย หรือสีโทนเย็นสำ�หรับงาน ต้องการให้ดูสุภาพ สบาย ๆ สำ�หรับเรื่องสีเป็นเรื่อง ที่ต้องพูดถึงละเอียดมากกง่าหัวข้ออื่น ๆ ดังนั้นจึง ขอยกไปอธิบายไว้เป็นเรื่องใหญ่ ๆ ในหัวข้อต่อไป
  • 30. 30 ทฤษฎีการออกแบบเว็บไซต์ 6.ตัวอักษร (Type) ตัวอักษรเป็นสิ่งสำ�คัญไม่เป็นรองใคร เมื่อต้องทำ�งานกราฟิกดีไซน์ ในเรื่อง งานกราฟิกที่ดีบางงาน นักออกแบบอาจจะใช้เพียงแค่ตัวอักษรและสีเป็นส่วน ประกอบเพียงสองอย่าง เพื่อสร้างสรรค์งานที่สามารถสื่อความหมายออกมาได้ใน ดีไซน์ที่สวยงาม ดังนั้น เรื่องนี้จะต้องยกไปอธิบายให้ละเอียดมากขึ้นในหัวข้อใหญ่ ๆ ต่อไปจากเรื่องสี ทฤษฎีสีและการสื่อความหมายในอารมณ์ต่างๆ ถ้าจะรู้จักสีให้ลึกซึ้งถึงขั้นเลือกใช้ได้อารมณ์ที่ต้องการได้ ก็ต้องมาทำ�ความ เข้าใจกับ 3 เรื่องเหล่านี้ คือ สีเกิดจากอะไร, แต่ละสีมีความหมายอย่างไร และ เทคนิคการนำ�สีไปใช้ให้ได้อย่างใจต้องการทำ�อย่างไรกันก่อน สีเกิดจากอะไร? ในปัจจุบันแหล่งกำ�เนิดสีจะมีอยู่ 3 ชนิดคือ สีที่เกิดจากแสง เกิดจากการหักเหของ แสงผ่านแท่งแก้วปริซึมมี 3 สีคือ สีแดง (Red), สีเขียว (Green) และสีน้ำ�เงิน (Blue) เรียกรวม กันว่า RGB นำ�มาผสมกันจนเกิดเป็นสีสันต่าง ๆ มากมาย ตัวอย่างอุปกรณ์ที่ใช้แหล่งกำ�เนิด สีแบบนี้ เช่น โทรทัศน์หรือจอคอมฯ ของเรา นั่นเองสีที่เกิดจากแสง RGB
  • 31. 31 ทฤษฎีการออกแบบเว็บไซต์ สีเกิดจากหมึกสีในการพิมพ์ เกิดจาก การผสมหมึกพิมพ์ทั้ง 4 สีในเครื่องพิมพ์คือ สี ฟ้า, สีม่วงแดง, สีเหลือง และสีดำ� เรียกรวม กันว่า CMYK จนได้ออกมาเป็นสีสันต่าง ๆ ตามที่ต้องการ ในการทำ�งานกราฟิก ถ้า หากว่าเป็นงานที่นำ�ไปพิมพ์ตามแท่นพิมพ์แล้ว นักออกแบบก็ควรจะเลือกใช้โหมดสีแบบนี้ทุก ครั้ง เพื่อให้ได้ผลลัพธ์ที่ออกมาตรงกับที่เห็น ในจอคอมฯ ที่ทำ�งานอยู่ สีเกิดจากหมึกสีในการพิมพ์ CMYK • สีที่เกิดจากธรรมชาติเป็นสีที่ได้จากธรรมชาติ จากกระบวนการสังเคราะห์ ทางเคมี 3 สีคือ สีแดง สีเหลืองและสีน้ำ�เงิน หลังจากนั้นจึงนำ�มาผสมกันจนเกิด เป็นสีอื่นๆ แหล่งกำ�เนิดสีแบบที่เราเรียนกันมาในคลาสศิลปะตั้งแต่เด็กจนโต ที่ เรียกกันว่าแม่สีก็คือสีแบบนี้นั่นเอง การผสมสีไว้ใช้งานจะใช้งานจะใช้วิธีผสมจากสีที่เกิดจากสีที่เกิดธรรมชาติ โดยเริ่มผสมจากแม่สี หรือสีขั้นที่หนึ่ง ไปจนเป็นสีขั้นที่สองและขั้นที่สามตาก ลำ�ดับภาพแต่ละสีมีความหมายอย่างไร? สีที่เกิดจากธรรมชาติเป็นสีที่ได้จากธรรมชาติ
  • 32. 32 ทฤษฎีการออกแบบเว็บไซต์ หลังจากรู้จักการผสมสีกันไปแล้ว ต่อไปก็จะต้องมารู้จักกับจิตวิทยาของสีที่ จะมีผลต่ออารมณ์ของผู้พบเห็นกันสีอะไรให้ความรู้สึกอย่างไรบ้าง เราจะมาดูกัน ตามรายละเอียดต่อไปนี้ • สีแดง ให้ความรู้สึกอันตราย เร่าร้อน รุนแรง มั่นคง อุดมสมบูรณ์ • สีส้ม ให้ความรู้สึกสว่าง เร่าร้อน ฉูดฉาด • สีเหลือง ให้ความรู้สึกสว่าง สดใส สดชื่น ระวัง • สีเขียว ให้ความรู้สึกงอกงาม พักผ่อน สดชื่น • สีน้ำ�เงิน ให้ความรู้สึกสงบ ผ่อนคลาย สง่างาม ทึม • สีม่วง ให้ความรู้สึกหนัก สงบ มีเลศนัย • สีน้ำ�ตาล ให้ความรู้สึกเก่า หนัก สงบเงียบ • สีขาว ให้ความรู้สึกบริสุทธิ์ สะอาด ใหม่ สดใส • สีดำ� ให้ความรู้สึกหนัก หดหู่ เศร้าใจ ทึบตัน • สีทองเงินและสีมันวาว แสดงถึงความรู้สึกมั่นคง • สีดำ�กับสีขาว แสดงถึงความรู้สึกทางอารมณ์ที่ถูกกดดัน • สีเทาปานกลาง แสดงถึงความนิ่งเฉย สงบ • สีเขียวแก่ผสมสีเทา แสดงถึงความสลด รันทดใจ ชรา
  • 33. 33 ทฤษฎีการออกแบบเว็บไซต์ ตัวอย่างภาพที่ออกแบบโดยการเลือกใช้สีต่าง ๆ ความรู้สึกเกี่ยวกับสีที่กล่าวมาจะเป็นความรู้สึกแบบกลาง ๆ ที่เป็นส่วนใหญ่ ในโลก แต่นอกจากที่กล่าวมาแล้ว ในบางพื้นที่หรือบางวัฒนธรรม อิทธิพลของ สีจะแตกต่างกันออกไปตามประสบการณ์ของแต่ละบุคคล วัฒนธรรม ประเพณี ขนบธรรมเนียม หรือค่านิยมของแต่ละกลุ่มชน นอกจากแต่ละสีจะสร้างความรู้สึก ด้วยตนเองแล้ว เมื่อนำ�มาใช้ร่วมกันเรา ยังสามารถแบ่งสีออกเป็น 2 วรรณะ เพื่อ สร้างอารมณ์ที่แตกต่างกันออกไปเมื่อใช้ งานร่วมกันได้อีก การแบ่งสีออกเป็นสีโทนร้อนและสีโทนเย็น
  • 34. 34 ทฤษฎีการออกแบบเว็บไซต์ • สีทีอยู่ในวรรณะร้อน (Warm Tone Color) ได้แก่ สีเหลืองส้ม สีส้ม สีแดง และ สีม่วงแดง สีกลุ่มนี้เมื่อใช้ในงานจะรู้สึกอบอุ่น ร้อนแรง สนุกสนาน • สีที่อยู่ในวรรณะเย็น (Cool Tone Color) ได้แก่ สีเขียว สีฟ้า สีม่วงคราม สี กลุ่มนี้เมื่อใช้งานจะได้ความรู้สึกสดชื่น เย็นสบาย สีและการนำ�ไปใช้ เทคนิคการนำ�สีไปใช้งานมีอยู่มากมายหลายวิธี แต่ทุกวิธีจะชี้ไปที่ วัตถุประสงค์เดียวหลัก ๆ คือ ใช้สีเพิ่มความโดดเด่นให้กับจุดเด่นในภาพ และใช้สี ตกแต่งส่วนอื่น ๆ ของภาพให้ได้ภาพรวมออกมาในอารมณ์ที่ต้องการ เทคนิคการเลือกสีจะมีสูตรสำ�เร็จให้เลือกใช้งานอยู่บ้าง คือ วิธีโยงความสัมพันธ์ จากวงล้อสี ก่อนนะทำ�งานทุกครั้ง และนำ�ว่าให้เปิดไฟล์วงล้อสีขึ้นมา แล้วเลือกสีห ลัก ๆ สำ�หรับใช้ในการทำ�งานก่อน
  • 35. 35 ทฤษฎีการออกแบบเว็บไซต์ เทคนิคการเลือกใช้สีแบบสูตรสำ�เร็จจะมีอยู่หลายรูปแบบ แต่แบบที่นิยมให้งานกัน เป็นหลักจะมีอย่า 4 รูปแบบ คือ • Mono หรือเอกรงค์ จะเป็นการใช้สีที่ ไปในโทนเดียวกันทั้งหมด เช่น จุดเด่นเป็นสี แดง สีส่วนที่เหลือก็จะเป็นสีที่ใกล้เคียงกับสี แดง โดยใช้วิธีลดน้ำ�หนักความเข้มของสีแดง ลงไป • Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรงข้ามกันในวงจร สีเช่น สีฟ้าจะตรงข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสีเขียว สามารถนำ�มาใช้งาน ได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดีและไม่ดี หากไม่รู้หลักพื้นฐานในการใช้ งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ควรใช้ในพื้นที่ปริมาณเท่ากันในงาน ควรใช้สีใด สีหนึ่งจำ�นวน 80% อีกฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นที่ ของงานโดยรวม จะทำ�ให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่นของภาพ
  • 36. 36 ทฤษฎีการออกแบบเว็บไซต์ • Triad คือ การเลือกสีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่ามาใช้งาน • Analogic หรือสีข้างเคียงกัน การเลือกสีใดสีหนึ่งขึ้นมาใช้งานพร้อมกับสีที่อยู่ติด กันอีกข้างละสี หรือก็คือสีสามสีอยู่ติดกันในวงจรสีนั่นเอง
  • 37. 37 ทฤษฎีการออกแบบเว็บไซต์ ตัวอักษร ตัวอักษรที่เราใช้งานกันอยู่ในปัจจุบันจะแบ่งออก เป็น 4 รูปแบบใหญ่ ๆ คือ • Font แบบ Serif จะดูเป็นระเบียบ เป็น ทางการ เหมาะจะใช้ในงานที่เป็นทางการ และ ต้องการความน่าเชื่อถือมากๆ • Font แบบ San Serif จะอ่านง่าย ดูทัน สมัยมากกว่าแบบอื่น ๆ เหมาะจะใช้ในงานที่ ต้องการ ความทันสมัยออกแนวไม่เป็นทางการ มากนัก • Font แบบ Antique จะเหมาะกับงาน ที่ต้องการแสดงความชัดเจนของยุคสมัย หรือ ต้องการอามรณ์ย้อยยุคนิดหน่อย • Font แบบ Script เหมาะกังานที่ไม่ เป็นทางการ ต้องการความเป็นกันเองและดู สนุกสนานมากกว่าแบบอื่นๆ หรือในบางกรณี Font แบบนี้จะใช้ในงานที่ต้องการข้อความที่ดู เหมือนเป็นลายมือเขียน
  • 38. 38 ทฤษฎีการออกแบบเว็บไซต์ หลังจากรู้จัก Font กันดีขึ้นแล้ว ในหัวข้อต่อไปเราจะมาพูดถึงวิธี เลือกใช้งาน Font ให้เหมาะสมกับงานออกแบบกัน วิธีเลือก Font ไปใช้ในงานออกแบบ การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคำ�นึงง่าย ๆ อยู่ 2 ข้อคือ 1. ความหมายต้องเข้ากัน หมายความว่า ความหมายของคำ�และ Font ที่ เลือกใช้ควรจะไปด้วยกันได้ เช่น คำ�ว่าน่ารักก็ควรจะใช้ Font ที่ดูน่ารักไปด้วย ไม่ ควรใช้ Font ที่ดูเป็นทางการดังภาพตัวอย่าง 2. อารมณ์ของฟอนต์ และอารมณ์ของงานต้องไปในทิศทางเดียวกัน เช่น งานที่ต้องการความน่าเชื่อถือก็จะเลือกใช้ Font แบบ Serif ที่ดูหนักแน่น น่าเชื่อ ถือ ส่วนงานที่ต้องการความฉูดฉาดอย่างโปสเตอร์ลดราคาก็ควรจะเลือกใช้ Font ที่เป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็นต้น
  • 39. 39 ทฤษฎีการออกแบบเว็บไซต์ นอกจากการเลือก Font มาใช้งานแล้ว การวางตำ�แหน่งตัวอักษรก็เป็นอีกเรื่องหนึ่ง ที่มีความสำ�คัญกับการทำ�งาน สำ�หรับการวางตำ�แหน่งตัวอักษร มีข้อควรคำ�นึงถึงไว้ให้อยู่ 3 ข้อคือ 1. ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลงล่าง โดยมี รัศมีการกวาดสายตาตามลำ�ดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลำ�ดับให้ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมาทำ�ให้เสียความหมายของข้อความไป 2. จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัวใหญ่ๆ อยู่ เพียงชุดเดียว จึงจะเป็นจุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วนจุดอื่น ๆ ขนาดควรจะเล็ก ลงมาตามลำ�ดับความสำ�คัญ 3. ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทำ�ให้กลายเป็นงานที่อ่าน ยากและชวนปวดศรีษะมากกว่าชวนอ่าน ถ้าจำ�เป็นจริง ๆ แนะนำ�ให้ใช้ Font เดิมแต่ไม่ ตกแต่งพวกขนาด, ความหนาหรือกำ�หนดให้เอียงบ้าง เพื่อเพิ่มความน่าสนใจไม่ให้งานดู น่าเบื่อแบบนี้จะดีกว่า การจัดองค์ประกอบ สาหรับงานออกกราฟิกดีไซน์สิ่งสาคัญที่สุดคือ การจัดวางองค์ประกอบลงในงาน ออกแบบ หรือที่จะมักจะนิยมเรียกกันสั้น ว่าการวางคอมโพส การวางคอมโพส คือ การวางองค์ประกอบต่าง ๆ เช่น เส้น สี ตัวอักษร หรือรูปภาพ มาวางเข้าด้วยกันในพื้นที่ ๆ หนึ่งเพื่อสร้างผลงานที่สามารถสื่อสารสิ่งที่ต้องการออกมา ก่อนจะนาองค์ประกอบมาจัดคอมโพส นักออกแบบควรจะรู้ก่อนว่า องค์ประกอบแต่ละ แบบสื่อถึงอารมณ์อะไรบ้าง เช่น เส้นแบบไหนสื่อถึงอารมณ์อย่างอย่างไร หรืออักษรแบบ ไหนสามารถนามาใช้กับงานที่อยู่ได้อย่างเหมาะสม ถ้าหากไม่รู้ถึงความหมายขององค์ ประกอบเหล่านี้ ก็จะไม่สามารถคบคุมให้งานออกแบบที่ทาอยู่เสร็จออกมาเป็นงานใน อารมณ์ที่ต้องการได้
  • 41. 41 ทฤษฎีการออกแบบเว็บไซต์ ความทันสมัย (Currency) เนื้อหาและข้อมูล (Content and Information) ความน่าเชื่อถือ (Authority) การเชื่อมโยงข้อมูล (Navigation) การปฏิบัติจริง (Experience) ความเป็นมัลติมีเดีย (Multimedia) การให้ข้อมูล (treatment) การเข้าถึงข้อมูล (Access) ความหลากหลายของข้อมูล (Miscellaneous)
  • 42. 42 ทฤษฎีการออกแบบเว็บไซต์ การประเมินคุณภาพเว็บไซต์ ( ปรัชญนันท์,2555 : เว็บไซต์ ) การออกแบบและพัฒนาเว็บได้เพิ่ม ขึ้นโดยลำ�ดับและนับวันจะยิ่งทวีจำ�นวนขึ้น ในปัจจุบันมีเว็บเพจออนไลน์ใน ระบบอินเทอร์เน็ตนับร้อย ๆ ล้านเว็บ แต่มีคำ�ถามสำ�คัญที่ต้องมาหาคำ�ตอบ ก็คือ เว็บแบบไหนที่มีคุณภาพดี เว็บแบบใดจึงจะถือว่าเป็นเว็บที่มีคุณค่า และเหมาะสมสำ�หรับนำ�มาใช้ประโยชน์ เป็นเรื่องที่ต้องตอบคำ�ถามกันอยู่เสมอ และยังไม่มีคำ�ตอบที่ชัดเจน เมื่อพิจารณาแบบประเมินเว็บเพจของ ดร.แนน ซี อีเวอร์ฮาร์ท (Everhart, 1996) ภาควิชาบรรณารักษและสารสนเทศศาสตร์ มหาวิทยาลัยเซนต์จอห์น รัฐนิวยอร์ค สหรัฐอเมริกา ซึ่งกำ�หนดระดับการให้ คะแนนเอาไว้อย่างน่าสนใจและน่าจะนำ�มาขยายความ เพื่อประโยชน์ในการ ประเมินคุณภาพของเว็บสำ�หรับนักออกแบบและพัฒนาเว็บ รวมถึงผู้ที่เกี่ยวข้อง ในการจัดสารสนเทศผ่านระบบอินเทอร์เน็ต จะได้มีแนวทางในการตรวจสอบ และประเมินคุณภาพที่สามารถอธิบายเหตุผลได้
  • 43. 43 ทฤษฎีการออกแบบเว็บไซต์ โดยแนวคิดของอีเวอร์ฮาร์ท จะมีด้วยกัน 9 ด้านคือ 1. ความทันสมัย (Currency) 2. เนื้อหาและข้อมูล (Content and Information) 3. ความน่าเชื่อถือ (Authority) 4. การเชื่อมโยงข้อมูล (Navigation) 5. การปฏิบัติจริง (Experience) 6. ความเป็นมัลติมีเดีย (Multimedia) 7. การให้ข้อมูล (treatment) 8. การเข้าถึงข้อมูล (Access) 9. ความหลากหลายของข้อมูล (Miscellaneous) เนื่องจากแนวคิดทั้ง 9 ด้านยังขาดรายละเอียดและเหตุผล ดังนั้นเพื่อให้เข้าใจ ถึงเหตุผลและที่มาของระดับการประเมิน จึงจำ�เป็นต้องขยายความและชี้ให้เห็น ว่าเหตุผลที่ต้องประเมินเว็บไซต์ในแต่ละด้านนั้นคืออะไร 1. ความทันสมัย ความทันสมัยของเว็บไซต์ จัดเป็นหัวข้อสำ�คัญของการพัฒนาข้อมูล สารสนเทศผ่านระบบอินเทอร์เน็ต เนื่องจากข้อมูลสารสนเทศที่ปรากฎอยู่ ในเว็บไซต์จะเป็นประโยชน์ต่อผู้ใช้งานก็เมื่อ ข้อมูลนั่นเป็นข้อมูลที่ใหม่ ทัน ต่อสถานการณ์และได้รับการปรับปรุงแก้ไขตามระยะเวลาอย่างเหมาะสม การ ประเมินเว็บไซต์ในด้านของความทันสมัยควรประเมินใน 3 ส่วนด้วยกันคือ - เว็บไซต์แสดงวันที่ปรับปรุงข้อมูลครั้งล่าสุด - เว็บไซต์แสดงการปรับปรุงข้อมูลอยู่เสมอเป็นปัจจุบัน - เว็บไซต์แสดงสถิติของจำ�นวนการเข้าใช้และปรับปรุงข้อมูล
  • 44. 44 ทฤษฎีการออกแบบเว็บไซต์ 2. เนื้อหาและข้อมูล เว็บไซต์ต้องมีเนื้อหาและข้อมูลที่เป็นประโยชน์ เป็นสิ่งที่ตรวจสอบและ วัดความเป็นเว็บไซต์ที่ดีได้ง่าย รวมทั้งสามารถประเมินคุณค่าของเว็บไซต์ได้อย่าง ชัดเจน โดยเฉพาะถ้าเว็บไซต์มีเนื้อหาข้อมูลที่ตรงตามหลักสูตรและการเรียนการ สอนของนักเรียน หรือทำ�ให้เป็นเนื้อหาข้อมูลประกอบการเรียนตามหลักสูตรและน่า สนใจชวนติดตามย่อมเป็นประโยชน์ สิ่งสำ�คัญที่สุดของข้อมูลและเนื้อหาในเว็บไซต์ก็คือ ความถูกต้องของเนื้อหา เป็นคำ�ถามที่ถูกถามมากที่สุดของการออกแบบและพัฒนาเว็บก็คือ ความน่าเชื่อถือ ของเว็บ และคำ�ตอบก็คือ ถ้าเนื้อหาของเว็บมีความถูกต้องนั่นคือความน่าเชื่อถือที่ สำ�คัญที่สุด ซึ่งเป็นสิ่งที่พิสูจน์ยากที่สุด และหาคำ�รับรองหรือยืนยันได้ยาก ผู้ที่ สืบค้นเข้ามาในเว็บและต้องการนำ�ข้อมูลไปใช้ประโยชน์ ก็ย่อมไม่ทราบว่าข้อมูล ที่นำ�เสนอบนเว็บไซต์นั้นถูกต้องหรือไม่ เพราะผู้ใช้ข้อมูลก็เพียงต้องการข้อมูลหรือ ไม่ค้นหาข้อมูลนำ�ไปใช้ไม่ใช่ผู้ที่จะต้องตรวจสอบความถูกต้องของข้อมูล ความถูก ต้องจึงต้องมีองค์ประกอบอื่น ๆ เข้ามาเกี่ยวข้องเช่น ข้อมูลนั้นเป็นข้อมูลหน่วยงานที่ นำ�มาจากสื่ออื่น ๆ ที่เคยเผยแพร่แล้ว เช่น การเผยแพร่ข้อมูลโรคติดต่อต่าง ๆ ที่เคย อยู่ในแผ่นพับใบปลิว ก็นำ�มาสร้างเว็บไซต์เป็นต้น ข้อมูลจึงจะน่าเชื่อถือมากที่สุด หรือโดยเฉพาะข้อมูลจากตำ�ราโดยตรง เมื่อเนื้อหามีความถูกต้องสมบูรณ์สิ่งที่ต้องคำ�นึงต่อไปคือ เนื้อหาและข้อมูล ต้องเป็นไปตามวัตถุประสงค์ในการจัดทำ�เว็บไซต์ เนื้อหาและข้อมูลตรงตามชื่อและ สอดคล้องกับหน่วยงานที่ดำ�เนินการอย่างชัดเจน จึงจะถือได้ว่าเว็บไซต์มีความถูก ต้อง เนื้อหาและข้อมูลควรจะมีลักษณะเป็นภาษาเขียนเพื่อให้น่าเชื่อถือและสละ สลวย มีลักษณะการใช้ภาษาที่สุภาพ ไม่ใช้ภาษาพูด ไม่หยาบคาย และมีการใช้ ภาษาที่เป็นทางการ การพิมพ์ไม่ผิดพลาด การใช้สระ พยัญชนะต่าง ๆ มีความถูก ต้องสมบูรณ์ถือว่าเว็บไซต์มีคุณภาพดี
  • 45. 45 ทฤษฎีการออกแบบเว็บไซต์ 3. ความน่าเชื่อถือ เว็บไซต์ที่มีคุณภาพไม่ใช่เพียงแต่ทันสมัย มีเนื้อหาและข้อมูลที่ดี ความ น่าเชื่อถือต่อเว็บไซต์เป็นเรื่องสำ�คัญในจะนำ�เอาข้อมูลไปอ้างอิงหรือใช้ประโยชน์ เพราะข้อมูลและเนื้อหาจะได้ถูกนำ�ไปใช้ประโยชน์ก็ด้วยเหตุผลที่ว่าเว็บนั้นน่าเชื่อ ถือ เช่น ถ้าต้องการข้อมูลเกี่ยวกับโรคติดต่อ ข้อมูลที่น่าเชื่อถือที่สุดก็ควรเป็น ข้อมูลของกระทรวงสาธารณสุข หรือโรงพยาบาลต่าง ๆ นั่นหมายความว่า ผู้ เข้าไปใช้ประโยชน์จากเว็บก็จะพยายามหาข้อมูลจากเว็บที่เกี่ยวข้องกับเรื่องที่ ต้องการ ทันสมัยและมีข้อมูลเนื้อหาที่ดี แต่ที่สำ�คัญคือเว็บต้องน่าเชื่อถือนั่นเอง ความน่าเชื่อถือของเว็บไซต์นั่นคือ ผู้จัดทำ�เว็บเป็นผู้ที่เกี่ยวข้องโดยตรงกับ เนื้อหา หรือเป็นองค์กรที่รับผิดชอบด้านนั้นโดยตรง โดยแสดงความรับผิดชอบ ในเว็บอย่างชัดเจน แสดงให้เห็นได้จากส่วนที่สงวนลิขสิทธิ์และผู้รับผิดชอบภายใน เว็บ ซึ่งนิยมแสดงไว้ด้านล่างของเว็บไซต์ โดยรวมถึงความทันสมัยนั่นคือเวลาที่ ปรับปรุงครั้งล่าสุดนั่นเอง ตัวอย่างของความน่าเชื่อถือเช่น - การสงวนลิขสิทธิ์ของเว็บ Copyright ã All Rights Reserved - ผู้รับผิดชอบ Webmaster Prachyanun Nilsook - ตำ�แหน่งหน้าที่ผู้จัดทำ� หัวหน้าศูนย์เทคโนโลยีสารสนเทศและการ สื่อสาร - ติดต่อ Email : prachyanun@hotmail.com โทร : 01- 7037515 - ที่อยู่ของหน่วยงาน วิทยาลัยเทคนิคสมุทรสงคราม อ.เมืองฯ จ.สมุทรสงคราม ถ้าหน่วยงานหรือองค์กรมีความน่าเชื่อถือสูง เพียงแต่โดเมนเนมก็สามารถบ่ง บอกความน่าเชื่อถือได้เช่นกัน
  • 46. 46 ทฤษฎีการออกแบบเว็บไซต์ 4. การเชื่อมโยงข้อมูล การประเมินเว็บไซด์ที่ดีควรจะแสดงการเชื่อมโยงไปยังส่วนต่างๆ ในรูป แบบที่เข้าใจง่าย และอ่านได้อย่างชัดเจน การเชื่อมโยงภายในเว็บไซด์ จะมีชื่อ เรียกว่า ลิงค์ (Link) การลิงค์หรือการเชื่อมโยงนั้น ถ้าหน้าแรกสามารถบอก ได้ว่า เว็บไซด์นั้นมีการจัดการอย่างไร มีเงื่อนไขในการเชื่อมโยงอย่างไร และมี อย่างไรที่จำ�เป็นต้องเชื่อมโยงไปบ้าง ลักษณะอย่างนี้อาจจะมีหน้าพิเศษต่างหากที่ เรียกว่า แผนภูมิเว็บไซด์ หรือ site map อีกคำ�หนึ่ง สำ�หรับการเชื่อมโยงในลักษณะทั่วไปของเว็บเพจ คือคำ�ว่า navigation หมายถึงเส้นทางซึ่งเมื่อเปิดเข้าสู่หน้าแรกและมีโฮมเพจ และต้องการ เชื่อมโยงหรือไปในเส้นทางใดภายในเว็บไซด์ สิ่งเหล่านี้เรียกว่า navigation bar ดังนั้น ผู้ที่ออกแบบเว็บไซด์และมีการเชื่อมโยงได้ดี มีการจัดองค์ประกอบได้ดีจะ ทำ�ให้เว็บไซด์นั้นสามารถเชื่อมโยงได้กันทุกเว็บ และเป็นไปตามวัตถุประสงค์ของ เว็บไซด์ ลักษณะการเชื่อมโยงภายในเว็บไซด์ ควรจะแสดงรูปแบบที่ชัดเจนหรือ ที่เรียกว่า Hypertext นั้นก็คือ ตัวหนังสือที่มีการเชื่อมโยงจะมีการขีดเส้นใต้ไว้ อย่างชัดเจน หรือถ้าไม่มีการขีดเส้นใต้เมื่อเลื่อนเม้าส์ผ่านไปยังบริเวณที่เป็นตัว อักษรจะปรากฏเป็นรูปมือ ซึ่งรูปแบบเว็บไซด์ที่มีคุณภาพและชัดเจน ส่วนที่เป็น Hypertext และมีการเชื่อมโยงนั้นควรวางรูปแบบที่ชัดเจน เมื่อเลื่อนเม้าส์เข้าไป ในส่วนที่เป็น Hypertext ก็ควรจะเปลี่ยนแปลงเป็นรูปมือ สี และแบ็คกราวน์ ของตัวอักษรก็อาจจะเปลี่ยนไป ซึ่งทำ�ให้ง่ายต่อการสังเกต การเชื่อมโยงที่ดี ตัวที่ ทำ�หน้าที่การเชื่อมโยงควรจะอ่านง่ายและสื่อความหมายชัดเจน เป็นในลักษณะ เดียวกันกับวัตถุประสงค์ของเว็บไซด์ ตัวเชื่อมโยงหรือ ลิงค์ควรจะง่ายต่อการ สังเกตและมีขนาดเหมาะสม ตัวเชื่อมโยงควรจะมีเหตุมีผลสอดคล้องกันทั้งกลุ่ม
  • 47. 47 ทฤษฎีการออกแบบเว็บไซต์ เช่น ถ้ามีเมนูที่ทำ�หน้าที่ในการเชื่อมโยงไปยังเว็บเพจต่างๆ เมนูทั้งกลุ่มนั้นควรมี ลักษณะที่สอดคล้องกัน ตัวอย่าง เช่น ถ้าทำ�เป็นร้านหนังสือหรือห้องสมุด เมนู ที่เป็นตัวเชื่อมโยงหรือตัวลิงค์ควรจะมีลักษณะรูปหนังสือ ตะกร้าใส่หนังสือ ที่คั่น หนังสือ หรือลักษณะใดลักษณะหนึ่งที่เกี่ยวข้องกันกับห้องสมุดหรือหนังสือในชุด เดียวกัน 5. การนำ�ไปใช้งานจริง เว็บเพจที่ดีควรจะมีเนื้อหาเป็นไปตามวัตถุประสงค์ที่กำ�หนดไว้ และมี การแสดงผลอย่างรวดเร็จ ในเว็บเพจต้องทำ�ให้ผู้เข้าชมรู้สึกว่าไม่เสียเวลา ไม่ ไร้ประโยชน์หรือเว็บเพจไม่เป็นไปตามวัตถุประสงค์ ผู้ออกแบบต้องคำ�นึงเสมอ ว่า ในการนำ�ไปใช้งานจริง ผู้สืบคืนข้อมูล หรือผู้เข้าชมเว็บเพจย่อมเข้ามาเพื่อ คิดว่าเว็บเพจที่จัดทำ�นั้นมีวัตถุประสงค์ตามหัวเรื่องของเว็บเพจ เช่น เว็บเพจมี วัตถุประสงค์ต้องการเผยแพร่ ข่าวสาร เกี่ยวกับเรื่องเอดส์ เมื่อเข้ามาแล้วก็ควร จะเกี่ยวข้องเรื่องราวของเอดส์ ไม่ใช่เป็นการโฆษณาขายยาหรือโฆษณาชวนเชื่อ ซึ่งลักษณะแบบนี้จะไม่เป็นไปตามวัตถุประสงค์ จะทำ�ให้ผู้เข้าชมรู้สึกว่าเสียเวลา ในการเข้าเยี่ยมชม นอกจากนั้นเนื้อหา และการออกแบบเมื่อนำ�ไปใช้งานจริงควร คำ�นึงว่าเว็บเพจต้องเป็นที่ดึงดูดสายตาของผู้เข้าชม ทำ�ให้เกิดความน่าสนใจตลอด เวลา และดึงดูดให้ผู้เข้าชมใช้เวลานานในการค้นหาข้อมูล ชวนติดตามอยู่ตลอด เวลา 6.ความเป็นมัลติมีเดีย ความเป็น multimedia สำ�หรับเว็บไซด์เป็นเรื่องที่ค่อนข้างยาก เนื่องจากเว็บไซด์ต้องออนไลน์อยู่ในระบบอินเตอร์เน็ต ในข้อจำ�กัดของแบนด์วิท และความเร็วในการนำ�เสนอ จึงยากที่จะทำ�ให้เว็บไซด์แต่ละเว็บไซด์มีความเป็น multimedia ดังนั้น องค์ประกอบที่สำ�คัญของความเป็น multimedia
  • 48. 48 ทฤษฎีการออกแบบเว็บไซต์ ของเว็บก็คือ เว็บไซด์ไม่สามารถมีปฎิสัมพันธ์กับผู้เข้าชมได้ทันที เนื่องจากการ ออกแบบเว็บไม่สามารถทำ�ให้ใช้เทคนิคหรือกระบวนการได้มากมายอย่างที่เป็น stand alone ภายในระบบ ดังนั้นความเป็น multimedia ของเว็บไซด์ จึงหมาย ถึงการจัดทำ�ภาพประกอบ เสียง ภาพเคลื่อนไหว ภาพวิดีโอ หรือภาพนิ่ง โดย เป็นการเสริมหรือเพิ่มให้เว็บไซด์มีคุณค่า และที่สำ�คัญmultimedia ที่นำ�มาใช้ต้อง สอดคล้องกับเนื้อหา และเป็นประโยชน์ในการสร้างความเข้าใจให้กับผู้เข้าชมเว็บ ไซด์ 7. การให้ข้อมูล ในการให้ข้อมูลภายในเว็บไซด์ ข้อมูลที่สำ�คัญควรจะเข้าถึงได้ง่ายและ รวดเร็ว โดยไม่มีความสลับซับซ้อน แต่การนำ�เสนอข้อมูลควรมีการจัดรูปแบบ และหมวดหมู่ของข้อมูลอย่างเป็นระบบ เพื่อให้ง่ายต่อการตรวจสอบและใช้งาน ข้อมูลเหมือน ความลำ�เอียงเนื่องจากแนวคิดที่ไม่ตรงกันควรได้รับการแก้ไข แต่ละ เว็บไซด์ในกลุ่มของพนักงานจะมีเจ้าหน้าที่บางคนเข้ามาเกี่ยวข้องเพื่อช่วยให้ ข้อมูลเป็นไปอย่างเหมาะสม นอกจากนี้ข้อมูลที่ใช้ควรมีเนื้อหาที่ทันสมัย ทันต่อ เหตุการณ์ โดยแสดงได้จากวันเวลาที่ปรับปรุง ขณะเดียวกันเมื่อจัดทำ�เว็บไซด์ตาม วัตถุประสงค์แล้ว เว็บไซด์ควรจะสอดคล้องกับกลุ่มเป้าหมายของเว็บ ถ้าเว็บไซด์ นั้นจัดทำ�ได้ตรงกับกลุ่มเป้าหมาย เช่น กลุ่มนักศึกษา หรือวัยรุ่น ก็จะทำ�ให้เว็บนั้น ได้รับความนิยม แสดงถึงคุณภาพของผู้ดำ�เนินการจัดทำ�เว็บนั่นเอง 8.การเข้าถึงข้อมูล สิ่งที่สำ�คัญที่สุดก็คือ เว็บไซต์สามารถแสดงผลข้อมูลได้อย่างรวดเร็ว เมื่อ ผู้ใช้เข้าสู่เว็บไซต์ นั่นหมายถึง เมื่อผู้ใช้ต้องการเข้าสู่เว็บไซต์โดยการพิมพ์ที่อยู่ของ เว็บเช่น URL หรือโดเมนเนม (Domain Name) แล้วกดปุ่ม Enter
  • 49. 49 ทฤษฎีการออกแบบเว็บไซต์ การแสดงผลของหน้าแรกจะต้องปรากฎอย่างรวดเร็วโดยไม่เสียเวลานานจะ ทำ�ให้ผู้ใช้รู้สึกพึงพอใจ แต่ถ้าเว็บใดออกแบบให้มีกราฟิกส์ ภาพเคลื่อนไหว และเนื้อหาจำ�นวนมาก เว็บนั้นก็จะแสดงผลได้ช้า ก็จะทำ�ให้ผู้ใช้รอและเบื่อ หน่าย การให้ผู้ใช้รอบ้างย่อมรับได้ แต่ถ้าผู้ใช้รอนานเกินไปก็อาจเบื่อหน่าย และเปลี่ยนไปเว็บอื่นในที่สุด การเข้าถึงข้อมูลในเว็บไซต์นอกจากจะแสดงผลรวดเร็วแล้ว เว็บไซต์ควร หาได้สะดวกจากเว็บประเภทสืบค้นข้อมูลหรือ Search Engine หรือเว็บได้ Add URL เอาไว้ใน Search Engine เช่นGoogle หรือ Yahoo ถ้าเป็น ในประเทศไทยก็เช่น Sanook , Sansarn ก็จะทำ�ให้ผู้ใช้สามารถสืบค้นจาก เครื่องมือสืบค้นได้รวดเร็ว การโหลดของเว็บได้อย่างรวดเร็วทำ�ให้เสียเวลา น้อยลงในการค้นหาข้อมูล เว็บไซต์ที่แสดงผลจากการค้นหาได้รวดเร็ว ย่อม เป็นที่นิยมของผู้ใช้เพราะค้นเจอเสมอ แสดงว่าเข้าถึงข้อมูลได้รวดเร็ว 9. ความหลากหลายของข้อมูล ประเด็นสำ�คัญในส่วนของข้อมูลก็คือ เว็บควรมีความหลากหลายและ มีเรื่องที่เป็นประโยชน์หลาย ๆ เรื่อง มีความน่าเชื่อถือและตรวจสอบข้อมูลได้ ข้อมูลนั้นก็จะได้ความนิยมและแนะนำ�กันให้เข้ามาชมอีก กรณีที่เว็บมีข้อมูล ไม่มากมายนัก แต่เว็บมีข้อมูลสำ�คัญเพียงพอไม่ยาวเกินไป ไม่สั้นมากเกินไป ก็เพียงพอใช้ประโยชน์ได้เหมาะสม องค์ประกอบในการประเมินอื่น ๆ ของ ความหลากหลายข้อมูลได้แก่ 9.1 เว็บไซต์ได้รับรางวัล เป็นประเด็นในการประเมินคุณภาพ ประการหนึ่ง เช่น เว็บได้รับรางวัลยอดนิยม หรือเว็บได้รับการโหวตในสาขาใด ๆ หรือเว็บมีการจัดลำ�ดับว่ามีผู้เข้าใช้มาก ล้วนแต่เป็นตัวบ่งบอกคุณภาพได้
  • 50. 50 ทฤษฎีการออกแบบเว็บไซต์ 9.2 เว็บไซต์ไม่มีเรื่องต้องเสียค่าใช้จ่าย เป็นเว็บที่ให้ข้อมูลโดยไม่คิด ค่าใช้จ่ายก็ควรได้รับการประเมินระดับดี 9.3 เว็บไซต์มีปฏิสัมพันธ์ระหว่างผู้ดูแลกับผู้ใช้ เช่น มีการตอบคำ�ถาม มีการฝากข้อมูลและข้อความและตอบคำ�ถามสม่ำ�เสมอ แสดงว่าเป็นเว็บที่ดีในการ บริการ 9.4 เว็บไซต์ที่มีการสมัครและจัดเก็บข้อมูลของผู้ใช้เอาไว้เป็นความ ลับ และเมื่อเรียกใช้ก็มีการกำ�หนดรหัสเข้าและรหัสผ่าน แสดงถึงการบริการและ บริหารเว็บอย่างมีคุณภาพได้ 9.5 เว็บไซต์มีข้อมูลที่สามารถผิดออกมาทางเครื่องพิมพ์ได้ โดยไม่ต้อง เปลี่ยนแปลงแก้ไขใด ๆ ก่อนการพิมพ์ แสดงว่าออกมาเป็นอย่างดี แสดงผลได้ อย่างเป็นระเบียบ นำ�ข้อมูลไปใช้ได้โดยตรง 9.6 ข้อมูลที่นำ�เสนอในเว็บไซต์มีขนาดสั้นและไม่มีองค์ประกอบ มากมาย จนละเลยข้อมูล เว็บนั้นแสดงว่ามีระบบข้อมูลที่ดี 9.7 เว็บไซต์ที่มีเครื่องมือสืบค้นเป็นของตนเอง แสดงว่าเว็บอาจมีขนาด ใหญ่แต่มีระบบการค้นหาข้อมูลภายในเว็บของตนเองได้ โดยไม่ต้องหาเส้นทาง เข้าสู่เว็บอย่างยุ่งยากดังนั้นจะเห็นได้ว่า การประเมินเว็บไซต์ทางการศึกษาหรือ ข้อมูลสารสนเทศอันจะเป็นประโยชน์กับบุคคลทั่วไป ตามแนวคิดทั้ง 9 ด้านล้วน แล้วแต่เป็นสิ่งจำ�เป็นในการออกแบบเว็บไซต์ ซึ่งเว็บใดที่สามารถออกแบบได้ตาม แนวคิดทั้ง 9 ด้านก็ถือว่าเป็นเว็บไซต์ที่ดีเยี่ยม การจัดลำ�ดับคะแนนก็สามารถ เรียงลำ�ดับตามแนวคิด โดยแบ่งเป็นส่วนคะแนนต่าง ๆ ได้ตามลำ�ดับ ก็จะทำ�ให้ ได้แบบประเมินคุณภาพของเว็บไซต์ในลักษณะของการประเมินทางด้านข้อมูล สารสนเทศ อันจะทำ�ให้ทราบได้ว่าเว็บไซต์ใดเหมาะสมและเป็นประโยชน์ ผู้ใช้ บริการเว็บและผู้ออกแบบเว็บก็จะได้ประโยชน์ด้วยกันทุกฝ่าย เว็บไซต์ที่สร้างขึ้น ก็จะมีคุณภาพและเป็นเว็บที่ดีบนอินเทอร์เน็ตต่อไป
  • 51. 51 ทฤษฎีการออกแบบเว็บไซต์ บรรณานุกรม สุปรีดี สุวรรณบูรณ์.(2554). หลักการและทฤษีการออกแบบ ค้นคว้าจาก : http://www.design-dd.com/blog/component/content/arti- cle/145-2010-04-26-12-59-01.htmlกมลรัฐ อินทรทัศน์ และ พรทิพย์ เย็นจะบก.2554. การประชาสัมพันธ์ ค้นคว้าจาก: http://www.ipesp.ac.th/learning/thai/chapter7-5.html ความหมายของการเรียนการสอนผ่านเว็บ.(2555) ค้นคว้าจาก: http://www.kroobannok.com/133 ความหมายของเว็บไซต์.(2553) ค้นคว้าจาก: http://school.obec.go.th/pp_school/html/Web1.html กิตติ ภักดีวัฒนะกุล (2540). การออกแบบและการพัฒนาเว็บไซต์ ค้นคว้าจาก : http://jarungsakiwebdesign.blogspot.com/ กิตติ ภักดีวัฒนะกุล (2540).การออกแบบโครงสร้างเว็บเพจ ค้นคว้าจาก : http://jarungsakiwebdesign.blogspot.com/ วัศพล โรจน์ประเสริฐสุด.(2010).บทเรียนออนไลน์. All Rights Reserved. ค้นจาก : http://202.29.42.235/~eleaning/index.php?option=com_ content&view=article&id=13 ประเภทและองค์ประกอบของของเว็บไซต์.(2553). ค้นคว้าจาก : http://www.websuay.com/th/web_page/web_component การประเมินคุณภาพเว็บไซต์ (Promote wed). ค้นคว้าจาก: http://202.29.52.57/~chanida/Electronics/ chapter_8_Web%20promotion. ppt