LECTURE

 

การออกแบบหน้าเว็บ
 

หลักสำคัญในการออกแบบหน้าเว็บ

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

• เรียนรู้จากเว็บไซต์ต่างๆ
• ประยุกต์รูปแบบจากสิ่งพิมพ์
• ใช้แบบจำลองเปรียบเที่ยบ(Metaphor)
• ออกแบบอย่างสร้างสรรค์

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

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

3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
   ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชั่นทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า

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

5.สร้างจุดสนใจด้วยความแตกต่าง
   เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้

6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
   เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป

7.ใช้กราฟิกอย่างเหมาสม
   ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆตามความเหมาะสมและไม่มากเกินไป

การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์

• เบราเซอร์ที่ใช้

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

• ระบบปฏิบัติการของคอมพิวเตอร์

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

• ความละเอียดของหน้าจอ

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

• จำนวนสีที่จอของผู้ใช้สามรถแสดงได้

          ชุดสีสำหรับเว็บ (Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac

• ชนิดของตัวอักษรที่มี่อยู่ในเครื่องของผู้ใช้

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

• ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

          ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ

• ขนาดของเบราเซอร์

          ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้

• ความสว่างและค่าความต่างของโทนสี

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



เลือกใช้สีสำหรับเว็บไซต์(Designing Web Colors)

รูปแบบชุดสีพื้นฐาน(Simple Color Schemes)

• ชุดสีร้อน(Warm Color Scheme)

ประกอบด้วย สีม่วงแกมแดง แดงแกมม่วง ส้ม เหลือง และเขียวอมเหลือง
สีเหล่านี้สร้างความรู้สึกอบอุ่น สบาย และรู้สึกต้อนรับแก่ผู้ชม

• ชุดสีเย็น(Cool Color Scheme)

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

• ชุุดสีแบบเดียว(Monochromatic Color Scheme)

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

• ชุดสีแบบสามเส้า(Triadic Color Scheme)

เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว

• ชุดสีที่คล้ายคลึงกัน(Analogous Color Scheme)

ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ 5 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป

• ชุดสีตรงข้าม(Complementary Color Scheme)

คือสีคู่ที่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น

• ชุดสีตรงข้ามข้างเคียง(Split Complementary Color Scheme)

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

• ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน(Double Split Complementary Color Scheme)

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