เชื่อว่าแฟนๆแบไต๋เจ้าประจำคงจะสังเกตเห็นว่า ช่วงเดือนกุมภาพันธ์ ทางแบไต๋ก็ได้ทำการปรับปรุงรูปแบบของ Website ขนานใหญ่จนเรียกได้ว่าเปลี่ยนจากหน้ามือเป็นหลังมือ ซึ่งการเปลี่ยนแปลงครั้งนี้ถือว่าเป็น 1 ใน Trend Web Design ของปี 2014 นี้ ซึ่งหากใครสนใจว่าจะต้องทำอย่างไรบ้าง วันนี้เราจะมาแนะนำกันครับ
- ไม่มี Typography แบบชืด ๆ น่าเบื่ออีกต่อไป
ตัวหนังสือกับ web เป็นของคู่กัน แต่ทว่า web ที่ออกแบบง่าย ๆ ใช้ font อะไรที่อ่านได้ก็พอแล้วจะดึงดูดคนให้เข้ามาอ่านไม่ได้อีกต่อไป บางที มันจะกลายเป็นอ่านยากตัวซ้ำ พวก font ที่เกินไปก็ไม่ดี อ่านง่าย และ สวยงามลงตัว คือ เป้าหมายสูงสุดของการออกแบบ และ จะเริ่มเห็นได้เยอะขึ้นในปีนี้
เว็บนี้แจก Font ฟรีไม่คิดเงินจ้า (แต่แนะนำให้อ่านรายละเอียดก่อนนำไปใช้ครับ)
Font สวย ๆ ฟรี ๆ สามารถหาโหลดได้ที่ http://www.f0nt.com/
-
Flat Design
-
ปฏิเสธไม่ได้ว่า การออกแบบ “เรียบ ๆ “ แบน ๆ เอา การไล่แสง ไล่สี หรือมีขอบ มีเงา ออกไปให้หมดนั้นกำลังมาก และ ได้ผลดีเสียด้วยสิ เพราะมันทำให้ดูง่ายขึ้น อ่านง่ายขึ้น การ load ก็เร็วขึ้น ไม่หนัก ไม่เป็นภาระ พวก Mobile OS อย่าง windows phone, Android ,iOS ก็เป็น flat กันหมดแล้ว
-
-
Slider หมดสมัยไปแล้ว แต่จะเป็น “Large Hero”
ถ้าใครยังจำได้ว่่า หน้า web ที่มี ภาพค่อนข้างใหญ่ เปลี่ยนไปมา สลับ สลับ กันเพื่อ แสดงเนื้อหาหลาย ๆ ท่อนนั้นได้หล่ะก็ แบบนั้นเรียกว่า slider ครับ ซึ่งเป็น trend ที่ได้ผล และมีมานานมาก มันมาฆ่า พวก landing page หรือ flash แต่ตอนนี้มันจะโดน large hero สอยแทน
large hero นั้นเอาข้อดี ของทั้งสามอย่างมารวมกัน คือ
- ความใหญ่อลังการของ Landing page
- สามารถบอกเรื่องราวได้เหมือน flash
- แสดงเนื้อหาให้ click ได้มากกว่าหนึ่ง
Large Hero จะเป็นหน้าส่วนแรกสุด ที่เข้ามาใน web จะมีการบอกเล่าเรื่องราว หรือ ข้อความอะไรสักเล็กน้อย ส่วนคนดูก็สามารถกดเข้าไปดูต่อในส่วนที่ตัวเองสนใจได้
เว็บตัวอย่าง: http://realtii.com/
- มุ่งเป้าไปที่ Mobile Device
ทุกวันนี้การเข้า web site นั้น มาจาก smartphone, tablet เยอะกว่า pc หรือ notebook ไปแล้ว ทำให้ web ต่าง ๆ เลือกที่จะทำ หน้า mobile ต่างหาก หรือ ทำแบบ responsive web site ที่ตอบสนองได้เข้ามา บาง web เอง แยกทำพิเศษเลยว่า ถ้าเข้า mobile จะได้เนื้อหา ที่ครบถ้วนไม่ต่างจาก pc แต่ ui อาจจะเปลี่ยนไป ใช้งานได้ดีกว่าด้วยซ้ำ
ที่มาของภาพ: setsailmedia
- Video มาแทนที่ตัวหนังสือยุ่บยั่บ
ทุกวันนี้การ ถ่ายทำ clip สักตัวหนึ่ง ง่ายกว่าสมัยก่อนมาก มี smartphone ก็ทำได้แล้ว software ตัดwต่อก็ง่ายและถูกลง การ upload video ขึ้นไปก็มี free site ให้ใช้มากขึ้น ที่สำคัญที่สุดคือ internet ราคาถูกลง และเร็วขึ้น ทำให้ผู้ใช้เปิดดู video ได้รวดเร็วและสบายใจ กว่า สมัยก่อนเยอะ
ตัวอย่างเว็บ https://onlycoin.com/
-
web ที่ scroll ได้ยาว ๆ ไม่สิ้นสุด
ถ้าใครเข้า web ต่างประเทศบ่อย ๆ จะเริ่มเห็นแล้วว่า หลาย ๆ web ไม่ได้ใช้วิธีการ load เป็นหน้า ๆ แต่เป็น ตัดส่วน load เป็นท่อน ๆ คือ เปิดมาเจอชุดแรก พอ scroll ลงไปอ่าน เรื่อย ๆ เจอชุดสอง แล้วก็เจอชุดสาม ค่อย ๆ load ทำให้ user สะดวก ไม่ต้องมาคอย load ทีละหน้า
ตัวอย่าง web thai ก็ pantip.com ที่เราจะอ่านกระทู้ได้ตั้งแต่ต้นจนจบ โดยจะแบ่งออกเป็นช่วงๆให้เลื่อนไปถึงด้านล่างเพื่อโหลดต่อเนื่อง ป้องกันการรับภาระหนักของทาง Server และผู้ใช้งาน
-
เน้นสีเรียบ ๆ ไม่ฉูดฉาด
สมัยนี้ การใส่อะไรที่เกิน มันดูไม่ดีครับ และมีเรื่องของ “คุณภาพหน้าจอ” ที่ไม่เท่ากันมาอีก การใช้สีที่จัดมาก เพราะคิดว่า จะขับเน้น ไปเจอจอห่วย ก็ขับไม่ออก ไปเจอจอสีเพี้ยนอย่าง samsung ก็ จัดไปน่าเกลียดอีก การใช้สีพื้น ๆ และ จับคู่สีให้ขัดกันนั้นสำคัญกว่า
ตัวอย่างเว็บ: http://getuikit.com/index.html
-
เนื้อหาเรียบง่าย
สั้น ง่าย ได้ใจความ ไม่เยิ่นเย้อเสียเวลา คือ รูปแบบ content ที่ดีที่่สุด แต่บางครั้ง การทำ content ก็อยากจะยาว ๆ เยิ้นเย้อบ้าง เพื่อให้คนอยู่กับ web นาน ๆ แต่ สมัยนี้เปลี่ยนไปครับ สั้น อ่านเร็ว ช่างมัน แต่ อ่านเรื่อย ๆ และกลับมาบ่อยจะดีกว่า คนเราใจร้อนมากขึ้นครับ “ยาวไปไม่อ่าน” แต่สงสัยไหมครับว่า twitter นี่อ่านกันได้ทั้งวัน ไม่เบื่อเพราะอะไร?
ตัวอย่าง: https://twitter.com
-
โยน side bar ทิ้งไป
side bar เป็นสิ่งที่อยู่คู่กับ web มานาน เพราะเชื่อกันว่า มันทำให้ ผู้ใช้ได้เห็นสิ่งอื่น ๆ ไปควบคู่กันกับ content เป็นการเพิ่มโอกาสการมองเห็น แต่ในเมื่อผู้ใช้ focus ที่ตัว content ทำให้ side bar เป็นหมือนสิ่งที่เกะกะ และ ทำให้ประสบการณ์การอ่านแย่ลง
การเอา sidebar ออกไปทำให้ จุดสนใจของ content เพิ่มมากขึ้น และ ง่ายต่อ responsive ด้วย
- เล่นกับรูปให้มากขึ้น
ทุกวันนี้การใช้รูป ไม่ได้จบที่ “ต้องคม ต้องชัด ต้องสวย ต้องสีสด ต้องหลังละลาย” อีกต่อไป เพราะ การยอมรับของ ผู้ใช้เปิดกว้างมากขึ้น
การใส่ filter หรือ สร้างจุดแตกต่าง หรือ ดึงดูดความสนใจก็มีมากขึ้น บางครั้ง การใช้รูป ที่ใส่ retro filter ตัดกับภาพสดใหม่ ก็ทำให้คนสนใจได้ง่ายขึ้นด้วย
ตัวอย่าง: http://www.seattlecidercompany.com/
หากใครที่ไม่รู้จะเริ่มทำอย่างไร ทางเราก็ขอแนะนำ wordpress ครับ เพราะจะมี Theme ให้เราเลือกมากมาย (และแน่นอนว่าเสียเงิน) โดยเราก็แค่เพียงเลือกซื้อ Theme ที่ถูกใจ แล้วนำภาพมาแปะๆลงไป และทำการ Setting นิดหน่อย ก็จะได้หน้าเว็บที่ถูกใจเราแล้วจ้า
ที่มา: thenextweb