หลักการออกแบบเว็บไซต์

สือ่ การสอน หลกั การออกแบบและผลติ เว็บไซต์ รายวชิ า การงานอาชพี และเทคโนโลยี 5 รหัสวชิ า ง 23101 ระดับชัน้ มัธยมศกึ ษาปีที่ 3 โดย นางสาววรรณวมิ ล ปราจนั ทร์ ครู คศ.1 โรงเรียนคลองลานวทิ ยา

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

2. ความสมา่ เสมอ ไม่สับสน ควรออกแบบเวบ็ ไซต์ดว้ ยความสมา่ เสมอ คือจะต้องมีรูปแบบ กราฟกิ โทนสีและการตกแต่งต่างๆ ให้แต่ ละหนา้ บนเวบ็ ไซต์มีความคลา้ ยคลึงกัน และเปน็ แนวเดียวกันไปตลอดทั้งเวบ็ ไซต์ ดงั ตวั อยา่ งเวบ็ ไซต์ทัว่ ๆ ไปทีจ่ ะ สังเกตเห็นไดว้ ่าทุกหนา้ ของเว็บไซต์นั้น จะเนน้ การตกแตง่ ในรูปแบบเดยี วกนั ทั้งหมด ตา่ งก็แค่การนาเสนอของ แตล่ ะหน้าเทา่ น้นั 3. สรา้ งความโดดเด่น เป็นเอกลักษณ์ การออกแบบเวบ็ ไซตเ์ พ่ือให้สามารถสื่อถงึ จุดประสงค์ในการนาเสนอเวบ็ ไดด้ ี จะต้องมีการสร้างความเป็น เอกลักษณ์และจุดเดน่ ให้กบั เว็บไซต์ เพ่ือใหส้ ามารถสะท้อนถงึ ลกั ษณะขององคก์ รไดม้ ากท่ีสดุ โดยการสร้าง เอกลกั ษณด์ ังกล่าวนั้น อาจใช้ชดุ สี รูปภาพ ตัวอักษรหรือกราฟกิ นอกจากน้ีกต็ ้องข้นึ อยู่กับว่า เปน็ เว็บไซตแ์ บบ ทางการหรือไม่ เพื่อจะไดอ้ อกแบบได้อยา่ งเหมาะสมท่สี ดุ 4. เนือ้ หาตอ้ งดี ครบถว้ น เนอื้ หาเป็นสงิ่ ทีส่ าคัญทสี่ ุดของการสร้างเวบ็ ไซต์ เพราะสง่ิ ท่ีทาให้ผคู้ นเกิดความสนใจ และหมัน่ ตดิ ตาม เว็บไซตเ์ หลา่ น้นั อยูเ่ สมอ ก็คือเนื้อหาทม่ี ีความสมบูรณ์และน่าสนใจ นอกจากน้จี ะต้องมีการปรับปรุง พฒั นาเนอื้ หา บนเว็บใหม้ ีความทันสมยั อย่เู สมอ รวมถงึ ข้อมลู ต้องมีความถูกต้องทส่ี ดุ 5. ระบบเนวเิ กช่นั ใช้งา่ ย ระบบเนวเิ กชั่น เปน็ เสมอื นป้ายบอกทางเพื่อให้ผู้ใชง้ าน ไม่เกิดความสับสนในขณะใชง้ านเวบ็ ไซต์ ซึง่ การ ออกแบบเนวเิ กชัน่ กจ็ ะต้องเน้นทค่ี วามเรียบงา่ ย ใช้งานสะดวก และมีความเข้าใจไดง้ า่ ย ที่สาคัญจะต้องมีตาแหน่ง การวางท่สี ม่าเสมอเพื่อใหด้ ูเป็นแนวทางเดยี วกัน ทาใหผ้ ูใ้ ช้งานหรอื ผ้ชู มรูส้ กึ ประทบั ใจ และจดจาเวบ็ ไซต์ได้ง่ายขึ้น ส่วนใครท่มี ีการนากราฟิกมาใชใ้ นระบบเนวิเกชั่น ก็จะต้องเลอื กกราฟกิ ท่สี ามารถส่ือความหมายได้ดีเชน่ กนั 6. คณุ ภาพของเว็บไซต์ เวบ็ ไซต์ท่ดี ีจะต้องมคี ุณภาพ ทั้งส่ิงที่ปรากฏให้เห็นบนเว็บไซต์ ไม่วา่ จะเปน็ กราฟกิ ชนิดตัวอักษร รปู ภาพ หรอื สีสนั ท่ใี ช้ เนื้อหาที่นามาแสดงผล ซงึ่ หากเวบ็ ไซต์มีคุณภาพกจ็ ะสร้างความน่าเชื่อถือ และเป็นจดุ เด่นท่ีทาให้ ผูค้ นส่วนใหญเ่ กดิ ความสนใจไดด้ ี เพราะฉะนน้ั ห้ามละเลยในสว่ นของคุณภาพเดด็ ขาด 7. ความสะดวกในการเขา้ ใช้งาน เว็บไซตค์ วรใหค้ วามสะดวกสบายแก่ผู้ใช้งานไดด้ ี คือจะต้องมีการแสดงผลไดใ้ นทุกระบบปฏิบตั ิการ ไมว่ า่ จะ เป็นเวบ็ เบราว์เซอร์ คอมพวิ เตอร์ โนต๊ บุค๊ หรือบนโทรศัพท์มือถือ ทส่ี าคัญจะต้องมีความละเอียดของการแสดงผล และ สามารถใชง้ านได้โดยไม่มปี ัญหาด้วย

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

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

4. โครงสรา้ งแบบใยแมงมุม โครงสรา้ งแบบใยแมงมมุ เป็นโครงสรา้ งทไ่ี ดร้ ับความนยิ มเป็นอย่างมาก เพราะมีความยืดหยุน่ มากท่สี ุด โดยทกุ หนา้ เว็บจะมีการเชือ่ มโยงถงึ กนั หมด ทาใหส้ ามารถเขา้ ถึงหน้าเวบ็ เพจต่างๆ ที่ตอ้ งการได้อย่างง่าย และมี ความอิสระมากข้นึ นอกจากนก้ี ส็ ามารถเช่ือมโยงไปสู่เว็บไซตภ์ ายนอกไดด้ ี ขอ้ มูลส่าคญั ท่ีควรมอี ยูใ่ นเว็บไซต์ จุดประสงคห์ น่ึงของการสร้างเวบ็ ไซต์ ก็เพอื่ ดึงดูดให้ผ้คู นเกิดความสนใจ ดงั นัน้ ส่งิ ทีจ่ ะขาดไม่ไดเ้ ลย กค็ ือ ขอ้ มลู สาคัญทผ่ี ูค้ นมกั จะคาดหวังวา่ จะไดเ้ หน็ เมื่อเขา้ ชมเวบ็ ไซตต์ ่างๆ น่ันเอง ซ่ึง ได้แก่  รายละเอียดของผลิตภัณฑ์ ซงึ่ เปน็ รายละเอยี ดตามจรงิ  ข้อมูลเก่ียวกับบริษัทหรือสถานท่ีผลิต-ขาย  ข้อมูลสาหรับการตดิ ต่อ เชน่ เชื่อ เบอร์โทร ช่องทางการตดิ ตอ่ อ่นื ๆ  ข่าวสารความคบื หน้าตา่ งๆ หรือเร่อื งราวอัพเดตที่น่าสนใจ  คาถามยอดนิยมต่างๆ การออกแบบโครงสรา้ งของเวบ็ ไซต์ โครงสรา้ งเวบ็ ไซต์ ก็คือการจัดลาดบั ของเนื้อหาบนเวบ็ ไซต์ออกเป็นแผนผงั ท่ีเขา้ ใจงา่ ย ว่าตอ้ งการให้ เว็บไซตม์ ีเน้ือหาอะไรบา้ ง มเี ว็บเพจอยตู่ รงไหน หนา้ ไหนบ้างที่จะนามาเช่ือมโยงถงึ กนั หรือกลา่ วง่ายๆ ก็คือเหมอื น การวางโครงเร่อื งก่อนจะเขียนเนอ้ื หาให้ออกมาอยา่ งสมบรู ณ์แบบนัน่ เอง ดังนนั้ การออกแบบโครงสร้างเวบ็ ไซตจ์ งึ มี ความสาคัญมาก ซง่ึ ก็สามารถทาไดห้ ลากหลายรูปแบบดว้ ยกัน แต่มแี นวคดิ หลักๆ ท่ีไดร้ ับความนิยมมากทีส่ ดุ อยู่ 2 รปู แบบ คือ  จัดโครงสร้างตามกลมุ่ เนื้อหา (Content-based Structure)  จัดโครงสร้างตามกลมุ่ ผ้ชู ม (User-based Structure)

การออกแบบเว็บไซต์ ต้องค่านงึ ถึงอะไรบ้าง การออกแบบเวบ็ ไซต์ทด่ี ีจะต้องคานึงถงึ หลายๆ อยา่ งด้วยกนั โดยมี 9 ขอ้ หลกั ๆ ที่ควรคานึงถึงดังนี้ 1. ความเรยี บง่าย เวบ็ ไซตท์ ่ีดคี วรมีรูปแบบทเ่ี รยี บง่ายและไม่ซบั ซ้อน เพื่อใหผ้ ู้ชมสามารถใช้งานเวบ็ ไซต์ได้อย่าง สะดวกมากขึน้ โดยเฉพาะพวกกราฟฟิคท้งั หลาย จะต้องไม่ใชต่ วั อักษรที่เคลื่อนไหวอยตู่ ลอดเวลา และไมม่ สี สี นั ที่ดูแสบตาจนเกนิ ไป 2. ความสม่าเสมอ คอื การเลือกใช้รปู แบบ กราฟฟคิ โทนสี และการตกแต่งหรือการแสดงผลตา่ งๆ ในเว็บไซต์ให้ เปน็ รูปแบบเดียวกันหรอื คล้ายคลึงกันตลอดทัง้ เวบ็ 3. ความเป็นเอกลกั ษณ์ เว็บไซต์ควรมีเอกลักษณเ์ ฉพาะตัว ทส่ี ามารถบ่งบอกได้ถึงความเป็นบรษิ ทั องค์กรหรือ แบรนด์ต่างๆ ตวั อยา่ งเช่น เว็บไซต์ของ 1 Belief จะมสี ฟี ้า ท่ีเป็นเอกลกั ษณข์ องบรษิ ัทอยู่บนเวบ็ 4. เนือ้ หา โดยเนือ้ หาท่ีนามาลงในเวบ็ ควรเปน็ เนือ้ หาทมี่ ีความเก่ยี วขอ้ งกบั เวบ็ หรอื อาจเปน็ เนอื้ หาที่ได้สาระ มี ประโยชน์ สามารถดึงดูดความสนใจของผู้คนได้ดี และทสี่ าคญั จะต้องมีความถูกต้อง สมบูรณแ์ ละมีความทันสมยั 5. ระบบเนวเิ กชัน ควรออกแบบให้สามารถใช้งานได้งา่ ยและสะดวก สือ่ ความหมายตา่ งๆ และอธิบายไดอ้ ยา่ ง ชดั เจน รวมถึงต้องมรี ปู แบบ และลาดบั รายการท่ีมีความสมา่ เสมอ 6. ลกั ษณะเด่น สว่ นน้จี ะถอื เปน็ หน้าตาของเวบ็ ไซตเ์ พ่ือใช้ในการดงึ ดดู ลูกค้า อาจออกแบบลักษณะเดน่ ของเวบ็ ให้ ตรงกบั ความชอบสว่ นใหญ่ของกลมุ่ เปา้ หมาย หรือจะออกแบบให้สัมพนั ธ์ประเภทของเวบ็ และคณุ ภาพของ องคป์ ระกอบต่างๆ บนเว็บ 7. การใชง้ านท่ีไม่จ่ากดั การทาเวบ็ ไซต์ใหร้ องรับการเขา้ ใชง้ านจากหลายระบบ ไม่ว่าจะเปน็ การเขา้ ใชง้ านจาก เคร่อื ง PC สมาร์ทโฟน หรอื การใชเ้ บราเซอรต์ ่างๆ ในการเข้าใช้งาน 8. คณุ ภาพในการออกแบบ จาเป็นตอ้ งทาเวบ็ ไซต์ใหม้ คี ุณภาพมากทส่ี ดุ ไมว่ ่าจะเป็นในเรือ่ งของการเรยี บเรียง เนอ้ื หาอยา่ งรอบคอบ การตรวจสอบความถกู ต้องและการทาใหเ้ ว็บไซต์มคี วามนา่ เช่ือถือ 9. การเช่อื มโยงไปยังล้งิ คต์ ่าง ๆ ซึ่งจะต้องเช่อื มโยงไปยงั หนา้ เว็บที่มอี ยู่จรงิ และมเี นื้อหาทีเ่ กี่ยวพนั กัน และควร หมัน่ ตรวจสอบอยู่เสมอ วา่ ระบบการเชอ่ื มโยงยังคงทางานไดต้ ามปกติและมีความถูกต้อง แมน่ ยา อย่หู รอื ไม่

สว่ นประกอบส่าคญั บนหนา้ เวบ็ เพจ ทต่ี ้องมี บนหน้าเว็บเพจ จะมีสว่ นประกอบสาคัญท่ีจาเป็นต้องมีอยู่ 3 สว่ น ได้แก่ 1. ส่วนหัวของหนา้ (Header) อยู่ตอนบนสุดของหน้าและเป็นส่วนท่ีสาคญั ท่ีสุด โดยจะต้องทาให้สามารถดึงดูดผ้ชู มให้รู้สกึ อยากติดตาม เน้ือหาในเว็บไซตต์ อ่ ไป ซ่งึ ส่วนใหญก่ ็มักจะมกี ารใส่ภาพกราฟฟิคให้ดสู วยงาม สง่ิ สาคัญหลกั ๆ เลย ก็คอื โลโก้ ชอ่ื เวบ็ ไซต์และเมนหู ลกั ท่สี ามารถลง้ิ คไ์ ปยังเนอ้ื หาในหนา้ เว็บเพจต่าง ๆ ได้ 2. ส่วนของเนือ้ หา (Body) อยบู่ ริเวณตอนกลางของหน้าเวบ็ โดยจะแสดงขอ้ มูลเกี่ยวกับเนอื้ หาบนเว็บแบบครา่ วๆ ซ่ึงก็จะมีข้อความ กราฟฟิค ตารางข้อมูลหรือวิดีโอประกอบอยู่ และหากมเี มนูแบบเฉพาะกลมุ่ ก็จะถูกจดั ไวใ้ นหนา้ นีเ้ ชน่ กัน และท่ี สาคัญเน้อื หาในสว่ นนค้ี วรจะมีความกระชับ เข้าใจง่าย มกี ารใชร้ ปู แบบตวั อกั ษรแบบเรียบงา่ ยและเป็นระเบียบ 3. สว่ นท้ายของหน้า (Footer) อยูล่ า่ งสุดของหนา้ เว็บ ซึง่ จะมหี รอื ไม่มกี ็ได้ สว่ นนี้จะแสดงถึงข้อมูลตา่ งๆ เพ่ิมเติมเข้าไป เชน่ ข้อความท่ี แสดงถึงการเป็นลิขสิทธ์ิ ข้อมูลเจา้ ของเวบ็ ไซต์ วธิ กี ารตดิ ต่อและคาแนะนาตา่ งๆ เกี่ยวกับการใช้งานเว็บไซตอ์ ย่าง ถูกต้อง เปน็ ต้น วิธีการเลอื กใช้สสี ่าหรับการออกแบบเว็บไซต์ การเลือกใช้สใี นการออกแบบเวบ็ ไซต์มคี วามสาคัญเปน็ อย่างมาก เพราะสสี ามารถกาหนดอารมณ์ ความร้สู กึ และกระตุน้ การรับรู้ทางดา้ นจติ ใจของมนุษย์ได้ดี ดงั น้ันสีท่ใี ช้จงึ ตอ้ งมีความสอดคล้องกับเนือ้ หาและ จุดประสงค์ของเว็บ ว่าตอ้ งการใหผ้ ้เู ข้าชมร้สู ึกอย่างไรต่อเน้ือหาท่ีได้อ่าน โดยรปู แบบของสที ีส่ ายตาของมนุษย์ สามารถมองเห็นไดก้ แ็ บ่งออกเปน็ 3 กลุ่มดงั ต่อไปน้ี 1. สโี ทนร้อน (Warm Colors) เป็นสแี ห่งความอบอ่นุ ปลอบโยนและกระตนุ้ ความสุขได้ดี ซึ่งจะทาให้ผู้เข้าชม รู้สกึ มีชวี ติ ชวี าและมีแรงผลกั ดันมากข้ึน อีกทัง้ ยงั ช่วยดงึ ดดู ให้ผชู้ มรูส้ กึ อยากติดตามเนื้อหามากขึ้น 2. สีโทนเย็น (Cool Colors) เป็นสีแหง่ ความสภุ าพและความออ่ นโยน ทาใหผ้ ูช้ มร้สู กึ ผ่อนคลายและเพลดิ เพลนิ มากข้นึ และยงั สามารถใช้โน้มนา้ วจากในระยะไกลไดอ้ ีกด้วย 3. สโี ทนกลาง (Neutral Colors) สีเหล่าน้ีมกั จะถูกนาไปผสมกับสอี ืน่ ๆ เพื่อให้เกดิ สีทีเ่ ป็นกลางมากข้ึน และให้ ความรสู้ กึ ทเ่ี ปน็ ธรรมชาติ สีสามารถสือ่ ถึงอารมณค์ วามรูส้ กึ และส่อื ความหมายของเวบ็ ไซตน์ น้ั ๆ ไดอ้ ย่างชดั เจน ดังน้ันหากเลือกใช้สี ไม่เหมาะสมกบั เนอื้ หาหรือจุดประสงคข์ องเวบ็ ก็จะทาให้เวบ็ ดไู มน่ ่าสนใจ ขาดความนา่ เช่ือถือและทาใหผ้ ู้ที่เคย เขา้ มาใช้บริการไม่คดิ จะกลับมาใช้บรกิ ารอกี

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

Responsive Web Design Responsive เป็นวิธกี ารออกแบบเว็บไซตเ์ พ่ือให้รองรับกับขนาดของหน้าจออุปกรณท์ ุกชนดิ ไม่ว่าจะเปน็ คอมพวิ เตอร์ โนต๊ บุ๊ค สมาร์ทโฟนและแท็บเลต็ เนอื่ งจากอุปกรณเ์ หลา่ นลี้ ว้ นมขี นาดหน้าจอท่ตี า่ งกนั จึงจาเปน็ ต้อง ออกแบบเวบ็ ใหใ้ ชง้ านได้กบั ทุกขนาดหน้าจอในครั้งเดียว ทา่ ไมตอ้ ง Responsive Design? Responsive Web Design เปน็ การพฒั นาเว็บไซตท์ ่ีกาลังไดร้ ับความนยิ มมากในปัจจุบัน มีจุดมงุ่ หมาย เพื่อให้ User สามารถใชง้ านได้งา่ ยท่ีสุด และชว่ ยประหยดั เวลา คา่ ใชจ้ ่ายในการพฒั นาเวบ็ ไซตไ์ ดด้ ี เพราะการ พฒั นาเว็บไซต์ในรปู แบบน้ี จะใช้ Source Code เพยี งชดุ เดยี ว แต่สามารถปรบั การแสดงผลใหเ้ หมาะกับอปุ กรณ์ ต่างๆ ได้อย่างมีประสทิ ธิภาพ สาหรบั เทคนคิ ท่ีใช้ในการทา Responsive Web Design นัน้ ก็คือ JavaScript และ CSS3 ซึง่ ทาใหส้ ามารถเข้าใชง้ านเวบ็ ไซต์ไดง้ ่ายขนึ้ และไม่ต้องคานงึ ถึงขนาดหนา้ จอหรือชนิดของอปุ กรณ์ท่ีใช้ ในการเข้าเว็บ ประโยชนจ์ ากการท่าเวบ็ ไซต์ Responsive Web Design  สามารถติด Index Google ไดท้ ง้ั บน desktop และ mobile ในหนา้ เดยี ว น่ันกเ็ พราะเป็นรปู แบบ เวบ็ ไซต์ท่ีไดร้ ับการรบั รองจาก Google  รองรับไดท้ ุกอปุ กรณเ์ พียงแค่ไซตเ์ ดยี ว ไม่ต้องทาหลายหนา้ และไม่ทาใหห้ นักเซิฟเวอร์จนเกินไป  ประหยัดเวลาและคา่ ใชจ้ ่ายในการทา ส่งผลให้การพฒั นาเว็บไซต์เปน็ ไปอย่างรวดเรว็ ยิ่งขึ้น  ดูแลและจัดการเวบ็ ไซตไ์ ด้อย่างรวดเร็วและไม่ยุง่ ยาก  ไมต่ ้องเสียเวลากบั การ Redirect เพอ่ื ไปหาหนา้ ทเี่ ป็น Mobile  สามารถทา SEO ผา่ น Mobile ได้อยา่ งง่าย เพราะ Googlebot-mobile ส่วนใหญ่ จะใหค้ วามสนใจ กบั เวบ็ ท่ีรองรับอปุ กรณ์ Mobile โดยตรง  การค้นหาผา่ น Mobile สามารถทาได้งา่ ยขนึ้ กว่าเดิม ขอ้ เสียของ Responsive Web Design ถึงแมว้ ่า Responsive Web Design จะมปี ระโยชนแ์ ละสามารถใช้งานได้ง่ายบนทุกอปุ กรณ์ แต่กย็ ังคงมี ขอ้ เสยี อยู่บา้ ง ก็คืออาจทาให้เกดิ ปัญหาในการใชง้ านได้ เช่น การที่ข้อมูลบางอย่างที่ไมจ่ าเปน็ ถกู โหลดเขา้ มา ท้งั ที่ ปกตคิ วรจะซ่อนไว้ หรือในเรอื่ งของ Image Resizing ท่ีจาเปน็ ต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop จงึ ทาให้เกิดการเสยี เวลาโดยท่ไี มจ่ าเปน็ โดยปัญหาเหล่านี้กม็ ักจะเกดิ ข้ึนไดบ้ ่อย ๆ

ข้อจ่ากดั ของการท่า Responsive Web Design นอกจากข้อเสียดังกล่าวแล้ว การทา Responsive Web Design กม็ ีข้อจากดั เช่นกนั นนั่ คือ 1. เวบ็ ไซต์ทที่ าขึ้นมาหา้ มเป็น Flash เดด็ ขาด!! เพราะอุปกรณ์บางอย่างไม่รองรับการใช้งานแบบ Flash อย่างเช่น iPhone และ iPad ซึ่งจะทาใหเ้ กิดการติดขัดในการใช้งานได้ 2. มขี อ้ จากัดในการออกแบบเว็บไซตพ์ อสมควร เพราะเว็บไซตใ์ นรปู แบบนีจ้ ะสามารถออกแบบใหเ้ ป็นลักษณะ กลอ่ งหรือ Block ได้เท่านัน้ หากต้องการออกแบบให้ดูแปลกออกไปจะไมส่ ามารถทาได้ หรอื ทาไดย้ ากและมีความ ซับซ้อนมาก 3. มคี วามยงุ่ ยากในการแก้ไขสูง ดังน้นั จงึ ตอ้ งวางแผนให้ดีและคดิ ใหร้ อบคอบก่อนออกแบบ จะได้ไม่ต้องย้อนกลับ มาแก้ไขภายหลงั 4. การเขียนโปรแกรมข้ึนมาจะต้องใช้ระบบ HTML 5 เทา่ นนั้ 5. เม่อื เขียนเว็บไซต์ขึ้นมาแล้ว จะตอ้ งทดสอบใหด้ ีวา่ สามารถใช้ได้ทุกอปุ กรณ์หรือไม่ ถา้ ไม่ไดจ้ ะต้องมีการแกไ้ ข การออกแบบเว็บในรปู แบบ Responsive Web Design มีขอ้ จากัดพอสมควร แต่เนื่องจากเทคโนโลยใี น ทกุ วันน้ีมกี ารพัฒนาขนึ้ ใหมท่ ุกวัน จงึ ต้องออกแบบเว็บไซต์ใหร้ องรับการใช้งานท่ีทนั สมัยอยู่เสมอ และใหส้ ามารถ ใชง้ านได้อยา่ งเหมาะสมมากที่สุด ออกแบบเว็บไซต์ให้ดูน่าเช่ือถือ การสร้างเวบ็ ไซต์ โดยเฉพาะเวบ็ สาหรบั ขายของออนไลน์ ส่ิงสาคญั ท่สี ดุ ก็คือการออกแบบเวบ็ ไซต์ให้มี ความนา่ เชื่อถือโดยหลักในการออกแบบเว็บไซต์เพื่อใหด้ นู ่าเชอ่ื ถอื และประสบความสาเร็จได้ในทสี่ ุด ก็จะต้อง ประกอบไปดว้ ยสิ่งเหล่าน้ี 1. ความทนั สมัย เว็บไซต์ท่ีดี น่าสนใจ และสามารถสะกดลูกคา้ ใหก้ ล้ากดสง่ั ซื้อสนิ ค้าบนหนา้ เวบ็ มากข้ึน ก็คอื ความทนั สมยั ดังนน้ั จงึ ควรออกแบบเวบ็ ใหม้ ีความทนั ต่อยคุ สมัยอยู่เสมอ และคอยปรบั เปลี่ยนรูปแบบหนา้ เว็บหรืออปั เดตสินคา้ ขอ้ มลู ขา่ วสารอยู่ตลอดเวลา เพ่ือให้เว็บมคี วามเปน็ ปจั จบุ ัน ไมด่ ูเหมือนเวบ็ ที่ถูกปลอ่ ยร้างจนเกินไป 2. ความเปน็ ศลิ ปะ ศลิ ปะ เป็นสิ่งทจี่ ะชว่ ยดึงดูดความสนใจของผู้ชมไดด้ ี ไมว่ า่ จะเป็นการใชส้ สี นั หรอื การเล่นลวดลายตา่ งๆ ดงั น้นั จึงควรสรา้ งเวบ็ ให้ดเู ปน็ งานศลิ ปะ ทสี่ ามารถสื่ออารมณ์ถงึ ผรู้ ับชมได้ดี และบ่งบอกถงึ ความเป็นเอกลักษณ์ ของสินค้าและบริการได้อยา่ งดีเยี่ยม แต่ทงั้ นสี้ สี ันที่นามาใช้ในการออกแบบควรจะมคี วามกลมกลนื และไม่ดรู กตา จนเกินไป ทสี่ าคัญคือจะต้องตรงตามกล่มุ เปา้ หมายชัดเจน

3. มขี อ้ มลู ผู้ขายชดั เจน เว็บไซต์จะมคี วามนา่ เชื่อถือมากขนาดไหน ขน้ึ อยูก่ บั การลงข้อมูลผขู้ ายวา่ มคี วามครบถ้วน และเปน็ ข้อมูล ที่จรงิ แทเ้ พยี งใด โดยข้อมลู หลกั ๆ ที่จาเปน็ ต้องมี ก็คือ ชื่อของบริษทั ท่ีอยู่ เบอรโ์ ทร แผนท่รี ้านค้า แฟกซ์ (ถ้ามี) และช่องทางการตดิ ตอ่ อนื่ ๆ ที่สามารถตดิ ต่อได้งา่ ยและรวดเรว็ นอกจากน้ีหากมีการจดทะเบียนพาณิชย์พรอ้ มและ มหี ลักฐานชัดเจน กจ็ ะยง่ิ สร้างความน่าเชื่อถอื และความมัน่ ใจให้กับลกู ค้าได้มากขน้ึ 4. อย่าเนน้ Hard Sell มากไป หนา้ เว็บไซตห์ ากมีโฆษณาหรอื Pop up ตา่ งๆ ขึน้ มารบกวนมากเกินไป จะทาให้ผู้ชมรู้สึกเบอ่ื หนา่ ยและ ราคาญได้ โดยเฉพาะหากโฆษณาเหล่านนั้ ขึ้นมาปิดตรงสว่ นของเนื้อหาทีล่ ูกคา้ สนใจพอดี นอกจากนกี้ ็รวมถึงพวก แบบฟอรม์ ตดิ ต่อกับทางร้านด้วย ไม่ควรออกแบบใหม้ าอยู่บนหน้าเวบ็ หลกั เพราะหากลกู ค้าสนใจกจ็ ะเขา้ ไปยงั หน้าตดิ ตอ่ และกรอกแบบฟอร์มเอง ดังนนั้ จงึ ควรใช้ Hard Sell ใหม้ ีความเหมาะสมท่สี ุด 5. อ้างถึงระยะเวลาท่ีเปิดให้บรกิ าร เวบ็ ไซต์ท่ีมีการเปิดให้บริการมาอยา่ งยาวนาน จะย่ิงสรา้ งความน่าเชือ่ ถือให้กบั ผชู้ มไดม้ ากขึ้น เพราะลูกค้า สว่ นใหญ่จะยึดความเช่ือทวี่ า่ เว็บไซตห์ รอื ร้านทเ่ี ปดิ ขายสนิ ค้ามาอยา่ งยาวนานมักจะเป็นเวบ็ ทีไ่ มโ่ กง การอา้ งถึง ระยะเวลาทีเ่ ปดิ ให้บริการมาแล้ว ควรอา้ งตามความเปน็ จริง ไม่ใช่พึ่งเปิดไดเ้ พียงเดือนเดียว แต่อา้ งไปเปน็ 10 ปี 6. ตวั อกั ษรมคี วามโดดเดน่ อา่ นงา่ ย ตัวอกั ษรที่ใช้จะต้องมีความโดดเด่นและสามารถอ่านไดง้ ่าย โดยใหเ้ ลอื กตัวอักษรท่ีมขี นาดพอเหมาะ มีการ ลดหลนั่ ขนาดกนั ตามลาดับหัวขอ้ ใชส้ ีตวั อกั ษรท่ีมองเหน็ ได้อย่างเดน่ ชดั และเลือกฟ้อนท์ทมี่ คี วามเปน็ มาตรฐาน ที่สุด สาหรับฟอ้ นทแ์ ปลกๆ ท่ีอาจจะดูสวยแปลกตาแต่อ่านยากสาหรับคนทัว่ ๆ ไป ไม่ควรนามาใช้เดด็ ขาด 7. อพั เดตหรือน่าเสนอข้อมูลอยตู่ ลอด เวบ็ ไซตท์ ี่ไม่มีการอัพเดตใดๆ เลย มักจะถูกมองว่าเปน็ เว็บที่ปลอ่ ยท้งิ รา้ งและทาใหล้ ูกคา้ เกดิ ความลงั เลว่า ร้านนแ้ี มค่ ้ายงั ขายสินค้าอยูห่ รอื เปลา่ เมือ่ สง่ั ซอ้ื แลว้ จะไดร้ ับสินค้าไหม และตัดสนิ ใจไม่ซื้อในทสี่ ดุ ดังนั้นจงึ ควรมี การอัพเดตข้อมูล ความเคลือ่ นไหวต่างๆ อยู่ตลอดเวลา หรือจะเปน็ การอัพสินคา้ ใหมๆ่ เพ่มิ นาบทความมาลง กจ็ ะ ทาใหเ้ ว็บดูมกี ารเคลือ่ นไหวและนา่ เช่อื ถือไดด้ ี 8. สะกดอกั ษรให้ถกู ต้อง ถึงแม้ว่าในปัจจบุ นั จะข้ึนช่ือวา่ เป็นยคุ ที่ภาษาไทยวบิ ัติ เน่ืองจากผ้คู นสว่ นใหญ่เร่ิมใช้ภาษาโซเชยี ลทเ่ี ป็น ภาษาแปลกๆ กนั มากข้ึน แต่การทาเว็บไซต์ กย็ งั ควรเน้นการสะกดตัวอักษรใหม้ ีความถูกตอ้ งมากทีส่ ุดอยดู่ ี และ ตอ้ งมีความสวยงาม น่าอ่าน มกี ารเว้นวรรคอยา่ งถกู ต้องดูเปน็ ระเบยี บด้วย โดยเฉพาะหากเปน็ ภาษาอังกฤษ ก็ จะตอ้ งเขียนให้ถกู ต้องตามหลักไวยากรณ์และแกรมมา่ จะช่วยสรา้ งความมั่นใจให้กบั ลูกค้าท่ีเขา้ มาดูข้อมลู ใน เว็บไซต์ได้ดี

9. บอกถงึ วตั ถุประสงค์อย่างชัดเจน คนส่วนใหญ่มกั จะอ่านขอ้ มลู บนเวบ็ ไซต์แบบผา่ นๆ และไม่ชอบอา่ นข้อมูลท่มี ีความยาวจนเกินไป ดงั นนั้ ใน สว่ นของเนื้อหา ขั้นตอนการส่ังซอ้ื การจ่ายเงนิ การรอรับสนิ คา้ ตา่ งๆ ควรเขียนให้มคี วามกระชับและบอกถึง วัตถุประสงค์อย่างชดั เจนมากทส่ี ดุ เช่น ต้องการทาเว็บไซต์ สนใจคลิกท่ีนี่ (ให้ใสก่ ารเช่ือมโยงเขา้ ไปยงั หน้าเวบ็ การสั่งซอ้ื เพื่อให้ลกู คา้ คลกิ เข้าสหู่ น้าเวบ็ ตามวตั ถปุ ระสงคไ์ ดเ้ ลย) หรือหากมีโปรโมช่ันอะไรกใ็ หบ้ อกอยา่ งชัดเจน ไมอ่ ้อมคอ้ มใดๆ ทง้ั สน้ิ ซึง่ การบอกถึงวตั ถุประสงค์อยา่ งชดั เจนนี้ จะทาให้ลกู คา้ ทราบทันทวี า่ แมค่ า้ ต้องการสอ่ื อะไร และถา้ อยากซื้ออยากได้โปรโมชัน่ จะตอ้ งทาอย่างไร ด้วยความชดั เจนน่ีเองท่ีจะทาใหล้ ูกคา้ เกิดความ ประทบั ใจและอยากซ้ือสินค้ากบั ทางร้านมากขนึ้ 10. อา้ งอิงถงึ ผู้ทเ่ี คยใชบ้ ริการแล้ว การอา้ งองิ ถงึ ผู้ทเ่ี คยใช้บรกิ ารแลว้ จะชว่ ยสรา้ งความมัน่ ใจใหก้ บั ลูกค้าไดด้ มี าก อาจมีการอ้างถึงและแคป ภาพรวี วิ จากลูกคา้ มาลงบนหน้าเว็บ หรือเปิดให้ลูกค้าเข้ามารีวิวไดแ้ บบอิสระ ด้วยการเล่าประสบการณ์การใช้ สินคา้ ของทางรา้ นว่าดีแคไ่ หน นอกจากนหี้ ากเปน็ การอา้ งอิงถึงผ้ใู ชท้ เี่ ปน็ ดารากจ็ ะย่ิงดึงดูดลูกค้าใหเ้ กิดความสนใจ มากข้นึ 11. แสดงถึงรางวัลทเี่ คยได้รับ หากร้านเคยได้รบั รางวัลมาก่อน ไมว่ า่ จะเป็นรางวัลรา้ นดีเดน่ หรอื รางวัลอะไรท่ีสามารถแสดงถึงความ น่าเชื่อถอื ได้ ก็ใหน้ ามาแสดงบนหนา้ เวบ็ เพราะรางวลั เหล่านจ้ี ะบอกได้ถึงการมตี ัวตนของร้าน และทาใหร้ ้านมี ความน่าเช่ือถือมากยิง่ ข้นึ นอกจากนี้หากมีข่าวท่ีเกย่ี วกับธุรกจิ ของตนในด้านดี ก็แนะนาใหน้ ามาแสดงไว้ท่เี วบ็ ไซต์ เช่นกนั การสร้างความเช่ือถือให้กับเว็บไซต์มีมากมายหลายวิธี โดยทง้ั หมดน้ีก็เป็นเพยี งแคบ่ างส่วนเทา่ นั้น ท่ีจะทา ให้ลกู คา้ และผทู้ ี่เข้าชมเว็บเกิดความสนใจและตัดสินใจซือ้ สนิ คา้ สงิ่ สาคัญทจี่ ะขาดไม่ได้เลย กค็ ือช่องทางการติดต่อ และข้อมูลของผู้ขายอย่างละเอียด เพราะแสดงได้ถึงความมีตวั ตนของเจ้าของร้าน การออกแบบเว็บไซต์ จะต้องให้ ความใสใ่ จในหลายๆ องค์ประกอบ โดยเฉพาะโครงสรา้ งของเว็บไซต์ เพื่อใหเ้ ว็บดมู ีความนา่ เชอื่ ถือ และสามารถ ดึงดูดความสนใจจากผู้ท่ีพบเหน็ ได้ ดงั นนั้ สาหรบั คนที่ตอ้ งการทาเวบ็ ไซต์ จงึ ควรใหค้ วามใส่ใจกับการออกแบบเปน็ หลัก โดยเฉพะการออกแบบให้ตรงกับความสนใจของกลุ่มเป้าหมายหลักท่ตี ้องการ อา้ งอิง : https://www.1belief.com/article/website-design/