เนื้อหา

บทที่ 6 การออกเเบบหน้าเว็บไซต์

หลักสำคัญในการออกเเบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้ 

เเนวคิดในการออกเเบหน้าเว็บ

เรียนรู้จากเว็บไซต์ต่างๆ

ประยุกต์รูปแบบจากสื่อพิมพ์

ใช้เเบบจำลองเปรียบเทียบ (Metaphor)

ออกแบบอย่างสร้างสรรค์ 

ใช้เเบบจำลองเปรียบเทียบ (Metaphor)

การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็น รูปภาพจาก สิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะ ที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ 

ลักษณะต่างๆ ของเเบบจำลอง

การใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้

1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น

2. จำลองการใช้งาน (Functional metaphor) คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์ 

3. จำลองลักษณะที่มองเห็น (Visual metaphor) คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป 

หลักการออกเเบบหน้าเว็บ

1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ

จัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญ ไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ 

2. สร้างรูปแบบ บุคลิกเเละสไตล์

รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้น บุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการ นำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษ ร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ

3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์

ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน 

4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ

ควรประกอบด้วย

-ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร

-ชื่อหัวเรื่อง

-สิ่งสำคัญที่เราต้องการโปรโมตเว็บ

-ระบบเนวิเกชั่น

-สร้างจุดสนใจด้วยความเเตกต่าง

การจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไป ยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน

- จัดเเต่งหน้าเว็บให้เป็นระเบียบ เนือ้หาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป 

-ใช้กราฟฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด 

บทที่8 

การเลือกใช้สีสำหรับเว็บไซต์ 

สีสันในเว็บเพจเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งเเรกที่ผู้ใช้มองเห็นก็คือสีซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์ เราสามารถใช้สีได้กับทุกองประกอบของเว็บเพจตั้งเเต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยสื่อความหมายในเนื้อหา

ประโยชของสีในเว็บไซต์ 

-ช้วยสร้างระเบียบให้กับข้อความต่างๆเช่นใช้สีเเยกระหว่างหัวเรื่องกับเนื้อเรื่อง 

-สามารถสงเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ 

-สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ 

-สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน 

-สีสามารถนำไปใช้ในการเเบ่งบริเวณต่างๆออกจากกัน 

-สีสามารถช่วยดึงดูดความน่าสนใจของผู้อ่าน 

-สีสามารถสร้างอารมณ์โยรวมของเว็บเพจ 

สีอ่อน สีเข้ม และโทนสี 

ในการผสมสีกลางเข้ากับสีบริสุทธ์ จะเกิดเป็นสีต่างๆมากมาย 

- สีบริสุทธ์ผสมกับสีขาวจะได้สีอ่อน 

- สีบริสุทธ์ผสมกับสีเทา จะได้โทนสีระดับต่างๆ 

- สีบริสุทะ์ผสมกับสียดำจะได้สีเข้ม 

สีอ่อน สีเข้ม เเละโทนสี มีประโยชน์อย่างมากในการจัดชุดของสี เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้เห็นถึงความรู้สึกได้หลายเเบบยิ่งขึ้น 

ความกลมกลืนของสี 

ความเป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงสมดุลเเละความสวยงามในเวลาเดรยวกัน 

เป้าหมายในเรื่องของสี คือการนำเสนอเว็บไซต์โดยใช้รูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสม 

รูปแบบชุดสีพื้นฐาน 

- ชุดสีร้อน 

- ชุดสีเย็น 

- ชุดสีแบบเดียว 

- ชุดสีคล้ายคลึงกีน 

- ชุดสีตรงข้ามข้างเคียง 

- ชุดสีตรงข้าม 

- ชุดสีสามเศร้า 

ชุดสีร้อน 

- ประกอบด้วยสีม่วงเเก้มเเดง แดงแก้มม่วง เเดง ส้ม เหลืองแกละเขียวอมเหลือง 

- สีเหล่านี้สร้างความรู้สึกอบอุ่นสบาย และรู้สึกต้อนรับแก่ผู้ชม 

ชุดสีเย็น 

- ประกอบด้วยสีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินเเก้มเขียวเเละเขียว 

- ชุดสีเย็นให้ความรู้สึกเย็นสบาย องค์ประกอบที่ใชสีเย้น จะทำให้ดูสุภาพ เรียบร้อย 

ชุดสีเเบบเดียว 

- เป็นรูปแบบสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธ์เพียงค่าเดียว เเต่เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่างๆ 

- ชุดสีแบบนี้ค้อนข้างจะมีความกลมกลืนเเบบเป็นหนึงเดียวกัน เเต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวาเพราะขาดความหลากหลายของสี 

ความกลมกลืนของสี 

-ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงามในเวลาเดียวกัน 

-การใช้สีที่จืดชืดเกินไปจะทำให้เกิดความรู้สึกที่น่าเบื่อและไม่สามารถดึงดูดความสนใจจากผู้ชมได้ 

-การใช้สีที่มากเกินไป ก็จะดูวุ้นวาย ขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชม 

-เป้าหมายในเรื่องสีคือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสม 

สีกับอารมและความรู้สึก 

ผลทางจิตวิยาที่มีต่อสี

มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช้สมองเช่น สีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีอาจทำให้รู้สึกซึมเศร้าได้ 

ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอย่างเหมาะสมกับอารมณ เนื้อหาของเว็บไซต์ 

บทที่9 

ออกแบบบกราฟฟิกสำหรับเว็บไซต์ 

กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้นเเละปัญหาที่เกิดขึ้นกับการสร้างกราฟฟิกคือการเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูปโดยไม่รู้จักความเเตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟลืใหญเกินตชความจำเป็น

 การนำกราฟฟิกประเภทGIFไปใช้กับรูปถ่ายทำให้ภาพเป็นจุดๆ

 การใชตัวอักษรในกราฟฟิกประเภท JPEG ผลคือเป็นรอยขรุขระ

รูปแบบหลัก3ประเภทคือGIF JPG เเละ PNG 

-คุณสมบัตรสำคัญ 

-วิธีการบีบอัดข้อมูล 

-การนำไปใช้งาน 

-การลดขนาด 

-แนะนำโปรเเกรมที่ใช้ในการสร้างและปรับเเต่ง 

รูปแบบกราฟฟิกสำหรับเว็บ(GIF,JPG และ PNG 

GIF ย่อมาจาก Graphic Interchange Format 

-ได้รับความนิยมในยุคเเรก 

-มีระบบสีแบบIndexซึ้งมีข้อมูลสีขนาด8บิต ทำให้มีสีมากสุด256สี 

-มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น 

JPG ย่อมาจาก Joint Photographic Experts Group 

-มีข้อมูลสีขนาด 24บิต สามมารถแสดงสีได้ถึง16.7ล้านสี 

-ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy) 

-ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่สี 

PNG ย่อมาจาก Portable Network Graphic 

-เป็นรูปแบบไฟล์ภาพที่ถูกคิดค้นเพื่อมาแทน GIF ที่มีปัญหาเรื่องลิขสิทธ์ ซึ่งคุณสมบัติของ PNG นั้นจะคล้ายกับ GIF 

-สมารถสนับสนุนระบบสีได้ทั้ง 8 บิตและ 24 บิต 

-มีระบบการบีบอัดแบบDeflate ที่ไม่ทำให้เกิดการสูญเสีย 

-มีระบบควบคุมค่าแกรมม่าและความโปร่งใสในตัวเอง 

-ทำพื้นหลังให้เป็นTransparent ได้ดีกว่า GIF 

-รูปแบบไฟล์แบบGNP นั้นสามารถที่จะบีบอัดไฟล์ให้มีขนาดเล็กกว่า GIF ประมาณ10-30% 

ระบบการวัดขนาดของรูปภาพ 

รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์นั้นก็คือ หน่วยพิกเซล ซึ่งจะมีประโยชในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบาเซอร์ด้วย 

ระบบการวัดความละเอียดของรูปภาพ 

-ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per (ppi) 

-แต่ในทางกลับกันใช้ inch(dpi) ซึ่งเป็นหน่วยวัดความละงานจะนำหน่วย dot per ของสิ่งพิมมาใช้งานเเทน 

-ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว 

โปรแกรมกราฟฟิกสำหรับเว็บ 

-ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ 

- Adobe Photoshop 

- Coreldraw 

- Gimp 

คำแนะนำในกระบวนการออกแบกราฟฟิกสำหรับเว็บ 

-ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette) 

-เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG 

-ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย(Slices) 

คำแนะนำในการเลือกใช้ชนิดของไฟล์ภาพ 

-ภาพถ่าย:JPEGดีที่สุด 

-โลโก้,พื้นหลัง,รูปส่วนต่างๆของเว็บ(ปุ่ม,ไอคอล):GIFและPNG-8 ดีที่สุด 

-รูปที่เอฟเฟ็คอย่าง Drop shadow,Glowหรือรูปที่มี Transparent: PNG-24ดีที่สุด