Ta'May Pimkanok, profile picture
Uploaded byTa'May Pimkanok
352 views

ความรู้การออกแบบเว็บไซต์1

Embed presentation

Download to read offline
ความรู้การออกแบบเว็บไซต์ สมาชิกกลุ่ม 3 1.นางสาวพัชราภรณ์ สอนอ่่า รหัส533410080318 2.นางสาวเสาวลักษณ์ แก้วเกต รหัส533410080331 3.นายนิรันดร์ กิริยาดี รหัส533410080338 4.นายพัฒพล วรรณสัมผัส รหัส533410080339
ค่าน่า คู่มือเล่มนี้จัดทาขึ้น เพื่อให้ผู้ที่สนใจ เรื่องการออกแบบเว็บไซต์ได้ศึกษา ซึ่งสมาชิกในกลุ่มได้รับ มอบหมายจากอาจารย์ปวริศ สารมะโน ให้จัดทาคู่มือเล่มนี้ขึ้นมา หวังว่าคู่มือเล่มนี้จะเป็นประโยชน์แก่ผู้ที่ ต้องการจะศึกษา ถ้าผิดพลาดประการใด สมาชิกในกลุ่มก็ขออภัยไว้ ณ ที่นี้ด้วย คณะผู้จัดทา
สารบัญ ส่วนประกอบของเว็บไซต์ที่ดี 1 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ 5 เรื่องในฉบับ 2 เรื่องในฉบับ 3 เรื่องในฉบับ 4 เรื่องในฉบับ 5 เรื่องในฉบับ 6
ตัวอย่างส่วนประกอบของเว็บไซต์ ดังรูปที่เห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้ 1.Containing block โดยปกติเราจะเขียน <div> หรือ <table> ต่อจาก <body> เพื่อเอาไว้เก็บ เนื้อหาทั้งหมดของเว็บไซต์ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะมีข้อดีอยู่ ตรงที่ สามารถทาให้ปรับเปลี่ยนขนาดในการแสดงผลของเนื้อหาได้ หรือตาแหน่งการแสดงผลของเว็บไซต์ได้ เช่น จัดกลาง ชิดซ้าย หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทาได้ยากมาก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง 2.Logo เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทาให้ลูกค้าหรือผู้ใช้งานจดจาเราได้ ด้วยเหตุนี้เองทา ให้การออกแบบเว็บไซต์นั้นจาเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตาแหน่งที่ควรจะวางโลโก้ไว้คือ ตาแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งาน จาได้ และสะดุดตา เรื่องที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนาไปสู่หน้าแรกของเว็บไซต์เสมอ 3.Navigation เป็นส่วนที่จะนาผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์ โดยสามารถทาให้อยู่ใน แนวนอน หรือแนวตั้งก็ได้ หากสังเกต hellomyweb.com เราจะทาทั้งแนวตั้งและแนวนอน โดยแนวนอนจะ นาไปสู่เนื้อหาหน้าอื่นของเว็บไซต์ ส่วนแนวตั้งจะนาไปสู่เนื้อหาย่อยในหน้านั้น ตาแหน่งที่ควรจะวาง navigation เอาไว้คือสีเขียวทั้งหมด ถ้าสังเกตดูจะพบว่าการวางตาแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของ เว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่ควรวางไว้ในตาแหน่งที่ผู้ใช้จะต้อง เลื่อนขึ้นลง ซ้ายขวา 4.Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สาคัญมากที่สุด หากผู้ใช้งานไม่สามารถเข้าถึงได้ โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ทันที ตาแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตาแหน่งอื่นๆที่คิดว่าจะ ทาให้ผู้หาเจอได้โดยไม่ลาบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มีโฆษณาที่มากจนเกินไป ทาให้ ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการออกแบบที่ผิดพลาด
5.Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ต่างๆเอาไว้ หรือเป็นเนื้อหาที่เกี่ยวกับ เว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่าจาเป็นต้องมีหรือไม่ บอกได้ว่าจาเป็นอย่างยิ่ง footer จะเป็นตัวบอกผู้ชมว่า ส่วนนี้คือล่างสุดของหน้าที่กาลังแสดงอยู่แล้วนะ ไม่มีเนื้อหาเพิ่มเติมแล้ว 6.Whitespace พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็นความสาคัญของการเว้นพื้นที่ว่างไว้ใน เว็บไซต์ เรามักจะใส่ภาพหรือตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทาให้เว็บดูสวยงามขึ้น หรือใช้พื้นที่มี มีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คานึงว่าต้องมีพื้นที่ว่างอยู่ในเว็บไซต์ จะทาให้เว็บของเรานั้นดูอึด อัดทันที การเว้นช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่างระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทาให้เว็บของเราดูสบายตาขึ้นแล้ว ยังทาให้เราสามารถกาหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจใน จุดนั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนาภาพหรือตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้น จะเป็นที่สนใจของผู้ใช้ทันที ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์ - ข้อมูลเกี่ยวกับบริษัท องค์กร สถานศึกษา - รายละเอียดของผลิตภัณฑ์ - ข่าวความคืบหน้าและข่าวจากสื่อมวลชน - คาถามยอดนิยม - ข้อมูลในการติดต่อ ข้อควรค่านึงถึงในการออกแบบเว็บไซต์ 1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือ ตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทาให้วุ่นวาย 2. ความสม่่าเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์ 3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคานึงถึงลักษณะขององค์กร เพราะรูปแบบของ เว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดู น่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ 4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สาคัญที่สุดในเว็บไซต์ ดังนั้นควรจัดเตรียมเนื้อหาและข้อมูลที่ ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ เนื้อหาไม่ควรซ้ากับ เว็บไซต์อื่น จึงจะดึงดูดความสนใจ 5. ระบบเนวิเกชัน ที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อ ความหมายร่วมกับคาอธิบายที่ชัดเจน
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล 7. การใช้งานอย่างไม่จ่ากัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุดเลือกใช้บราวเซอร์ชนิดใดก็ได้ใน การเข้าถึงเนื้อหาสามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสาคัฐสาหรับผู้ใช้ที่มีจานวนมาก 8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่า เว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้ 9. ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทางานต่างๆ ในเว็บไซต์จะต้องมี ความแน่นอนและทาหน้าที่ได้อย่างถูก ขั้นตอนการวางแผนเพื่อการออกแบบเว็บไซต์ 1.การก่าหนดวัตถุประสงค์ของเว็บไซต์ เว็บไซต์ส่วนใหญ่จะมีการกาหนดวัตถุประสงค์ชัดเจน ผู้เข้า ชมเว็บไซต์ต้องการข้อเท็จจริง เมื่อเข้าชมแล้วจะพยายามค้นหาข้อมูลหรือข้อเท็จจริงที่ต้องการ เว็บไซต์ที่มี วัตถุประสงค์ที่ชัดเจน จะทาให้ผู้เข้าชมยอมรับเว็บไซต์โดยง่าย เช่น ข้อมูลเพื่อการศึกษาจะให้ข้อมูลด้าน การศึกษาอย่างชัดเจน ผู้ที่เข้ามาเยี่ยมชมส่วนใหญ่จะเป็นนักศึกษาหรือผู้สนในในการศึกษาหลากหลาย สาขาวิชา เป็นต้น การกาหนดวัตถุประสงค์เว็บไซต์ที่ชัดเจนก่อนการสร้างเว็บไซต์ จะทาให้ผู้สร้างเว็บไซต์มั่นใจ ได้ว่าเว็บไซต์จะประสบผลสาเร็จตรงตามวัตถุประสงค์ของเว็บไซต์ 2.การก่าหนดกลุ่มเป้าหมาย ผู้ที่จะออกแบบเว็บไซต์จะต้องคานึงถึงผู้ที่จะเข้าชมเว็บไซต์ว่าเป็น กลุ่มเป้าหมายที่สาคัญ ดังนั้นก่อนที่จะออกแบบเว็บไซต์จะต้องวิเคราะห์กลุ่มเป้าหมายของเว็บไซต์ให้ชัดเจน ว่าต้องการให้ใครมาเยี่ยมชม โดยดูวัตถุประสงค์ของเว็บไซต์ ว่าเว็บไซต์นั้นๆมีการถ่ายทอดอะไรกับผู้เยี่ยมชม เว็บไซต์ก็จะทราบว่ากลุ่มเป้าหมายของเว็บไซต์คือกลุ่มใด 3.การวางแผนด้านเนื้อหา การออกแบบเว็บไซต์จะต้องมีการวางแผนให้ชัดเจนตั้งแต่เริ่มต้น เพราะ ถ้าหากมีการวางแผนด้านเนื้อหาไม่ดี จะทาให้เว็บไซต์ไม่เป็นระเบียบ ส่งผลให้ผู้เข้าชมเว็บไซต์เกิดความสับสน การวางแผนด้านเนื้อหาควรตอบคาถามด้านต่างๆให้ได้ การสร้างแผนผังของเนื้อหาจะทาให้เราทราบว่า มี จานวนเว็บเพจที่เกี่ยวข้องปริมาณเท่านั้น หากเป็นเว็บไซต์ขนาดใหญ่ มีเว็บเพจจานวนมาก ควรมีการจัดกลุ่ม ของเนื้อหาทั้งหมดที่ความสัมพันธ์กันเป็นกลุ่มๆ 4.การวางแผนโครงสร้างของเว็บไซต์ ในที่นี้ขออธิบายตามระบบการจัดการเนื้อหา(Content Management System : CMS) ในการสร้างและจัดการเนื้อหาของเว็บไซต์ที่ได้ออกแบบไว้ ประกอบด้วย การสร้างเนื้อหา(creation) การปรับปรุงเนื้อหา(updating) การกระจายเนื้อหา(distribution) การตีพิมพ์ เนื้อหา(publishing) การค้นหาเนื้อหา(discovery) CMS เปิดทางให้ผู้ใช้งานสามารถตีพิมพ์ได้หลายลักษณะ เช่น ข่าว การประกาศ กรณีศึกษา ประวัติบุคคล บทความ หนังสือพิมพ์ ข้อมูลสินค้า หนังสือรับรอง ลิงค์ที่ สาคัญ แหล่งข้อมูลออนไลน์ 5.การวางแผนการผลิตเว็บเพจ ควรเข้าใจหลักการของเว็บไซต์ก่อนว่า เว็บไซต์เปรียบเสมือนการ ไหลของข้อมูล ซึ่งจะทาให้ผู้เข้าเยี่ยมชมเว็บไซต์ได้รับข้อมูลอย่างเป็นลาดับ ขั้นตอน ถ้าหากผู้สร้างเว็บไซต์ไม่มี
การวางแผน เว็บไซต์ก็จะเริ่มต้นไม่ถูก ไม่รู้ว่าจะเริ่มต้นจากตรงไหนดี ที่สาคัญที่สุดคือควรออกแบบให้ง่ายที่สุด และรวดเร็วที่สุดสาหรับผู้ใช้งานหรือผู้เข้าเยี่ยมชมเว็บไซต์ 6.การวางแผนระบบเนวิเกชั่น เป็นการนาแผนผังโครงสร้างเว็บไซต์จากการวางแผนเว็บไซต์ มา วางแผนระบบเนวิเกชั่น ขั้นตอนการพัฒนาเว็บไซต์ กระบวนการพัฒนาเว็บไซต์สามารถจาแนกได้3ขั้นตอน ดังนี้ 1.การเตรียมการและการวางแผนงาน(pre-production) เปรียบเสมือนเข็มทิศที่จะชี้นาทางหรือ บ่งบอกให้ผู้พัฒนาเว็บไซต์ทราบว่า ควรจะต้องเดินทางไปในทิศทางใด 1.1การเตรียมก่อนการด่าเนินการ ประกอบด้วย กาหนดวัตถุประสงค์และเป้าหมายของเว็บไซต์ กาหนดชื่อเว็บไซต์ และชื่อยูอาร์แอล กาหนดกลุ่มเป้าหมายที่จะให้เข้าชมเว็บไซต์ และศึกษากลุ่มคู่แข่ง 1.2การวางแผนการด่าเนินการ หลังการเตรียมก่อนการดาเนินการ ควรมีการวางแผนไว้ล่วงหน้า เพื่อให้การพัฒนาเว็บไซต์มีแนวทางที่ชัดเจน 1.3การรวบรวมและวิเคราะห์โครงสร้าง เป็นขั้นตอนที่ต่อจากการวางแผนการดาเนินการ เนื่องจากเนื้อหาและข้อมูลเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ 2.การท่างานจริงในการออกแบบและพัฒนาเว็บเพจ(on- production) แบ่งได้เป็น2ส่วน คือ 2.1การออกแบบเว็บเพจ นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้าน กราฟิกทางหน้าเว็บเพจ โดยโปรแกรมที่นิยมนามาใช้ในการออกแบบคือ โฟโต้ชอป หรือ ไฟล์เวิร์ก ซึ่งจะช่วย ในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่างๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ภาพเคลื่อนไหว แบ รนเนอร์โฆษณา เป็นต้น 2.2การพัฒนาเว็บเพจ หลังจากออกแบบโครงร่างของเว็บเพจและแต่ละหน้าเว็บเพจแล้ว ขั้นตอน ต่อไปคือ การดาเนินการสร้างเว็บเพจ ซึ่งรวมถึงการจัดหาองค์ประกอบที่ต้องนามาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่างๆ และการสร้างไฟล์รูปภาพ/เสียง ที่เกี่ยวข้องกับเนื้อหา ซึ่งต้องคานึงถึงรูปแบบ ของไฟล์ที่นามาใช้และสอดคล้องกับซอฟต์แวร์ที่ใช้ในการพัฒนาด้วย จากนั้นนาภาพและเสียงมาเก็บไว้ในได เร็กทอรี่หรือโฟลเดอร์ที่กาหนดไว้ แล้วนาข้อมูลทั้งหมดที่รวบรวมไว้จากที่กล่าวมาข้างต้น มาสร้างเป็นเว็บไซต์
ด้วยภาษา HTML หรือเครื่องมือในการสร้างเว็บเพจอื่นตามแนวคิดที่ได้ออกแบบไว้แล้ว ซึ่งรวมถึงการเขียน โปรแกรมสคริปต์ในการใช้งานด้วย 3.การสรุปงานเพื่อส่งมอบ(post- production) ประกอบด้วย 3.1การทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบเว็บเพจที่สร้างขึ้นแบบออฟไลน์ โดยยัง ไม่ได้มีการนาเว็บไซต์เข้าสู่อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บเบราว์เซอร์ เช่น ใช้ โปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ ตรวจสอบตัวอย่างเว็บเพจหน้าต่างๆที่สร้างไว้ ว่ามีความเหมาะสม หรือไม่ พร้อมกับทาการแก้ไขปรับปรุงจนเป็นที่น่าพอใจ 3.2การเผยแพร่เว็บไซต์ เมื่อทดสอบเว็บไซต์จนสมบูรณ์แล้ว ขั้นตอนในการเผยแพร่ผ่านเว็บไซต์ คือ การเผยแพร่ให้คนทั่วไปได้รู้จัก หรือเรียกว่าการนาเว็บไซต์ขึ้นเซิร์ฟเวอร์ หรือการอัพโหลด ซึ่งเป็นการถ่าย โอนเว็บเพจและส่วนประกอบอื่น เช่น ไฟล์ภาพ ไฟล์เพลงประกอบ เป็นต้น ไปฝากไว้ที่โฮสต์ 3.3การบ่ารุงรักษาเว็บไซต์ เป็นการปรับปรุงเนื้อหา ภาพประกอบ หรือการปรับปรุงเว็บไซต์ให้ เป็นปัจจุบัน ซึ่งถือเป็นขั้นตอนที่สาคัญ ผู้เข้าชมเว็บมักใช้เวลาในการค้นหาและเปิดผ่านเว็บไซต์ต่างๆอย่าง รวดเร็ว หากพบว่าเว็บไซต์ที่ผู้สร้างนาเสนอไม่ได้มีการปรับปรุงเปลี่ยนแปลงหรือมีข้อมูลใหม่ๆเพิ่มขึ้นเลย ผู้เข้า ชมเว็บก็อาจลดจานวนลงเรื่อยๆ เรื่อยๆ จนกลายเป็นเว็บที่ไม่มีคนเข้ามาชม หลักในการออกแบบโครงสร้างเว็บไซต์ 1. กาหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์นี้ทาเพื่ออะไร 2. ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้างต้องการสื่อสาร ข้อมูลอะไรที่พวกเขา ต้องการโดยขั้นตอนนี้ควรปฏิบัติควบคู่ไปกับขั้นตอนที่หนึ่ง 3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัดโครงสร้าง หรือจัดระเบียบข้อมูลที่ชัดเจน 4. กาหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผู้ใช้ควรทาอะไรบ้าง จานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด 5. หลังจากนั้น จึงทาการสร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้อผิดพลาดและทาการแก้ไขปรับปรุง แล้วจึงนาเข้าสู่เครือข่ายอินเทอร์เน็ตเป็นขั้นสุดท้าย
ความส่าคัญของสีที่มีต่อการออกแบบเว็บไซต์ สีเป็นองค์ประกอบที่มีความละเอียดซับซ้อน และต้องอาศัยความเชี่ยวชาญในการผสมผสานความ แตกต่างของสี ให้สามารถเข้ากันได้อย่างลงตัว โดยสามารถสรุปความสาคัญในการเลือกใช้สีเพื่อการออกแบบ เว็บ ได้ดังนี้ 1.การดึงดูดความสนใจของผู้เยี่ยมชม เนื่องจากสิ่งแรกที่มองเห็นได้จากเว็บคือ สี ซึ่งเป็นสิ่งที่ช่วย กาหนดบรรยากาศ และความรู้สึกโดยรวมของเว็บไซต์ 2.การน่าสีมาใช้กับองค์ประกอบต่างๆของเว็บเพจ เนื่องจากในหน้าเว็บมีข้อมูลปริมาณมาก ผู้ออกแบบมักใช้โทนสีในการจัดกลุ่มข้อมูล เช่น ตัวอักษร รูปภาพ ลิงค์ และพื้นหลัง เป็นต้น เพื่อความสะดวก ต่อการเข้าใช้งานของผู้เยี่ยมชมเว็บไซต์ 3.การเชื่อมโยงองค์ประกอบหน้าเว็บเข้าด้วยกัน ผู้ออกแบบสามารถใช้การไล่ระดับสีหรือโทนสี เพื่อ เชื่อมโยงองค์ประกอบแต่ละส่วนไว้ด้วยกัน ให้หน้าเว็บมรความเป็นเอกภาพได้ 4.การสร้างอารมณ์และความรู้สึก การเลือกใช้สีแต่ละสี ล้วนมีผลต่อความรู้สึกของผู้เยี่ยมชมเว็บไซต์ เช่น สี แดงกระตุ้นให้เกดความสนใจ อยากรู้ มีชีวิตชีวา หรือสีดา กระคุ้นให้เกิดความน่าลึกลับ น่าค้นหา เป็นต้น 5.การสร้างสัญลักษณ์หรือเป็นตัวแทนขององค์กร ส่วนใหญ่องค์กรขนาดใหญ่จะมีการสร้าง สัญลักษณ์ที่เป็นตัวแทนขององค์กร ทั้งนี้อาจอยู่ในรูปแบบเครื่องหมายการค้าหรือสีสันต่างๆ ที่ผู้เยี่ยมชม เว็บไซต์มองเห็นแล้วทราบทันทีว่าเป็นสัญลักษณ์องค์กรใด โดยใช้สีประจาองค์กรมาใช้ร่วมกับการออกแบบ หน้าเว็บ อย่างไรก็ตาม การเลือกใช้สีในการออกแบบเว็บเพจนั้น หากเลือกใช้สีไม่เหมาะสมอาจสร้างความ ลาบากในการอ่านหรือรบกวนสายตาผู้เยี่ยมชม รวมทั้งอาจทาให้การสื่อความหมายไม่ถูกต้อง การเลือกใช้สี ต่างๆนั้น ต้องเข้าใจถึงการแสดงผลของเว็บเพจในสภาพแวดล้อมที่แตกต่างกัน การจัดองค์ประกอบภาพ หลักการจัดองค์ประกอบของภาพอยู่ 2 หลักด้วยกัน ได้แก่ 1. การสร้างเอกภาพ ส่วนวิธีการสร้างเอกภาพนั้น มีหลักอยู่ด้วยกัน 3 ข้อ ได้แก่ 1.1 สร้างความใกล้ชิดให้กับองค์ประกอบ วิธีที่ง่ายที่สุดก็คือการจัดวางองค์ประกอบให้มีความ เหมาะสม ลองดูรูปข้างล่างนี้ก็จะรู้เองว่ารูปไหนมีเอกภาพแล้วอันไหนไม่มีเอกภาพ ซึ่งแตกต่างกันแค่การจัด องค์ประกอบ 1.2 สร้างความซ้่ากันขององค์ประกอบ การจัดองค์ประกอบโดยการใช้วิธีการทาซ้ากันไปเรื่อยๆไม่ว่าจะเป็น เส้น จุด สี หรือรูปลักษณะอื่นๆ จะทาให้ผู้ชมรู้สึกว่าเป็นพวกพ้องเดียวกัน และจะทาให้เกิดความเป็นเอกภาพ ขึ้นมาในงานได้ ตัวอย่างนี้หาดูได้ในหลายๆงาน เช่นงานที่ทาเป็นเส้นพริ้วๆหลายๆเส้น ซ้ากันไปซ้ากันมา
1.3 สร้างความต่อเนื่องขององค์ประกอบ ความต่อเนื่องเราจะสร้างมาจากเส้น หรือทิศทางของ องค์ประกอบที่อยู่ภายในงานของเรา ซึ่งจะนาสายตาของผู้ที่ได้ชมงานของเราไปในทิศทางที่เราได้กาหนด และ เกิดความต่อเนื่องเพื่อเล่าเรื่องราวไหลไปภายในงาน ต่อเนื่องเป็นเรื่องเป็นราวเดียวกันและเป็นลาดับขั้น และ จะทาให้เกิดเป็นเรื่องราวขึ้นในใจของผู้ที่ได้ดู ในหลักการข้อนี้เราจะสามารถนามาใช้ในการบังคับสายตาของผู้ ที่ดูงานไปจบที่ สิ่งที่เราต้องการจะให้ความสาคัญได้ ลองหาดูตามป้ายโฆษณา ที่เวลาเราดูที่รูปแล้วจะไปจบที่ จุดสุดท้ายเป็นพวก Logo หรือ สินค้า ที่ต้องการจะโฆษณา 2. การสร้างจุดเด่น เน้นจุดส่าคัญ จุดเด่นจะทาให้ผู้ชมสามารถที่จะจับประเด็นในความหมายของงานที่เรา ต้องการจะสื่อได้ โดยมีหลักการสร้างจุดสนใจได้ 3 วิธีด้วยกัน ได้แก่ 2.1 การวางจุดสนใจในงาน หลักการนี้ถือว่าเป็นหลักการที่สาคัญหลักการหนึ่ง สิ่งที่สาคัญก็คือเรา ต้องรู้ว่าเราต้องการที่จะเน้นอะไรในงานของเรา แล้วก็วางสิ่งที่เราให้ความสาคัญไว้ในตาแหน่งที่สาคัญ จากรูปหมายเลข 1 คือต่าแหน่งที่สาคัญที่สุดไล่มาจนถึงหมายเลข 5 คือตาแหน่งที่มีความสาคัญน้อยที่สุด 2.2การสร้างความแตกต่างในงาน การสร้างความแตกต่างจะเป็นตัวกาหนดความน่าสนใจและความโดด เด่นในงานของเราได้ดี แต่ก็อย่าให้มันหลุดกรอบไปจะทาให้ขาดเอกภาพได้ นี่คือข้อควรระวังอีกข้อหนึ่ง หลักในการสร้างความแตกต่าง มีง่ายๆดังนี้ - การสร้างขนาดที่แตกต่าง - ความแตกต่างกันที่รูปร่างขององค์ประกอบ - รูปลักษณ์หรือลักษณ์ที่แตกต่าง 2.3 การวางแยกองค์ประกอบให้โดดเด่น พูดง่ายๆก็คือ วางให้โดด และเด่น กว่าคนอื่น เทคนิคการน่าสีไปใช้งาน เทคนิคการเลือกใช้สีแบบสูตรสาเร็จจะมีอยู่หลายรูปแบบ แต่แบบที่นิยมให้งานกันเป็นหลักจะมีอยู่ 4 รูปแบบ คือ
1.Mono หรือเอกรงค์ จะเป็นการใช้สีที่ไปในโทนเดียวกันทั้งหมด เช่น จุดเด่นเป็นสีแดง สีส่วนที่ เหลือก็จะเป็นสีที่ใกล้เคียงกับสีแดง โดยใช้วิธีลดน้าหนักความเข้มของสีแดงลงไป 2.Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรงข้ามกันในวงจรสี เช่น สีฟ้าจะตรง ข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสีเขียว สามารถนามาใช้งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดี และไม่ดี หากไม่รู้หลักพื้นฐานในการใช้งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ควรใช้ในพื้นที่ปริมาณเท่ากันใน งาน ควรใช้สีใดสีหนึ่งจานวน 80% อีกฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นที่ของงาน โดยรวม จะทาให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่นของภาพ องค์ประกอบด้านข้อความ ข้อความ จัดเป็นองค์ประกอบหลักสาคัญที่สุดในการออกแบบเว็บไซต์การออกแบบข้อความที่ดี ผู้ออกแบบต้องคานึงถึงองค์ประกอบย่อยหลายด้าน เช่น รูปแบบตัวอักษร ขนาดตัวอักษร ความหนาแน่น ตัวอักษร สีของข้อความ และการจัดความสัมพันธ์ข้อความและภาพให้สอดคล้องกับองค์ประกอบอื่น ๆ เช่น ภาพ และกราฟิกบนหน้าจอ รูปแบบและขนาดตัวอักษร มีงานวิจัยเกี่ยวกับขนาดตัวอักษรทั้งภาษาไทยเละภาษอังกฤษพบว่าผู้อ่านตัว อักษรตัวพิมพ์ภาษไทย หรือภาษาต่าง ๆ ขนาด 80 ตัวอักษรต่อบรรทัดน้อยกว่า การอ่าน ตัวอักษรขนาดขนาด 40 ตัวอักษรต่อ บรรทัด ในขณะที่ความเข้าใจ จากการอ่านควรอยู่ระหว่าง 19-37 พอยต์ ในขณะที่ตัวหนังสือปกติมีขนาด 12-
19 พอยต์ ส่วนรูปแบบของตัวอักษรควรใช้ตัวที่อ่านง่ายสบายตาหากตัวอักษรที่ไม่ใช่ส่วนของเนื้อหาหลัก เช่น ตัวอักษร หัวเรื่องใหญ่ ตัวอักษรประกอบการออกแบบ หรือตัวอักษรพิเศษอื่น ๆ ผู้ออกแบบอาจใช้ตัวอักษร รูปแบบและขนาดต่าง ๆ กันออกไป ๆ ได้ แต่ไม่ควรมี ความหนาแน่นของตัวอักษรมากเกินไป ความหนาแน่นของ ตัวอักษร ส่วนใหญ่รวมถึงความหนาแน่นขององค์ประกอบอื่นบนจอภาพเข้าไปด้วย ผลการวิจัยพบว่า ผู้เรียนชอบจอภาพที่มีความหนาแน่นปานกลางหรือประมาณ 40 % ของพื้นที่หน้าจอมาก ที่สุด และจะเลือกจอภาพที่มีความหนาแน่นสูง หรือประมาณ 50 % ของพื้นที่หน้าจอ มากว่าจอภาพที่มีความ หนาแน่นต่า นอกจากนี้ยังพบว่าในวิชาที่มีเนื้อหายาก ผู้เรียนจะชอบจอภาพ ที่มีความแน่นสูง เนื่องจาก จอภาพที่มีความหนาแน่นขององค์ประกอบต่าง ๆ สูง จะมีข้อมูลที่ช่วยให้ความเข้าใจเนื้อหาและแนวคิดหลัก ต่าง ๆ ชัดเจนและต่อเนื่องขึ้น สีข้อความ เป็นองค์ประกอบหน้าจอ ที่ช่วยกระตุ้นความน่าสนใจการ สีเป็นตัวกระตุ้นประสาทการ รับรู้ที่สาคัญ การใช้สีที่เหมาะสม จะช่วยให้อ่านง่าย และสบายตา ผลงานวิจัยพบว่านักเรียนส่วนใหญ่ชอบคู่อักษรสีขาว หรือเหลือง บนพื้นน้า เงิน อักษรเขียวบนพื้นดา และอักษรดาบนพื้นเหลือง หากใช้พื้นสีเทา คู่สีที่ผู้เรียนชอบ คือ สีฟ้า สีม่วง และสี ดา สีที่ชอบน้อยคือ ควรใช้พื้นหลังเป็นสีเข้มมากกว่าสีอ่อนเป็นพื้นหลัง ซึ่งระยะยาวจะช่วยลดความล้าของ สายตา ในการอ่านจอภาพอันเนื่องมาจากความจ้าของสีพื้น รูปแบบของตัวอักษรที่ใช้ในการท่าเว็บไซต์ ตัวอักษรที่เราใช้งานกันอยู่ในปัจจุบันจะแบ่งออกเป็น 4 รูปแบบใหญ่ ๆ คือ 1.Font แบบ Serif จะดูเป็นระเบียบ เป็นทางการ เหมาะจะใช้ในงานที่เป็นทางการ และต้องการ ความน่าเชื่อถือมากๆFont แบบ San Serif จะอ่านง่าย ดูทันสมัยมากกว่าแบบอื่น ๆ เหมาะจะใช้ในงานที่ ต้องการ ความทันสมัยออกแนวไม่เป็นทางการมากนัก 3..Font แบบ Antique จะเหมาะกับงานที่ต้องการแสดงความชัดเจนของยุคสมัย หรือต้องการอา มรณ์ย้อยยุคนิดหน่อย 4.Font แบบ Script เหมาะกังานที่ไม่เป็นทางการ ต้องการความเป็นกันเองและดูสนุกสนาน มากกว่าแบบอื่นๆ หรือในบางกรณี Font แบบนี้จะใช้ในงานที่ต้องการข้อความที่ดูเหมือนเป็นลายมือเขียน วิธีเลือก Font ไปใช้ในงานออกแบบ การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคานึงง่าย ๆ อยู่ 2 ข้อคือ ความหมายต้องเข้ากัน หมายความว่า ความหมายของคาและ Font ที่เลือกใช้ควรจะไปด้วยกันได้ เช่น คาว่าน่ารักก็ควรจะใช้ Font ที่ดูน่ารักไปด้วย ไม่ควรใช้ Font ที่ดูเป็นทางการอารมณ์ของฟอนต์ และ อารมณ์ของงานต้องไปในทิศทางเดียวกัน เช่น งานที่ต้องการความน่าเชื่อถือก็จะเลือกใช้ Font แบบ Serif ที่ดูหนักแน่น น่าเชื่อถือ ส่วนงานที่ต้องการความฉูดฉาดอย่างโปสเตอร์ลดราคาก็ควรจะเลือกใช้ Font ที่ เป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็นต้น
1. การวางต่าแหน่งตัวอักษร มีข้อควรคานึงถึงไว้ให้อยู่ 3 ข้อคือ 1.ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลงล่าง โดยมีรัศมีการกวาดสายตา ตามลาดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลาดับให้ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมาทา ให้เสียความหมายของข้อความไป 2.จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัวใหญ่ๆ อยู่เพียงชุดเดียว จึงจะเป็น จุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วนจุดอื่น ๆ ขนาดควรจะเล็กลงมาตามลาดับความสาคัญ 3.ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทาให้กลายเป็นงานที่อ่านยากและชวนปวดศรีษะ มากกว่าชวนอ่าน ถ้าจาเป็นจริง ๆ แนะนาให้ใช้ Font เดิมแต่ไม่ตกแต่งพวกขนาด, ความหนาหรือกาหนดให้ เอียงบ้าง เพื่อเพิ่มความน่าสนใจไม่ให้งานดูน่าเบื่อแบบนี้จะดีกว่า
บรรณานุกรม โซนซ่า. (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 .
.
ความรู้การออกแบบเว็บไซต์1

More Related Content

PDF
ความรู้การออกแบบเว็บไซต์
byTa'May Pimkanok
 
PDF
หนัสือเล่มเล็ก
bySaowalak Kaewket
 
PDF
การพัฒนาเว็บไซต์
byprawanya
 
PDF
โครงงานคอมพิวเตอร์
byPrae Toki
 
PPT
08 com centers
byChaiyot Jarates
 
PPT
08 com centers1
byChaiyot Jarates
 
PDF
ทฤษฎีการออกแบบเว็บไซต์
byBank Sangsudta
 
DOC
โครงงานประเภทการทดลองทฤษฎี
bymcf_cnx1
 
ความรู้การออกแบบเว็บไซต์
byTa'May Pimkanok
 
หนัสือเล่มเล็ก
bySaowalak Kaewket
 
การพัฒนาเว็บไซต์
byprawanya
 
โครงงานคอมพิวเตอร์
byPrae Toki
 
08 com centers
byChaiyot Jarates
 
08 com centers1
byChaiyot Jarates
 
ทฤษฎีการออกแบบเว็บไซต์
byBank Sangsudta
 
โครงงานประเภทการทดลองทฤษฎี
bymcf_cnx1
 

Similar to ความรู้การออกแบบเว็บไซต์1

PDF
คู่มือ1
bykiriyadee1
 
PDF
สมุดเล่มเล็ก
bySaowalak Kaewket
 
PDF
คู่มือ1
bySaowalak Kaewket
 
PDF
คู่มือ1
bySaowalak Kaewket
 
PDF
คู่มือ1
byBenz Lovestory
 
PDF
เล่มเล็ก
byPoMpam KamOlrat
 
PDF
การออกแบบเว็บไซต์
byTa'May Pimkanok
 
PDF
เวบ เล มเลก
byJaingarm Mai
 
PDF
เวบ เล่มเลก
byaew1234
 
PDF
เวบ เล่มเลก
byaew1234
 
PDF
กระบวนการพัฒนาเว็บ
byเขมิกา กุลาศรี
 
PDF
เล่มเล็ก New
byKanokporn Raksaken
 
PDF
หนังสือเล่มเล็กก
byprawanya
 
PDF
หนังสือเล่มเล็กก
byprawanya
 
PDF
หนังสือเล่มเล็ก
bytayechoo
 
PDF
หนังสือเล่มเล็ก
byprawanya
 
PDF
สมุดเล่มเล็ก
byPoMpam KamOlrat
 
PDF
สมุดเล่มเล็ก
byJirarat Tesarin
 
PDF
สม ดเล มเล_ก
byDiiDy Moowhan Lesikagirl
 
PPT
หลักการออกแบบเว็บไซต์
bykruple
 
คู่มือ1
bykiriyadee1
 
สมุดเล่มเล็ก
bySaowalak Kaewket
 
คู่มือ1
bySaowalak Kaewket
 
คู่มือ1
bySaowalak Kaewket
 
คู่มือ1
byBenz Lovestory
 
เล่มเล็ก
byPoMpam KamOlrat
 
การออกแบบเว็บไซต์
byTa'May Pimkanok
 
เวบ เล มเลก
byJaingarm Mai
 
เวบ เล่มเลก
byaew1234
 
เวบ เล่มเลก
byaew1234
 
กระบวนการพัฒนาเว็บ
byเขมิกา กุลาศรี
 
เล่มเล็ก New
byKanokporn Raksaken
 
หนังสือเล่มเล็กก
byprawanya
 
หนังสือเล่มเล็กก
byprawanya
 
หนังสือเล่มเล็ก
bytayechoo
 
หนังสือเล่มเล็ก
byprawanya
 
สมุดเล่มเล็ก
byPoMpam KamOlrat
 
สมุดเล่มเล็ก
byJirarat Tesarin
 
สม ดเล มเล_ก
byDiiDy Moowhan Lesikagirl
 
หลักการออกแบบเว็บไซต์
bykruple
 

ความรู้การออกแบบเว็บไซต์1

  • 1.
    ความรู้การออกแบบเว็บไซต์ สมาชิกกลุ่ม 3 1.นางสาวพัชราภรณ์ สอนอ่่ารหัส533410080318 2.นางสาวเสาวลักษณ์ แก้วเกต รหัส533410080331 3.นายนิรันดร์ กิริยาดี รหัส533410080338 4.นายพัฒพล วรรณสัมผัส รหัส533410080339
  • 2.
    ค่าน่า คู่มือเล่มนี้จัดทาขึ้น เพื่อให้ผู้ที่สนใจ เรื่องการออกแบบเว็บไซต์ได้ศึกษาซึ่งสมาชิกในกลุ่มได้รับ มอบหมายจากอาจารย์ปวริศ สารมะโน ให้จัดทาคู่มือเล่มนี้ขึ้นมา หวังว่าคู่มือเล่มนี้จะเป็นประโยชน์แก่ผู้ที่ ต้องการจะศึกษา ถ้าผิดพลาดประการใด สมาชิกในกลุ่มก็ขออภัยไว้ ณ ที่นี้ด้วย คณะผู้จัดทา
  • 3.
    สารบัญ ส่วนประกอบของเว็บไซต์ที่ดี 1 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ 5 เรื่องในฉบับ2 เรื่องในฉบับ 3 เรื่องในฉบับ 4 เรื่องในฉบับ 5 เรื่องในฉบับ 6
  • 4.
    ตัวอย่างส่วนประกอบของเว็บไซต์ ดังรูปที่เห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้ 1.Containingblock โดยปกติเราจะเขียน <div> หรือ <table> ต่อจาก <body> เพื่อเอาไว้เก็บ เนื้อหาทั้งหมดของเว็บไซต์ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะมีข้อดีอยู่ ตรงที่ สามารถทาให้ปรับเปลี่ยนขนาดในการแสดงผลของเนื้อหาได้ หรือตาแหน่งการแสดงผลของเว็บไซต์ได้ เช่น จัดกลาง ชิดซ้าย หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทาได้ยากมาก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง 2.Logo เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทาให้ลูกค้าหรือผู้ใช้งานจดจาเราได้ ด้วยเหตุนี้เองทา ให้การออกแบบเว็บไซต์นั้นจาเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตาแหน่งที่ควรจะวางโลโก้ไว้คือ ตาแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งาน จาได้ และสะดุดตา เรื่องที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนาไปสู่หน้าแรกของเว็บไซต์เสมอ 3.Navigation เป็นส่วนที่จะนาผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์ โดยสามารถทาให้อยู่ใน แนวนอน หรือแนวตั้งก็ได้ หากสังเกต hellomyweb.com เราจะทาทั้งแนวตั้งและแนวนอน โดยแนวนอนจะ นาไปสู่เนื้อหาหน้าอื่นของเว็บไซต์ ส่วนแนวตั้งจะนาไปสู่เนื้อหาย่อยในหน้านั้น ตาแหน่งที่ควรจะวาง navigation เอาไว้คือสีเขียวทั้งหมด ถ้าสังเกตดูจะพบว่าการวางตาแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของ เว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่ควรวางไว้ในตาแหน่งที่ผู้ใช้จะต้อง เลื่อนขึ้นลง ซ้ายขวา 4.Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สาคัญมากที่สุด หากผู้ใช้งานไม่สามารถเข้าถึงได้ โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ทันที ตาแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตาแหน่งอื่นๆที่คิดว่าจะ ทาให้ผู้หาเจอได้โดยไม่ลาบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มีโฆษณาที่มากจนเกินไป ทาให้ ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการออกแบบที่ผิดพลาด
  • 5.
    5.Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ต่างๆเอาไว้หรือเป็นเนื้อหาที่เกี่ยวกับ เว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่าจาเป็นต้องมีหรือไม่ บอกได้ว่าจาเป็นอย่างยิ่ง footer จะเป็นตัวบอกผู้ชมว่า ส่วนนี้คือล่างสุดของหน้าที่กาลังแสดงอยู่แล้วนะ ไม่มีเนื้อหาเพิ่มเติมแล้ว 6.Whitespace พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็นความสาคัญของการเว้นพื้นที่ว่างไว้ใน เว็บไซต์ เรามักจะใส่ภาพหรือตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทาให้เว็บดูสวยงามขึ้น หรือใช้พื้นที่มี มีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คานึงว่าต้องมีพื้นที่ว่างอยู่ในเว็บไซต์ จะทาให้เว็บของเรานั้นดูอึด อัดทันที การเว้นช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่างระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทาให้เว็บของเราดูสบายตาขึ้นแล้ว ยังทาให้เราสามารถกาหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจใน จุดนั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนาภาพหรือตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้น จะเป็นที่สนใจของผู้ใช้ทันที ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์ - ข้อมูลเกี่ยวกับบริษัท องค์กร สถานศึกษา - รายละเอียดของผลิตภัณฑ์ - ข่าวความคืบหน้าและข่าวจากสื่อมวลชน - คาถามยอดนิยม - ข้อมูลในการติดต่อ ข้อควรค่านึงถึงในการออกแบบเว็บไซต์ 1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือ ตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทาให้วุ่นวาย 2. ความสม่่าเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์ 3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคานึงถึงลักษณะขององค์กร เพราะรูปแบบของ เว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดู น่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ 4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สาคัญที่สุดในเว็บไซต์ ดังนั้นควรจัดเตรียมเนื้อหาและข้อมูลที่ ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ เนื้อหาไม่ควรซ้ากับ เว็บไซต์อื่น จึงจะดึงดูดความสนใจ 5. ระบบเนวิเกชัน ที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อ ความหมายร่วมกับคาอธิบายที่ชัดเจน
  • 6.
    6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่นคุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล 7. การใช้งานอย่างไม่จ่ากัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุดเลือกใช้บราวเซอร์ชนิดใดก็ได้ใน การเข้าถึงเนื้อหาสามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสาคัฐสาหรับผู้ใช้ที่มีจานวนมาก 8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่า เว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้ 9. ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทางานต่างๆ ในเว็บไซต์จะต้องมี ความแน่นอนและทาหน้าที่ได้อย่างถูก ขั้นตอนการวางแผนเพื่อการออกแบบเว็บไซต์ 1.การก่าหนดวัตถุประสงค์ของเว็บไซต์ เว็บไซต์ส่วนใหญ่จะมีการกาหนดวัตถุประสงค์ชัดเจน ผู้เข้า ชมเว็บไซต์ต้องการข้อเท็จจริง เมื่อเข้าชมแล้วจะพยายามค้นหาข้อมูลหรือข้อเท็จจริงที่ต้องการ เว็บไซต์ที่มี วัตถุประสงค์ที่ชัดเจน จะทาให้ผู้เข้าชมยอมรับเว็บไซต์โดยง่าย เช่น ข้อมูลเพื่อการศึกษาจะให้ข้อมูลด้าน การศึกษาอย่างชัดเจน ผู้ที่เข้ามาเยี่ยมชมส่วนใหญ่จะเป็นนักศึกษาหรือผู้สนในในการศึกษาหลากหลาย สาขาวิชา เป็นต้น การกาหนดวัตถุประสงค์เว็บไซต์ที่ชัดเจนก่อนการสร้างเว็บไซต์ จะทาให้ผู้สร้างเว็บไซต์มั่นใจ ได้ว่าเว็บไซต์จะประสบผลสาเร็จตรงตามวัตถุประสงค์ของเว็บไซต์ 2.การก่าหนดกลุ่มเป้าหมาย ผู้ที่จะออกแบบเว็บไซต์จะต้องคานึงถึงผู้ที่จะเข้าชมเว็บไซต์ว่าเป็น กลุ่มเป้าหมายที่สาคัญ ดังนั้นก่อนที่จะออกแบบเว็บไซต์จะต้องวิเคราะห์กลุ่มเป้าหมายของเว็บไซต์ให้ชัดเจน ว่าต้องการให้ใครมาเยี่ยมชม โดยดูวัตถุประสงค์ของเว็บไซต์ ว่าเว็บไซต์นั้นๆมีการถ่ายทอดอะไรกับผู้เยี่ยมชม เว็บไซต์ก็จะทราบว่ากลุ่มเป้าหมายของเว็บไซต์คือกลุ่มใด 3.การวางแผนด้านเนื้อหา การออกแบบเว็บไซต์จะต้องมีการวางแผนให้ชัดเจนตั้งแต่เริ่มต้น เพราะ ถ้าหากมีการวางแผนด้านเนื้อหาไม่ดี จะทาให้เว็บไซต์ไม่เป็นระเบียบ ส่งผลให้ผู้เข้าชมเว็บไซต์เกิดความสับสน การวางแผนด้านเนื้อหาควรตอบคาถามด้านต่างๆให้ได้ การสร้างแผนผังของเนื้อหาจะทาให้เราทราบว่า มี จานวนเว็บเพจที่เกี่ยวข้องปริมาณเท่านั้น หากเป็นเว็บไซต์ขนาดใหญ่ มีเว็บเพจจานวนมาก ควรมีการจัดกลุ่ม ของเนื้อหาทั้งหมดที่ความสัมพันธ์กันเป็นกลุ่มๆ 4.การวางแผนโครงสร้างของเว็บไซต์ ในที่นี้ขออธิบายตามระบบการจัดการเนื้อหา(Content Management System : CMS) ในการสร้างและจัดการเนื้อหาของเว็บไซต์ที่ได้ออกแบบไว้ ประกอบด้วย การสร้างเนื้อหา(creation) การปรับปรุงเนื้อหา(updating) การกระจายเนื้อหา(distribution) การตีพิมพ์ เนื้อหา(publishing) การค้นหาเนื้อหา(discovery) CMS เปิดทางให้ผู้ใช้งานสามารถตีพิมพ์ได้หลายลักษณะ เช่น ข่าว การประกาศ กรณีศึกษา ประวัติบุคคล บทความ หนังสือพิมพ์ ข้อมูลสินค้า หนังสือรับรอง ลิงค์ที่ สาคัญ แหล่งข้อมูลออนไลน์ 5.การวางแผนการผลิตเว็บเพจ ควรเข้าใจหลักการของเว็บไซต์ก่อนว่า เว็บไซต์เปรียบเสมือนการ ไหลของข้อมูล ซึ่งจะทาให้ผู้เข้าเยี่ยมชมเว็บไซต์ได้รับข้อมูลอย่างเป็นลาดับ ขั้นตอน ถ้าหากผู้สร้างเว็บไซต์ไม่มี
  • 7.
    การวางแผน เว็บไซต์ก็จะเริ่มต้นไม่ถูก ไม่รู้ว่าจะเริ่มต้นจากตรงไหนดีที่สาคัญที่สุดคือควรออกแบบให้ง่ายที่สุด และรวดเร็วที่สุดสาหรับผู้ใช้งานหรือผู้เข้าเยี่ยมชมเว็บไซต์ 6.การวางแผนระบบเนวิเกชั่น เป็นการนาแผนผังโครงสร้างเว็บไซต์จากการวางแผนเว็บไซต์ มา วางแผนระบบเนวิเกชั่น ขั้นตอนการพัฒนาเว็บไซต์ กระบวนการพัฒนาเว็บไซต์สามารถจาแนกได้3ขั้นตอน ดังนี้ 1.การเตรียมการและการวางแผนงาน(pre-production) เปรียบเสมือนเข็มทิศที่จะชี้นาทางหรือ บ่งบอกให้ผู้พัฒนาเว็บไซต์ทราบว่า ควรจะต้องเดินทางไปในทิศทางใด 1.1การเตรียมก่อนการด่าเนินการ ประกอบด้วย กาหนดวัตถุประสงค์และเป้าหมายของเว็บไซต์ กาหนดชื่อเว็บไซต์ และชื่อยูอาร์แอล กาหนดกลุ่มเป้าหมายที่จะให้เข้าชมเว็บไซต์ และศึกษากลุ่มคู่แข่ง 1.2การวางแผนการด่าเนินการ หลังการเตรียมก่อนการดาเนินการ ควรมีการวางแผนไว้ล่วงหน้า เพื่อให้การพัฒนาเว็บไซต์มีแนวทางที่ชัดเจน 1.3การรวบรวมและวิเคราะห์โครงสร้าง เป็นขั้นตอนที่ต่อจากการวางแผนการดาเนินการ เนื่องจากเนื้อหาและข้อมูลเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ 2.การท่างานจริงในการออกแบบและพัฒนาเว็บเพจ(on- production) แบ่งได้เป็น2ส่วน คือ 2.1การออกแบบเว็บเพจ นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้าน กราฟิกทางหน้าเว็บเพจ โดยโปรแกรมที่นิยมนามาใช้ในการออกแบบคือ โฟโต้ชอป หรือ ไฟล์เวิร์ก ซึ่งจะช่วย ในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่างๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ภาพเคลื่อนไหว แบ รนเนอร์โฆษณา เป็นต้น 2.2การพัฒนาเว็บเพจ หลังจากออกแบบโครงร่างของเว็บเพจและแต่ละหน้าเว็บเพจแล้ว ขั้นตอน ต่อไปคือ การดาเนินการสร้างเว็บเพจ ซึ่งรวมถึงการจัดหาองค์ประกอบที่ต้องนามาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่างๆ และการสร้างไฟล์รูปภาพ/เสียง ที่เกี่ยวข้องกับเนื้อหา ซึ่งต้องคานึงถึงรูปแบบ ของไฟล์ที่นามาใช้และสอดคล้องกับซอฟต์แวร์ที่ใช้ในการพัฒนาด้วย จากนั้นนาภาพและเสียงมาเก็บไว้ในได เร็กทอรี่หรือโฟลเดอร์ที่กาหนดไว้ แล้วนาข้อมูลทั้งหมดที่รวบรวมไว้จากที่กล่าวมาข้างต้น มาสร้างเป็นเว็บไซต์
  • 8.
    ด้วยภาษา HTML หรือเครื่องมือในการสร้างเว็บเพจอื่นตามแนวคิดที่ได้ออกแบบไว้แล้วซึ่งรวมถึงการเขียน โปรแกรมสคริปต์ในการใช้งานด้วย 3.การสรุปงานเพื่อส่งมอบ(post- production) ประกอบด้วย 3.1การทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบเว็บเพจที่สร้างขึ้นแบบออฟไลน์ โดยยัง ไม่ได้มีการนาเว็บไซต์เข้าสู่อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บเบราว์เซอร์ เช่น ใช้ โปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ ตรวจสอบตัวอย่างเว็บเพจหน้าต่างๆที่สร้างไว้ ว่ามีความเหมาะสม หรือไม่ พร้อมกับทาการแก้ไขปรับปรุงจนเป็นที่น่าพอใจ 3.2การเผยแพร่เว็บไซต์ เมื่อทดสอบเว็บไซต์จนสมบูรณ์แล้ว ขั้นตอนในการเผยแพร่ผ่านเว็บไซต์ คือ การเผยแพร่ให้คนทั่วไปได้รู้จัก หรือเรียกว่าการนาเว็บไซต์ขึ้นเซิร์ฟเวอร์ หรือการอัพโหลด ซึ่งเป็นการถ่าย โอนเว็บเพจและส่วนประกอบอื่น เช่น ไฟล์ภาพ ไฟล์เพลงประกอบ เป็นต้น ไปฝากไว้ที่โฮสต์ 3.3การบ่ารุงรักษาเว็บไซต์ เป็นการปรับปรุงเนื้อหา ภาพประกอบ หรือการปรับปรุงเว็บไซต์ให้ เป็นปัจจุบัน ซึ่งถือเป็นขั้นตอนที่สาคัญ ผู้เข้าชมเว็บมักใช้เวลาในการค้นหาและเปิดผ่านเว็บไซต์ต่างๆอย่าง รวดเร็ว หากพบว่าเว็บไซต์ที่ผู้สร้างนาเสนอไม่ได้มีการปรับปรุงเปลี่ยนแปลงหรือมีข้อมูลใหม่ๆเพิ่มขึ้นเลย ผู้เข้า ชมเว็บก็อาจลดจานวนลงเรื่อยๆ เรื่อยๆ จนกลายเป็นเว็บที่ไม่มีคนเข้ามาชม หลักในการออกแบบโครงสร้างเว็บไซต์ 1. กาหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์นี้ทาเพื่ออะไร 2. ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้างต้องการสื่อสาร ข้อมูลอะไรที่พวกเขา ต้องการโดยขั้นตอนนี้ควรปฏิบัติควบคู่ไปกับขั้นตอนที่หนึ่ง 3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัดโครงสร้าง หรือจัดระเบียบข้อมูลที่ชัดเจน 4. กาหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผู้ใช้ควรทาอะไรบ้าง จานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด 5. หลังจากนั้น จึงทาการสร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้อผิดพลาดและทาการแก้ไขปรับปรุง แล้วจึงนาเข้าสู่เครือข่ายอินเทอร์เน็ตเป็นขั้นสุดท้าย
  • 9.
    ความส่าคัญของสีที่มีต่อการออกแบบเว็บไซต์ สีเป็นองค์ประกอบที่มีความละเอียดซับซ้อน และต้องอาศัยความเชี่ยวชาญในการผสมผสานความ แตกต่างของสี ให้สามารถเข้ากันได้อย่างลงตัวโดยสามารถสรุปความสาคัญในการเลือกใช้สีเพื่อการออกแบบ เว็บ ได้ดังนี้ 1.การดึงดูดความสนใจของผู้เยี่ยมชม เนื่องจากสิ่งแรกที่มองเห็นได้จากเว็บคือ สี ซึ่งเป็นสิ่งที่ช่วย กาหนดบรรยากาศ และความรู้สึกโดยรวมของเว็บไซต์ 2.การน่าสีมาใช้กับองค์ประกอบต่างๆของเว็บเพจ เนื่องจากในหน้าเว็บมีข้อมูลปริมาณมาก ผู้ออกแบบมักใช้โทนสีในการจัดกลุ่มข้อมูล เช่น ตัวอักษร รูปภาพ ลิงค์ และพื้นหลัง เป็นต้น เพื่อความสะดวก ต่อการเข้าใช้งานของผู้เยี่ยมชมเว็บไซต์ 3.การเชื่อมโยงองค์ประกอบหน้าเว็บเข้าด้วยกัน ผู้ออกแบบสามารถใช้การไล่ระดับสีหรือโทนสี เพื่อ เชื่อมโยงองค์ประกอบแต่ละส่วนไว้ด้วยกัน ให้หน้าเว็บมรความเป็นเอกภาพได้ 4.การสร้างอารมณ์และความรู้สึก การเลือกใช้สีแต่ละสี ล้วนมีผลต่อความรู้สึกของผู้เยี่ยมชมเว็บไซต์ เช่น สี แดงกระตุ้นให้เกดความสนใจ อยากรู้ มีชีวิตชีวา หรือสีดา กระคุ้นให้เกิดความน่าลึกลับ น่าค้นหา เป็นต้น 5.การสร้างสัญลักษณ์หรือเป็นตัวแทนขององค์กร ส่วนใหญ่องค์กรขนาดใหญ่จะมีการสร้าง สัญลักษณ์ที่เป็นตัวแทนขององค์กร ทั้งนี้อาจอยู่ในรูปแบบเครื่องหมายการค้าหรือสีสันต่างๆ ที่ผู้เยี่ยมชม เว็บไซต์มองเห็นแล้วทราบทันทีว่าเป็นสัญลักษณ์องค์กรใด โดยใช้สีประจาองค์กรมาใช้ร่วมกับการออกแบบ หน้าเว็บ อย่างไรก็ตาม การเลือกใช้สีในการออกแบบเว็บเพจนั้น หากเลือกใช้สีไม่เหมาะสมอาจสร้างความ ลาบากในการอ่านหรือรบกวนสายตาผู้เยี่ยมชม รวมทั้งอาจทาให้การสื่อความหมายไม่ถูกต้อง การเลือกใช้สี ต่างๆนั้น ต้องเข้าใจถึงการแสดงผลของเว็บเพจในสภาพแวดล้อมที่แตกต่างกัน การจัดองค์ประกอบภาพ หลักการจัดองค์ประกอบของภาพอยู่ 2 หลักด้วยกัน ได้แก่ 1. การสร้างเอกภาพ ส่วนวิธีการสร้างเอกภาพนั้น มีหลักอยู่ด้วยกัน 3 ข้อ ได้แก่ 1.1 สร้างความใกล้ชิดให้กับองค์ประกอบ วิธีที่ง่ายที่สุดก็คือการจัดวางองค์ประกอบให้มีความ เหมาะสม ลองดูรูปข้างล่างนี้ก็จะรู้เองว่ารูปไหนมีเอกภาพแล้วอันไหนไม่มีเอกภาพ ซึ่งแตกต่างกันแค่การจัด องค์ประกอบ 1.2 สร้างความซ้่ากันขององค์ประกอบ การจัดองค์ประกอบโดยการใช้วิธีการทาซ้ากันไปเรื่อยๆไม่ว่าจะเป็น เส้น จุด สี หรือรูปลักษณะอื่นๆ จะทาให้ผู้ชมรู้สึกว่าเป็นพวกพ้องเดียวกัน และจะทาให้เกิดความเป็นเอกภาพ ขึ้นมาในงานได้ ตัวอย่างนี้หาดูได้ในหลายๆงาน เช่นงานที่ทาเป็นเส้นพริ้วๆหลายๆเส้น ซ้ากันไปซ้ากันมา
  • 10.
    1.3 สร้างความต่อเนื่องขององค์ประกอบ ความต่อเนื่องเราจะสร้างมาจากเส้นหรือทิศทางของ องค์ประกอบที่อยู่ภายในงานของเรา ซึ่งจะนาสายตาของผู้ที่ได้ชมงานของเราไปในทิศทางที่เราได้กาหนด และ เกิดความต่อเนื่องเพื่อเล่าเรื่องราวไหลไปภายในงาน ต่อเนื่องเป็นเรื่องเป็นราวเดียวกันและเป็นลาดับขั้น และ จะทาให้เกิดเป็นเรื่องราวขึ้นในใจของผู้ที่ได้ดู ในหลักการข้อนี้เราจะสามารถนามาใช้ในการบังคับสายตาของผู้ ที่ดูงานไปจบที่ สิ่งที่เราต้องการจะให้ความสาคัญได้ ลองหาดูตามป้ายโฆษณา ที่เวลาเราดูที่รูปแล้วจะไปจบที่ จุดสุดท้ายเป็นพวก Logo หรือ สินค้า ที่ต้องการจะโฆษณา 2. การสร้างจุดเด่น เน้นจุดส่าคัญ จุดเด่นจะทาให้ผู้ชมสามารถที่จะจับประเด็นในความหมายของงานที่เรา ต้องการจะสื่อได้ โดยมีหลักการสร้างจุดสนใจได้ 3 วิธีด้วยกัน ได้แก่ 2.1 การวางจุดสนใจในงาน หลักการนี้ถือว่าเป็นหลักการที่สาคัญหลักการหนึ่ง สิ่งที่สาคัญก็คือเรา ต้องรู้ว่าเราต้องการที่จะเน้นอะไรในงานของเรา แล้วก็วางสิ่งที่เราให้ความสาคัญไว้ในตาแหน่งที่สาคัญ จากรูปหมายเลข 1 คือต่าแหน่งที่สาคัญที่สุดไล่มาจนถึงหมายเลข 5 คือตาแหน่งที่มีความสาคัญน้อยที่สุด 2.2การสร้างความแตกต่างในงาน การสร้างความแตกต่างจะเป็นตัวกาหนดความน่าสนใจและความโดด เด่นในงานของเราได้ดี แต่ก็อย่าให้มันหลุดกรอบไปจะทาให้ขาดเอกภาพได้ นี่คือข้อควรระวังอีกข้อหนึ่ง หลักในการสร้างความแตกต่าง มีง่ายๆดังนี้ - การสร้างขนาดที่แตกต่าง - ความแตกต่างกันที่รูปร่างขององค์ประกอบ - รูปลักษณ์หรือลักษณ์ที่แตกต่าง 2.3 การวางแยกองค์ประกอบให้โดดเด่น พูดง่ายๆก็คือ วางให้โดด และเด่น กว่าคนอื่น เทคนิคการน่าสีไปใช้งาน เทคนิคการเลือกใช้สีแบบสูตรสาเร็จจะมีอยู่หลายรูปแบบ แต่แบบที่นิยมให้งานกันเป็นหลักจะมีอยู่ 4 รูปแบบ คือ
  • 11.
    1.Mono หรือเอกรงค์ จะเป็นการใช้สีที่ไปในโทนเดียวกันทั้งหมดเช่น จุดเด่นเป็นสีแดง สีส่วนที่ เหลือก็จะเป็นสีที่ใกล้เคียงกับสีแดง โดยใช้วิธีลดน้าหนักความเข้มของสีแดงลงไป 2.Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรงข้ามกันในวงจรสี เช่น สีฟ้าจะตรง ข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสีเขียว สามารถนามาใช้งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดี และไม่ดี หากไม่รู้หลักพื้นฐานในการใช้งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ควรใช้ในพื้นที่ปริมาณเท่ากันใน งาน ควรใช้สีใดสีหนึ่งจานวน 80% อีกฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นที่ของงาน โดยรวม จะทาให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่นของภาพ องค์ประกอบด้านข้อความ ข้อความ จัดเป็นองค์ประกอบหลักสาคัญที่สุดในการออกแบบเว็บไซต์การออกแบบข้อความที่ดี ผู้ออกแบบต้องคานึงถึงองค์ประกอบย่อยหลายด้าน เช่น รูปแบบตัวอักษร ขนาดตัวอักษร ความหนาแน่น ตัวอักษร สีของข้อความ และการจัดความสัมพันธ์ข้อความและภาพให้สอดคล้องกับองค์ประกอบอื่น ๆ เช่น ภาพ และกราฟิกบนหน้าจอ รูปแบบและขนาดตัวอักษร มีงานวิจัยเกี่ยวกับขนาดตัวอักษรทั้งภาษาไทยเละภาษอังกฤษพบว่าผู้อ่านตัว อักษรตัวพิมพ์ภาษไทย หรือภาษาต่าง ๆ ขนาด 80 ตัวอักษรต่อบรรทัดน้อยกว่า การอ่าน ตัวอักษรขนาดขนาด 40 ตัวอักษรต่อ บรรทัด ในขณะที่ความเข้าใจ จากการอ่านควรอยู่ระหว่าง 19-37 พอยต์ ในขณะที่ตัวหนังสือปกติมีขนาด 12-
  • 12.
    19 พอยต์ ส่วนรูปแบบของตัวอักษรควรใช้ตัวที่อ่านง่ายสบายตาหากตัวอักษรที่ไม่ใช่ส่วนของเนื้อหาหลักเช่น ตัวอักษร หัวเรื่องใหญ่ ตัวอักษรประกอบการออกแบบ หรือตัวอักษรพิเศษอื่น ๆ ผู้ออกแบบอาจใช้ตัวอักษร รูปแบบและขนาดต่าง ๆ กันออกไป ๆ ได้ แต่ไม่ควรมี ความหนาแน่นของตัวอักษรมากเกินไป ความหนาแน่นของ ตัวอักษร ส่วนใหญ่รวมถึงความหนาแน่นขององค์ประกอบอื่นบนจอภาพเข้าไปด้วย ผลการวิจัยพบว่า ผู้เรียนชอบจอภาพที่มีความหนาแน่นปานกลางหรือประมาณ 40 % ของพื้นที่หน้าจอมาก ที่สุด และจะเลือกจอภาพที่มีความหนาแน่นสูง หรือประมาณ 50 % ของพื้นที่หน้าจอ มากว่าจอภาพที่มีความ หนาแน่นต่า นอกจากนี้ยังพบว่าในวิชาที่มีเนื้อหายาก ผู้เรียนจะชอบจอภาพ ที่มีความแน่นสูง เนื่องจาก จอภาพที่มีความหนาแน่นขององค์ประกอบต่าง ๆ สูง จะมีข้อมูลที่ช่วยให้ความเข้าใจเนื้อหาและแนวคิดหลัก ต่าง ๆ ชัดเจนและต่อเนื่องขึ้น สีข้อความ เป็นองค์ประกอบหน้าจอ ที่ช่วยกระตุ้นความน่าสนใจการ สีเป็นตัวกระตุ้นประสาทการ รับรู้ที่สาคัญ การใช้สีที่เหมาะสม จะช่วยให้อ่านง่าย และสบายตา ผลงานวิจัยพบว่านักเรียนส่วนใหญ่ชอบคู่อักษรสีขาว หรือเหลือง บนพื้นน้า เงิน อักษรเขียวบนพื้นดา และอักษรดาบนพื้นเหลือง หากใช้พื้นสีเทา คู่สีที่ผู้เรียนชอบ คือ สีฟ้า สีม่วง และสี ดา สีที่ชอบน้อยคือ ควรใช้พื้นหลังเป็นสีเข้มมากกว่าสีอ่อนเป็นพื้นหลัง ซึ่งระยะยาวจะช่วยลดความล้าของ สายตา ในการอ่านจอภาพอันเนื่องมาจากความจ้าของสีพื้น รูปแบบของตัวอักษรที่ใช้ในการท่าเว็บไซต์ ตัวอักษรที่เราใช้งานกันอยู่ในปัจจุบันจะแบ่งออกเป็น 4 รูปแบบใหญ่ ๆ คือ 1.Font แบบ Serif จะดูเป็นระเบียบ เป็นทางการ เหมาะจะใช้ในงานที่เป็นทางการ และต้องการ ความน่าเชื่อถือมากๆFont แบบ San Serif จะอ่านง่าย ดูทันสมัยมากกว่าแบบอื่น ๆ เหมาะจะใช้ในงานที่ ต้องการ ความทันสมัยออกแนวไม่เป็นทางการมากนัก 3..Font แบบ Antique จะเหมาะกับงานที่ต้องการแสดงความชัดเจนของยุคสมัย หรือต้องการอา มรณ์ย้อยยุคนิดหน่อย 4.Font แบบ Script เหมาะกังานที่ไม่เป็นทางการ ต้องการความเป็นกันเองและดูสนุกสนาน มากกว่าแบบอื่นๆ หรือในบางกรณี Font แบบนี้จะใช้ในงานที่ต้องการข้อความที่ดูเหมือนเป็นลายมือเขียน วิธีเลือก Font ไปใช้ในงานออกแบบ การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคานึงง่าย ๆ อยู่ 2 ข้อคือ ความหมายต้องเข้ากัน หมายความว่า ความหมายของคาและ Font ที่เลือกใช้ควรจะไปด้วยกันได้ เช่น คาว่าน่ารักก็ควรจะใช้ Font ที่ดูน่ารักไปด้วย ไม่ควรใช้ Font ที่ดูเป็นทางการอารมณ์ของฟอนต์ และ อารมณ์ของงานต้องไปในทิศทางเดียวกัน เช่น งานที่ต้องการความน่าเชื่อถือก็จะเลือกใช้ Font แบบ Serif ที่ดูหนักแน่น น่าเชื่อถือ ส่วนงานที่ต้องการความฉูดฉาดอย่างโปสเตอร์ลดราคาก็ควรจะเลือกใช้ Font ที่ เป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็นต้น
  • 13.
    1. การวางต่าแหน่งตัวอักษร มีข้อควรคานึงถึงไว้ให้อยู่ 3ข้อคือ 1.ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลงล่าง โดยมีรัศมีการกวาดสายตา ตามลาดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลาดับให้ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมาทา ให้เสียความหมายของข้อความไป 2.จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัวใหญ่ๆ อยู่เพียงชุดเดียว จึงจะเป็น จุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วนจุดอื่น ๆ ขนาดควรจะเล็กลงมาตามลาดับความสาคัญ 3.ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทาให้กลายเป็นงานที่อ่านยากและชวนปวดศรีษะ มากกว่าชวนอ่าน ถ้าจาเป็นจริง ๆ แนะนาให้ใช้ Font เดิมแต่ไม่ตกแต่งพวกขนาด, ความหนาหรือกาหนดให้ เอียงบ้าง เพื่อเพิ่มความน่าสนใจไม่ให้งานดูน่าเบื่อแบบนี้จะดีกว่า
  • 14.
    บรรณานุกรม โซนซ่า. (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 .
  • 15.