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

การออกแบบเว็บไซต์มีกี่ประเภท ?

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

1. Corporate : ออกแบบเว็บไซต์องค์กร

ผลการค้นหารูปภาพสำหรับ เว็บไซต์องค์กร

หนึ่งในเว็บไซต์ที่เราจะต้องออกแบบเว็บไซต์อยู่บ่อยๆ ก็คือเว็บ corporate นั่นก็คือเว็บไซต์ขององค์กรที่ต้องมีข้อมูลที่สำคัญขององค์กรนั้นแสดงอยู่ เช่น บอกข้อมูลการติดต่อ (Contact) บอกข้อมูลเกี่ยวกับองค์กร (About us) หรือบางเว็บจะมีข้อมูลข่าวสาร และยังสามารถทำ Content online marketing ผ่านเว็บไซต์ด้วยบทความอีกด้วย

2. Landing page

Landing page คือเว็บไซต์ที่ส่วนใหญ่แล้ว มักจะเป็นเว็บไซต์หน้าเดียว (single page) หน้าที่ของ Landing page คือเปลี่ยนผู้ใช้งานมาเป็นลูกค้า ฉะนั้นข้อมูลที่มีอยู่บนเว็บ Landing page มักจะเป็นข้อมูลที่เกี่ยวกับสินค้า ผลิตภัณฑ์ คุณสมบัติของผลิตภัณฑ์ บอกข้อดีของสินค้า ฉะนั้นสิ่งที่เราจะต้องทำบนเว็บไซต์ประเภท Landing page ก็คือทำอย่างไรให้จัดวางข้อมูลสินค้าออกมาได้น่าสนใจ มีปุ่ม Call to action ที่โดดเด่นเพื่อเปลี่ยนผู้ใช้งานให้เป็นลูกค้าของเรา

3.E-commerce

ออกแบบเว็บไซต์ E-commerce

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

Grid คือสิ่งสำคัญ

Grid ที่เป็นตัวควบคุมการวาง Layout ให้กับงานออกแบบของเรา ไม่ว่าคุณจะเป็นนักออกแบบมือใหม่หรือมือเก่าแค่ไหนก็ควรจะใช้งาน Grid System โดยเฉพาะในงานเว็บไซต์ที่จะส่งผลต่อการทำ Responsive หรือการออกแบบเว็บไซต์ให้แสดงผลได้กับทุกขนาดหน้าจอ รูปแบบของ Grid ที่นำมาออกแบบมักจะใช้เป็น Grid 16  columns ลองศึกษาเรื่อง Grid ได้ที่ semantic-ui

ภาพคือองค์ประกอบหลัก

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

ฟ้อนต์ก็ต้องดี

เมื่อคุณออกแบบเว็บไซต์ที่มีองค์ประกอบครบแล้วอย่างภาพสวย UI สวย แต่ใช้ฟ้อนต์ Tahoma จากเว็บไซต์อันสวยงามอาจจะกลายเป็นเว็บที่ดูแย่ได้ โดยเทคนิคในการจัดการกับฟ้อนต์ในงานออกแบบเว็บไซต์คือต้องกำหนดรูปแบบของฟ้อนต์เอาไว้ เช่น H1 – หัวข้อเรื่องใช้ฟ้อนต์ขนาด 48px , H2 – ใช้ขนาด 32px , Body – ใช้ฟ้อนต์ขนาด 18px ในงานเว็บไซต์ฟ้อนต์ทุกหน้าจะต้องมีขนาดที่เท่ากันเพื่อให้ง่ายต่อการเขียน Code และดูเป็นระเบียบเรียบร้อยมากยิ่งขึ้น สำหรับฟ้อนต์ที่มีคุณภาพเราแนะนำให้ลองดู GOOGLE FONTS เพราะว่าคุณภาพดีมีให้เลือกใช้งานหลายรูปแบบหลายภาษาที่สำคัญคือใช้งานฟรี แต่ถ้าใครต้องการฟ้อนต์ที่มีเอกลักษณ์เฉพาะตัวขึ้นมาอีกลองดูที่ รวมเว็บแจกฟ้อนต์ฟรี แต่อันนี้ต้องดูในเรื่องของลิขสิทธิ์ให้ดี ฟ้อนต์แต่ละตัวจะมีข้อกำหนดที่แตกต่างกัน หรือใครที่เจอฟ้อนต์สวยถูกใจแต่ไม่รู้ว่าฟ้อนต์ตระกูลอะไรแนะนำให้ดาวน์โหลด “WHAT THE FONT” ฟ้อนต์นี้ฟ้อนต์อะไรให้แอพบอก

ไอคอนต้องโดน

website-design-icon

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

ต้องแม่นเรื่องสี

website-design-color

เว็บไซต์โดยทั่วไปที่ผ่านมือนักออกแบบอาชีพจะมีการใช้สีบทเว็บไซต์เพียงไม่กี่สี มีเพียงสี่หลัก สีรอง สีสำหรับปุ่มกด(Call to action) และสีพื้นหลัง (BG) เทคนิคในการเลือกสีมาออกแบบเว็บไซต์แบบง่าย คือ สีหลัก = สีโลโก้, สีรอง = พื้นหลังของโลโก้หรือสีที่ขับให้โลโก้เด่นขึ้นมา, สีสำหรับปุ่มกด(Call to action) = สีคู่ตรงข้ามกับสีหลักและพื้นหลังเน้นความโดดเด่น, สีพื้นหลัง (BG) = เน้นไปที่สีโทนขาวหรือดำ เรื่องของสีเป็นอีกหนึ่งเรื่องที่ต้องศึกษากันยาวมาก สำหรับนักออกแบบเว็บไซต์ สีเป็นมากกว่าเรื่องของความสวยงาม แต่หมายถึงสิ่งที่สามารถสร้าง User experience ที่ดีได้ด้วย

สไตล์การออกแบบ

Flat design

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

Flat design คือวิธีการออกแบบโดยเน้นความเรียบง่าย เน้นการใช้งาน ลดทอนกราฟิกที่ไม่จำเป็นลงส่งผลให้ผู้ใช้งานโฟกัสไปที่จุดสำคัญมากยิ่งขึ้น

สรุป…

สุดท้ายนี้จะเห็นได้ว่าจะออกแบบเว็บไซต์นั้นไม่ใช่เรื่องง่าย ต้องศึกษาและรู้ในเรื่องต่างๆมากมาย แม้ว่าบนความนี้จะมีเรื่องหลักที่ควรรู้แต่มันก็ไม่ใช้ทั้งหมดยังขาดในเรื่องของ UX/UI ที่ต้องศึกษาอีกมากมายและสิ่งสำคัญของการฝึกออกแบบคือการได้ทดลองลงมือทำจริง

ขอบคุณข้อมูลจาก grappik.com

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *