Lecture

 

บทที่ 6 : ออกหน้าเว็บ  Page Designx

 

หลักสำคัญในการออกเเบหน้าเว็บไซต์      

คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำ
คัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้
  เเนวคิดในการออกเเบบหน้าเว็บ
  1.เรียนรู้จากเว็บไซต์ต่างๆ
  2.ประยุกต์รูปแบบจากสื่อพิมพ์
  3.ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
  4.ออกแบบอย่างสร้างสรรค์   ใช้เเบบจำลองเปรียบเทียบ (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 :การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม  Design for a variety of Web Environments

 

การใช้สีในการออกแบบเว็บไซต์

                          การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมายของเว็บไซต์ได้อย่างชัดเจน การเลือกใช้สีให้เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กับผู้ใช้ แต่ยังสามารถทำให้เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้ สีเป็นองค์ประกอบหลักสำหรับการตกแต่งเว็บ จึงจำเป็นอย่างยิ่งที่จะต้องทำความเข้าใจเกี่ยวกับการใช้สี                                ระบบสีที่แสดงบนจอคอมพิวเตอร์ มีระบบการแสดงผลผ่านหลอดลำแสงที่เรียกว่าCRT (Cathode ray tube) โดยมีลักษณะระบบสีแบบบวก อาศัยการผสมของของแสงสีแดง สีเขียว และสีน้ำเงิน หรือระบบสี RGB สามารถกำหนดค่าสีจาก 0 ถึง 255 ได้ จากการรวมสีของแม่สีหลักจะทำให้เกิดแสงสีขาว มีลักษณะเป็นจุดเล็ก ๆ บนหน้าจอไม่สามารถมองเห็นด้วยตาเปล่าได้ จะมองเห็นเป็นสีที่ถูกผสมเป็นเนื้อสีเดียวกันแล้ว จุดแต่ละจุดหรือพิกเซล (Pixel) เป็นส่วนประกอบของภาพบนหน้าจอคอมพิวเตอร์ โดยจำนวนบิตที่ใช้ในการกำหนดความสามารถของการแสดงสีต่าง ๆ เพื่อสร้างภาพบนจอนั้นเรียกว่า บิตเด็ป (Bit-depth) ในภาษา HTML มีการกำหนดสีด้วยระบบเลขฐานสิบหก ซึ่งมีเครื่องหมาย (#) อยู่ด้านหน้าและตามด้วยเลขฐานสิบหกจำนวนอักษรอีก 6 หลัก โดยแต่ละไบต์ (byte) จะมีตัวอักษรสองตัว แบ่งออกเป็น 3 กลุ่ม เช่น #FF12AC การใช้ตัวอักษรแต่ละไบต์นี้เพื่อกำหนดระดับความเข้มของแม่สีแต่ละสีของชุดสี RGB โดย 2 หลักแรก แสดงถึงความเข้มของสีแดง2 หลักต่อมา แสดงถึงความเข้มของสีเขียว 2 หลักสุดท้ายแสดงถึงความเข้มของสีน้ำเงิน

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

1. สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สีกลุ่มนี้เป็นกลุ่มสีที่ช่วยให้หายจากความเฉื่อยชา มีชีวิตชีวามากยิ่งขึ้น
2. สีโทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน เรียบร้อย เป็นกลุ่มสีที่มีคนชอบมากที่สุด สามารถโน้มนาวในระยะไกลได้ 3. สีโทนกลาง (Neutral Colors) สีที่เป็นกลาง ประกอบด้วย สีดำ สีขาว สีเทา และสีน้ำตาล กลุ่มสีเหล่านี้คือ สีกลางที่สามารถนำไปผสมกับสีอื่น ๆ เพื่อให้เกิดสีกลางขึ้นมา

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

 

บทที่ 8 : เลือกสีใช้สำหรับเว็บไซต์ Designing Web Colors

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

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

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

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

บทที่ 9 : ออกแบบกราฟิกสำหรับเว็บไซต์  Designing  Web  Graphics

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

รูปแบบกราฟิกสำหรับเว็บ (gif,jpg และ png)

gif ย่อมาจาก graphic interchange format

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

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

กราฟิกแบบ gif

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

ข้อดี ไม่ต้องอาศัย plug-in ใดๆ เนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้
ข้อคิดในการใช้ gif

=>ใช้ภาพเคลื่อนไหวที่ต้องการให้ผู้ชมสนใจมากที่สุด

=>ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน

 jpg ย่อมาจาก joint photographic Experts Group

=>มีข้อมูลสีขนาด 24 บิต (true Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
=>ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
=>ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟิกที่มีการไล่ ระดับสีอย่างละเอียด

ระบบการบีบอัดข้อมูลในไฟล์ jpeg

=>เป็นการบีบอัด lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
=>อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆ ในบริเวณกว้างๆ ได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ

การลดขนาดไฟล์ jpeg

=>เนื่องจากจำนวนบิตของสีในไฟล์ jpeg เป็น 24 บิตเสมอจึงไม่สามรถลดขนาดไฟล์โดยการลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
=>การลดขนาดไฟล์ทำได้โดยการบีบอัดในอัตราที่สูง ทั้งนี้ก็ขึ้นอยู่กับคุณภาพที่การด้วย

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

=>สามารถสนับสนุนระบบสีได้ทั้ง 8บิต 16บิต และ 24บิต
=>มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
=>มีระบบการควบคุมค่าแกมม่า(Gamma)และความโปร่งใส(Transparency)ในตัวเอง