Web Design.

งานนำเสนอเรื่อง: "Web Design."— ใบสำเนางานนำเสนอ:

1 Web Design

2 การใช้สี

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

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

5 ประโยชน์ของสีในเว็บไซต์(ต่อ)
(6) สีช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น การใช้สีแยกส่วนระหว่างหัวเรื่องกับตัวเรื่อง หรือการสร้างความแตกต่างให้กับข้อความบางส่วน โดยใช้สีแดงสำหรับคำเตือน หรือใช้สีเทาสำหรับสิ่งที่เป็นทางเลือก (7) สีสามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ ได้ ด้วยการใช้สีที่เป็นเอกลักษณ์ขององค์กรมาเป็นโทนสีหลักของเว็บไซต์

6 ความรู้เบื้องต้นเกี่ยวกับสีและการผสมสี

7 แม่สี ประกอบด้วย แม่สี 3 สี คือสีน้ำเงิน สีแดงและสีเหลือง สีน้ำเงิน
ประกอบด้วย แม่สี 3 สี คือสีน้ำเงิน สีแดงและสีเหลือง สีน้ำเงิน สีแดง สีเหลือง

8 สีขั้นที่สอง

9 สีขั้นที่สาม

10 การผสมสี การผสมสีเพื่อให้เกิดเป็นสีต่างๆ สามารถแบ่งได้เป็น 2 แบบ
การผสมของแสงหรือการผสมแบบบวก (additive mixing) การผสมของรงควัตถุ (pigment) หรือการผสมแบบลบ (subtractive mixing)

11 การผสมสีแบบบวก (Additive Mixing)
เป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุมีสีบนกระดาษ เนื่องจากแสงสีขาวประกอบด้วยลำแสงที่มีสีต่างๆ ตามความยาวคลื่นแสง ความยาวคลื่นแสงพื้นฐานได้แก่ สีแดง เขียว และน้ำเงิน เมื่อคลื่นแสงมีการซ้อนทับกันจะเกิดการบวกและรวมตัวกันของความยาวคลื่นแสง เมื่อแสงทั้งสามสีมีการผสมกันเป็นคู่ เกิดเป็นสีน้ำเงินแกมเขียว หรือ cyan สีแดงแกมม่วงหรือ magenta สีเหลือง เกิดจากสีแดงบวกกับเขียว ผสมสีทั้งสามเข้าด้วยกัน จะได้เป็นแสงสีขาว สื่อใดๆ ที่มีการใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ (movie projector) ทีวี หรือจอมอนิเตอร์จะใช้กฎของการผสมสีแบบบวก ดังนั้นในการออกแบบเว็บไซต์ จึงต้องใช้หลักการผสมสีแบบบวก

12 การผสมสีแบบลบ (Subtractive Color Mixing)
ใช้หลักการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ เมื่อแสงสีขาวส่องมายังวัตถุหนึ่งๆวัตถุจะดูดกลืนแสงที่ความยาวคลื่นบางระดับไว้ และสะท้อนแสงที่เหลือออกมาให้เห็น สีขั้นต้นในรูปแบบนี้ประกอบด้วย สีแดงแกมม่วง (magenta) สีน้ำเงินแกมเขียว (cyan) สีเหลือง ซึ่งไม่ใช่สีแดง เหลือง และสีน้ำเงิน เมื่อมีการผสมกันเป็นคู่ๆ ก็จะเกิดผลเป็นสีต่างๆ ได้แก่ สีแดง ซึ่งเกิดจากสีแดงแกมม่วงบวกกับเหลือง สีเขียว ซึ่งเกิดจากสีเหลืองบวกกับน้ำเงินแกมเขียว สีน้ำเงิน ที่เกิดจากสีน้ำเงินแกมเขียวบวกกับแดงแกมม่วง เมื่อรวมสีทั้งสามเข้าด้วยกันจะได้เป็นสีดำ เพราะมีการดูดกลืนแสงทุกสีไว้ทั้งหมด ทำให้ไม่มีแสงสีใดสามารถสะท้อนออกมาได้ สื่อต่างๆ ที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น สีที่ใช้ในการวาดรูปของศิลปิน, ดินสอสี, สีเทียน รวมถึงระบบการพิมพ์แบบ 4 สี ในสิ่งพิมพ์ต่างๆ ซึ่งจะมีหมึกสีดำเพิ่มขึ้นมาอีกหนึ่งสี จะใช้หลักการผสมสีแบบลบ

13 วงล้อสี Color Whell ถูกสร้างขึ้นเพื่อให้เข้าใจถึงความสัมพันธ์ของสี โดยจะมีรูปแบบการจัดเรียงของสีต่างๆ ในไว้ในวงกลม ซึ่งสีที่ถูกนำมาใส่ในวงล้อสีจะเป็นสีที่เกิดจากการผสมรวมกันของแม่สีขั้นต้น คือสีน้ำเงิน สีเหลือง และสีแดงจนถึงสีชั้นที่สาม วงล้อสี มีอีกชื่อเรียกว่า วงล้อสี 12 ขั้น สาเหตุที่ได้ชื่อว่า วงล้อสี 12 ขั้น เพราะว่าใน 1 วงล้อสี จะประกอบไปด้วยสี 12 สีที่ไล่ระดับกัน

14 วงล้อสี 12 ขั้น

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

16 ชุดสีพื้นฐาน ชุดของสีพื้นฐานที่นิยมใช้จะพิจารณาจากวงล้อของสี ซึ่งสามารถแบ่งออกเป็นหลากหลายลักษณะ 7 ชุดคือ ชุดสีร้อนและชุดสีเย็น ชุดสีแบบสีเดียว ชุดสีแบบสามเส้า ชุดสีคล้ายกัน ชุดสีตรงข้าม ชุดสีตรงข้ามข้างเคียง ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน

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

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

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

20 ชุดสีแบบสีเดียว ตัวอย่างการออกแบบเว็บไซต์ โดยใช้ชุดสีแบบสีเดียว

21

22

23

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

25 ชุดสีแบบสามเส้า ตัวอย่างการออกแบบเว็บไซต์ โดยใช้ชุดสีแบบสามเส้า

26

27 ชุดสีคล้ายกัน Analogous Color Scheme ซึ่งจะประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อสี เช่นสีแดงแกมม่วง สีแดง และสีส้ม ชุดสีที่อยู่ในรูปแบบนี้มีจำนวนมากที่สามารถเลือกมาใช้งานได้ และสามารถเพิ่มจำนวนสีในชุดสีให้มากขึ้นเป็น 4 หรือ 5 สีก็ได้ แต่ผลที่ได้จะมีขอบเขตของสีที่มีความกว้างเกินไป ทำให้สีที่อยู่ตรงปลายทั้งสองของชุดสีไม่มีความสัมพันธ์กัน เป็นสาเหตุให้ลักษณะการที่มีสีคล้ายคลึงกันลดลง ณ บางตำแหน่งของวงล้อสี ชุดสีคล้ายคลึงกัน 3-4 สีที่อยู่ติดกันอาจดูเหมือนเป็นสีเดียวกัน เพราะมีสีใดสีหนึ่งคลุมโทนของสีทั้งหมดไว้ ไม่เพียงแต่ชุดสีแบบนี้จะนำมาใช้งานได้สะดวก ความคล้ายคลึงกันของสียังก่อให้เกิดความกลมกลืนกัน แต่ในทางกลับกันอาจทำให้ไม่มีความโดดเด่น ไม่ดึงดูดความสนใจของผู้ใช้ได้ ตัวอย่างการออกแบบเว็บไซต์โดยใช้ชุดสีคล้ายกัน

28 ชุดสีคล้ายกัน ตัวอย่างการออกแบบเว็บไซต์ โดยใช้ชุดสีคล้ายกัน

29 ชุดสีคล้ายกัน

30

31 ชุดสีตรงข้าม หรือ Complementary Color Scheme เป็น สีที่อยู่ตรงกันข้ามกันในวงล้อสี เช่น สีแดงกับฟ้า หรือสีน้ำเงินอ่อนกับส้ม ซึ่งทั้งสองสีจะตัดกันมาก เมื่อนำสีทั้งสองมาใช้คู่กันก็จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น ซึ่งถือเป็นคู่สีที่มีความแตกต่างมากที่สุด ชุดสีตรงข้ามจะมีความเสถียรมากที่สุด (maximum contrast and maximum stability) ข้อได้เปรียบคือ ความสดใส สะดุดตา ทำให้ไม่ดูจืดชืด ผู้อ่านให้ความสนใจได้ง่าย

32 ชุดสีตรงข้าม ตัวอย่างการออกแบบเว็บไซต์ โดยใช้ชุดสีตรงข้าม

33

34

35 ชุดสีตรงข้ามข้างเคียง
หรือ Split Complementary Color Scheme มีรูปแบบมาจากชุดสีตรงข้าม แต่ใช้สีที่อยู่ด้านข้างทั้งสอง เช่น สีแดง มีสีตรงข้ามคือ สีฟ้า และสีฟ้ามีสีด้านข้างทั้งสองเป็นสีน้ำเงินอ่อนกับสีน้ำเงินแกมเขียว ดังนั้นชุดสีตรงข้ามข้างเคียงที่ได้จึงประกอบด้วย สีแดง สีน้ำเงินอ่อน และสีน้ำเงินแกมเขียว ลักษณะของชุดสีแบบนี้ คือมีความหลากหลายมากขึ้น แต่ส่งผลให้มีความสดใสและความสะดุดตาลดลง และความเข้ากันของสีก็ลดลงเช่นกัน

36 ชุดสีตรงข้ามข้างเคียง
ตัวอย่างการออกแบบเว็บไซต์ โดยใช้ชุดสีตรงข้ามข้างเคียง

37 ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
หรือ Double Split Complementary Color Scheme หรือ Tetradic ชุดสีแบบนี้จากสีตรงข้ามกันในวงล้อเลือกสีด้านข้างทั้ง 2 ด้าน จะได้ชุดสี 4 สี เช่น สีแดงแกมม่วงกับน้ำเงินแกมเขียว และน้ำเงินอ่อนกับส้ม ชุดสีแบบนี้จะมีความหลากหลายที่เพิ่มขึ้น แต่จะมีความสดใสและความกลมกลืนของสีลดลง

38 ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
ตัวอย่างการออกแบบเว็บไซต์ โดยใช้ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน

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

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

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

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

43 ความหมายของสีกับความรู้สึก
สีส้มและสีน้ำตาล สื่อถึงเปลวไฟ ท่อนไม้ เป็นสีที่ให้ความรู้สึกเรียบง่าย แต่โดดเด่น แฝงไปด้วยความแข็งแรง

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

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

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

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

48 จัดการตัวอักษรสำหรับเว็บ

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

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

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

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

53 รูปภาพและการจัดวาง

54 ประเภทของรูปภาพ การตกแต่งเว็บไซต์ด้วยรูปภาพจะทำให้ผู้ชมสามารถเข้าใจได้ง่าย แบ่งเป็น 2 ประเภท คือ

55 ภาพบิทแมพ (Bitmap) เป็นภาพที่ประกอบขึ้นจากจุดสีขนาดเล็กจำนวนมากเรียงไล่เฉดสีกันจนกลายเป็นภาพๆ หนึ่ง จุดสีเล็กๆ นี้เรียกว่า พิกเซล (pixel) ซึ่งภาพประเภทนี้มีค่าที่แน่นอนตายตัว เมื่อขยายขนาดภาพจึงหยาบและเห็นจุดสีชัดเจน ตัวอย่างภาพประเภทบิทแมพ ได้แก่ GIF (Graphic Interchange Format) เป็นภาพที่แสดงสีได้สูงสุด 256 สี เหมาะกับภาพโลโก้ การ์ตูน ภาพลายเส้นง่ายๆ ภาพตัวอักษร ไม่มีการไล่เฉดสีที่มากนัก ภาพชนิดนี้มีจุดเด่นเรื่องการทำภาพเคลื่อนไหวและความโปร่งใส นามสกุลของไฟล์ชนิดนี้คือ .gif JPG (Joint Photographic Expert Group) เป็นภาพที่แสดงสีได้สูงสุด 16.7 ล้านสี เหมาะกับภาพที่ต้องการการไล่เฉดสี เช่น ภาพถ่าย หรือภาพที่ต้องการความคมชัดของสี นามสกุลของไฟล์ชนิดนี้คือ .jpg, .jpeg PNG (Portable Network Graphic) เป็นภาพที่แสดงสีได้เท่ากับไฟล์ GIF ในกรณีที่เป็น PNG-8 และสามารถแสดงสีได้เท่ากับ ไฟล์ JPEG ในกรณีที่เป็น PNG-24 ทั้งสองแบบสามารถเป็นภาพที่มีพื้นหลังโปร่งใสได้ โดยการโปร่งสามารถไล่เฉดสีได้ แต่เนื่องจากไฟล์ PNG ยังเป็นไฟล์ค่อนข้างใหม่ เบราเซอร์ยังสนับสนุนไฟล์ชนิดนี้น้อย บางคุณสมบัติของไฟล์จึงไม่สามารถทำงานบนเบราเซอร์บางตัวได้ นามสกุลของไฟล์ชนิดนี้คือ .png

56 ภาพบิทแมพ (Bitmap)

57 ภาพเวกเตอร์ (Vector) เป็นภาพที่ประกอบขึ้นด้วยคำสั่งโปรแกรมและค่าตัวเลขซึ่งเกิดจากการคำนวณค่าทางคณิตศาสตร์ ภาพประเภทนี้ จะมีความคมชัดคงเดิมไม่ว่าจะขยายขนาดใหญ่เท่าใดก็ตามความละเอียดของภาพที่ใช้กับเว็บไซต์

58 ภาพเวกเตอร์ (Vector)

59 ข้อแตกต่าง Vector and bitmap

60 ข้อแตกต่าง Vector and bitmap

61 ความละเอียดรูปภาพ รูปภาพที่แสดงในเว็บไซต์ควรมีความละเอียดไม่เกิน 72 ppi เพราะความละเอียดของหน้าจอผู้ใช้ มีขนาดไม่เกิน 72 ppi ppi ย่อมากจาก Pixel per Inch คือ จำนวนจุดสี (Pixel) ต่อ หนึ่งตารางนิ้ว (Inch) ซึ่งบ่งบอกถึงความละเอียดของภาพกราฟิกนั้นๆ ว่า ในหนึ่งตารางนิ้วของภาพดังกล่าวประกอบไปด้วยจุดสีทั้งหมดกี่จุด ดังนั้นถ้าหากใส่ภาพที่มีความสูงมากกว่า 72 ppi ลงไปในเว็บไซต์ ผู้ใช้ก็ไม่สามารถเห็นความแตกต่าง จึงควรเลือกใช้ภาพที่มีความละเอียดพอดี เพราะจะทำให้เว็บไซต์มีขนาดใหญ่เกินไป

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

63 การออกแบบโครงสร้างหน้าเว็บ

64 โครงสร้างแบบเรียงลำดับ (Sequential Structure)

65 โครงสร้างแบบลำดับชั้น (Hierarchical Structure)

66 โครงสร้างแบบตาราง (Grid Structure)
Page A Page A.1 Page A.2 Page B.2 Page B.1 B C Page C.1 Page C.2

67 โครงสร้างแบบใยแมงมุม (Web Structure)
Page 1 Page 2 Page 3 Page 4 Page 5 Page 6

68 การออกแบบระบบเนวิเกชั่น

69 รูปแบบระบบเนวิเกชั่น
ประกอบด้วย 4 แบบ คือ ระบบเนวิเกชั่นแบบลำดับชั้น (Hierarchical) ระบบเนวิเกชั่นแบบโกลบอล (Global) ระบบเนวิเกชั่นแบบโลคอล (Local) ระบบเนวิเกชั่นเฉพาะที่ (Ad Hoc)

70 ระบบเนวิเกชั่นแบบลำดับชั้น (Hierarchical)
เป็นระบบที่มีการเชื่อมโยงจากหน้าโฮมเพจ ไปยังหน้าย่อยอื่นๆ ถัดลงไป หรือย้อนกลับขึ้นมาได้จากหน้าย่อยมาหน้าหลัก การเข้าไปศึกษาข้อมูลจำเป็นต้องเข้าไปศึกษาเนื้อหาเรียงลำดับตามขั้นตอน โดยหน้าเว็บเพจแต่ละหน้าจะมีการสร้างเนวิเกชั่นแบบเรียงลำดับ จากหน้าแรกไปยังหน้าถัดไป และย้อนกลับไปหน้าก่อนหน้า โครงสร้างของเว็บไซต์จะเป็นโครงสร้างแบบเรียงลำดับ หรือโครงสร้างแบบลำดับชั้น

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

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

73 ระบบเนวิเกชั่นเฉพาะที่ (Ad Hoc)
เป็นระบบเนวิเกชั่นที่สร้างขึ้นมาเฉพาะที่ตามความจำเป็นของเนื้อหาในหน้าเว็บเพจนั้นๆ

74 องค์ประกอบของระบบเนวิเกชั่นหลัก
เป็นระบบนำทางหลักของเว็บไซต์ เพื่อนำผู้ชมเข้าไปสู่เว็บเพจเนื้อหาต่างๆ ของเว็บไซต์ ประกอบด้วยหลากหลายรูปแบบ ได้แก่ เนวิเกชั่นบาร์ เนวิเกชั่นเฟรม Pull down menu Pop-up menu Image map Search box

75 เนวิเกชั่นบาร์ (Nevigation Bar)

76 เนวิเกชั่นบาร์ระบบเฟรม (Frame-Based)

77 เนวิเกชั่นบาร์ระบบเฟรม (Frame-Based)
เว็บเพจไปแสดงผลเมื่อคลิกจากเนวิเกชั่นบาร์ เฟรมแสดงเนวิเกชั่นบาร์

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

79 เนวิเกชั่นแบบ Pull down Menu

80 เนวิเกชั่นแบบ Pop-Up Menu
เป็นเนวิเกชั่นที่มีรายการหรือรายการย่อยให้เลือก เมื่อผู้ใช้นำเมาส์ไปวางเหนือตำแหน่งของวัตถุใดๆบนเว็บเพจ

81 เนวิเกชั่นแบบ Pop-Up Menu

82 Image Map Map เป็นการนำภาพมาสร้างเป็นตัวเชื่อมโยงไปยังส่วนต่างๆ ที่ต้องการ เมื่อผู้ใช้นำเมาส์ไปวางเหนือรูปภาพจะปรากฎคำอธิบายสั้นๆ และเมื่อคลิกรูปก็จะทำการเชื่อมโยงไปยังหน้าเว็บเพจหรือตำแหน่งที่ระบุในคำอธิบาย

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

84 Search Box

85 องค์ประกอบของระบบเนวิเกชั่นเสริม
ระบบสารบัญ (Table Contents) เป็นการแสดงรายการข้อมูลทั้งหมดภายในเว็บไซต์ โดยแบ่งเนื้อหาออกเป็นหมวดหมู่แล้วทำการเชื่อมโยงไปยังเว็บเพจข้อมูล

86 ระบบดัชนี (Index System)
เป็นการนำเอาคำหรือข้อความมาจัดเรียงตามตัวอักษรเพื่อให้ผู้ใช้สามารถใช้งานได้ง่าย

87 แผนที่เว็บไซต์ (Site Map)
เป็นการแสดงโครงสร้างข้อมูลในเว็บไซต์แบบกราฟิก เพื่อความสวยงามและสื่อความหมายของเนื้อหา ทำให้เข้าใจได้ง่าย ผู้ใช้สามารถคลิกเลือกหน้าเว็บเพจในแผนที่เว็บไซต์เพื่อนำทางไปสู่หน้าเว็บเพจนั้นๆ โดยไม่ต้องผ่านหน้าโฮมเพจ หรือหน้าเว็บเพจหลัก

88 ไกด์ทัวร์ (Guided Tour)
เป็นการนำเสนอข้อมูลสาธิตการใช้งานเว็บไซต์ เพื่อแสดงให้เห็นตัวอย่างการใช้งานและข้อมูลที่จะได้รับจากการเยี่ยมชมเว็บไซต์ในส่วนต่างๆ

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

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