โลกของเว็บและการออกแบบ User Interface(UI)มีการเปลี่ยนแปลงไปอย่างรวดเร็ว ถ้าเราตามเทรนด์เหล่านี้ได้จะช่วยให้เว็บไซต์มีความน่าสนใจเพิ่มมากขึ้น วันนี้แอดมินเลยนำเทรนด์ UI ของปี 2017 มาฝากกันจ้า **สามารถคลิกดูตัวอย่างเว็บไซต์ได้จากรูปได้เลย

โชว์วิดีโอแบบเต็มหน้าจอ

trends-1

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

trends-1-1


Gradients and vivid colours

trends-3

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


Parallax

trends-4

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


Typography

trends-5

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


Experimental Navs

trends-6

การสร้างเมนูไม่ได้จำกัดให้อยู่แค่เฉพาะแถวเดียว การสร้างให้เมนูให้มีความน่าสนใจ เป็นการดึกดูด user ให้สนุกสนานในการเข้าดูเว็บไซต์


Micro-interactions

trends-7
circle_menu

การสร้างความเคลื่อนไหว การเพิ่มลูกเล่นให้กับเว็บไซต์ถือว่ามีความสำคัญมากในการออกแบบ UI โดยเฉพาะมือถือ เป็นการสร้างความสนุกสนานให้กับผู้ใช้งานได้อย่างดีทีเดียว


Cards UI

trends-8

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


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

ขอบคุณข้อมูล http://www.creativebloq.com/
เรียบเรียงโดย YUDYMOVEE

Comments