การออกแบบหน้าเว็บ
การออกแบบหน้าเว็บ
หน้าเว็บหน้าแรกเป็นส่วนที่สำคัญเพราะมีหน้าที่เป็นสื่อกลางให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
หลักสำคัญในการออกแบบหน้าเว็บ
คือ การใช้รูปภาพและองค์ประกอบต่างๆร่วมกัน เพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บไซต์ที่น่าสนใจ
แนวคิดในการออกแบบหน้าเว็บ
- เรียนรู้จากเว็บไซต์ต่างๆ (สิ่งที่ได้คือรูปแบบและเทคนิคใหม่ๆ)
- ประยุกต์รูปแบบจากสิ่งพิมพ์
- ใช้แบบจำลองเปรียบเทียบ (Metaphor)
- ออกแบบอย่างสร้างสรรค์
หลักการออกแบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)
-2. 2. สร้างรูปแบบ บุคลิกและสไตล์
3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5. สร้างจุดสนใจด้วยความแตกต่าง
6. จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7. ใช้กราฟิกอย่างเหมาะสม
เข้าใจลักษณะการใช้งานของเว็บ
มี 2แนวทาง
1. การใช้สื่อโดยตรงให้อ่านบนหน้าจอ
2. การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวบรวมหรืออ่านในภายหลัง
- หน้าจอ ควรมีขนาดกะทัดรัดไม่ยืดยาวหรือใช้กราฟิกมากเกินไป
- พิมพ์ ควรออกแบบให้มีการใช้ประโยชน์ของเนื้อที่อย่างเต็มที่เพื่อไม่ให้เปลืองกระดาษ
ออกแบบหน้าเว็บให้มีความยาวเหมาะสม
ทำให้ดูน่าอ่าน ง่ายต่อการจัดการหน้าเหล่านั้น
โดยทั่วไปควรสร้างเว็บขนาดสั้นสำหรับ
1. หน้าโฮมเพจหรือหน้าที่เป็นแหล่งรวมลิงค์จำนวนมาก
2. หน้าเว็บที่คาดว่าจะถูกอ่านบนหน้าจอ
3. หน้าเว็บที่มีกราฟิกขนาดใหญ่มาก
เลือกใช้เว็บขนาดยาวเพื่อ
1. ความสะดวกในการพิมพ์หรือดาวน์โหลด
2. ความสะดวกในการจัดการกับจำนวนไฟล์และลิงค์ที่น้อยลง
3. โครงสร้างของเนื้อหาจะได้ไม่ถูกตัดแบ่งออกจากกัน
ออกแบบหน้าเว็บสำหรับการพิมพ์
1. แบ่งเนื้อหาออกเป็นส่วนย่อยๆ ส่วนละประมาณ 2-3หน้าจอ เพื่อนำไปสร้างเป็นหน้าเว็บ พร้อมกับสร้างลิงค์เชื่อมโยงเว็บทั้งหมดเข้าด้วยกัน
2. สร้างลิงค์จากหน้าเว็บที่ได้ในขั้นแรกไปยังอีกเว็บหนึ่งที่รวมเนื้อหาทั้งหมดไว้ในไฟล์เดียวกัน
รูปแบบโครงสร้างหน้าเว็บ
แบ่งเป็น 4 รูปแบบดังนี้
1. โครงสร้างหน้าเว็บในแนวตั้ง
2. โครงสร้างหน้าเว็บในแนวนอน
3. โครงสร้างหน้าเว็บที่พอดีกับหน้าจอ
4. โครงสร้างหน้าเว็บแบบสร้างสรรค์
รูปแบบโครงสร้างหน้าเว็บ
ต้องมีความเหมาะสมกับปริมาณเนื้อหาและลักษณะของเว็บ
ส่วนประกอบของหน้าเว็บ
แบ่งเป็น 3 ส่วน
1. ส่วนหัว (Page Header)
2. ส่วนเนื้อหา (Page Body)
3. ส่วนท้าย (Page Footer)
เทคนิคการจัดโครงสร้างของหน้า
จัดโครงสร้างของหน้าโดยใช้ตาราง หากไม่มีการใช้ตารางมาช่วยจัดโครงสร้างในหน้าเว็บ ตัวอักษรและกราฟิกทั้งหมดก็จัดเรียงติดกันทั่วทั้งหน้าอย่างไม่เป็นสัดส่วน
ออกแบบหน้าโฮมเพจ (Home Page)
โฮมเพจที่ดีควรมีลักษณะ ดังนี้
1. แสดงถึงความรวมและสิ่งที่เป็นประโยชน์ในเว็บ
2. ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา
3. มรลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลักๆของเว็บ
4. แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
5. แสดงถึงเอกลักษณ์ของเว็บด้วยการแสดงชื่อเว็บ
6. แสดงถึงสิ่งที่ปรับเปลี่ยนใหม่ เพื่อให้ผู้ใช้เข้าใจว่ามีการเปลี่ยนแปลงของเนื้อหาภายใน
7. แสดงวันที่ปัจจุบัน
8. เปลี่ยนแปลงรูปกราฟิกเป็นประจำทุกวัน สัปดาห์ หรือเดือน
9. แสดงข่าวหรือข้อมูลการเคลื่อนไหวใหม่ๆให้ผู้ใช้ได้รับรู้ในหน้าแรก
10. สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ๆในเว็บ
หน้าก่อนโฮมเพจ
เรียกว่า “Splash page” ทำหน้าที่แนะนำหรือสื่อข้อความบางอย่างของเว็บเพื่อสร้างความประทับใจของผู้ใช้
ข้อแนะนำในการออกแบบโฮมเพจ
1. ออกแบบโครงสร้างของหน้าโดยใช้กราฟิก
2. กำหนดชื่อของเว็บให้สื่อความหมาย
3. สร้างความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่างชัดเจน
4. เลือกใช้พื้นหลังที่เหมาะสม
5. หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
6. อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป
การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
· เบราเซอร์ที่ใช้
คือ โปรแกรมที่ใช้เรียกดูเว็บเพจ สามารถแสดงผลได้ทั้งรูปแบบตัวอักษร , รูปภาพ และความเคลื่อนไหว มรเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
§ Internet Explorer
§ Netscape Navigator
§ Opera
§ Mozilla
§ Firefox
· ระบบปฏิบัติการของคอมพิวเตอร์
เป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์ จะมีความแตกต่างในเรื่องชนิดและรุ่นของเบราเซอร์ที่ใช้ , ระดับความละเอียดของหน้าจอ , ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
· ความละเอียดของหน้าจอ
- ขนาดของหน้าจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” และอื่นๆ
- ความละเอียดของหน้าจอ(monitor resolution) มีหน่วยเป็นพิกเซล
- ความละเอียดของหน้าจอจะไม่ขึ้นอยู่กับขนาดของมอนิเตอร์ที่ใช้ ขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
· จำนวนสีของจอที่ผู้ใช้สามารถแสดงได้
§ มอนิเตอร์สามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ(video card)
§ จำนวนหน่วยความจำในการ์ดจอ(video memory)ที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
§ จำนวนสีที่การ์ดจอแสดงขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
· ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อ คอมพิวเตอร์เครื่องนั้นจะมีฟอนต์เหล่านั้นติดตั้งอยู่เครื่อง
§ MS Sans Serif เป็นฟอนต์แบบบิตแมพ(bitmapped font)ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป้นขนาดที่แน่นอน
§ Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวกเตอร์หรือลายเส้น(vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับได้อย่างไม่จำกัด
§ ตัวอักษรแบบกราฟิก(Graphic Text)
· ข้อดี
- สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาดสี
- ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้บนเครื่อง
- สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
· ข้อเสีย
- ใช้เวลาในการ download มากกว่า
- ลำบากในการแก้ไขและเปลี่ยนแปลง
- ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
· ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
· ขนาดหน้าต่างเบราเซอร์
§ ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้(Flexible Design)
เมื่อมีการเปลี่ยนแปลงขนาดหน้าต่างเบราเซอร์ องค์ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ตามขนาดพื้นที่ใหม่
v ข้อดี
§ พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
§ เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
v ข้อเสีย
§ ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้
§ มีการจัดรูปแบบใหม่ จึงทำให้เสียรูปแบบหน้าจอที่ออกแบบไว้เดิม
· ออกแบบเว็บเพจให้มีขนาดคงที่(Fixed Design)
เหมาะกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บให้คงที่เสมอ
v ข้อดี
§ เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
§ สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษรไม่ยาวจนเกินไปในหน้าจอที่มีขนาดใหญ่มาก
v ข้อเสีย
§ ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล
· ความสว่างและค่าความต่างของโทนสี
§ นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว ตัวผู้ใช้สามารถปรับระดับความสว่าง(Brightness)และค่าความต่างของโทนสี(Contrast)จากจอมอนิเตอร์ได้
§ ผู้ออกเว็บจะต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร
ออกแบบกราฟิกสำหรับเว็บไซต์
กราฟิกเป็นองค์ประกอบสำคัญ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้กับเว็บไซต์น่าดูยิ่งขึ้น
· GIF ย่อมาจาก Graphic Interchange Format
- มีนามสกุล .gif
- ได้รับความนิยมในยุคแรก
- ไม่ขึ้นอยู่กับระบบปฏิบัติการใดๆ
- เป็นกราฟิกประเภทเดียวที่สามารถนำไปใช้กับบราวเซอร์ทุกชนิด
- มีคุณสมบัติในการเคลื่อนไหว
- มีระบบสีแบบ Index มีขอมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับ คือที่คุณภาพ 12.5%,25%,50%และ100%ตามลำดับ
- มีการบีบอัดข้อมูลตามแนวพิกเซล แบบไม่สูญเสีย(Lossless) เหมาะสำหรับกราฟิกที่ประกอบด้วยสีพื้น
· JPG ย่อมาจาก Joint Photographic Group
- มีนามสกุล .jpg หรือ .jpeg
- ไม่ยึดติดกับระบบปฏิบัติการใดๆ สามารถใช้ได้กับบราว์เซอร์ Netscape และ IE version2 เป็นต้นไป
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบบีบอัดที่มีลักษณะสูญเสีย (lossy) แบบ JFIF (JPEG File interchange format)
- สามารถบีบอัดข้อมูลในอัตราสูงตั้งแต่ 10:1 ถึง 20:1
- นำไปใช้กับรูปถ่ายหรือกราฟิกที่มีการไล่ระดับสีอย่างละเอียด
· PNG ย่อมาจาก Portable Network Group
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ทำไม่ให้เกิดความสูญเสีย (lossless)
- มีระบบการควบคุมแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ คือหน่วยพิกเซล
ระบบการวัดความละเอียดของรูปภาพ
- ใช้หน่วย pixel per inch (ppi)
- แต่ในการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟิกสำหรับเว็บ
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟิกสำหรับเว็บ
· Adobe Photoshop
· Adobe ImageReady
· Firework
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใส และสี
พื้นหลัง
