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

การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)

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

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

1. รวบรวมข้อมูล  เนื้อหาที่จะนำมาสร้างเว็บ  แล้วนำมาจัดหมวดหมู่ และลำดับเนื้อหาก่อนหลัง (ตัดส่วนที่ไม่จำเป็นออก) แล้ววางโครงสร้างเว็บไซต์ในภาพรวมทั้งหมด

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

3. ออกแบบหน้าแรกของเว็บไซต์  หรือที่เรียกว่า  Home  page

การออกแบบระบบนำทาง (Site Navigation Design)

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

องค์ประกอบของระบบ Navigation

1. เครื่องนำทาง

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

–   เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายในกลุ่มย่อยที่มี เนื้อหาเกี่ยวเนื่องกัน มักอยู่ในรูปแบบของลิงค์ข้อความหรือกราฟฟิกเช่นกัน

–   เครื่องมือเสริม สำหรับช่วยเสริมการทำงานของเมนู มีได้หลายรูปแบบ เช่น ช่องค้นหาข้อมูล (Search Box), เมนูแบบดร็อปดาวน์ (Drop-Down menu), แผนผังเว็บไซต์ (Site Map), อิมเมจแมพ (Image Map)

2. เครื่องมือบอกตำแหน่ง (Location Indicator)

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

ลักษณะของระบบเนวิเกชั่นที่ดี

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

–   เข้าใจง่ายหรือมีข้อความกำกับชัดเจน ผู้ชมใช้ได้ทันทีโดยไม่ต้องเสียเวลาศึกษา

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

–   บอกผู้ใช้ว่ากำลังอยู่ที่ตำแหน่งใดของเว็บไซต์

–   มีการตอบสนองเมื่อใช้งาน เช่น เปลี่ยนสีเมื่อผู้ชมชี้เมาส์หรือคลิก

–   จำนวนรายการพอเหมาะ ไม่มากเกินไป

–   มีหลายทางให้เลือกใช้ เช่น เมนูกราฟฟิก , เมนูข้อความ, ช่องค้นหาข้อมูล (Search Box), เมนูดร็อปดาวน์ (Drop-down menu),

แผนผังเว็บไซต์ (Site Map)

–   มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ในกรณีที่หลงทางไม่รู้ว่าตัวเองอยู่ที่ตำแหน่งใด

1. จุดประสงค์ของการทำเว็บ

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

2. เลือกชื่อ Domain name

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

ใช้ตัวอักษรตั้งแต่ 3-63 ตัวอักษรและต้องใช้ (a-z),(0-9) และเครื่องหมาย dash “-” เท่านั้น

ใช้จุด “.” ได้ในกรณี ที่แบ่งแยกตาม level ได้ เช่น http://www.su.ac.th

ตัวแรกและตัวสุดท้ายต้องเป็นตัวอักษรเท่านั้น

ห้ามมีช่องว่าง (No space)

ตัวอักษรเล็กหรือใหญ่ ไม่มีผลต่อการตั้งชื่อ

ชื่อโดเมนเนมไม่ยาวจนเกินไป

ต้องสะกดง่าย หลีกเลี่ยงคำไทยที่สะกดยาก

ชื่อโดเมนเนม ควรมีเนื้อหาสื่อความหมายเกี๋ยวกับเว็บไซต์ด้วย

ระบบ Domain name ที่ทำการจดทะเบียนได้

.com ,.net ,.co.th ,.in.th, .org ,.name, .biz ,.info

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

3. วางโครงสร้างเว็บไซต์

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

สินค้า     ส่วนแสดงสินค้า ราคา รายละเอียด ส่วนลด คำอธิบายเกี่ยวกับสินค้าและบริการของเราทั้งหมด      อาจจะมีส่วนของ การสั่งซื้อ วิธีการชำระเงิน วิธีการจัดส่งสินค้า เพิ่มมาในส่วนนี้ได้

เว็บบอร์ด               สำหรับติดต่อพูดคุย กับผู้เข้าชมเว็บไซต์ หรือลูกค้า

คำถาม คำตอบ     อธิบาย ชี้แจงข้อสงสัย คำถามที่มักจะเจอบ่อยๆ เพื่อให้เกิดความกระจ่างในสินค้า หรือบริการของเรา

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

4. ลงมือ ทำเว็บ

การทำเว็บไซต์สามารถทำได้ หลายวิธี เช่น ทำเว็บ ด้วยโปรแกรม Dreamweaver Html หรือ การทำเว็บด้วย

จิตวิทยาเกี่ยวกับสี

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

ความรู้สึกที่คนส่วนใหญ่มีต่อสีต่างๆ

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

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

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

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

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

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

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

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

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

ทฤษฎีสี

รูปด้านล่างวงล้อความสัมพันธ์ของสี ซึ่งบรรจุสีที่นิยมใช้ในเว็บไซต์ไว้ 20 สี เหมาะสำหรับผู้ที่กำลังเลือกสีที่จะใช้ในเว็บไซต์อยู่เราสามารถใช้ความสัมพันธ์ของวงล้อขอสีนี้ให้เกิดประโยชน์ได้อย่างมากมาย เช่น  ต้องการออกแบบให้เว็บไซต์รู้สึกตัดกันโดยสิ้นเชิง เราอาจใช้ชุดสี 4 สีที่ทำมุมกัน 90 องศา เช่นดังตัวอย่างถ้าเราเลือกชุดสี 1 , 6 , 11 , 16 สีที่ได้จะตัดกันชัดเจน    ถ้าต้องการให้เว็บไซต์ดูกลมกลืนก็อาจเลือกชุดสีใกล้เคียงกันก็ได้เช่น เลือกชุดสีเขียวเบอร์ 8 , 9 , 10 , 11 ก็จะได้สีในโทนสีเขียวสว่าง

นางสาว  สุภาณี  บำรุงธีรพล ม.6/2  เลขที่28