10 วิธีง่าย ๆ สร้าง Trend Web Design ปี 2014 !!

เชื่อว่าแฟนๆแบไต๋เจ้าประจำคงจะสังเกตเห็นว่า ช่วงเดือนกุมภาพันธ์ ทางแบไต๋ก็ได้ทำการปรับปรุงรูปแบบของ Website ขนานใหญ่จนเรียกได้ว่าเปลี่ยนจากหน้ามือเป็นหลังมือ ซึ่งการเปลี่ยนแปลงครั้งนี้ถือว่าเป็น 1 ใน Trend Web Design ของปี 2014 นี้ ซึ่งหากใครสนใจว่าจะต้องทำอย่างไรบ้าง วันนี้เราจะมาแนะนำกันครับ

1. ไม่มี Typography แบบชืด ๆ น่าเบื่ออีกต่อไป

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

เว็บนี้แจก Font ฟรีไม่คิดเงินจ้า (แต่แนะนำให้อ่านรายละเอียดก่อนนำไปใช้ครับ)

Font สวย ๆ ฟรี ๆ สามารถหาโหลดได้ที่ http://www.f0nt.com/

2. Flat Design

   1. ปฏิเสธไม่ได้ว่า การออกแบบ “เรียบ ๆ “ แบน ๆ เอา การไล่แสง ไล่สี หรือมีขอบ มีเงา ออกไปให้หมดนั้นกำลังมาก และ ได้ผลดีเสียด้วยสิ เพราะมันทำให้ดูง่ายขึ้น อ่านง่ายขึ้น การ load ก็เร็วขึ้น ไม่หนัก ไม่เป็นภาระ พวก Mobile OS อย่าง windows phone, Android ,iOS ก็เป็น flat กันหมดแล้ว

Play video

3. Slider หมดสมัยไปแล้ว แต่จะเป็น “Large Hero”

ถ้าใครยังจำได้ว่่า หน้า web ที่มี ภาพค่อนข้างใหญ่ เปลี่ยนไปมา สลับ สลับ กันเพื่อ แสดงเนื้อหาหลาย ๆ ท่อนนั้นได้หล่ะก็ แบบนั้นเรียกว่า slider ครับ ซึ่งเป็น trend ที่ได้ผล และมีมานานมาก มันมาฆ่า พวก landing page หรือ flash แต่ตอนนี้มันจะโดน large hero สอยแทน

large hero นั้นเอาข้อดี ของทั้งสามอย่างมารวมกัน คือ

• ความใหญ่อลังการของ Landing page
• สามารถบอกเรื่องราวได้เหมือน flash
• แสดงเนื้อหาให้ click ได้มากกว่าหนึ่ง

Large Hero จะเป็นหน้าส่วนแรกสุด ที่เข้ามาใน web จะมีการบอกเล่าเรื่องราว หรือ ข้อความอะไรสักเล็กน้อย  ส่วนคนดูก็สามารถกดเข้าไปดูต่อในส่วนที่ตัวเองสนใจได้

เว็บตัวอย่าง: http://realtii.com/

4. มุ่งเป้าไปที่ Mobile Device

ทุกวันนี้การเข้า web site นั้น มาจาก smartphone, tablet เยอะกว่า pc หรือ notebook ไปแล้ว  ทำให้ web ต่าง ๆ เลือกที่จะทำ หน้า mobile ต่างหาก หรือ ทำแบบ responsive web site ที่ตอบสนองได้เข้ามา บาง web เอง แยกทำพิเศษเลยว่า ถ้าเข้า mobile จะได้เนื้อหา ที่ครบถ้วนไม่ต่างจาก pc แต่ ui อาจจะเปลี่ยนไป ใช้งานได้ดีกว่าด้วยซ้ำ

ที่มาของภาพ: setsailmedia

5. Video มาแทนที่ตัวหนังสือยุ่บยั่บ

ทุกวันนี้การ ถ่ายทำ clip สักตัวหนึ่ง ง่ายกว่าสมัยก่อนมาก มี smartphone ก็ทำได้แล้ว software ตัดwต่อก็ง่ายและถูกลง การ upload video ขึ้นไปก็มี free site ให้ใช้มากขึ้น ที่สำคัญที่สุดคือ internet ราคาถูกลง และเร็วขึ้น ทำให้ผู้ใช้เปิดดู video ได้รวดเร็วและสบายใจ กว่า สมัยก่อนเยอะ

ตัวอย่างเว็บ https://onlycoin.com/

6. web ที่ scroll ได้ยาว ๆ ไม่สิ้นสุด

ถ้าใครเข้า web ต่างประเทศบ่อย ๆ จะเริ่มเห็นแล้วว่า หลาย ๆ web ไม่ได้ใช้วิธีการ load เป็นหน้า ๆ แต่เป็น ตัดส่วน load เป็นท่อน ๆ คือ เปิดมาเจอชุดแรก พอ scroll ลงไปอ่าน เรื่อย ๆ เจอชุดสอง แล้วก็เจอชุดสาม ค่อย ๆ load ทำให้ user สะดวก ไม่ต้องมาคอย load ทีละหน้า

ตัวอย่าง web thai ก็ pantip.com ที่เราจะอ่านกระทู้ได้ตั้งแต่ต้นจนจบ โดยจะแบ่งออกเป็นช่วงๆให้เลื่อนไปถึงด้านล่างเพื่อโหลดต่อเนื่อง ป้องกันการรับภาระหนักของทาง Server และผู้ใช้งาน

7. เน้นสีเรียบ ๆ ไม่ฉูดฉาด

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

ตัวอย่างเว็บ: http://getuikit.com/index.html

8. เนื้อหาเรียบง่าย

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

ตัวอย่าง: https://twitter.com

9. โยน side bar ทิ้งไป

side bar เป็นสิ่งที่อยู่คู่กับ web มานาน เพราะเชื่อกันว่า มันทำให้ ผู้ใช้ได้เห็นสิ่งอื่น ๆ ไปควบคู่กันกับ content เป็นการเพิ่มโอกาสการมองเห็น แต่ในเมื่อผู้ใช้ focus ที่ตัว content ทำให้ side bar เป็นหมือนสิ่งที่เกะกะ และ ทำให้ประสบการณ์การอ่านแย่ลง

การเอา sidebar ออกไปทำให้ จุดสนใจของ content เพิ่มมากขึ้น และ ง่ายต่อ responsive ด้วย

10. เล่นกับรูปให้มากขึ้น

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

ตัวอย่าง: http://www.seattlecidercompany.com/

หากใครที่ไม่รู้จะเริ่มทำอย่างไร ทางเราก็ขอแนะนำ wordpress ครับ เพราะจะมี Theme ให้เราเลือกมากมาย (และแน่นอนว่าเสียเงิน) โดยเราก็แค่เพียงเลือกซื้อ Theme ที่ถูกใจ แล้วนำภาพมาแปะๆลงไป และทำการ Setting นิดหน่อย ก็จะได้หน้าเว็บที่ถูกใจเราแล้วจ้า

Play video

ที่มา: thenextweb