สมุดเล่มเล็ก

538 views
444 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
538
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

สมุดเล่มเล็ก

  1. 1. 1.นางสาวพัชราภรณ์ สอนอ่ํา รหัส533410080318 2.นางสาวเสาวลักษณ์ แก้วเกต รหัส533410080331 3.นายนิรันดร์ กิริยาดี รหัส533410080338 4.นายพัฒพล วรรณสัมผัส รหัส533410080339
  2. 2. คู่มือเล่มนี้จัดทําขึ้น เพื่อให้ผู้ที่สนใจ เรื่องการออกแบบเว็บไซต์ได้ศึกษา ซึ่ง สมาชิกในกลุ่มได้รับมอบหมายจากอาจารย์ปวริศ สารมะโน ให้จัดทําคู่มือเล่มนี้ขึ้นมา หวังว่าคู่มือเล่มนี้จะเป็นประโยชน์แก่ผู้ที่ต้องการจะศึกษา ถ้าผิดพลาดประการใด สมาชิกในกลุ่มก็ขออภัยไว้ ณ ที่นี้ด้วย คณะผู้จัดทํา ส่วนประกอบของเว็บไซต์ที่ดี 1 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ 5 เรื่องในฉบับ 2 เรื่องในฉบับ 3 เรื่องในฉบับ 4 เรื่องในฉบับ 5 เรื่องในฉบับ 6
  3. 3. ส่วนประกอบของเว็บไซต์ที่ดี ดังรูปที่เห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ ด้วยกันทั้งหมด 6 ส่วนดังนี้ ตัวอย่างส่วนประกอบของเว็บไซต์ 1.Containing block โดยปกติเราจะเขียน <div> หรือ <table> ต่อจาก <body> เพื่อเอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์ ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะ มีข้อดีอยู่ตรงที่ สามารถทําให้ปรับเปลี่ยนขนาดในการแสดงผลของ เนื้อหาได้ หรือตําแหน่งการแสดงผลของเว็บไซต์ได้เช่น จัดกลาง ชิดซ้าย หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือ ลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทําได้ยากมาก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง 2.Logo เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทําให้ลูกค้าหรือ ผู้ใช้งานจดจําเราได้ ด้วยเหตุนี้เองทําให้การออกแบบเว็บไซต์นั้น จําเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตําแหน่งที่ควรจะวางโล โก้ไว้คือตําแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่ อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งานจําได้ และสะดุดตา เรื่อง ที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนําไปสู่หน้าแรกของ เว็บไซต์เสมอ
  4. 4. 3.Navigation เป็นส่วนที่จะนําผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของ เว็บไซต์ โดยสามารถทําให้อยู่ในแนวนอน หรือแนวตั้งก็ได้ หากสังเกต hellomyweb.com เราจะทําทั้งแนวตั้งและแนวนอน โดยแนวนอนจะ นําไปสู่เนื้อหาหน้าอื่นของเว็บไซต์ ส่วนแนวตั้งจะนําไปสู่เนื้อหาย่อยใน หน้านั้น ตําแหน่งที่ควรจะวาง navigation เอาไว้คือสีเขียวทั้งหมด ถ้า สังเกตดูจะพบว่าการวางตําแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของ เว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่ ควรวางไว้ในตําแหน่งที่ผู้ใช้จะต้องเลื่อนขึ้นลง ซ้ายขวา 4.Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สําคัญมากที่สุด หากผู้ใช้งานไม่สามารถเข้าถึงได้โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ ทันที ตําแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตําแหน่งอื่นๆที่คิดว่าจะ ทําให้ผู้หาเจอได้โดยไม่ลําบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มี โฆษณาที่มากจนเกินไป ทําให้ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการ ออกแบบที่ผิดพลาด 5.Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ ต่างๆเอาไว้ หรือเป็นเนื้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่า จําเป็นต้องมีหรือไม่ บอกได้ว่าจําเป็นอย่างยิ่ง footer จะเป็นตัวบอก ผู้ชมว่าส่วนนี้คือล่างสุดของหน้าที่กําลังแสดงอยู่แล้วนะ ไม่มีเนื้อหา เพิ่มเติมแล้ว 6.Whitespace พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็น ความสําคัญของการเว้นพื้นที่ว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือ ตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทําให้เว็บดูสวยงามขึ้น หรือ ใช้พื้นที่มีมีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คํานึงว่าต้องมี พื้นที่ว่างอยู่ในเว็บไซต์ จะทําให้เว็บของเรานั้นดูอึดอัดทันที การเว้น ช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่าง ระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทําให้เว็บของเราดูสบายตาขึ้น แล้ว ยังทําให้เราสามารถกําหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจในจุด นั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนําภาพหรือ ตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้นจะเป็นที่สนใจของผู้ใช้ทันที
  5. 5. ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชม เว็บไซต์ - ข้อมูลเกี่ยวกับบริษัท องค์กร สถานศึกษา - รายละเอียดของผลิตภัณฑ์ - ข่าวความคืบหน้าและข่าวจากสื่อมวลชน - คําถามยอดนิยม - ข้อมูลในการติดต่อ ข้อควรคํานึงถึงในการออกแบบเว็บไซต์ 1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้ งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิด และสีของตัวอักษรไม่มากจนเกินไปทําให้วุ่นวาย 2. ความสม่ําเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมี ความคล้ายคลึงกันตลอดทั้งเว็บไซต์ 3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคํานึงถึง ลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์ และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ 4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สําคัญที่สุดในเว็บไซต์ ดังนั้นควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และ สมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ เนื้อหาไม่ ควรซ้ํากับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ 5. ระบบเนวิเกชัน ที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่าย และใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคําอธิบายที่ชัดเจน
  6. 6. 6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์ กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้อง สมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้า กันลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล 7. การใช้งานอย่างไม่จํากัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มาก ที่สุดเลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหาสามารถแสดงผลได้ ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสําคัฐสําหรับผู้ใช้ที่มีจํานวนมาก 8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหา อย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือ ได้ 9. ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบ การทํางานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทําหน้าที่ได้อย่าง ถูก 1.การกําหนดวัตถุประสงค์ของเว็บไซต์ เว็บไซต์ส่วนใหญ่จะมี การกําหนดวัตถุประสงค์ชัดเจน ผู้เข้าชมเว็บไซต์ต้องการข้อเท็จจริง เมื่อ เข้าชมแล้วจะพยายามค้นหาข้อมูลหรือข้อเท็จจริงที่ต้องการ เว็บไซต์ที่มี วัตถุประสงค์ที่ชัดเจน จะทําให้ผู้เข้าชมยอมรับเว็บไซต์โดยง่าย เช่น ข้อมูลเพื่อการศึกษาจะให้ข้อมูลด้านการศึกษาอย่างชัดเจน ผู้ที่เข้ามา เยี่ยมชมส่วนใหญ่จะเป็นนักศึกษาหรือผู้สนในในการศึกษาหลากหลาย สาขาวิชา เป็นต้น การกําหนดวัตถุประสงค์เว็บไซต์ที่ชัดเจนก่อนการ สร้างเว็บไซต์ จะทําให้ผู้สร้างเว็บไซต์มั่นใจได้ว่าเว็บไซต์จะประสบ ผลสําเร็จตรงตามวัตถุประสงค์ของเว็บไซต์ 2.การกําหนดกลุ่มเป้าหมาย ผู้ที่จะออกแบบเว็บไซต์จะต้อง คํานึงถึงผู้ที่จะเข้าชมเว็บไซต์ว่าเป็นกลุ่มเป้าหมายที่สําคัญ ดังนั้นก่อนที่ จะออกแบบเว็บไซต์จะต้องวิเคราะห์กลุ่มเป้าหมายของเว็บไซต์ให้ชัดเจน ว่าต้องการให้ใครมาเยี่ยมชม โดยดูวัตถุประสงค์ของเว็บไซต์ ว่าเว็บไซต์ นั้นๆมีการถ่ายทอดอะไรกับผู้เยี่ยมชมเว็บไซต์ก็จะทราบว่า กลุ่มเป้าหมายของเว็บไซต์คือกลุ่มใด ขั้นตอนการวางแผนเพื่อการออกแบบเว็บไซต์
  7. 7. 3.การวางแผนด้านเนื้อหา การออกแบบเว็บไซต์จะต้องมีการ วางแผนให้ชัดเจนตั้งแต่เริ่มต้น เพราะถ้าหากมีการวางแผนด้านเนื้อหาไม่ ดี จะทําให้เว็บไซต์ไม่เป็นระเบียบ ส่งผลให้ผู้เข้าชมเว็บไซต์เกิดความ สับสน การวางแผนด้านเนื้อหาควรตอบคําถามด้านต่างๆให้ได้ การสร้าง แผนผังของเนื้อหาจะทําให้เราทราบว่า มีจํานวนเว็บเพจที่เกี่ยวข้อง ปริมาณเท่านั้น หากเป็นเว็บไซต์ขนาดใหญ่ มีเว็บเพจจํานวนมาก ควรมี การจัดกลุ่มของเนื้อหาทั้งหมดที่ความสัมพันธ์กันเป็นกลุ่มๆ ตัวอย่างการสร้างแผนผังของเนื้อหา 4.การวางแผนโครงสร้างของเว็บไซต์ ในที่นี้ขออธิบายตาม ระบบการจัดการเนื้อหา(Content Management System : CMS) ใน การสร้างและจัดการเนื้อหาของเว็บไซต์ที่ได้ออกแบบไว้ ประกอบด้วย การสร้างเนื้อหา(creation) การปรับปรุงเนื้อหา(updating) การ กระจายเนื้อหา(distribution) การตีพิมพ์เนื้อหา(publishing) การ ค้นหาเนื้อหา(discovery) CMS เปิดทางให้ผู้ใช้งานสามารถตีพิมพ์ได้ หลายลักษณะ เช่น ข่าว การประกาศ กรณีศึกษา ประวัติบุคคล บทความ หนังสือพิมพ์ ข้อมูลสินค้า หนังสือรับรอง ลิงค์ที่สําคัญ แหล่งข้อมูลออนไลน์ 5.การวางแผนการผลิตเว็บเพจ ควรเข้าใจหลักการของเว็บไซต์ ก่อนว่า เว็บไซต์เปรียบเสมือนการไหลของข้อมูล ซึ่งจะทําให้ผู้เข้าเยี่ยม ชมเว็บไซต์ได้รับข้อมูลอย่างเป็นลําดับ ขั้นตอน ถ้าหากผู้สร้างเว็บไซต์ไม่ มีการวางแผน เว็บไซต์ก็จะเริ่มต้นไม่ถูก ไม่รู้ว่าจะเริ่มต้นจากตรงไหนดี ที่สําคัญที่สุดคือควรออกแบบให้ง่ายที่สุด และรวดเร็วที่สุดสําหรับ ผู้ใช้งานหรือผู้เข้าเยี่ยมชมเว็บไซต์
  8. 8. 6.การวางแผนระบบเนวิเกชั่น เป็นการนําแผนผังโครงสร้าง เว็บไซต์จากการวางแผนเว็บไซต์ มาวางแผนระบบเนวิเกชั่น ตัวอย่างการวางแผนระบบเนวิเกชั่น ขั้นตอนการพัฒนาเว็บไซต์ กระบวนการพัฒนาเว็บไซต์สามารถจําแนกได้3ขั้นตอน ดังนี้ 1.การเตรียมการและการวางแผนงาน(pre-production) เปรียบเสมือนเข็มทิศที่จะชี้นําทางหรือบ่งบอกให้ผู้พัฒนาเว็บไซต์ทราบ ว่า ควรจะต้องเดินทางไปในทิศทางใด 1.1การเตรียมก่อนการดําเนินการ ประกอบด้วย กําหนด วัตถุประสงค์และเป้าหมายของเว็บไซต์ กําหนดชื่อเว็บไซต์ และชื่อยูอาร์ แอล กําหนดกลุ่มเป้าหมายที่จะให้เข้าชมเว็บไซต์ และศึกษากลุ่มคู่แข่ง 1.2การวางแผนการดําเนินการ หลังการเตรียมก่อนการ ดําเนินการ ควรมีการวางแผนไว้ล่วงหน้า เพื่อให้การพัฒนาเว็บไซต์มี แนวทางที่ชัดเจน 1.3การรวบรวมและวิเคราะห์โครงสร้าง เป็นขั้นตอนที่ต่อจาก การวางแผนการดําเนินการ เนื่องจากเนื้อหาและข้อมูลเป็นสิ่งที่เชิญชวน ให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์
  9. 9. 2.การทํางานจริงในการออกแบบและพัฒนาเว็บเพจ(on- pro- duction) แบ่งได้เป็น2ส่วน คือ 2.1การออกแบบเว็บเพจ นับเป็นขั้นตอนในการออกแบบ รูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกทางหน้าเว็บเพจ โดย โปรแกรมที่นิยมนํามาใช้ในการออกแบบคือ โฟโต้ชอป หรือ ไฟล์เวิร์ก ซึ่ง จะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่างๆ เช่น ชื่อ เว็บไซต์ โลโก้ รูปไอคอน ภาพเคลื่อนไหว แบรนเนอร์โฆษณา เป็นต้น 2.2การพัฒนาเว็บเพจ หลังจากออกแบบโครงร่างของเว็บเพจ และแต่ละหน้าเว็บเพจแล้ว ขั้นตอนต่อไปคือ การดําเนินการสร้างเว็บเพจ ซึ่งรวมถึงการจัดหาองค์ประกอบที่ต้องนํามาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่างๆ และการสร้างไฟล์รูปภาพ/เสียง ที่เกี่ยวข้อง กับเนื้อหา ซึ่งต้องคํานึงถึงรูปแบบของไฟล์ที่นํามาใช้และสอดคล้องกับ ซอฟต์แวร์ที่ใช้ในการพัฒนาด้วย จากนั้นนําภาพและเสียงมาเก็บไว้ในได เร็กทอรี่หรือโฟลเดอร์ที่กําหนดไว้ แล้วนําข้อมูลทั้งหมดที่รวบรวมไว้จากที่ กล่าวมาข้างต้น มาสร้างเป็นเว็บไซต์ด้วยภาษา HTML หรือเครื่องมือใน การสร้างเว็บเพจอื่นตามแนวคิดที่ได้ออกแบบไว้แล้ว ซึ่งรวมถึงการเขียน โปรแกรมสคริปต์ในการใช้งานด้วย 3.การสรุปงานเพื่อส่งมอบ(post- production) ประกอบด้วย 3.1การทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบ เว็บเพจที่สร้างขึ้นแบบออฟไลน์ โดยยังไม่ได้มีการนําเว็บไซต์เข้าสู่ อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บเบราว์เซอร์ เช่น ใช้โปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ ตรวจสอบตัวอย่างเว็บเพจ หน้าต่างๆที่สร้างไว้ ว่ามีความเหมาะสมหรือไม่ พร้อมกับทําการแก้ไข ปรับปรุงจนเป็นที่น่าพอใจ 3.2การเผยแพร่เว็บไซต์ เมื่อทดสอบเว็บไซต์จนสมบูรณ์แล้ว ขั้นตอนในการเผยแพร่ผ่านเว็บไซต์ คือ การเผยแพร่ให้คนทั่วไปได้รู้จัก หรือเรียกว่าการนําเว็บไซต์ขึ้นเซิร์ฟเวอร์ หรือการอัพโหลด ซึ่งเป็นการ ถ่ายโอนเว็บเพจและส่วนประกอบอื่น เช่น ไฟล์ภาพ ไฟล์เพลงประกอบ เป็นต้น ไปฝากไว้ที่โฮสต์ 3.3การบํารุงรักษาเว็บไซต์ เป็นการปรับปรุงเนื้อหา ภาพประกอบ หรือการปรับปรุงเว็บไซต์ให้เป็นปัจจุบัน ซึ่งถือเป็น ขั้นตอนที่สําคัญ ผู้เข้าชมเว็บมักใช้เวลาในการค้นหาและเปิดผ่าน เว็บไซต์ต่างๆอย่างรวดเร็ว หากพบว่าเว็บไซต์ที่ผู้สร้างนําเสนอไม่ได้มี การปรับปรุงเปลี่ยนแปลงหรือมีข้อมูลใหม่ๆเพิ่มขึ้นเลย ผู้เข้าชมเว็บก็ อาจลดจํานวนลงเรื่อยๆ เรื่อยๆ จนกลายเป็นเว็บที่ไม่มีคนเข้ามาชม
  10. 10. หลักในการออกแบบโครงสร้างเว็บไซต์ 1. กําหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้าง เว็บไซต์นี้ทําเพื่ออะไร 2. ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้าง ต้องการสื่อสาร ข้อมูลอะไรที่พวกเขาต้องการโดยขั้นตอนนี้ควรปฏิบัติ ควบคู่ไปกับขั้นตอนที่หนึ่ง 3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การ ออกแบบเว็บไซต์ต้องมีการจัดโครงสร้างหรือจัดระเบียบข้อมูลที่ชัดเจน 4. กําหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจาก วัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผู้ใช้ควรทําอะไรบ้าง จํานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด 5. หลังจากนั้น จึงทําการสร้างเว็บไซต์แล้วนําไปทดลองเพื่อหา ข้อผิดพลาดและทําการแก้ไขปรับปรุง แล้วจึงนําเข้าสู่เครือข่าย อินเทอร์เน็ตเป็นขั้นสุดท้าย ความสําคัญของสีที่มีต่อการออกแบบเว็บไซต์ สีเป็นองค์ประกอบที่มีความละเอียดซับซ้อน และต้องอาศัย ความเชี่ยวชาญในการผสมผสานความแตกต่างของสี ให้สามารถเข้ากัน ได้อย่างลงตัว โดยสามารถสรุปความสําคัญในการเลือกใช้สีเพื่อการ ออกแบบเว็บ ได้ดังนี้ 1.การดึงดูดความสนใจของผู้เยี่ยมชม เนื่องจากสิ่งแรกที่ มองเห็นได้จากเว็บคือ สี ซึ่งเป็นสิ่งที่ช่วยกําหนดบรรยากาศ และ ความรู้สึกโดยรวมของเว็บไซต์ 2.การนําสีมาใช้กับองค์ประกอบต่างๆของเว็บเพจ เนื่องจากใน หน้าเว็บมีข้อมูลปริมาณมาก ผู้ออกแบบมักใช้โทนสีในการจัดกลุ่มข้อมูล เช่น ตัวอักษร รูปภาพ ลิงค์ และพื้นหลัง เป็นต้น เพื่อความสะดวกต่อ การเข้าใช้งานของผู้เยี่ยมชมเว็บไซต์ 3.การเชื่อมโยงองค์ประกอบหน้าเว็บเข้าด้วยกัน ผู้ออกแบบ สามารถใช้การไล่ระดับสีหรือโทนสี เพื่อเชื่อมโยงองค์ประกอบแต่ละ ส่วนไว้ด้วยกัน ให้หน้าเว็บมรความเป็นเอกภาพได้
  11. 11. การจัดองค์ประกอบภาพ หลักการจัดองค์ประกอบของภาพอยู่ 2 หลักด้วยกัน ได้แก่ 1. การสร้างเอกภาพ ส่วนวิธีการสร้างเอกภาพนั้น มีหลักอยู่ ด้วยกัน 3 ข้อ ได้แก่ 1.1 สร้างความใกล้ชิดให้กับองค์ประกอบ วิธีที่ง่ายที่สุดก็คือ การจัดวางองค์ประกอบให้มีความเหมาะสม ลองดูรูปข้างล่างนี้ก็จะรู้เอง ว่ารูปไหนมีเอกภาพแล้วอันไหนไม่มีเอกภาพ ซึ่งแตกต่างกันแค่การจัด องค์ประกอบ 4.การสร้างอารมณ์และความรู้สึก การเลือกใช้สีแต่ละสี ล้วนมีผล ต่อความรู้สึกของผู้เยี่ยมชมเว็บไซต์ เช่น สีแดงกระตุ้นให้เกดความสนใจ อยากรู้ มีชีวิตชีวา หรือสีดํา กระคุ้นให้เกิดความน่าลึกลับ น่าค้นหา เป็น ต้น 5.การสร้างสัญลักษณ์หรือเป็นตัวแทนขององค์กร ส่วนใหญ่ องค์กรขนาดใหญ่จะมีการสร้างสัญลักษณ์ที่เป็นตัวแทนขององค์กร ทั้งนี้ อาจอยู่ในรูปแบบเครื่องหมายการค้าหรือสีสันต่างๆ ที่ผู้เยี่ยมชมเว็บไซต์ มองเห็นแล้วทราบทันทีว่าเป็นสัญลักษณ์องค์กรใด โดยใช้สีประจําองค์กร มาใช้ร่วมกับการออกแบบหน้าเว็บ อย่างไรก็ตาม การเลือกใช้สีในการออกแบบเว็บเพจนั้น หาก เลือกใช้สีไม่เหมาะสมอาจสร้างความลําบากในการอ่านหรือรบกวน สายตาผู้เยี่ยมชม รวมทั้งอาจทําให้การสื่อความหมายไม่ถูกต้อง การ เลือกใช้สีต่างๆนั้น ต้องเข้าใจถึงการแสดงผลของเว็บเพจใน สภาพแวดล้อมที่แตกต่างกัน
  12. 12. 1.2 สร้างความซ้ํากันขององค์ประกอบ การจัดองค์ประกอบ โดยการใช้วิธีการทําซ้ํากันไปเรื่อยๆไม่ว่าจะเป็นเส้น จุด สี หรือ รูปลักษณะอื่นๆ จะทําให้ผู้ชมรู้สึกว่าเป็นพวกพ้องเดียวกัน และจะทําให้ เกิดความเป็นเอกภาพขึ้นมาในงานได้ ตัวอย่างนี้หาดูได้ในหลายๆงาน เช่นงานที่ทําเป็นเส้นพริ้วๆหลายๆเส้น ซ้ํากันไปซ้ํากันมา 1.3 สร้างความต่อเนื่องขององค์ประกอบ ความต่อเนื่องเราจะ สร้างมาจากเส้น หรือทิศทางขององค์ประกอบที่อยู่ภายในงานของเรา ซึ่ง จะนําสายตาของผู้ที่ได้ชมงานของเราไปในทิศทางที่เราได้กําหนด และ เกิดความต่อเนื่องเพื่อเล่าเรื่องราวไหลไปภายในงาน ต่อเนื่องเป็นเรื่อง เป็นราวเดียวกันและเป็นลําดับขั้น และจะทําให้เกิดเป็นเรื่องราวขึ้นในใจ ของผู้ที่ได้ดู ในหลักการข้อนี้เราจะสามารถนํามาใช้ในการบังคับสายตา ของผู้ที่ดูงานไปจบที่ สิ่งที่เราต้องการจะให้ความสําคัญได้ ลองหาดูตาม ป้ายโฆษณา ที่เวลาเราดูที่รูปแล้วจะไปจบที่จุดสุดท้ายเป็นพวก Logo หรือ สินค้า ที่ต้องการจะโฆษณา 2. การสร้างจุดเด่น เน้นจุดสําคัญ จุดเด่นจะทําให้ผู้ชมสามารถ ที่จะจับประเด็นในความหมายของงานที่เราต้องการจะสื่อได้ โดยมี หลักการสร้างจุดสนใจได้ 3 วิธีด้วยกัน ได้แก่ 2.1 การวางจุดสนใจในงาน หลักการนี้ถือว่าเป็นหลักการที่ สําคัญหลักการหนึ่ง สิ่งที่สําคัญก็คือเราต้องรู้ว่าเราต้องการที่จะเน้นอะไร ในงานของเรา แล้วก็วางสิ่งที่เราให้ความสําคัญไว้ในตําแหน่งที่สําคัญ จากรูปหมายเลข 1 คือต่ําแหน่งที่สําคัญที่สุดไล่มาจนถึงหมายเลข 5 คือตําแหน่งที่มีความสําคัญน้อยที่สุด
  13. 13. 2.2การสร้างความแตกต่างในงาน การสร้างความแตกต่างจะ เป็นตัวกําหนดความน่าสนใจและความโดดเด่นในงานของเราได้ดี แต่ก็ อย่าให้มันหลุดกรอบไปจะทําให้ขาดเอกภาพได้ นี่คือข้อควรระวังอีกข้อ หนึ่ง หลักในการสร้างความแตกต่าง มีง่ายๆดังนี้ - การสร้างขนาดที่แตกต่าง - ความแตกต่างกันที่รูปร่างขององค์ประกอบ - รูปลักษณ์หรือลักษณ์ที่แตกต่าง 2.3 การวางแยกองค์ประกอบให้โดดเด่น พูดง่ายๆก็คือ วางให้ โดด และเด่น กว่าคนอื่น เทคนิคการนําสีไปใช้งาน เทคนิคการเลือกใช้สีแบบสูตรสําเร็จจะมีอยู่หลายรูปแบบ แต่ แบบที่นิยมให้งานกันเป็นหลักจะมีอยู่ 4 รูปแบบ คือ 1.Mono หรือเอกรงค์ จะเป็นการใช้สีที่ไปในโทนเดียวกัน ทั้งหมด เช่น จุดเด่นเป็นสีแดง สีส่วนที่เหลือก็จะเป็นสีที่ใกล้เคียงกับสี แดง โดยใช้วิธีลดน้ําหนักความเข้มของสีแดงลงไป ตัวอย่างเว็บไซต์ที่ใช้สีMono หรือเอกรงค์
  14. 14. 2.Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรง ข้ามกันในวงจรสี เช่น สีฟ้าจะตรงข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสี เขียว สามารถนํามาใช้งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดีและ ไม่ดี หากไม่รู้หลักพื้นฐานในการใช้งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ ควรใช้ในพื้นที่ปริมาณเท่ากันในงาน ควรใช้สีใดสีหนึ่งจํานวน 80% อีก ฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นที่ของงาน โดยรวม จะทําให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่นของ ภาพ ตัวอย่างเว็บไซต์ที่ใช้สีตัดกันหรือสีตรงกันข้าม 3.Triad คือ การเลือกสีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยม ด้านเท่ามาใช้งาน ตัวอย่างเว็บไซต์ที่ใช้สีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่า มาใช้งาน
  15. 15. 4.Analogic หรือสีข้างเคียงกัน การเลือกสีใดสีหนึ่งขึ้นมาใช้งาน พร้อมกับสีที่อยู่ติดกันอีกข้างละสี หรือก็คือสีสามสีอยู่ติดกันในวงจรสี นั่นเอง ตัวอย่างเว็บไซต์ที่ใช้สีใกล้เคียงกัน องค์ประกอบด้านข้อความ ข้อความ จัดเป็นองค์ประกอบหลักสําคัญที่สุดในการออกแบบ เว็บไซต์การออกแบบข้อความที่ดี ผู้ออกแบบต้องคํานึงถึงองค์ประกอบ ย่อยหลายด้าน เช่น รูปแบบตัวอักษร ขนาดตัวอักษร ความหนาแน่น ตัวอักษร สีของข้อความ และการจัดความสัมพันธ์ข้อความและภาพให้ สอดคล้องกับองค์ประกอบอื่น ๆ เช่น ภาพ และกราฟิกบนหน้าจอ รูปแบบและขนาดตัวอักษร มีงานวิจัยเกี่ยวกับขนาดตัวอักษรทั้งภาษาไทยเละภาษอังกฤษ พบว่าผู้อ่านตัว อักษรตัวพิมพ์ภาษไทยหรือภาษาต่าง ๆ ขนาด 80 ตัวอักษรต่อบรรทัดน้อยกว่า การอ่าน ตัวอักษรขนาดขนาด 40 ตัวอักษรต่อบรรทัด ในขณะที่ความเข้าใจ จากการอ่านควรอยู่ระหว่าง 19-37 พอยต์ ในขณะที่ตัวหนังสือปกติมีขนาด 12-19 พอยต์ ส่วน รูปแบบของตัวอักษรควรใช้ตัวที่อ่านง่ายสบายตาหากตัวอักษรที่ไม่ใช่ ส่วนของเนื้อหาหลัก เช่น ตัวอักษร หัวเรื่องใหญ่ ตัวอักษรประกอบการ ออกแบบ หรือตัวอักษรพิเศษอื่น ๆ ผู้ออกแบบอาจใช้ตัวอักษรรูปแบบ และขนาดต่าง ๆ กันออกไป ๆ ได้ แต่ไม่ควรมี ความหนาแน่นของ ตัวอักษรมากเกินไป
  16. 16. ความหนาแน่นของ ตัวอักษร ส่วนใหญ่รวมถึงความหนาแน่นของ องค์ประกอบอื่นบนจอภาพเข้าไปด้วย ผลการวิจัยพบว่า ผู้เรียนชอบ จอภาพที่มีความหนาแน่นปานกลางหรือประมาณ 40 % ของพื้นที่ หน้าจอมากที่สุด และจะเลือกจอภาพที่มีความหนาแน่นสูง หรือประมาณ 50 % ของพื้นที่หน้าจอ มากว่าจอภาพที่มีความหนาแน่นต่ํา นอกจากนี้ ยังพบว่าในวิชาที่มีเนื้อหายาก ผู้เรียนจะชอบจอภาพ ที่มีความแน่นสูง เนื่องจากจอภาพที่มีความหนาแน่นขององค์ประกอบต่าง ๆ สูง จะมี ข้อมูลที่ช่วยให้ความเข้าใจเนื้อหาและแนวคิดหลักต่าง ๆ ชัดเจนและ ต่อเนื่องขึ้น สีข้อความ เป็นองค์ประกอบหน้าจอ ที่ช่วยกระตุ้นความน่าสนใจ การ สีเป็นตัวกระตุ้นประสาทการรับรู้ที่สําคัญ การใช้สีที่เหมาะสม จะช่วยให้อ่านง่าย และสบายตา ผลงานวิจัยพบว่านักเรียนส่วนใหญ่ชอบ คู่อักษรสีขาว หรือเหลือง บนพื้นน้ําเงิน อักษรเขียวบนพื้นดํา และอักษร ดําบนพื้นเหลือง หากใช้พื้นสีเทา คู่สีที่ผู้เรียนชอบ คือ สีฟ้า สีม่วง และสี ดํา สีที่ชอบน้อยคือ ควรใช้พื้นหลังเป็นสีเข้มมากกว่าสีอ่อนเป็นพื้นหลัง ซึ่งระยะยาวจะช่วยลดความล้าของสายตา ในการอ่านจอภาพอัน เนื่องมาจากความจ้าของสีพื้น รูปแบบของตัวอักษรที่ใช้ในการทําเว็บไซต์ ตัวอักษรที่เราใช้งานกันอยู่ในปัจจุบันจะแบ่งออกเป็น 4 รูปแบบ ใหญ่ ๆ คือ 1.Font แบบ Serif จะดูเป็นระเบียบ เป็นทางการ เหมาะจะใช้ ในงานที่เป็นทางการ และต้องการความน่าเชื่อถือมากๆ Font แบบ San Serif จะอ่านง่าย ดูทันสมัยมากกว่าแบบอื่น ๆ เหมาะจะใช้ในงานที่ต้องการ ความทันสมัยออกแนวไม่เป็นทางการ มากนัก ตัวอย่างFont แบบ Serif ตัวอย่างFont แบบ San Serif
  17. 17. 3..Font แบบ Antique จะเหมาะกับงานที่ต้องการแสดงความ ชัดเจนของยุคสมัย หรือต้องการอามรณ์ย้อยยุคนิดหน่อย 4.Font แบบ Script เหมาะกังานที่ไม่เป็นทางการ ต้องการ ความเป็นกันเองและดูสนุกสนานมากกว่าแบบอื่นๆ หรือในบางกรณี Font แบบนี้จะใช้ในงานที่ต้องการข้อความที่ดูเหมือนเป็นลายมือเขียน ตัวอย่างFont แบบ Antique ตัวอย่างFont แบบ Script วิธีเลือก Font ไปใช้ในงานออกแบบ การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคํานึงง่าย ๆ อยู่ 2 ข้อคือ 1. ความหมายต้องเข้ากัน หมายความว่า ความหมายของคํา และ Font ที่เลือกใช้ควรจะไปด้วยกันได้ เช่น คําว่าน่ารักก็ควรจะใช้ Font ที่ดูน่ารักไปด้วย ไม่ควรใช้ Font ที่ดูเป็นทางการดังภาพตัวอย่าง ตัวอย่างfont
  18. 18. 2. อารมณ์ของฟอนต์ และอารมณ์ของงานต้องไปในทิศทาง เดียวกัน เช่น งานที่ต้องการความน่าเชื่อถือก็จะเลือกใช้ Font แบบ Ser- if ที่ดูหนักแน่น น่าเชื่อถือ ส่วนงานที่ต้องการความฉูดฉาดอย่างโปสเตอร์ ลดราคาก็ควรจะเลือกใช้ Font ที่เป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็นต้น ตัวอย่างอารมณ์ของฟอนต์ และอารมณ์ของงานที่เป็นไปในทิศทาง เดียวกัน การวางตําแหน่งตัวอักษร มีข้อควรคํานึงถึงไว้ให้อยู่ 3 ข้อคือ 1.ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลง ล่าง โดยมีรัศมีการกวาดสายตาตามลําดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลําดับให้ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมา ทําให้เสียความหมายของข้อความไป 2.จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัว ใหญ่ๆ อยู่เพียงชุดเดียว จึงจะเป็นจุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วน จุดอื่น ๆ ขนาดควรจะเล็กลงมาตามลําดับความสําคัญ 3.ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทําให้กลายเป็น งานที่อ่านยากและชวนปวดศรีษะมากกว่าชวนอ่าน ถ้าจําเป็นจริง ๆ แนะนําให้ใช้ Font เดิมแต่ไม่ตกแต่งพวกขนาด, ความหนาหรือ กําหนดให้เอียงบ้าง เพื่อเพิ่มความน่าสนใจไม่ให้งานดูน่าเบื่อแบบนี้จะ ดีกว่า
  19. 19. บรรณานุกรม โซนซ่า. (2549). ประเภทของเว็บไซต์. ค้นเมื่อ 24 กรกฏาคม 2556. จาก http://www.zoneza.com วิชาการพัฒนางานบนเว็บ. (2551). การออกแบบโครงสร้างเว็บไซต์. ค้นเมื่อ 24 กรกฏาคม 2556. จาก http://sites.google.com /site/class0223/webdesign. วิทยาลัยสารพัดช่างพระนคร. (2549). โครงสร้างเว็บไซต์. ค้นเมื่อ 24 กรกฏาคม 2556. จาก http://202.29.42.235/~eleaning/ index. php?option=com_content&view. สาวิตรี ลุ่มงาม. (2554). แนวทางการพัฒนาเว็บไซต์. ค้นเมื่อ 24 กรกฏาคม 2556. จาก http://www.cybered.co.th/ warnuts/wbi/index3.htm . Hellomyweb. (2554). ส่วนประกอบของเว็บไซต์ที่ดี. ค้นเมื่อ 24 กรกฏาคม 2556. จาก http://www.hellomyweb.com / index.php/main/content/134 .

×