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

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

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

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

4.สร้าง Wireframe
เมื่อเรามีภาพเว็บไซต์ในหัวคร่าวๆแล้ว ต่อมาก็ต้องทำภาพนั้นให้ชัดเจนขึ้นด้วยการวาดผังของหน้าเพจแต่ละหน้าแบบง่ายๆ ว่าจะให้มีข้อมูลและรูปภาพอยู่ด้วยกันอย่างไร แบ่งเป็นกี่คอลัมม์ 2,3,4 หรือจะทำเป็นแถวเดียว แบบไหนที่อ่านง่ายสุด สื่อสารได้ชัดเจนสุด วาดให้ครบทุกหน้า ไล่ตั้งแต่หน้า Home ไปจนถึงหน้า Contact

5.กำหนดสไตล์งานด้วยการสร้าง Style Guide
สิ่งที่อยากให้กำหนดก่อนเริ่มลงมือออกแบบเว็บนะคะ มันคือ Style guide สิ่งนี้จะช่วยให้เราสามารถคุมโทนของตัวงานได้ แล้วก็จะทำให้เราทำเว็บได้เร็วขึ้น ไม่ต้องเสียเวลาเปลี่ยนกลับไปมาหลายรอบ ในสไตล์ไกด์จะประกอบไปด้วย Logo, Font, Color Palette ภาพ และกราฟฟิก ลักษณะภาพที่จะใช้ที่ควรจะมีโทนเดียวกัน แล้วก็กราฟฟิกงานที่เราสามารถนำไปใช้ต่อในการทำบล็อกโพส แบนเนอร์ต่างๆ ที่ต้องไปปรากฏบนโซเชี่ยลได้

โลโก้
สิ่งนี้จะปรากฎอยู่ที่แถบ Menu Bar แล้วก็ทำหน้าที่เป็นปุ่ม Home ไปด้วยในตัว และอีกที่คือ Site Icon ที่จะอยู่บริเวณเบราเซอร์แท็บด้านบนสุดของเว็บไซท์ ตัวโลโก้เป็นสิ่งหนึ่งที่ทำให้คนจำงานของเราได้

พาเลทสี
การเลือกใช้สีได้เหมาะสมก็ช่วยให้งานเว็บของเรานั้นดูดีมากขึ้น เราจะกำหนดสีใน Style Guide ที่จะใช้ไว้ 5 สี เลือกให้มีสีเข้ม 2 สี สีอ่อน 2 สี และสีกลางๆอีก 1 สี เอาไว้ใช้สำหรับงานประเภทอื่นๆด้วย ในส่วนของเว็บเราจะเลือกใช้แค่ 2 สี คือ Primary Color และ Secondary Color  เพื่อให้ดูสะอาดตา ไม่รกจนเกินไป แถมยังช่วยให้คนจดจำตัวแบรนด์ได้มากขึ้น

Font
จะมีส่วนที่เป็น Header กับ Paragraph ถ้าส่วนของ Head เป็นแบบที่มีขาหรือ Serif แล้วส่วนที่เป็น Paragraph ก็ต้องเลือกแบบที่ไม่มีขา แต่ถ้าอยากสลับกันก็ไม่มีปัญหาค่ะ จับคู่กันไปแบบนี้ เพื่อความสบายตาในการอ่าน อันนี้คือในกรณีที่ใช้ฟ้อนภาษาอังกฤษเป็นหลักนะคะ ข้อดีของเค้าคือมีตัวเลือกเยอะมาก

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

กราฟฟิก แบนเนอร์
ตรงนี้ทำง่ายๆด้วยการเลือกรูปที่มี Space เหลือว่างๆ แล้วก็ใส่ตัวหนังสือแคปชั่นสั้นๆลงไป รวมถึงพวกงานกราฟฟิก จุด ลาย เส้น สีสันด้วยนะคะ ที่ต้องทำเพราะเดี๋ยวต้องเอาไปใช้ต่อในการทำแบนเนอร์โซเชี่ยลต่างๆอย่าง Facebook, Instagram, Youtube

6.ออกแบบเว็บไซต์
เมื่อเราสร้างหน้าเพจครบตามที่เราได้สรุปกันเอาไว้ว่าจะให้มีหน้าไหน อยู่ตรงไหนบ้าง ก็ถึงเวลาที่ต้องเอาข้อมูลจาก Style Guide มาใส่เข้าไปในหน้าเว็บ ทั้งโลโก้แบรนด์ การตั้งค่าสีตามที่เราเลือกเอาไว้ ตั้งค่าฟ้อนท์ Header, Paragraph ตามที่เรากำหนดได้เลยค่ะ เอาล่ะตอนนี้เราก็ได้ค่ามาตรฐานเบื้องต้นที่สวยงามแล้ว ต่อไปคือการเอารายละเอียดมาใส่เพิ่มลงไป

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

ที่มา : plaradise