Lecture

การออกแบบหน้าเว็บไซต์

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


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

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

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


4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเว็บเสมอ
ประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น


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


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

                                  

7.ใช้กราฟฟิกอย่างเหมาะสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ

@-------------------------------------@

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

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

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

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

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

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

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

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

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

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

การผสมสี(Color  Mixing)มี2แบบ ดังนี้

   1.การผสมแบบบวก(Additive mixing)จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษสามารถนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี 

   2.การผสมแบบลบ(Subtractive mixing)การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ สามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ

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

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

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

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

รูปแบบชุดสีพื้นฐาน(Simple Color Schemes)

     1.ชุดสีร้อน(Warm Color Scheme)ประกอบด้วยสีม่วง, น้ำเงิน,น้ำเงินอ่อน,ฟ้า ,ฟ้าเงินแกมเขียว และสีเขียว โดยจะให้ความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นจะดูสุภาพ เรียบร้อย
  2.ชุดสีแบบเดียว(Monochromatic Color Scheme)    เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อนในระดับต่าง ๆ และชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียว แต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวา   เพราะขาดความหลากหลายของสี

  3.ชุดสีที่คล้ายคลึงกัน(Analogous Color Scheme) ประกอบด้วยสี2 หรือ 3สี ที่ติดอยู่กันในวงล้อ สามารถเพิ่มเป็น4 หรือ 5สี
ได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป

  4.ชุดสีตรงข้ามข้างเคียง(Split Complementary Color  Scheme)
เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม และชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย

  5.ชุดสีตรงข้ามข้างเคียงทั้ง 2ด้าน(Double Split Complementary Color Scheme)
ดัดแปลงมาจากชุดสีตรงข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง2ด้าน และชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและกลมกลืนของสีที่ลดลง

  6.ชุดสีเย็น(Cool Color Scheme)เว็บเพจที่ใช้โทนสีเย็นให้บรรยากาศคล้ายทะเล รู้สึกเย็นสบาย

  7.ชุดสีแบบสามเส้า(Triadic Color Scheme) 
เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว

  8.ชุดสีตรงข้าม(Complementary Color Scheme)

คือสีที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กัน จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น



@-----------------------------------@  
   

การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์

    1.เบราเซอร์ที่ใช้   
          -เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร ,รูปภาพ และภาพเคลื่อนไหว

          -มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น

               * Internet   Explorer

               * Netscape   Navigator

               * Opera

               * Mozilla Firefox

          - การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์

               * เว็บไซต์สำหรับเบราเซอร์ทุกร่น

               * เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด

               * เว็บไซต์ตามความสามารถของเบราเซอร์

               * เว็บไซต์ที่มีหลายรูปแบบ

     2.ระบบปฏิบัติการ (Operating  System) 

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

               * การแสดงผลของ windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย

               * ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Unix

     3.ความละเอียดของหน้าจอ

          - ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15",17",21" และอื่น ๆ

          - ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป็น Pixel

               * ความละเอียด 640 x 480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล
          - ความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้    แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
               * EX: จอขนาด 17"  สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640 x 480 จนถึง 1600x1200 เป็นต้น    
     4.   จำนวนสีที่จอของผู้ใช้สามารถแสดงได้          - มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกัน   ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ (video card)
          - จำนวนหน่วยความจำในการ์ดจอ (video memory) ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
          - จำนวนสีที่การ์ดจอสามารถ แสดงได้นั้น   ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล              - ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac
          - ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง   เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น   แต่ใน tool ต่าง ๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
     5.   ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

          - MS  Sans  Serif  VS  Microsoft  Sans  Serif
               * MS   Sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped  font )  ที่ออกแบบขึ้นจากจุดของพิกเซล   โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
               * Microsoft  Sans  font   เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น (vector  font)  โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว   แต่สามารถปรับขนาดได้อย่างไม่จำกัด
          - ตัวอักษรแบบกราฟิก (Graphic  Text)
         

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