แจกของฟรี

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

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

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

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

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 จึงตกเป็นหน้าที่ของเราที่จะต้องออกแบบ สามารถอ่านเทคนิคการออกแบบเพิ่มเติมได้ที่ หลักการ ออกแบบเว็บไซต์ E-COMMERCE ให้สวยสมบูรณ์แบบน่าใช้งาน

Grid คือสิ่งสำคัญ
ไม่ว่าจะออกแบบอะไรก็ตาม “กฏ” เป็นเรื่องสำคัญเสมอ ในคอร์สเรียนของเรานั้นจะเน้นการปูพื้นฐานในการออกแบบ ทำให้คุณจะต้องเจอกับ Workshop ที่เกี่ยวข้องกับ Grid ที่เป็นตัวควบคุมการวาง Layout ให้กับงานออกแบบของเรา ไม่ว่าคุณจะเป็นนักออกแบบมือใหม่หรือมือเก่าแค่ไหนก็ควรจะใช้งาน Grid System โดยเฉพาะในงานเว็บไซต์ที่จะส่งผลต่อการทำ Responsive (การออกแบบเว็บไซต์ให้แสดงผลได้กับทุกขนาดหน้าจอ) ลองศึกษาโดยละเอียดที่ Responsive Web Design คืออะไร ที่เป็นเรื่องสำคัญในช่วงเวลานี้ เพราะผู้ใช้งานเกินครึ่งจะเข้าใช้งานเว็บไซต์เราผ่านอุปกรณ์เคลื่อนที่ ใครต้องการศึกษาเรื่องของ Grid อ่านบทความ วิธีใช้ GRID SYSTEM ยังไงให้ ง่าย เป๊ะ ใครใครก็ทำได้

รูปแบบของ Grid ที่นำมาออกแบบมักจะใช้เป็น Grid 16  columns ลองศึกษาเรื่อง Grid ได้ที่ semantic-ui หรือถ้าเกิดว่างง มึนหัวไปหมดในเรื่องของ Grid คงต้องเชิญให้มาเรียนกับเรา คอร์ส WEBSITE DESIGN WITH ADOBE PHOTOSHOP เกมยิงปลาออนไลน์

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

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

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

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

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

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

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

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

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

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