เราได้เห็น บริษัท จำนวนมากมุ่งสู่ประสบการณ์การใช้งานที่สะอาดและง่ายขึ้นสำหรับผู้ใช้เว็บไซต์ ไม่ว่าคุณจะเป็นนักออกแบบนักพัฒนาหรือแค่รักเว็บไซต์คุณสามารถเรียนรู้บางสิ่งบางอย่างได้โดยดูว่าพวกเขาทำอย่างไร เตรียมพร้อมรับแรงบันดาลใจ!
- นิเมชั่น
ทิ้งไว้เบื้องหลังวันแรกที่ฉูดฉาดของเว็บซึ่งเต็มไปด้วย gif ที่กระพริบแถบเคลื่อนไหวปุ่มไอคอนและหนูแฮมสเตอร์ที่กำลังเต้นแอนิเมชั่นในปัจจุบันหมายถึงการสร้างการโต้ตอบที่ตอบสนองได้ดีซึ่งช่วยเพิ่มการเล่าเรื่องและมอบประสบการณ์ผู้ใช้ที่สมบูรณ์
ตัวอย่างของแอนิเมชั่นที่สมบูรณ์ ได้แก่ การโหลดแอนิเมชั่นการนำทางและเมนูแอนิเมชั่นโฮเวอร์แกลเลอรีและสไลด์โชว์แอนิเมชั่นเคลื่อนไหวการเลื่อนและภาพเคลื่อนไหวพื้นหลังและวิดีโอ ตรวจสอบไซต์นี้จาก Beagle ซึ่งเป็นแพลตฟอร์มการจัดการข้อเสนอ:
คลิกเพื่อดูภาพเคลื่อนไหว JavaScript และ CSS ที่น่าทึ่งของ Beagle เมื่อคุณเลื่อนลงไปที่ไซต์
นอกจากนี้ยังสามารถเห็นภาพเคลื่อนไหวที่สมบูรณ์ในการโต้ตอบขนาดเล็ก ตัวอย่างเช่นใน LinkedIn ผู้ใช้สามารถวางเมาส์เหนือการ์ดเพื่อดูเมนูป๊อปอัพที่ละเอียดอ่อนของตัวเลือกจากนั้นเลือกที่จะข้ามเรื่องราวหรือดำเนินการอื่น ๆ
แอนิเมชั่น GIF ได้กลับมามีชีวิตอีกครั้งและสามารถนำไปใช้เพื่อวัตถุประสงค์ต่างๆมากมายรวมถึงการแสดงตลกการสาธิตและแม้กระทั่งเพื่อการตกแต่ง
- การออกแบบวัสดุ
การออกแบบวัสดุซึ่งเป็นภาษาการออกแบบที่พัฒนาโดย Google โดยอาศัยองค์ประกอบของการออกแบบโดยใช้การพิมพ์เช่นตัวอักษรกริดช่องว่างขนาดสีและการใช้ภาพพร้อมกับภาพเคลื่อนไหวและการเปลี่ยนที่ตอบสนองช่องว่างภายในและเอฟเฟกต์เชิงลึกเช่นแสงและเงา มอบประสบการณ์การใช้งานที่สมจริงมีส่วนร่วมและโต้ตอบได้มากขึ้น
การออกแบบวัสดุใช้เงาการเคลื่อนไหวและความลึกเพื่อมอบความสวยงามที่สะอาดตาและทันสมัยโดยมุ่งเน้นไปที่การปรับ UX ให้เหมาะสมโดยไม่ต้องมีเสียงระฆังและเสียงนกหวีดมากเกินไป
ตัวอย่างอื่น ๆ ของการออกแบบวัสดุ ได้แก่ ภาพจากขอบจรดขอบตัวอักษรขนาดใหญ่และพื้นที่สีขาวโดยเจตนา
- การออกแบบแบบแบน
แม้ว่าการออกแบบวัสดุจะนำเสนอแนวทางหนึ่งในแนวคิดของความเรียบง่าย แต่การออกแบบที่เรียบยังคงเป็นทางเลือกที่คลาสสิกสำหรับผู้ชื่นชอบความสะอาด นั่นคือการออกแบบที่แบนราบมักถูกมองว่าเป็นรูปลักษณ์ดิจิทัลที่ดูสมจริงและสบายตากว่า
ตามหลักการของพื้นที่สีขาวขอบที่กำหนดสีที่สดใสและ 2 มิติหรือ "แบน" - ภาพประกอบการออกแบบแบนมีรูปแบบที่หลากหลายซึ่งมักใช้เทคนิคต่างๆเช่นรูปสัญลักษณ์เส้นและเงายาว
- แยกหน้าจอ
ใช้ดีที่สุดเมื่อคุณมีสองส่วนที่สำคัญเท่า ๆ กันในการโปรโมตหรือคุณต้องการเสนอเนื้อหาควบคู่ไปกับรูปภาพหรือสื่อหน้าจอแยกเป็นวิธีใหม่ที่ยอดเยี่ยมในการมอบประสบการณ์การใช้งานที่สนุกสนานและโดดเด่น
ด้วยการอนุญาตให้ผู้ใช้เลือกเนื้อหาและประสบการณ์คุณสามารถสร้างประสบการณ์ประเภทพอร์ทัลที่ดึงดูดผู้เยี่ยมชมให้เข้ามา
- การทิ้ง Chrome
นอกจากกันชนโครเมียมและการตกแต่งบนรถคลาสสิกแล้ว“ โครเมี่ยม” หมายถึงคอนเทนเนอร์ของเว็บไซต์ซึ่ง ได้แก่ เมนูส่วนหัวท้ายกระดาษและเส้นขอบที่ห่อหุ้มเนื้อหาหลัก
สิ่งนี้อาจทำให้เสียสมาธิและหลาย บริษัท เลือกที่จะหลุดพ้นจากคอนเทนเนอร์และสร้างเลย์เอาต์แบบขอบจรดขอบโดยไม่มีขอบส่วนหัวหรือส่วนท้าย
- ลืมพับ
"ครึ่งหน้าบน" คือศัพท์แสงในหนังสือพิมพ์สำหรับครึ่งบนของหน้าแรกของหนังสือพิมพ์ เนื่องจากหนังสือพิมพ์มักจะพับและวางไว้ในกล่องและจอแสดงผลเนื้อหาที่น่าสนใจที่สุดจึงอยู่ในครึ่งหน้าบนเพื่อให้พวกเขามีโอกาสที่ดีที่สุดในการดึงดูดผู้อ่านที่มีศักยภาพ (และกระเป๋าสตางค์ของพวกเขา)
การออกแบบเว็บไซต์ใช้แนวคิดเรื่องการพับมาเป็นเวลานานโดยใช้หลักการว่าการเลื่อนเป็นภาระ แต่เมื่อเร็ว ๆ นี้รูปภาพและเนื้อหาแบบเต็มหน้าจอได้ทักทายผู้ใช้และกระตุ้นให้มีการเลื่อนเพื่อเปิดเผยเนื้อหาเพิ่มเติมในเชิงลึกมากขึ้น
- วิดีโอแบบเต็มหน้าจอ
วิดีโอเป็นวิธีที่ดีในการดึงดูดความสนใจของผู้เข้าชมและมักจะมีประสิทธิภาพมากกว่าทั้งภาพหรือข้อความ การเล่นวิดีโอแบบวนซ้ำเช่นที่ Apple ใช้สำหรับ Apple Watch เป็นวิธีพิเศษในการกำหนดโทนเสียงและดึงผู้เข้าชมเข้ามา
คลิกเพื่อดู Highbridgeวิดีโอในหน้าแรกของพวกเขา
เมื่อพูดถึงการออกแบบเว็บส่วนประกอบเฉพาะจำนวนมากจะถูกกำหนดโดยอุตสาหกรรมเฉพาะกลุ่มตลาดเป้าหมายและเนื้อหาของคุณ เค้าโครงของคุณจะขึ้นอยู่กับสิ่งที่ผู้เข้าชมตอบสนองและสิ่งที่เหมาะสมที่สุดสำหรับข้อความของคุณ แต่ด้วยแนวโน้มเหล่านี้คุณจะมีทุกสิ่งที่จำเป็นในการสร้างเว็บไซต์ที่น่าสนใจซึ่งทำในสิ่งที่คุณต้องการและนั่นแสดงให้เห็นว่าคุณรู้วิธีที่จะทำตามเวลา
