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

หน่วยท่ี 2 หลกั การออกแบบเว็บไซต์ในงานธรุ กิจ หัวข้อ (Topics) 2.1 ความหมายและความสาคัญของการออกแบบเว็บไซต์ 2.2 การออกแบบโครงสร้างเว็บไซต์ 2.3 สว่ นประกอบของเว็บเพจ 2.4 การใช้สีสาหรับเวบ็ ไซต์ 2.5 การใชต้ ัวอกั ษรสาหรับเวบ็ ไซต์ 2.6 การใช้รปู ภาพสาหรับเว็บไซต์ 2.7 หลักการออกแบบเว็บไซต์ในงานธรุ กจิ แนวคิด (Main Idea) กา ร พัฒ น าเ ว็ บไซ ต์ใ น งา น ธุร กิ จใ ห้ ปร ะสบ ผ ลส า เร็ จ จะต้ อง มี กา ร ศึก ษ าข้ อมูล พ้ื นฐ า น เพื่อให้สามารถออกแบบและพัฒนาเว็บไซต์ในงานธุรกิจได้อย่างเหมาะสมในหน่วยนี้ประกอบไปด้วย เนื้อหาที่จาเป็นต้องเรียนรู้ได้แก่ ความหมายและความสาคัญของการออกแบบเว็บไซต์ การออกแบบ โครงสร้างเว็บไซต์ สว่ นประกอบของเว็บเพจ การใช้สีสาหรบั เว็บไซต์ การใชต้ วั อักษรสาหรับเว็บไซต์ การใชร้ ปู ภาพสาหรบั เวบ็ ไซตแ์ ละหลักการออกแบบเว็บไซต์ในงานธรุ กิจ สมรรถนะยอ่ ย (Element of Competency) 1. แสดงความรู้เกย่ี วกบั ความหมายและความสาคัญของการออกแบบเว็บไซต์ 2. แสดงความร้เู ก่ยี วกบั โครงสร้างเวบ็ ไซต์และสว่ นประกอบของเว็บเพจ 3. แสดงความรูเ้ กี่ยวกับการใชส้ ี การใช้ตัวอกั ษร การใชร้ ปู ภาพสาหรับเวบ็ ไซต์ 4. แสดงความรเู้ กี่ยวกับหลักการออกแบบเวบ็ ไซตใ์ นงานธุรกิจ จุดประสงค์เชงิ พฤตกิ รรม (Behavioral Objectives ) 1. อธิบายความหมายและความสาคัญของการออกแบบเว็บไซต์ 2. มคี วามรู้เกี่ยวกบั การออกแบบโครงสรา้ งเว็บไซต์ 3. บอกส่วนประกอบของเว็บเพจ 4. มีความรเู้ ก่ยี วกับการใช้สีสาหรบั เว็บไซต์ 5. มีความรเู้ ก่ยี วกับการใชต้ ัวอักษรสาหรับเวบ็ ไซต์ 6. มีความรู้เกยี่ วกบั การใช้รปู ภาพสาหรบั เว็บไซต์ 7. บอกหลักการออกแบบเวบ็ ไซต์ในงานธรุ กจิ

36 2.1 ความหมายและความสาคัญของการออกแบบเว็บไซต์ การออกแบบเว็บไซต์ หมายถึง การถ่ายทอดรูปแบบของเว็บไซต์จากความคิดออกมาเป็น ผลงาน ทาให้ผู้อ่ืนสามารถมองเห็น รับรู้ หรือสัมผัสได้ เพื่อให้มีความเข้าใจในผลงานที่ออกมาจาก ความคิดร่วมกัน รูปแบบของเว็บไซต์ที่คิดออกมาอาจเป็นสิ่งที่เป็นไปได้จริง หรือเป็นเพียง นามธรรมก็ได้ ผู้ที่ทาหน้าที่ออกแบบเว็บไซต์จะเรียกว่า นักออกแบบและพัฒนาเว็บไซต์ (Webmaster) ซึ่งหมายถึงคนที่ทางานวิชาชีพในสาขาการออกแบบและพัฒนาเว็บไซต์โดยเฉพาะ การออกแบบเว็บไซต์ มีความสาคัญต่อการพัฒนาเว็บไซต์มากเพราะจะทาให้ผู้พัฒนาเว็บไซต์ สามารถพัฒนางานได้อย่างถูกต้อง รวดเร็ว ตรงตามวัตถุประสงค์ขององค์กร ซึ่งในการออกแบบ เว็บไซต์นั้น องค์ประกอบต่อไปน้ีถือเป็นพ้ืนฐานที่สาคัญในการออกแบบพัฒนาเว็บไซต์ได้ อย่างมีประสทิ ธิภาพ 1) ความเรียบง่าย (Simplicity) คือ การใช้รูปแบบท่ีเรียบง่าย ไม่ซับซ้อน และใช้งานได้ อย่างสะดวกรวดเร็ว แม้ว่าจะมีข้อมูลในเว็บไซต์อยู่มากมายซ่ึงจะไม่ออกแบบโดยใช้ภาพกราฟิกหรือ ตัวอักษรท่ีเคลอ่ื นไหว ตลอดเวลา ซ่งึ จะทาให้รบกวนสายตาและสรา้ งความราคาญต่อผู้ใช้ นอกจากน้ัน ยังใช้ชนิดและสีของตัวอักษรไม่มากจนเกินไปให้วุ่นวาย ในส่วนเนื้อหาก็ใช้ตัวอักษรสีดาบนพ้ืนหลัง สีขาวตามปกติ และไม่มีการเปลี่ยนแปลงสีของลิงก์ให้สับสน ดังนั้นหลักที่สาคัญของความเรียบง่าย คือการสอ่ื สารเนอ้ื หาถงึ ผใู้ ชโ้ ดยจากดั องค์ประกอบเสริมที่เก่ียวข้องกับการนาเสนอให้เหลือเฉพาะส่ิงท่ี จาเปน็ เทา่ น้นั 2) ความสม่าเสมอ (Consistency) คือ การสร้างความสม่าเสมอให้กับเว็บไซต์ได้โดยใช้ รูปแบบเดียวกันตลอดทงั้ เวบ็ ไซต์ เนอ่ื งจากผู้ใชจ้ ะรู้สึกว่าเป็นเสมือนสถานท่ีจริง ถ้าลักษณะของแต่ละ หน้าในเว็บไซต์เดียวกันนั้นแตกต่างกันมากผู้ใช้ก็อาจเกิดความสับสน และไม่แน่ใจว่ากาลังอยู่ในเว็บ เดิมหรือไม่ ดังน้ันรูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสีที่ควรใช้ควรจะมีความ คล้ายคลงึ ตลอดทง้ั เว็บไซต์ 3) ความเป็นเอกลักษณะ (Identity) คือ การออกแบบต้องคานึงถึงลักษณะขององค์กร เนื่องจากรูปแบบของเว็บไซต์ท่ีสามารถสะท้อน ถึงเอกลักษณ์และลักษณะขององค์กรนั้นได้ เช่น เว็บไซต์ของธนาคารจึงไม่ควรจะดูเหมือนกับร้านขายสินค้า การใช้ชุดสี ชนิดอักษร รูปภาพและ ภาพกราฟิกจะมีผลต่อรูปแบบของเว็บไซต์อย่างมาก ผู้ออกแบบจึงต้องเลือกใช้องค์ประกอบเหล่าน้ี อย่างเหมาะสม 4) เน้ือหาท่ีมีประโยชน์ (Useful content) คือ เน้ือหาถือเป็นสิ่งท่ีสาคัญท่ีสุดในเว็บไซต์ ดังน้ันในเว็บไซต์ควรจัดเตรียมเนื้อหาและข้อมูลท่ีผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ โดยมีการ ปรับปรงุ และเพ่มิ เตมิ ใหท้ นั ตอ่ เหตุการณ์อย่เู สมอ 5) ระบบนาทางท่ีใช้งานง่าย (User Friendly Navigation) คือ การออกแบบระบบนาทาง ให้ผู้ใช้เข้าใจได้ง่ายและใช้งานสะดวก โดยใช้กราฟิกท่ีส่ือความหมายร่วมกับอธิบายที่ชัดเจนรวมทั้ง มรี ปู แบบและลาดับของรายการที่สมา่ เสมอตลอดทง้ั เว็บไซต์ 6) มีลักษณะที่น่าสนใจ (Visual Appeal) หน้าตาของเว็บไซต์จะมีความสัมพันธ์กับ คุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิกท่ีจะต้องสมบูรณ์ไม่มีร่องรอยของความ

37 เสียหายเป็นจุดด่างหรือมีขอบเป็นขั้นบันไดให้เห็น การใช้ชนิดของตัวอักษรที่อ่านง่าย สบายตา และ การใช้โทนสที ่เี ขา้ กนั อย่างสวยงาม เปน็ ตน้ 7) การใช้งานอย่างไม่จากัด (Compatibility) คือ การออกแบบเว็บไซต์ให้ผู้ใช้ส่วนใหญ่ เข้าถึงได้มากที่สุดโดยไม่มีการบังคับให้ผู้ใช้ต้องติดต้ังโปรแกรมใด ๆ เพ่ิมหรือต้องเลือกเบราวเซอร์ ชนิดใดชนิดหน่ึงจึงจะสามารถเข้าถึงเนื้อหาได้สามารถแสดงผลได้ในทุกระบบปฏิบัติการและที่ ความ ละเอียดหน้าจอต่าง ๆ กันอย่างไม่มีปัญหาส่ิงเหล่านี้จะย่ิงมีความสาคัญมากข้ึน สาหรับเว็บที่มี ผ้ใู ชบ้ รกิ ารจานวนมากหรอื มกี ลมุ่ เป้าหมายที่หลากหลาย 8) คุณภาพในการออกแบบ (Design Stability) คือ การที่ต้องออกแบบและเรียบเรียง เน้ือหาอยา่ งรอบคอบ เวบ็ ที่ทาข้ึนอย่างไม่มีการออกแบบจะทาให้เว็บไซต์ที่ออกมา ไม่มีมาตรฐานและ การจัดระบบข้อมูลน้ัน เมื่อมีข้อมูลเพิ่มข้ึนเรื่อย ๆ ก็จะเกิดปัญหาและไม่สามารถสร้างความน่าเช่ือถือ จากผูใ้ ชไ้ ด้ 9) ระบบการใชง้ านที่ถูกต้อง (Functional Stability) การทางานต่าง ๆ ในเว็บไซต์จะต้อง มีความแน่นอนและทาหน้าที่ได้อย่างถูกต้อง เช่น ลิงก์ต่าง ๆ ที่มีอยู่น้ันจะต้องเช่ือมโยงไปยังหน้าที่มี ปรากฏอยูจ่ ริงและถกู ต้อง 2.2 การออกแบบโครงสร้างเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ คือ การออกแบบ วางแผน การจัดหมวดหมู่ลาดับของเน้ือหาของ เว็บไซต์ท้ังหมดและจัดทาเป็นแผนผังโครงสร้างเว็บไซต์ เพ่ือให้ผู้พัฒนาเว็บไซต์สามารถพัฒนาเว็บไซต์ได้ อย่างถูกต้องรวดเร็ว การออกแบบโครงสร้างเว็บไซต์ท่ีดีจะช่วยให้ผู้ใช้ไม่สับสนและค้นหาข้อมูลที่ต้องการ ไดอ้ ย่างรวดเร็ว หลกั การออกแบบโครงสร้างเว็บไซต์ มีดังน้ี 1) กาหนดวตั ถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์ทาเพ่ืออะไร 2) ศึกษาคุณลักษณะของผู้ใช้ว่าต้องการกลุ่มเป้าหมายใดในการเข้าใช้งานเว็บไซต์ 3) วางแผนเก่ียวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัด โครงสร้างหรือจัดระเบียบข้อมูลที่ชัดเจน การท่ีเน้ือหามีความต่อเนื่องไปไม่ส้ินสุดหรือกระจายมากเกินไป อาจทาให้เกิดความสับสนต่อผู้ใช้ได้ ฉะนั้นจึงควรออกแบบให้มีลักษณะท่ีชัดเจนแยกย่ อยออก เป็นส่วนต่าง ๆ จัดหมวดหมู่ให้สัมพันธ์กัน รวมท้ังอาจมีการแสดงให้ผู้ใช้เห็นแผนที่โครงสร้างเพ่ือป้องกัน ความสบั สน 4) กาหนดรายละเอียดให้กับโครงสร้างเว็บไซต์ ซ่ึงพิจารณาจากวัตถุประสงค์ท่ีต้ังไว้ โดยต้ัง เกณฑ์ในการใช้ เช่น ผใู้ ช้ควรทาอะไรบ้าง จานวนหน้าควรมีเท่าใด มกี ารเชอื่ มโยง มากน้อยเพียงใด การออกแบบโครงสร้างเว็บไซต์ถือว่าเป็นข้ันตอนที่สาคัญ ที่สามารถสร้างความสาเร็จให้กับ ผู้ที่ทาหน้าที่ในการออกแบบและพัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบ ของข้อมูลที่ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ให้สัมพันธ์กันและเป็นมาตรฐานเดียวกัน จะช่วย ใหน้ ่าใชง้ านและง่ายต่อการเข้าอา่ นเน้ือหาของผู้ใชเ้ วบ็ ไซต์

38 Home รา้ นขายโทรศพั ทม์ ือถอื สนิ ค้า ราคามือถอื ซอ่ มมอื ถอื ตดิ ตอ่ เรา สนิ คา้ ใหม่ FAQ ประวัติ สินค้าขายดี Manual สถานทตี่ ้งั อปุ กรณเ์ สรมิ รูปท่ี 2.1 ตวั อยา่ งออกแบบโครงสร้างเว็บไซต์ร้านขายโทรศัพท์มือถือ 2.3 ส่วนประกอบของเว็บเพจ สว่ นประกอบของหน้าเว็บเพจแบง่ ออกเปน็ 3 ส่วน คือ ส่วนหัว สว่ นเนือ้ หา สว่ นทา้ ย รปู ท่ี 2.2 ส่วนประกอบของเว็บเพจ 1) ส่วนหัวของหน้า (Page Header) เป็นส่วนท่ีถูกออกแบบมาให้อยู่ด้านบนสุดของหน้า เว็บเพจ ถือเป็นส่วนที่สาคัญเพราะเป็นส่วนท่ีผู้ออกแบบจะใส่ข้อมูลช่ือหน่วยงาน องค์กร เจ้าของเว็บไซต์ ในส่วนน้ีจะเน้นการออกแบบเพื่อดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์ มักใส่ภาพกราฟิกเพ่ือสร้าง ความสวยงามและประทับใจสว่ นใหญป่ ระกอบดว้ ยส่วนต่าง ๆ ต่อไปนี้

39 - โลโก้ (Logo) เป็นเคร่ืองหมายสัญลักษณ์ที่แสดงถึงหน่วยงาน องค์กรหรือช่ือเจ้าของ เว็บไซต์ ถือเป็นส่ิงสาคัญที่ช่วยให้ผู้เข้าชมเว็บไซต์สามารถจดจาเว็บไซต์ได้ นอกจากนี้แล้วโลโก้ยังช่วย ให้เว็บไซตด์ ูมคี วามเป็นเอกลักษณ์เฉพาะทีแ่ สดงถึงเจ้าของหน่วยงานหรือเจา้ ของเวบ็ ไซต์ได้ - ช่ือเวบ็ ไซต์ เป็นสิ่งสาคญั อีกส่งิ หน่ึง ซ่ึงจะแสดงความเป็นเอกลักษณ์ เพ่ือให้เป็นท่ีรู้จัก และจดจา การเลือกใช้ชื่อเว็บไซต์ควรต้ังให้ส้ันกระชับและได้ใจความ ใช้หลักอ่านง่ายพูดง่ายจาง่ายและ สะกดง่าย อ่านเข้าใจ หรือมีความหมาย ซ่ึงจะช่วยให้ผู้ เข้าชมเว็บไซต์รู้ว่าเว็บไซต์นี้ทาอะไร - เมนูหรือลิงก์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เน้ือหาหน้าอ่ืน ๆ ของเว็บไซต์ โดยเว็บไซต์ท่ัว ๆ ไปจะมีเมนูหรือลิงก์ในส่วนต่าง ๆ ของเว็บไซต์ด้วยเพ่ือช่วยให้ผู้เข้าชมเว็บไซต์สามารถ ใช้งานเว็บไซต์ได้ง่ายขึ้น 2) ส่วนเน้ือหา (Page Body) เป็นส่วนท่ีอยู่ตอนกลางของหน้าเว็บ ใช้แสดงข้อมูลเน้ือหาของ เว็บไซต์ ซ่ึงประกอบด้วย ข้อความ ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่น ๆ และอาจมีเมนูหลัก หรอื เมนูเฉพาะกลุ่มวางอยู่ในส่วนน้ีด้วย สาหรับส่วนเนื้อหาควรแสดงใจความสาคัญท่ีเป็นหัวเรื่องไว้บนสุด ข้อมูลมคี วามกระชบั ใช้รูปแบบตัวอกั ษรที่อ่านง่าย จัด Layout ให้เหมาะสมและเปน็ ระเบียบ 3) ส่วนท้ายของหน้า (Page Footer) เป็นส่วนท่ีอยู่ด้านล่างสุดของหน้าเว็บ มักวางระบบนา ทางท่ีเป็นลิงก์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพ่ิมเติมเก่ียวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของ เว็บไซต์ ข้อความแสดงลิขสิทธ์ิ วิธีการติดต่อกับผู้ดูแลเว็บไซต์ คาแนะนาการใช้เว็บไซต์ เป็นต้น โดยปกติ ส่วนหัวและส่วนท้ายมักแสดงเหมือนกนั ในทุกหน้าของเว็บเพจ 2.4 การใชส้ สี าหรบั เวบ็ ไซต์ การใช้สีสาหรับเว็บไซต์ เป็นส่ิงที่มีความสาคัญมากเพราะสีสันเป็นสิ่งท่ีดึงดูดความสนใจ ของผู้เข้าชมเว็บไซต์ ดังน้ันในการสร้างเว็บไซต์ สีเป็นส่ิงที่กาหนดความรู้สึก เราสามารถใช้สีตกแต่ง ตวั อักษร รปู ภาพ ลงิ ก์ และรูปภาพท้ังหมด การเลือกใช้สีท่ีเหมาะสมจะช่วยในการส่ือความหมายของ เน้ือหาได้อย่างถูกต้อง เพิ่มความสวยงามให้กับหน้าเว็บไซต์ หากใช้สีท่ีไม่เหมาะสมอาจทาให้ยากต่อ การสื่อสารความหมายอาจผิดจากวัตถุประสงค์ และดึงดูดความสนใจของผู้เข้าชมเว็บไซต์ได้น้อยลง สงิ่ ทีต่ อ้ งคานึงถงึ เก่ยี วกบั การใช้เลอื กใชส้ สี าหรบั เว็บไซตม์ ดี ังน้ี 1) การใช้สีอย่างสม่าเสมอ การออกแบบเว็บไซต์โดยใช้สีอย่างสม่าเสมอจะสามารถสร้าง ขอบเขตของเว็บไซต์ที่สัมผัสได้ด้วยตา เม่ือผู้ใช้คลิกเข้าไปในแต่ละหน้าของเว็บจะรู้สึกเหมือนอยู่ ภายในเว็บไซตเ์ ดยี วกัน 2) ใช้สีอย่างเหมาะสม เว็บไซต์เปรียบเสมือนสถานท่ีหน่ึง ๆ ท่ีมีลักษณะเฉพาะของตนเอง เช่น ธนาคาร โรงเรียน หรือร้านค้าต่าง ๆ ดังนั้นการเลือกใช้สีท่ีเหมาะสมกับลักษณะของเว็บไซต์ จะชว่ ยส่งเสรมิ เปา้ หมายและภาพพจนข์ องเว็บไซตไ์ ด้ ควรคานึงถงึ ปัจจยั หลาย ๆ ให้เหมาะสมกับสีใน เว็บไซต์ เชน่ วัฒนธรรม แฟช่นั อายแุ ละประสบการณ์ของกล่มุ เป้าหมายผูเ้ ข้าชมเว็บไซต์ 3) ใช้สีเพ่ือสื่อความหมาย สีแต่ละสีสื่อความหมายและความรู้สึกต่างกัน สีหน่ึง ๆ อาจสื่อ ความหมายทางบวกหรือทางลบก็ได้ ขึ้นอยู่กับสถานการณ์ ตัวอย่างเช่น สีดาให้ความรู้สึกโศกเศร้าใน งานศพ แต่กลับแสดงถงึ ความเป็นมืออาชพี ในการแสดงผลงานของศิลปิน ดังน้ันสีที่ให้ความหมายและ ความรู้สึกตรงกับเน้ือหา จะช่วยสนับสนุนให้ผู้ใช้ได้รับข้อมูลที่ถูกต้องและครบถ้วน การใช้สีในงาน ออกแบบต่าง ๆ นน้ั จะต้องเข้าใจถึงหลักจิตวิทยา ความหมายและสัญลักษณ์ของสี แต่คนทุกคนไม่ได้

40 มองความหมายของสีได้เหมือนกัน ความหมายของสีในมุมแต่ละคนน้ันมักจะได้รับอิทธิพลมาจาก วัฒนธรรม สังคม ท่ีแตกต่างกัน โดยสีแต่ละสีน้ันมีความหมายและสามารถเชื่อมโยงกับความรู้สึก ของผูค้ นในงานออกแบบได้ดังน้ี - สีแดง ให้ความรู้สึกที่หลากหลายมากทสี่ ดุ เพราะเปน็ สที ีใ่ กลเ้ คียงไฟ สามารถเป็นตัวแทน ของความอบอุ่น หรือ อันตรายก็ได้ในเวลาเดียวกัน แต่ในอีกแง่มุมหน่ึงสีแดงก็บ่งบอกถึงอารมณ์ ความรู้สึกท่ีมีพลังมีชีวิตชีวา ร้อนแรง และนอกเหนือจากนั้นก็ยังมีความหมายไปในทางลบ คือ การใชค้ วามรนุ แรง รูปท่ี 2.3 เว็บเพจที่เลือกใช้สีแดง (ที่มา : https://www.mcdonalds.co.th/) - สีส้ม สอื่ ถงึ ความอบอุ่น ซงึ่ ความหมายในแง่อ่นื ๆ คือ ความคดิ สรา้ งสรรค์ ความเป็นมติ ร และอารมณค์ วามรสู้ กึ ที่ทาให้ผคู้ นท่ีมองเห็นแล้วรสู้ กึ สบายตาสบายใจ รูปท่ี 2.4 เว็บเพจท่ีเลือกใชส้ สี ม้ (ทม่ี า : http://www.sisaket.go.th/index1.php)

41 - สีเหลือง สื่อถึง แสงแดด ความรู้สึกทางอารมณ์คือ ความสุข ความปล้ืมปีติ ความสดใส ร่าเริง และความสดใหม่ ในแง่ของงานออกแบบสีเหลืองจะเป็นสีท่ีดึงดูดความสนใจได้ดี มากให้ความรู้สึกทเ่ี ป็นมติ รและความสนกุ รูปท่ี 2.5 เวบ็ เพจที่เลือกใชส้ เี หลอื ง (ท่ีมา : https://www.nokair.com/) - สีเขียว บ่งบอกถึงธรรมชาติ อีกความหมายคือ การเจริญเติบโต ความสดใหม่ มีคุณภาพ และส่ิงท่ีดีหรือถ้าใช้ในสินค้าก็จะสามารถบ่งบอกได้ว่าสินค้าชนิดนี้มาจากธรรมชาติ นอกจากน้ี ยังหมายถึงความม่ังค่ังเกี่ยวกับการเงินและความมั่นคง สีเขียวท่ีใช้ในงานออกแบบส่วนมากจะเป็น โลโก้ธนาคารและสนิ คา้ ออแกนิค สนิ คา้ เพอ่ื สขุ ภาพ หรือธรุ กิจทางการเงิน รูปท่ี 2.6 เว็บเพจท่ีเลือกใชส้ เี ขียว (ท่ีมา : https://www.kasikornbank.com)

42 - สฟี ้า บ่งบอกถึงความสงบเงียบและน่าเชื่อถือ สะอาด และทาให้มีพลังมากขึ้นในแง่ของการ ออกแบบ สีฟ้า เป็นสีท่ีใช้กันอย่างแพร่หลายมากท่ีสุด เพราะความหมายทางการสื่อสารหมายถึง ความมั่นคง ความปลอดภัย และ ภาพลกั ษณ์ท่ดี ูเปน็ มืออาชพี รูปท่ี 2.7 เว็บเพจท่ีเลือกใช้สฟี ้า (ท่ีมา : https://www.unicef.or.th/supportus/th/) - สีม่วง บ่งบอกถึงความความหรูหราและม่ังค่ังมีเกียรติ บางประเทศจะใช้สีม่วงเป็นส่วนที่ เก่ียวข้องกับพระบรมวงศานุวงศ์ นอกจากนี้ยังมีความหมายเก่ียวกับความเช่ือทางจิตวิญญาณ ความลึกลับและศาสนา สีม่วงในการออกแบบส่วนมากสีม่วงเกี่ยวกับเรื่อง แฟชั่น ผู้หญิง และสินค้า ทีต่ อ้ งการความหรูหรานา่ เช่อื ถือ รูปที่ 2.8 เว็บเพจที่เลือกใช้สมี ว่ ง (ท่มี า : http://www.scb.co.th/th/home)

43 - สดี า บง่ บอกถึงความทนั สมัย หรูหรา และความซับซ้อน ในทางกลับกันความหมายในทาง ลบก็คงหนีไม่พ้น ความตาย ความชั่วร้าย หรือความลึกลับ แต่ท่ีแปลกก็คือในแง่ของการออกแบบ มตี ราสินคา้ มากมายทใ่ี ช้สดี ากนั อย่างแพรห่ ลาย อีกแง่มุมหน่ึงก็คือความมั่นคงความเป็นกลางและเป็น สีทีส่ ามารถส่อื สารได้อยา่ งง่าย รปู ที่ 2.9 เวบ็ เพจท่ีเลือกใชด้ า (ทม่ี า : https://www.apple.com/th/mac/) - สีขาว บ่งบอกถึงความบริสุทธิ์ ไร้เดียงสา ความสะอาด และความเรียบง่าย ปัจจุบันสีขาว ถูกมาใช้ในงานออกแบบสไตล์ Minimal อย่างแพร่หลายเพราะสามารถสื่อสารถึงความเรียบง่ายได้ดี หรือร้านค้าทท่ี าให้บริเวณร้านเปน็ สีขาวเพื่อให้รู้สกึ ถงึ ความโปรง่ และความสะอาด รูปท่ี 2.10 เว็บเพจที่เลือกใช้ขาว (ที่มา : http://www.11street.co.th)

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

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

46 พนื้ หลังสขี าว หรือ การกาหนดสลี งิ ก์ใหก้ บั ตัวอกั ษรจะทาให้การสร้างเว็บไซต์มีสีสันน่าสนใจมากยิ่งขึ้น ถ้า หากเป็นเวบ็ ไซตท์ ี่มเี นอื้ หาทางการ ควรให้สีที่เหมาะสมกับการอ่าน เช่น การใช้ตัวอักษรสีดา พื้นหลังสีขาว หรือการใชต้ วั อักษรสีเข้มพื้นหลังสีอ่อนเพื่อใหเ้ ห็นตวั อักษรได้อย่างชัดเจน 6) การเลือกชนิดตัวอักษรแบบมาตรฐาน (Default Font) การเลือกใช้ตัวอักษรที่มาพร้อมกับ ระบบปฏิบัติการจะทาให้ไม่มีปัญหาเรื่องการแสดงผลของตัวอักษรบนเว็บเบราวเซอร์ โดยผู้ออกแบบ สามารถกาหนดชนิดของตัวอักษรท่ีจะใช้กับเนื้อหาแต่ละส่วนได้ โดยระบุชนิดตัวอักษรและควรเลือก ตัวอกั ษรทม่ี ใี นระบบปฏิบัติการท่ัว ๆ ไปเพื่อหลีกเลี่ยงปัญหาการแสดงตัวอักษรมาตรฐานที่ไม่ต้องการและ เพ่ิมโอกาสในการแสดงตวั อักษรใหต้ รงกับความต้องการ ตวั อยา่ งตวั อักษรแบบมาตรฐาน มีดงั นี้ ชือ่ แบบอักษร (Font) รปู แบบแสดงผลตัวอกั ษร MS Sans Serif MS Sans Serif CordiaUPC CordiaUPC AngsanaUPC AngsanaUPC EucrosiaUPC LilyUPC EucrosiaUPC TH SarabunPSK LilyUPC TH SarabunPSK 2.6 การใชร้ ปู ภาพสาหรับเว็บไซต์ การใช้รปู ภาพสาหรบั เวบ็ ไซต์โดยข้อมลู ในรูปแบบของรปู ภาพเปน็ ทน่ี ิยมในปัจจุบันมากเพราะ รูปภาพทาให้เว็บไซต์มีความสวยงามและดึงดูดความสนใจจากผู้ใช้งาน ดังน้ันการเลือกใช้รูปภาพ สาหรบั เวบ็ ไซต์ ควรเลอื กใชอ้ ยา่ งเหมาะสมตามความจาเปน็ เพราะไฟล์รูปภาพกราฟิกอาจมีขนาดใหญ่ ทาให้ต้องใช้เวลาในการโหลดรูปภาพนานอาจส่งผลให้ผู้ใช้เกิดความเบื่อหน่ายในการรอการแสดงผล ของรูปภาพน้ันได้ ดังนั้นไฟล์ภาพท่ีนิยมนามาใช้ในการพัฒนาเว็บไซต์ได้แก่ .JPEG ,.PNG , GIF โดย ไฟล์ภาพเหลา่ นีม้ ีคณุ สมบัติดงั นี้ 1) JPEG ย่อมาจาก Joint Photographic Experts Group ไฟล์สกุล.JPEG เป็นรูปแบบของ ไฟล์ภาพถา่ ยท่ีมีความละเอียดหรอื คุณภาพสูง สามารถเรยี กดไู ด้ทุกเว็บเบราวเซอร์สามารถแสดงผลได้ ถึง 16 ล้านสี จึงเหมาะกับภาพท่ีเป็นภาพถ่ายท่ีมีการเก็บข้อมูลสีหลายสี หรือภาพกราฟิกท่ีมีความ ซบั ซอ้ น แตข่ นาดไฟลภ์ าพคอ่ นข้างใหญท่ าใหก้ ารแสดงผลบนเว็บช้า ไม่สามารถทาพื้นหลงั โปร่งแสงได้ รูปท่ี 2.13 ไฟล์สกลุ .JPEG

47 2) GIF ย่อมาจาก Graphic Interchange Format ไฟล์สกุล.GIFเป็นรูปแบบไฟล์ที่มีขนาด เล็กและมีคุณภาพต่าสามารถแสดงสีสูงสุดที่ 256 สี ทาภาพเคลื่อนไหวได้สามารถเปิดได้ทุกเว็บ เบราวเซอร์ รูปภาพมีคุณสมบัติ Transparent หรือสามารถทาพืน้ หลังโปร่งแสงได้ รูปท่ี 2.14 ไฟล์สกุล .GIF 3) PNG ย่อมาจาก Portable Network Graphics ไฟล์สกุล.PNG เป็นรูปแบบไฟล์ภาพ ท่ีนิยมนามาใช้ในการปรับแต่งภาพและนามาประยุกต์ใช้ในการสร้างเว็บไซต์ต่าง ๆ เพราะมีขนาด ไม่ใหญ่เกินไปและสามารถทาพ้ืนหลังโปร่งแสงได้แต่คุณสมบัติ Transparent ของ .PNG จะไม่แสดงผลกับ Internet Explorer 6 หรอื ต่ากวา่ รูปท่ี 2.15 ไฟล์สกุล .PNG 2.7 หลกั การออกแบบเว็บไซต์ในงานธรุ กิจ การออกแบบเว็บไซต์ในงานธุรกิจไม่ได้หมายถึงลักษณะหน้าตาของเว็บไซต์เพียงอย่างเดียว จะต้องพิจารณาข้อมูลอื่น ๆ ที่เก่ียวข้อง เพื่อให้เกิดความสะดวกและพึงพอใจแก่ผู้ใช้ในการใช้งาน เว็บไซต์นั้น ๆ การออกแบบเว็บไซต์ในงานธุรกิจ มีส่วนสาคัญในการสร้างความประทับใจให้กับ ผู้ใช้บริการ และทาให้อยากกลับเข้ามาใช้อีกในอนาคตนอกจากจะต้องพัฒนาเว็บ ไซต์ให้ดีและ มีประโยชน์แล้วควรจะออกแบบเว็บอย่างมีคุณภาพเพื่อดึงดูดผู้ใช้กลับเข้ามาใช้งานเว็บไซต์อยู่เสมอ การออกแบบเว็บไซต์ที่ดี ปัจจัยสาคัญทผี่ ู้ใชท้ ุกคนต้องการจากเว็บไซต์ คือ - มีเน้ือหาเปน็ ประโยชน์ ตรงกับท่ีผู้ใชต้ อ้ งการ - มีการปรบั ปรงุ เพ่ิมเติมเนอื้ หาและพัฒนาเว็บไซต์อยเู่ สมอ - ใช้เวลาในการดาวนโ์ หลดนอ้ ย แสดงผลเร็ว - การใช้งานท่สี ะดวก เข้าใจง่าย สาหรับการปรับปรุงเนื้อหา เว็บไซต์ในงานธุรกิจทั่วไปอาจจะปรับปรุงเน้ือหาตามเหตุการณ์ ความเคล่ือนไหวท่ีเกิดข้ึนโดยไม่มีกาหนดแน่นนอน เช่น เมื่อมีข่าวใหม่ เปิดตัวสินค้าใหม่หรือมีเน้ือหา เปลย่ี นใหมต่ ามความเหมาะสม สิ่งสาคญั ท่ีจะตอ้ งพิจารณาในการออกแบบเว็บไซต์ในงานธุรกิจ มดี ังนี้ 1) ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์สาหรับเว็บไซต์ขององค์กรธุรกิจ ท่ีมีเป้าหมายเพื่อขายสินค้าหรือบริการน้ัน ยิ่งจาเป็นต้องให้ความสาคัญกับการออกแบบเว็บไซต์

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

49 รปู ที่ 2.16 ตวั อยา่ งเว็บไซต์ทางธรุ กิจ (ทม่ี า : http://www.lazada.co.th)