การออกแบบเว็บไซต์
หลักสำคัญในการออกเเบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้
เเนวคิดในการออกเเบบหน้าเว็บ
- เรียนรู้จากเว็บไซต์ต่างๆ
- ประยุกต์รูปแบบจากสื่อพิมพ์
- ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
- ออกแบบอย่างสร้างสรรค์
หลักการออกเเบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบจัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกเเละสไตล์รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้นบุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1)ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2)ชื่อหัวเรื่อง
3)สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4)ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
7.ใช้กราฟฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
คือโปรแกรมที่ใช้เรียกดูเว็บเพจ ซึ่งที่ได้รับความนิยมในปัจจุบันคือ Chrome,Firefox,Opera,IE
เป็นต้น ซึ่งควรออกแบบให้รองรับได้ทุกเบราเซอร์,ทุกรุ่น และทุกรูปแบบ
2. ระบบปฏิบัติการ
เป็นปัจจัยทีมีผลต่อการทำงานของเบราเซอร์
ดังนั้นจึงควรออกแบบให้อิงกับผู้ใช้งานส่วนใหญ่
3. ความละเอียดของหน้าจอ
ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดที่ใช้ แต่ขึ้นการ์ดจอที่มีอยู่
โดยมี 3 รูปแบบด้วยกัน คือ
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
ขึ้นอยู่กับการ์ดจอของผู้ใช้ ซึ่งขึ้นอยู่กับค่า bit depth หรือ color depth คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
จะแสดงผมก็ต่อเมื่อเครื่องผู้ใช้มีฟอร์นชนิดเดียวกัน
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
มีผลต่อเวลาที่ใช้ในการแสดงผลชอบเว็บ ผู้ออกแบบจึงควรพัฒนาเว็บให้สวยงาม น่าสนใจ
และดาวโหลดได้เร็วที่สุด
7. ขนาดหน้าต่างบราวเซอร์
ควรออกแบบให้เปลี่ยนแปลงขนาดได้ (Flexible design)
8. ความสว่างและค่าความต่างของสี ควรใช้โทนสีต่างกันพอสมควร
ไม่สว่างและมืดจนเกินไป
โดยมี 3 รูปแบบด้วยกัน คือ
การเลือกใช้สีสำหรับเว็บไซต์
การเลือกใช้สีสำหรับเว็บไซต์
สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เราสามารถใช้สีได้ทุกองค์ประกอบของเว็บเพจ
ตั้งแต่รูปภาพ ตัวอีกษร สีพื้นหลัง การใช้สีที่่เหมาะสมจะช่วยสื่อความหมายของเนื้อหา
ประโยชน์ของสีในเว็บไซต์
สามารถชักนำสายตาผู้อ่านไปยังทุกบริเวณในหน้าเว็บเพจ ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน สามารถนำไปใช้ในการดึงดูดความสนใจของผู้อ่าน
และใช้ในการแบ่งความสนใจของผู้อ่าน สร้างอารมณ์โดยรวมของเว็บเพจ สร้างระเบียบให้ข้อความต่างๆ
และที่สำคัญช่วยส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้องต้นเกี่ยวกับสี
การผสมสี (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 ข้าง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ข้าง
ออกแบบกราฟฟิก
สำหรับเว็บไซต์
- กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
- ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ ( GIF , JPG , และ PNG)
- GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบเสียงแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
- JPG ย่อมาจาก Joint Photographic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
- PNG ย่อมาจาก Portable Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น