Web Design
การออกเเบบหน้าเว็บ
หลักสำคัญในการออกเเบหน้าเว็บไซต์คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจบนพื้นฐานของ ความเรียบง่ายเเละสะดวกของผู้ใช้
เเนวคิดในการออกเเบหน้าเว็บ
เรียนรู้จากเว็บไซต์ต่างๆ ประยุกต์รูปแบบจากสื่อพิมพ์ ใช้เเบบจำลองเปรียบเทียบ (Metaphor) ออกแบบอย่างสร้างสรรค์ใช้เเบบจำลองเปรียบเทียบ (Metaphor) การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคยไม่ว่าจะเป็นรูปภาพจากสิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนกาสื่อสารของเว็บ
ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึง โครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor)คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป
3. จำลองลักษณะที่มองเห็น (Visual metaphor)คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป
หลักการออกเเบบหน้าเว็บ1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ
จัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกเเละสไตล์
รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้นบุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้าทางด้าน
เทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่าง
การจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ
เนือ้หาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
7.ใช้กราฟฟิกอย่างเหมาะสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
ระบบเนวิเกชั่นบาร์
ความสำคัญของระบบเนวิเกชั่นการออกเเบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้างสิ่งเเวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างเเละควรจะไปไหนต่อ
เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
2.สามารถเข้าถึงข้อมูลได้อย่างไร
3.สามารถกลับไปยังหน้าเดิมได้อย่างไร
4.หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว
รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4รูปแบบ1.ระบบเนวิเกชั่นเเบบลำดับขั้นเป็นเเบบพื้นฐาน คือมีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆภายในเว็บถือเป็บลำดับขั้นอย่างหนึ่งเเล้ว
2.ระบบเนวิเกชั่นเเบบโกลบอลเป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชั่นเเบบลำดับขั้น ทำให้สามารถเคลื่อนที่ได้ทั้งในเเนวตั้งเเละเเนวนอนอย่างมีประสิทธิภาพ
3.ระบบเนวิเกชั่นเเบบโลคอลสำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน
4.ระบบเนวิเกชั่นเฉพาะที่เป็นเเบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำที่ฝั่งอยู่ในประโยค เเต่ไม่ควรใช้มากจนเกินไปเพราะผู้ใช้อาจ มองข้ามไปทำให้ไม่สนใจ
องค์ประกอบของระบบเนวิเกชั่นหลัก ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ ซึ่งได้แก่
เนวิเกชั่นบาร์ เป็นพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้งเเบลำดับขั้น เเบบโกบอล เเละเเบบโลคอล โดยทั่วไปเนวิเกชั่นบาร์จะประกอบด้วย กลุ่มของลิงค์ต่างๆที่อยู้รวมกันในหน้าเว็บ วิเกชั่นระบบเฟรม คุณสมบัติของเฟรมจะทำให้ไม่สามารถเเสดงเว็บหลายๆหน้าต่างเบราวเซอร์เดียวกัน โดยเเต่ละหน้าจะเป็นอิสระต่อกัน ข้อเสีย เสียพื้นที่ไปในบางส่วนเเสดงผลช้าใช้การออกแบบที่ซับซ้อน pull downmenu เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่น คือ มีรายการให้เลือกมากมาย ใช้พื้นที่น้อย เหมาะสำหรับข้อมูลที่มีข้อมูลประเภทเดียวกัน pop up menu เป็นเมนูอีกรูปแแบหนึ่งที่มีลักษณะคล้าย pull down menu เเต่รายการย่อยของเมนูจะปรากฎขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวาง ข้อดี ช่วยให้หน้าเวบไม่รกจนเกินไป image Map การใช้รูปกราฟิกเป็นลิงค์ในเเบบ image map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชั่นมากขึ้นโดยบางบริเวณสามารถลิ้งได้ด้วย ข้อเสีย คือ ไม่ควรใช้มากจนเกินไป เพราะผู้ใช้อาจไม่รู้ว่าภาพเหล่านั้นสามารถลิ้งค์ได้ search Box การจัดเตรียมระบบสืบค้นข้อมูล ภายในเว็บเป็นระบบเนวิเกชั่นสำหรับเว็บที่มีข้อมูลปริมาณมากทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็ว ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติดังนี้1. เข้าใจง่าย
2. มีความสม่ำเสมอ
3. มีการตอบสนองต่อผู้ใช้
4. มีความพร้อมเเละเหมาะสมต่อการใช้งาน
5. นำเสนอหลายทางเลือก
6. มีขั้นตอนสั้นเเละประหยัดเวลา
7. มีรูปแบบที่สื่อความหมาย
8. มีคำอธิบายที่ชัดเจนเเละเข้าใจได้ง่าย
9. เหมาะสมกับวัตถุประสงค์ของเว็บ
10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้
ระบบการวัดขนาดของรูปภาพ
ระบบการวัดความละเอียดของรูปภาพ
โปรแกรมกราฟฟิกสำหรับเว็บ
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้
Design Web Graphics (ออกแบบกราฟฟิกสำหรับเว็บไซต์)
รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ PNG)
* GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สี
- มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
* JPG ย่อมาจาก Joint Photogtaphic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
* PNG ย่อมาจาก Portable Network Graphic สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16บิตและ24บิต มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless) มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกหับองค์ประกอบอื่น ๆ ในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ* ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)
* แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
* ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ* ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe PhotoShop
- Adobe ImangeReady
- Firework
* ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้ , จำนวนสี, ระดัความสูญเสีย, ความโปร่งใส และสีพื้นหลัง
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ* ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
* เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
* ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
