WEB DESIGN

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

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

คือ เว็บไซต์ที่จัดทำขึ้นเพื่อขายสินค้า บริการหรือทำธุรกรรมต่าง ๆ เช่น ร้านค้าออนไลน์ (e-shop) ตลาดกลางออนไลน์ (e-marketplace) และการประมูลออนไลน์ (e-auction)

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

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

คือ เว็บไซต์ที่ทำหน้าที่เป็นศูนย์กลางรวบรวมเนื้อหาจากเว็บไซต์อื่น ๆ โดยจัดเนื้อหาแยกไว้เป็นหมวดหมู่เพื่อให้ผู้ชมเข้าถึงเนื้อหาเหล่านั้นได้ง่าย ไม่จำเป็นต้องเปิดหลายเว็บเพจในคราวเดียวกัน เว็บไซต์ท่าบางเว็บอาจมีเนื้อหาแบบทั่วไป เช่น Yahoo MSN และ AOL ในขณะที่บางแห่งอาจมีเนื้อหาที่เน้นเฉพาะทางอย่าง thaitravelcenter.com และ muaythai2000.com ที่เน้นเรื่องข้อมูลท่องเที่ยวทุกประเภทและศูนย์รวมความรู้เรื่องมวยไทย เว็บไซต์ท่าจึงเปรียบเสมือนประตูบานใหญ่เพื่อเข้าถึงข้อมูลที่ผู้ชมสนใจได้สะดวกและรวดเร็วขึ้น

คือ เว็บไซต์ที่ให้บริการค้นหาข้อมูลทุกประเภทบนอินเทอร์เน็ต โดยให้ผู้ใช้กรอกคำสำคัญหรือคีย์เวิร์ด (keyword) ลงในช่องค้นหา (search box) จากนั้น จะปรากฏข้อมูลที่ค้นหา ส่วนใหญ่มักแสดงอยู่ในรูปแบบของรายการ เพื่อให้คลิกลิงก์เชื่อมโยงไปยังข้อมูลนั้น ๆ ความแม่นยำขึ้นอยู่กับคำสำคัญที่กรอกและความละเอียดของการตั้งค่าค้นหา ตัวอย่างเช่น google.com bing.com เป็นต้น ปัจจุบันการประชาสัมพันธ์เว็บไซต์ให้คนรู้จักจำนวนมากและรวดเร็ว นิยมใช้วิธีการจ่ายเงินแก่เว็บไซต์เหล่านี้เพื่อให้ชื่อเว็บไซต์ขของตนอยู่อันดับต้น ๆ ของการแสดงผล

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

เว็บไซต์ประเภทนี้มักใช้การออกแบบที่ดูสนุกสนาน สดใส ทันสมัย ใช้กราฟิกที่มีจังหวะลีลาเร้าใจและใช้เทคโนโลยีอินเทอร์เน็ตขั้นสูง ดังนั้น อาจต้องอัปเดตเบราว์เซอร์ (browser) ให้เป็นรุ่นล่าสุด หรือติดตั้งโปรแกรมเสริมสำหรับการรับชมเนื้อหาข้อมูล ปัญหาที่เกิดขึ้นอยู่บ่อย ๆ คือการเปิดไฟล์ขนาดใหญ่อาจต้องใช้เวลารอนาน การอัปเดตข้อมูลต้องใช้บุคลากรจำนวนมากและมีต้นทุนสูง ตัวอย่างเว็บไซต์ในประเทศไทย เช่น sanook.com kapook.com เป็นต้น

สัดส่วน ปริมาณ ระหว่างข้อความและรูปภาพควรมีความเหมาะสม ไม่มากไป ไม่น้อยไป โดยพิจารณาจากเนื้อหาและลักษณะกลุ่มผู้ชมเป็นสำคัญ

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

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

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

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

ความละเอียดจอภาพที่นิยมใช้กันในปัจจุบันมี 2 ระดับคือ 1,024 x 768 พิกเซล และ 1,280 x 1,024 พิกเซล โดยแนวโน้มในอนาคตผู้ชมจะนิยมจอภาพที่มีความละเอียดมากขึ้นเรื่อย ๆ

การออกแบบเว็บเพจที่สามารถแสดงผลในทุกอุปกรณ์ที่แตกต่างกันได้อย่างเหมาะสมและพอดี เรียกว่าการทำเว็บไซต์ที่ตอบสนอง (responsive website)

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

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

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

• https://www.w3schools.com/w3css/default.asp

• https://www.w3schools.com/icons/fontawesome5_icons_users_people.asp

• https://www.w3schools.com/icons/icons_reference.asp

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

• โลโก้ (logo) จัดวางไว้ด้านซ้ายบนของเว็บเพจและทำเป็นลิงก์เชื่อมโยงไปหน้าโฮมเพจ 

• ช่องค้นหา (search box) จัดวางไว้ด้านขวาบนของเว็บเพจ

• ระบบนำทางหลัก (main navigation) มีลักษณะเป็นแท็บ หรือปุ่ม จัดวางตามแนวนอน ควรออกแบบให้มองเห็นและใช้งานง่าย ใช้สีสันสดใสและเปลี่ยนสีเมื่อนำเมาส์ไปวาง (mouse over)

• ระบบนำทางแบบแสดงเส้นทาง (breadcrumb navigation) ความหมายคือเศษขนมปัง การออกแบบเพื่อนำมาใช้เป็นระบบนำทางซึ่งแสดงลำดับขั้นของเนื้อหา ซึ่งจะช่วยระบุตำแหน่งที่อยู่ปัจจุบันของผู้ชม แสดงโครงสร้างข้อมูลแบบลำดับชั้น (hierarchy) ช่วยให้ผู้ชมย้อนกลับไปยังประเภทหรือหมวดหมู่ของเนื้อหาต่าง ๆ ได้สะดวก ตำแหน่งที่วางจะวางไว้ด้านล่างระบบนำทางหลัก โดยมีลักษณะเป็นลิงก์ข้อความและนิยมคั่นด้วยเครื่องหมายมากกว่า (>)

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

• ประกอบด้วย ข้อความ วิดีโอคลิป ตาราง ภาพถ่าย ภาพวาด ภาพกราฟิกเคลื่อนไหว

• ควรมีหัวข้อเรื่องแสดงไว้อย่างชัดเจน

• ควรแบ่งเนื้อหาออกเป็นย่อหน้า เพื่อให้อ่านง่ายและเป็นระเบียบ

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

• แถบข้างด้านซ้าย (left sidebar) นิยมวางระบบนำทางแบบโลคอล (local navigation) สำหรับเชื่อมโยงไปยังหัวข้อย่อยภายในหัวหลัก เหมาะสำหรับเว็บไซต์ที่มีรายละเอียดและเนื้อหาปลีกย่อยจำนวนมาก และเหมาะสำหรับจัดวางช่องค้นหา ป้ายโฆษณา ที่อยู่ อีเมลหรือข้อมูลติดต่อ

• แถบข้างด้านขวา (right sidebar) ส่วนใหญ่มักวางช่องค้นหาและป้ายโฆษณาเหมือนด้านซ้าย รวมถึงเหมาะเป็นตำแหน่งของลิงก์ที่เกี่ยวข้อง (related links) และควิกลิงก์ (quick links)

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