ออกแบบเว็บไซต์ ควรเริ่มจากตรงไหนก่อน ?

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

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

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

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

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

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

2. Landing page

ออกแบบเว็บไซต์ 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 ของเว็บไซต์

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

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

ออกแบบเว็บไซต์

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

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

website-design-fonts

เมื่อคุณออกแบบเว็บไซต์ที่มีองค์ประกอบครบแล้วอย่างภาพสวย 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

By |2018-11-13T18:13:20+00:00พฤศจิกายน 13th, 2018|