เนื้อหาLecture

บทที่6

การออกแบบหน้าเว็บเพจ (Page Design)

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

สร้างลำดับชั้นควาสำเร็จขององค์ประกอบ

–       ตำแน่งและลำดับขององค์ประกอบ
แสดงถึง ลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ

–       สีและความแตกต่างของสี
แสดงถึงความสัมพันธ์ของสิ่งต่างๆ ภายในหน้า

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

–       ตำแน่งและลำดับขององค์ประกอบ
แสดงถึง ลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ

–       สีและความแตกต่างของสี
แสดงถึงความสัมพันธ์ของสิ่งต่างๆ ภายในหน้า

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

ความสม่ำเสมอทั้งเว็บไซท์
หมายถึงการจัดการองค์ประกอบต่างๆ ให้มีลักษณะเดียวกันทั้งเว็บไซท์ เช่น

–       โครงสร้างการวางตำแหน่งสิ่งๆ ภายในเว็บไซท์

–       ลักษณะของรูปแบบของกราฟิก

–       ลักษณะของตัวอักษรที่ใช้ภายในเว็บไซท์

–       โทนสีที่ใช้ภายในเว็บไซท์

ความสม่ำเสมอทั้งเว็บไซท์

การสร้างความสม่ำเสมอนั้นสามารถใช้เทคนิคของ Cascading ฤะสำ Sheet (CSS) ช่วยในการกำหนดสไตล์มาตราฐานให้กับองค์ประกอบต่างๆ  โดยสามารถกำหนดรูปแบบเพียงครั้งเดียว แล้วสามารถนำไปใช้ได้ตลอดทั้งเว็บไซท์
จัดวางองค์ประกอบที่สำคัญไว้ส่วนบนของหน้าเสมอ
โดยปกติส่วนบนควรประกอบด้วย

–       ชื่อของเว็บไซท์

–       หัวเรื่องหรือชื่อแสดงหมวดหมู่ของเนื้อหา

–       สิ่งสำคัญที่ต้องการโปรโมทบนเว็บไซท์

–       ระบบโกลบอลเนวิเกชั่น

การออกแบบหน้าเว็บให้มีความยาวเหมาะสม

ออกแบบหน้าเว็บเพจขนาดสั้นสำหรับ

–       หน้าเว็บเพจที่เป็นแหล่งรวมลิงค์จำนวนมาก

–       หน้าเว็บเพจที่ความว่าจะถูกอ่านบนจอภาพ

–       หน้าเว็บเพจที่กราฟิกขนาดใหญ่มาก

การออกแบบหน้าเว็บสำหรับการพิมพ์
มีวิธีการดังนี้
1. แบ่งเนื้อหาออกเป็นส่วนย่อยๆ ประมาณ 2-3 หน้า พร้อมสร้าง
    Link เชื่อมโยงเว็บเพจทั้งหมด
2. สร้าง Link จากหน้าหลักไปยังเพจที่รวมเนื้อหาทั้งหมดไว้ในไฟล์    เดียว และใช้ความกว้างไม่เกินหน้ากระดาษ A4 หรือประมาณ    655 Pixel

บทที่7

การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม(Design for averiety of Web Environments)

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
เบราเซอร์ที่ใช้
ระบบปฏิบัติการของคอมพิวเตอร์
ความละเอียดของหน้าจอ
จำนวนสีที่จอผู้ใช้สามารถแสดงได้
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ขนาดหน้าต่างเบราเซอร์
ความสว่างและค่าความต่างของโทนสี
บราเซอร์ที่ใช้
 เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจโดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพและภาพเคลื่อนไหวมีเบราเซอร์หลายชนิดที่ได้รับความนิยมเช่น
    => Internet Explorer
    => Netscape Navigator
    => The World
    => Opera
    => Mozilla
    => Firefox
 การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
    => เว็บไซต์สำหรับเบราเซอร์ทุกชนิด
    => เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
    => เว็บไซต์ตามความสามรถของเบราเซอร์
    => เว็บไซต์ที่มีหลายรูปแบบ
ระบบปฏิบัติการ(Opreating System)
 ระบบปฏิบัติการเป็นปัจจัยที่มีผลการทำงานต่อเบราเซอร์มากโดยแต่ระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้,ระดับความละเอียดของหน้าจอ, ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
    => การแสดงผลของ Windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
    => ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Linux
ความละเอียดของหน้าจอ
กรณีที่ 1 ผู้ใช้สว่นใหญ่จะได้เห็นหน้าเว็บที่สมบูรณ์
กรณีที่ 2 ผู้ใช้ทุกคนจะได้เห็นเนื้อหาทั้งหมดในหน้าจอ
กรณีที่ 3 ผู้ใช้จำนวนน้อยที่สามารถดูเนื้อหาได้อย่างเหมาะสม
การออกแบบควรใช้ความละเอียด800 x 600
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
Ms Sans Serif VS Microsoft Sans Serif
Ms Sans Serif เป็นพ้อนต์ที่บิตแมท ที่ออกแบบจากจุดพิกเซล โดยมีการออกแบบขนาดที่แน่นอน
MicrosoftSans Serifเป็นพ้อนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอ้าไลน์ไว้แบบเดียวแต่ปรับขนาดได้ไม่จำกัด
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ผู้ออกแบบเว็บไซต์ต้องออกแบบให้เว็บมีความสวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
การออกแบบให้เว็บเพจมีขนาดคงที่ (Fixed Design)
รูปแบบนี้เหมาะสมกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บไซต์ให้คงที่เสมอ
 ข้อดี
เว็บเพจจะประกฎต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอสามารถดูความยาวของตัวอักษรในบรรทัดได้ดี ตัวอักษรไม่ยาวเกินไป
 ข้อเสีย
 ต้องอาศัย Scroll Bar ในการเลื่อนดูข้อมูล

บทที่ 8 

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

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

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

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

ประโยชน์ของสีในรูปแบบต่างๆ มีดังนี้

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

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

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

การผสมสี ( Color Mixing)

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

การผสมสีแบบบวก (Additive Mixing)

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

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

การผสมสีแบบลบ (Subtractive Color Mixing)

                        การผสมสีแบบลบไม่ได้มีความเกี่ยวข้องกับเรื่องของลำแสงแต่อย่างใด ๆ  แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ เมื่อแสงสีขาวส่องมายังวัตถุหนึ่งๆวัตถุนั้น จะดูดกลืนแสงที่ความยาวคลื่นบางระดับไว้และสะท้อนแสงที่เหลือออกมาให้เราเห็น สีขั้นต้นในรูปแบบนี้ประกอบด้วย สีแดงแกมม่วง  (magenta)  สีน้ำเงินแกมเขียว (cyan) และสีเหลือง ซึ่งไม่ใช่สีแดง เหลือง และน้ำเงินอย่างธรรมดาอย่างที่หลายๆคนเข้าใจ เมื่อมีการผสมของรงควัตถุหรือวัตถุมีสี จะเกิดการรวมกันของสีที่จะถูกดูดกลืนไว้ ทำให้ปริมาณแสงที่จะสะท้อนออกมาลดลง จึงเป็นที่มาของชื่อ “ สีแบบลบ ” เมื่อสีทั้งสามมีการผสมกันเป็นคู่ๆ ก็จะเกิดผลเป็นสีต่างๆ ได้แก่สีแดง (เกิดจากสีแดงแกมม่วงบวกกับเหลือง) สีเขียว (เกิดจากสีเหลืองบวกกับน้ำเงินแกมเขียว) และสีน้ำเงิน (เกิดจากสีน้ำเงินแกมเขียวบวกกับแดงแกมม่วง) ในขั้นสุดท้าย เมื่อรวมสีทั้งสามเข้าด้วยกันก็จะเห็นเป็นสีดำ เพราะมีการดูดกลืนแสงทุกสีไว้ทั้งหมด ทำให้ไม่มีแสงสีใดสามารถสะท้อนออกมาได้

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

วงล้อสี (Color Wheel)

                        เพื่อความเข้าใจถึงความสัมพันธ์ของสีที่ดีขึ้นเราความทำความรู้จักกับระบบสีที่เข้าใจง่าย และมีประโยชน์มากที่สุดที่เรียกกันว่า วงล้อสี ( color wheel ) ซึ่งเป็นรูปแบบหนึ่งที่มีระบบการจัดเรียงสีทั้งหมดไว้ในวงกลม วงล้อสีถูกพัฒนาขึ้นจากความต้องการกฎระเบียบที่ชัดเจนของลำดับและความกลมกลืนของสี แม้ในอดีตจะมีการพัฒนาและออกแบบระบบสีในรูปแบบต่างๆมากมาย แต่ส่วนใหญ่มักจะมีความซับซ้อนเกินกว่าที่จะนำมาใช้ประโยชน์ในการออกแบบจริง ในที่สุดเราจะใช้วงล้อสีแบบ 12 ขั้น ซึ่งถูกประดิษฐ์ขึ้นโดย Sir Isaac Newton ในปี 1666 ที่ได้แสดงถึงการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้ จึงเป็นประโยชน์อย่างมากต่อศิลปินในการศึกษาและออกแบบศิลปะต่างๆ รวมทั้งการเลือกใช้สีในกระบวนการออกแบบเว็บไซต์ที่เรากำลังสนใจอยู่

บทที่ 9 

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

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

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

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

                        เนื่องจากรูปภาพในเว็บโดยส่วนใหญ่จะถูกสแดงผ่านหน้าจอมอนิเตอร์ ในทางเทคนิคที่ถูกต้องแล้ว ระบบการวัดความละเอียดของรูปภาพจึงต้องเป็น “Pixels per inch” (ppi) แต่ก็มีระบบการวัดอีกแบบหนึ่งคือ “Dot per inch (dpi) ที่ใช้ความละเอียดของรูปถาพที่พิมพ์ออกมา ซึ่งความละเอียดที่ได้จะขึ้นอยู่กับประสิทธิภาพของเครื่องพิมพ์แต่ละเครื่องในทางปฏิบัติ หน่วย ppi กับ dpi อาจใช้แทนกันได้ ทำให้เป็นที่ยอมรับว่าความละเอียดของรูปภาพในหน้าจอมีหน่วยเป็น dpi แทนท่จะเป็น ppi ที่ถูกต้อง

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

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

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

ปัญหาเกี่ยวกับขนาดไฟล์ของกราฟิก

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

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

ลดขนาดไฟล์กราฟิกสำหรับเว็บ (Optimizing Web Graphic)

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

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

                        การ Optimize กราฟิกจะช่วยลดขนาดไฟล์ให้เล็กลงได้ทำให้แสดงผลได้เร็วขึ้น และทำให้การปราฏของสีอย่างถูกต้องในหน้าจอของผู้ใช้