บทที่ 6 การออกเเบบหน้าเว็บไซต์
หลักสำคัญในการออกเเบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้
- เเนวคิดในการออกเเบหน้าเว็บ
เรียนรู้จากเว็บไซต์ต่างๆ
ประยุกต์รูปแบบจากสื่อพิมพ์
ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
ออกแบบอย่างสร้างสรรค์
- ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็น
รูปภาพจาก สิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะ
ที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ
การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป
- หลักการออกเเบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบจัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกเเละสไตล์รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้นบุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
7.ใช้กราฟฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเชอร์ที่ใช้ คือโปรแกรมที่ใช้เรียกดูเว็บเพจ ซึ่งที่ได้รับความนิยมในปัจจุบันคือ Chrome,Firefox,Opera,IE เป็นต้น
ซึ่งควรออกแบบให้รองรับได้ทุกเบราเชอร์,ทุกรุ่น และทุกรูปแบบ
2. ระบบปฎิบัติการ เป็นปัจจัยทีมีผลต่อการทำงานของเบราเชอร์ ดังนั้นจึงควรออกแบบให้อิงกับผู้ใช้งานส่วนใหญ่
3. ความละเอียดของหน้าจอ ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดที่ใช้ แต่ขึ้นการ์ดจอที่มีอยู่
โดยการออกแบบตามละเอียดของหน้าจอก็ขึ้นกับผู้ออกแบบว่าจะเลือกใช้รูปแบบใดๆ โดยมี 3 รูปแบบด้วยกัน คือ
- 640x840 px ผู้ใช้ส่วนใหญ่จะได้เห็นหน้าเว็บที่สมบูรณ์
- 800x600 px ผู้ใช้ส่วนใหญ่จะได้เห็นเนื้อหาทั้งหมดในหน้าจอ
- 1024x768px ผู้ใชจำนวนน้อยที่สามารถดูเนื้อหาได้อย่างเหมาะสม
Trip & Trick ออกแบบโดยใช้ 800x600 แต่จัดเนื้อหาไว้ใน 640x480
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ ขึ้นอยู่กับการ์ดจอของผู้ใช้ ซึ่งขึ้นอยู่กับค่า bit depth หรือ color depth คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้ จะแสดงผมก็ต่อเมื่อเครื่องผู้ใช้มีฟอร์นชนิดเดียวกัน
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต มีผลต่อเวลาที่ใช้ในการแสดงผลชอบเว็บ ผู้ออกแบบจึงควรพัฒนาเว็บให้สวยงาม น่าสนใจ และดาวโหลดได้เร็วที่สุด
7. ขนาดหน้าต่างบราวเซอร์ ควรออกแบบให้เปลี่ยนแปลงขนาดได้ (Flexible design)
8. ความสว่างและค่าความต่างของสี ควรใช้โทนสีต่างกันพอสมควร ไม่สว่างและมืดจนเเกินไป
บทที่8 การเลือกใช้สีสำหรับเว็บไซต์
การเลือกใช้สีสำหรับเว็บไซต์
สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เราสามารถใช้สีได้ทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอีกษร สีพื้นหลัง การใช้สีที่่เหมาะสมจะช่วยสื่อความหมายของเนื้อหา
ประโยชน์ของสีในเว็บไซต์
สามารถชักนำสายตาผู้อ่านไปยังทุกบริเวณในหน้าเว็บเพจ ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน สามารถนำไปใช้ในการดึงดูดความสนใจของผู้อ่าน และใช้ในการแบ่งความสนใจของผู้อ่าน สร้างอารมณ์โดยรวมของเว็บเพจ สร้างระเบียบให้ข้อความต่างๆ และที่สำคัญช่วยส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้องต้นเกี่ยวกับสี
การผสมสี (Color Mixing) มี 2 แบบ
การผสมสีแบบบวก (Addtitive Mixing) เป็นรูปแบบการผสมของแสง จะนำไปใช้ในสื่อที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
การผสมสีแบบลบ (Subtractive Mixing) เป็นการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ จะนำไปใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้นหรือ สิ่งพิมพ์ต่างๆ
วงล้อสี (Color Wheel)
วงล้อสีอแบบลบ
วงล้อสีแบบบวก
สีที่เป็นกลาง
คือสีกลุ่มที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมาจากสีอื่น ซึ่งก็คือสีเทา,ขาว,ดำ
สีอ่อน สีเข้มและโทนสี (Tint,Shade and Tone)
- ในการผสมสีกลางเข้ากับสีบริสุทธิ์ จะเกิดเป็นสี่ต่างๆ จำนวนมากมาย
- สีบริสุทธิ์ผสมสีขาว จะได้เป็นสีอ่อน (tint of the hue)
- สีบริสุทธิ์ผสมสีเทา จะได้เป็นโทนสีระดับต่างๆ (tone of the hue)
- สีบริสุทธิ์ผสมสีดำ จะได้เป็นสีเข้ม (shad of the hue)
ชุดสีที่ถูกจัดกลุ่มเข้าด้วยกันด้วยรูปแบบต่างๆ
- ชุดสีร้อน
- ชุดสีเย็น
- ชุดสีแบบเดียว
- ชุดสีแบบสามเส้า
- ชุดสีที่คล้ายคลึง
- ชุดสีตรงข้าม
- ชุดสีตรงข้ามข้างเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ข้าง
บทที่ 9 การออกแบบกราฟฟิกสำหรับเว็บไซต์
รูปแบบกราฟฟิกสำหรับเว็บ (GIF, JPG และPNG)
GIF ย่อมาจากGraphic Interchange Format
-ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุดถึง 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
กราฟฟิกรูปแบบ GIF
- มีไฟล์นามสกุลเป็น .gif
- ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
- เป็นกราฟฟิกประเภทเดียวที่สามารถใช้ได้ทุกเบราเซอร์
- มีคุณสมบัติในการแสดงภาพเคลื่อนไหว
JPG ย่อมาจาก Joint Photographic Experts Group
- มีข้อมูลสีขนาด 24 บิต(True Color) สามารถแสดงสีมากได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปภ่ายหรือกราฟฟฟิกที่มีการไล่สีระดับสีอย่างละเอียด
กราฟฟิกรูปแบบ JPG
- มีไฟล์นามสกุลเป็น .jpg หรือ .jpeg
- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
- ไฟล์ประเภทนี้ไม่ยึดติดกับระบบปฏิบัติการใดๆ
PNG ย่อมาจาก Portable Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต16 บิต 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe Photoshop
- Firework
- Gimp
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รุปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใส และสีพื้นหลัง
