บทที่ 6 ออกแบบหน้าเว็บ Page Design
หลักสำคัญในการออกแบบหน้าเว็บ
คือ การใช้รูปภาพและองค์ประกอบต่างๆ ร่วมกัน เพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ
2.สร้างรูปแบบ บุคลิก สไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้า
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
เราสามารถใช้ประโยชน์จากเว็บได้2แนวทาง 1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ
2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวบรวมหรืออ่านภายหลัง
รูปแบบโครงสร้างหน้าเว็บ แบ่งเป็น 4 รูปแบบ
1.โครงสร้างหน้าเว็บในแนวตั้ง ได้รับความนิยมมากที่สุด เพราะมีรูปแบบที่ง่ายในการพัฒนาและมีขข้อจำกัดน้อยสุดเมื่อเทียบกับรูปแบบอื่น
2.โครงสร้างหน้าเว็บในแนวนอน ต้องอาศัยความคิดสร้างสรรค์และความพยายามมากกว่าปรกติ เนื่องจากมีข้อจำกัดและสิ่งที่ต้องระวังค่อนข้างมาก
3.โครงสร้างหน้าเว็บที่พอดีหน้าจอ รูปแบบนี้ใช้พื้นที่น้อวกว่าเว็บทั่วไปและมักจะจัดอยู่ตรงกึ่งกลางของหน้าจอ จะไม่มี Scroll Bar
4.โครงสร้างหน้าเว็บแบบสร้างสรรค์ รูปแบบนี้อยู่เหนือกฏเกณฑ์ มักมีรูปแบบและการจัดวางองค์ประกอบเฉพาะตัวที่คาดไม่ถึง มักจะเป็นเว็บของศิลปิน นักออกแบบ บริษัทโฆษณา
ส่วนประกอบของหน้าเว็บ แบ่งเป็น 3 ส่วน
1.ส่วนหัว (Page Header)
2.ส่วนเนื้อหา (Page Body)
3.ส่วนท้าย (Page Footer)
.....................................................................................
บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
Design for a variety of Web Environments
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
2. ระบบปฏิบัติการของคอมพิวเตอร์
3. ความละเอียดของหน้าจอ
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
7. ขนาดหน้าต่างเบราเซอร์
8. ความสว่างและค่าความต่างของโทนสี
1.เบราเซอร์ที่ใช้
เบราเซอร์ที่ได้รับความนิยม Internet Explorer,Netscape Navigator,The World,Opera,Mozilla,Firefox
การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
- เว็บไซต์สำหรับเบราเซอร์ทุกรุ่น
- เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
- เว็บไซต์ตามความสามารถของเบราเซอร์
- เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการ
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิด และรุ่นของเบราเซอร์ที่ใช้ ระดับความระเอียดของหน้าจอ เป็นต้น
3. ความละเอียดของหน้าจอ
ความละเอียด 640*480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล ความละเอียดหน้าจอจะไม่ขึ้นอยู่กับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ด
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์สามารถแสดงสีที่แตกต่างกัน นอยู่กับประสิทธิภาพของการ์ดจอ
- หน่วยความจำในการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถแสดงได้ ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth
ชุดสีสำหรับเว็บ หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และMac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก้ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
MS Sans Serif VS Microsoft Sans Serif
-MS Sans Serif เป็นฟอนต์แบบบิตแมพที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
- Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดีแต่สามารถปรับขนาดได้อย่างไม่จำกัด
ข้อดี
สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งขนาด สี และชนิด
ผู้ชมทุกคนจะมองเห็นเหมือนกันหมด
ข้อเสีย
ใช้เวลาในการโหลดมากกว่า
ลำบากในการแก้ไขและเปลี่ยนแปลง
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของเน็ตจะมีผลต่อการแสดงผลของเว็บ ซึ่งจะมีหลายระดับ
- ผู้ใช้ตามบ้านส่วนใหญ่จะใช้ความเร็ว 5 kbps
- ในหน่วยงานบางแห่งอาจจะใช้อินเตอร์เน็ตความเร็วสูง เข่น ADSL, Cable modem ซึ่งมีความเร็วตั้งแต่ 128 Kbps ถึง 10 Mbps
7. ขนาดหน้าต่างเบราเซอร์
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่จะถูกปรับเปลี่ยนเป็นเท่าไหร่ก็ได้ตามความต้องการของผู้ใช้
.....................................................................................
บทที่ 8 การเลือกใช้สีสำหรับเว็บไซต์
เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสีซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
- สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสีซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
- เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
-สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้เช่นข้อมูลใหม่หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
- สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
-ช่วยสร้างระเบียบให้กับข้อความต่างๆเช่นใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ
การผสมสี(Color Mixing) มี2แบบ
1.การผสมแบบบวก(Additivemixing)
จะเป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่นจอโปรเจคเตอร์ทีวี
2.การผสมแบบลบ(Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆสามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี
เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ
ความกลมกลืนของสี
- ความเป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงความสมดุลและความสวยงามในเวลาเดียวกัน
การใช้สีที่จืดชืดเกินไปจะทำให้เกิดความรู้สึกที่น่าเบื่อและไม่สามารถดึงดูดความสนใจจากผู้ชมได้
การใช้สีที่มากเกินไปก็จะดูวุ่นวายขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชม
- เป้าหมายในเรื่องสีคือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่ายน่าสนใจ และสื่อความหมายได้อย่างเหมาะสม
รูปแบบชุดสีพื้นฐาน(SimpleColorSchemes)
1. ชุดสีร้อน (WarmColorScheme)
ประกอบด้วยสีม่วง,น้ำเงิน,น้ำเงินอ่อน,ฟ้า,ฟ้าเงินแกมเขียวและสีเขียวโดยจะให้ความรู้สึกเย็นสบายองค์ประกอบที่ใช้สีเย็นจะดูสุภาพเรียบร้อย
2. ชุดสีแบบเดียว(MonochromaticColorScheme)
เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียวแต่เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่างๆ และชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียวแต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวาเพราะขาดความหลากหลายของสี
3. ชุดสีที่คล้ายคลึงกัน(AnalogousColorScheme)
ประกอบด้วยสี 2หรือ 3สีที่ติดอยู่กันในวงล้อ สามารถเพิ่มเป็น4หรือ5สีได้แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
4.ชุดสีตรงข้ามข้างเคียง(SplitComplementaryColorScheme)
เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้ามและชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้นแต่จะมีผลให้ความสดใสความสะดุดตา และความเข้ากันของสีลดลงด้วย
5.ชุดสีตรงข้ามข้างเคียงทั้ง2ด้าน(DoubleSplitComplementaryColor Scheme)
ดัดแปลงมาจากชุดสีตรงข้ามเช่นกันแต่สีตรงข้ามทั้ง2สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง2ด้านและชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้นแต่จะมีความสดใสและกลมกลืนของสีที่ลดลง
6. ชุดสีเย็น(CoolColorScheme)
เว็บเพจที่ใช้โทนสีเย็นให้บรรยากาศคล้ายทะเลรู้สึกเย็นสบาย
7.ชุดสีแบบสามเส้า(TriadicColorScheme)
เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากันจึงมีความเข้ากันอย่างลงตัว
8. ชุดสีตรงข้าม(ComplementaryColorScheme)
คือสีที่อยู่ตรงข้ามกันในวงล้อสีเมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
.................................................................................
ไม่มีความคิดเห็น:
แสดงความคิดเห็น