Về xu hướng thiết kế website 2024 - Bước sang năm 2024, thời điểm đầu năm là khoảng thời gian chúng ta dành cho những điều mới mẻ. Càng thích hợp hơn cho cộng đồng designer "khởi động tâm hồn nghệ thuật" bên trong chúng ta. Không nói chi xa xôi, hãy cùng Markdao lướt xem những Ux/Ui design trend của năm 2024 dưới đây, biết đâu bạn lại "bùm" ra một ý tưởng cực wow cho dự án thiết kế website sắp tới của mình đấy!
Hàng năm, chúng tôi có một loạt các trend thiết kế mới không chỉ đẹp mắt mà còn bám sát và tác động đến các designer khác để “mượn” xu hướng này từ đó phát triển lên. Cứ đến hẹn lại lên, mỗi năm sẽ có những xu hướng thiết kế 2024 cũng như website inspiration sẽ được Markdao tổng hợp và cập nhật. Dù bạn có yêu hay ghét nó, trên thực tế vẫn có một số làn sóng thiết kế thông minh và tiện dụng. Các chức năng này có thể bao gồm việc chứa nhiều thông tin hơn trong không gian ít hơn cho đến xây dựng nhiều sự tương tác hơn với người dùng.
Hãy cùng Markdao Agency xem một số xu hướng thiết kế website 2024 vẫn tồn tại và đang chiếm lĩnh trên internet!
Xu hướng thiết kế website 2024 cần chú ý những thay đổi đang và sẽ thống lĩnh thị trường
1. Xu hướng Bento (Bento Boxes) - Không chỉ là chiếc hộp cơm trưa cho trẻ em
Hộp cơm Bento là món ăn không thể thiếu trong văn hóa hộp cơm trưa nói chung và văn hoá của Nhật Bản nói riêng. Họ nổi tiếng với việc cất giữ thực phẩm một cách ngăn nắp và giữ mọi thứ sạch sẽ.
Hình 1 - Xu hướng thiết kế kiểu Bento Box
Chúng ta sẽ không bao giờ biết ai đã nghĩ về điều này, tuy nhiên hộp cơm bento có hiệu ứng kỹ thuật số tuyệt vời trên màn hình cũng như việc chúng chứa đầy thức ăn trong túi.
Bento là một xu hướng thiết kế website 2024 khác bắt đầu tạo nên làn sóng trên các nền tảng như Dribbble và Behance để hàng triệu designer theo đuổi, tuy nhiên, khái niệm thiết kế “mô-đun” bắt đầu từ bảng điều khiển cho các trang web. Điều này bao gồm các trang tổng quan về bán hàng và tài chính như PayPal, các phân tích như Google Ads và nhiều thứ khác.
Bạn còn nhớ điện thoại Windows và Lumia? Chà, giao diện người dùng -Ui họ sử dụng về cơ bản là sự lặp lại ban đầu của các thiết kế Bento. Sau đó, Microsoft cũng triển khai khái niệm này vào menu khởi động máy tính để bàn Windows của họ với Windows 8.
Hình 2 - Kiểu thiết kế Bento trên Win 8
Trong khi được ngành công nghiệp sử dụng khắp nơi, các xu hướng thiết kế website 2024 theo phong cách Bento đã hoàn toàn bùng nổ khi Apple quyết định sử dụng lưới Bento lần đầu tiên. Ban đầu, họ sử dụng nó trên các trang đích iPhone của mình, nhưng sau đó nhanh chóng mở rộng sang các trang trình bày và thuyết trình sự kiện của Apple.
Hình 3 Apple poster được thiết kế kiểu Bento Box
Apple được biết đến rộng rãi là người khởi xướng các trend thiết kế lớn có tầm ảnh hưởng toàn thế giới và Bento chỉ là một trong số đó. Mọi designer và có thể nói hầu như gần hết cộng đồng designer đều sử dụng Bento để thuyết trình, trang web, giới thiệu sản phẩm và danh sách này vẫn tiếp tục.
Sự khác biệt lớn nhất giữa các thiết kế giống bento kiểu cũ và xu hướng thiết kế website 2024 mới là mỗi phần của lưới biểu thị một không gian duy nhất thay vì là một phần của một nhóm.
Không giống như nhiều UI design trend khác, Bento thực sự đang phát triển không chỉ là một kiểu layout đẹp mắt. Hiện nó đã phát triển để bao gồm các bản demo sản phẩm, kết hợp với một số layout độc đáo khác và thậm chí được cách điệu hóa với các khái niệm thiết kế trực quan mới (new visual design concept).
Hãy cùng nhìn thử ví dụ dưới đây, để thấy rõ sức mạnh của layout:
Hình 4 - Layout live demo bentobox trên diagram
Ví dụ trên là từ diagram.com, sử dụng lưới bento để hiển thị các ví dụ thực tế về những gì công cụ của nó có thể thực hiện thông qua trải nghiệm tương tác (interactive experience). Điều này làm cho công cụ trở nên hấp dẫn hơn rất nhiều và cho người dùng biết những gì họ nên mong đợi.
Để giúp các dessigner như chúng ta, có một số wesite dành riêng cho cảm hứng thiết kế Bento từ khắp nơi trên web. Một trang web như vậy là bentogrids.com, nơi có một bộ sưu tập lớn các lưới Bento dành cho UI và graphic design. Thật là cảm kích những nhà sáng tạo của trang web này vì đã đem lại rất nhiều cảm hứng cho cộng đồng designer!
2. Xu hướng thiết kế không gian & bước nhảy vọt trong công nghệ (Spatial Design Trends & Leaps in Technology)
Cứ tưởng tượng nhé! Bạn vừa thức dậy và nhấc điện thoại lên để xem “các email quan trọng” trong khi đang xem số hai và toàn bộ nguồn cấp dữ liệu của bạn chứa đầy Vision Pro mới của Apple. Đây chính xác là buổi sáng của những người đam mê công nghệ và design trên thế giới vào ngày 5 tháng 6 năm 2023.
Hình 5 Image credit của Apple
Trong vài tuần tiếp theo, đây là tất cả những gì thế giới công nghệ có thể nói đến và các designer đều cố gắng trau dồi các kỹ năng thiết kế không gian (Spatial design).
Ngoài các xu hướng thiết kế website 2024 được kể trên, nhiều công ty khởi nghiệp AR/VR khác nhau đã đi đầu và công nghệ của họ cuối cùng cũng được nhắc đến. Điều này đã mang lại sự thúc đẩy thực sự cho AR và VR, một thứ thực sự cần thiết cho chúng ta.
Bạn biết đấy cũng như hội tụ đủ các yếu tố thì sẽ tạo những tác phẩm để đời. Với công nghệ tuyệt vời, tiềm năng thiết kế tuyệt vời sẽ xuất hiện.
Từ đồng hồ thông minh cho đến điện thoại gập, các designer luôn nỗ lực thể hiện khả năng thích ứng thực sự của mình. Thiết kế không gian (Spatial design) cũng không ngoại lệ.
Hình 6 - A glimpse of what is to come
Điều này đi kèm với sự ra mắt của một công cụ tập trung vào designer phổ biến có tên là “Bezi”. Nó cũng tương tự với các công cụ thiết kế như Figma và Spline, nhưng có thêm chiều thứ 3. Các nhà thiết kế có thể tham gia thiết kế không gian, kết nối tai nghe AR/VR đang hoạt động và tạo ra trải nghiệm không gian tương tác. Và dĩ nhiên, thiết kế web hiện nay cũng đã có một số bên sử dụng công nghệ này để tăng thêm trải nghiệm người dùng.
Để hình dung được Bezi, hãy cùng chúng tôi lướt qua về những gì Bezi cho phép bạn có thể tạo ra, không chỉ còn là design thông thường:
Hình 7 Demo from Bezi.com
Bạn biết đấy với UX tốt hơn chính là yếu tố đóng góp lớn cho trải nghiệm AR/VR tốt hơn. Hiểu sâu sắc công nghệ đằng sau những thiết kế đẹp mắt, sử dụng tai nghe VR thực tế, thử nghiệm mọi thứ trong môi trường không gian, tất cả đều sẽ là một phần của công việc mà các designer cần phải có.
Chắc chắn sẽ có rất nhiều bài học và thay đổi mới đối với sự hiểu biết hiện tại của chúng ta về UX khi chúng ta tiếp tục với ngành design. Tuy nhiên, đây là một trong những kỹ năng bạn muốn tích lũy ngay bây giờ và có thể sử dụng trong tương lai - đây là đầu tư lâu dài có lãi đấy.
Ngoài trí tưởng tượng phong phú và túi tiền dồi dào của Apple, còn có một số công ty ít hiểu biết về công nghệ hơn mang đến trải nghiệm hoàn toàn mới cho việc đeo kính.
Mặc dù dự án “Google Glasses” của Google chưa bao giờ được sản xuất với số lượng cực khủng nhưng công ty kính mát RayBan đã tham gia vào cuộc đua thiết bị đeo thông minh với Meta Wayfarer mới của họ.
Hình 8 Image credits — RayBan
Đừng để thiết kế của RayBan bình thường đánh lừa bạn; Camera tích hợp và các tính năng thông minh cho phép bạn lưu trữ video/hình ảnh và phát trực tiếp lên mạng xã hội. Điều này mang đến một chiều hướng hoàn toàn mới cho trải nghiệm người dùng (user experience) và trải nghiệm khách hàng (customer experience). Có lẽ đây sẽ là xu hướng thiết kế website 2024. Ai mà biết được điều gì có thể xảy ra ở thế giới tương lai của con người!
3. Mọi người đều có thể hoạt hình hoá theo ý mình (Animation trend)!
Nghe có vẻ lạ đúng không? Bình tĩnh nhé, Markdao sẽ giải thích phần này ngay sau đây:
Một xu hướng mới thường ra đời khi một kỹ năng mới có thể tiếp cận được với nhiều người hơn. Khi nhắc đến xu hướng thiết kế 2024, Animation trend sẽ là cái tên được nhắc đến trong danh sách này.
Đây là một nhiệm vụ mà LottieFiles đảm nhiệm. Khi tôi gia nhập công ty với tư cách là người truyền dạy, tôi đã rất ngạc nhiên về những animation dễ dàng mà chúng tôi có thể thêm vào bất kỳ giao diện người dùng nào (Ui) trong bất kỳ công cụ nào. Xem xét nhu cầu về animation lottie, họ thậm chí còn tung ra một plugin cho Figma cho phép chúng tôi chuyển đổi animation Figma của mình thành file JSON lottie có thể xuất được.
Hình 9 - LottieFiles plugin for Figma
Điều này loại bỏ quá trình learning khá lớn của After Effects và các phần mềm tương tự. Do đó, designer có thể tự mình tạo animation một cách nhanh chóng.
Ngày nay, bạn cũng sẽ bắt đầu nhận thấy các tương tác hấp dẫn trên landing page của mọi công ty. Tất cả là nhờ nhu cầu ngày càng tăng về trải nghiệm khác biệt cho khách truy cập trang web và nhu cầu kể chuyện như một công cụ để bán sản phẩm/dịch vụ ngày càng tăng.
Check ngay website inspiration, lấy tương tác landing page sau đây làm ví dụ chứng minh cho sức mạnh của animation:
Hình 10: Apple Watch Series 9 Landing Page — Double Tap Interaction on Scroll
Áp dụng thử Animation và bắt tay vào thiết kế xu hướng thiết kế website 2024 của bạn. Với scroll animation tại chỗ, khách truy cập sẽ say mê với những gì bạn trình bày với họ. Các công cụ no-code như Webflow và Framer không ngừng đổi mới để mang lại khả năng animation như vậy cho các designer mà không gặp rắc rối khi viết những dòng code dài.
Người ta sẽ nghĩ chuyến đi của chiếc trend animation kết thúc ở đây. Animation có thể đã đạt đến đỉnh cao của nó và không còn gì để mong chờ nữa. Thật may mắn cho chúng ta, những người làm trong lĩnh vực công nghệ luôn tìm kiếm những bức phá lớn lao tiếp theo. Ngoài ra, do có vô số công cụ hữu ích nên mọi thứ bạn có thể tưởng tượng đều có thể thực hiện được.
Một khả năng như vậy gọi là “animated button trend” mới. Kiểu Ui mới mang đến các animation technique để làm sống động với một nút giản đơn, không thể tương tác nhiều. Những thay đổi này bao gồm từ animation nét vẽ đơn giản xung quanh button cho đến các ngôi sao theo nghĩa đen di chuyển bên trong button khi di chuyển con chuột.
Hãy ngắm "animated button" bên dưới để thấy thích hơn mỗi lần bạn rê chuột vào:
Hình 11 - Click Button của Galaxy
Những xu hướng thiết kế website 2024 như vậy thường được tạo ra bởi hiệu ứng domino. Đầu tiên, bài đăng trên mạng xã hội của một designer trở nên phổ biến, sau đó các designer nổi bật khác cũng theo dõi.
4. Có phải là sự kết thúc của Flat Design?
Ngược đời khi đang bàn luận về xu hướng 2024, nhưng lại nhắc đến thoái trào của Flat Design nhưng chúng ta cần điểm qua nó vì trend tiếp theo cũng có nguồn gốc từ nó mà ra.
Gần đây, rất nhiều designer đang nói về việc xu hướng thiết kế website 2024 thế giới thiết kế đang chuyển đổi từ flat design (như thiết kế bạn có thể thấy ở đây trên Medium) sang pseudo realistic visual style. Dù chúng ta đã từng thấy có nhất nhiều website inspiration áp dụng Flat Design đã làm mưa làm gió trong quá khứ nhưng giờ đây chúng đã chỉ còn là quá khứ mà thôi. Các xu hướng thiết kế nói chung và thiết kế website nói riêng trong thời nay, chúng bao gồm đồ họa 3D (3D graphic), hiệu ứng chiều sâu (depth effect), neuemorphism, skeuomorphism, v.v.
Gần đây, chúng tôi thấy rất nhiều công ty triển khai 3D làm phong cách cốt lõi của họ. Mặc dù hiện tại nó có thể chưa xuất hiện nhiều trên web design và ứng dụng, nhưng logo đang được cập nhật theo trend mới này.
Hình 12: Just a few good examples of the new 3D wave made by Chan Karunaratne
Giống như các trend khác, lý do chính để mọi người triển khai các phong cách này là sự ra đời của các công cụ 3D dựa trên web “dễ sử dụng” như Spline và Vectary giúp việc đưa nội dung 3D vào web và ứng dụng trở nên cực kỳ dễ dàng. Họ cũng làm cho nội dung 3D trở nên sống động bằng cách sử dụng animation.
Tôi như phát điên khi biết rằng linear gradient cơ bản và một số shadow có thể thêm chiều sâu và 3rd dimension cho design và asset của bạn.
Một công ty khác luôn định hướng thiết kế và tạo trend là Airbnb. Họ nổi tiếng rộng rãi nhờ các thiết kế và tương tác ứng dụng đơn giản nhưng lại hiệu quả. Vào năm 2023, họ đã công bố một bản cập nhật ứng dụng thực sự sẽ mang lại một số tính năng mới và quan trọng.
Họ đã làm gì? Họ đã kết hợp hơn chục yếu tố hình ảnh 3Dish và video thông báo của họ hầu hết đều là về dạng 3D.
Hình 13: Launch video by Airbnb
Isometric visual, nhân vật 3D và animation cũng như hàng loạt tương tác ứng dụng khiến tôi muốn xem đi xem lại. Quá trình chuyển đổi từ phẳng sang 3D thực sự diễn ra chậm và ổn định, đó là lý do tại sao tôi tin rằng xu hướng này sẽ tiếp tục tồn tại.
Và dĩ nhiên, việc thiết kế website (web design) với sự kết hợp của Isometric visual, nhân vật 3D và animation, mỗi yếu tố có độ cân bằng nhất định chắc chắn, một website khá cool sẽ ra đời đấy.
Hiện tại, ai đã bắt đầu xu hướng thiết kế website 2024 này vẫn luôn là một điều bí ẩn, nhưng nhu cầu về các thiết kế thực tế và dễ hiểu đã thúc đẩy chúng ta đổi mới vì người dùng và tất nhiên là vì những lý do sáng tạo của chính chúng ta.
5. Cơn lũ đổ bộ của A.I. Design Tool - Bạn hay thù?
Trí tuệ nhân tạo là từ được sử dụng và công nhận nhiều nhất trong lĩnh vực công nghệ trong thập kỷ qua. Trong khi một số designer coi đó là mối đe dọa cho tương lai nghề nghiệp của họ, thì hầu hết chúng ta đang sử dụng công nghệ này để tạo ra những thiết kế đẹp nhất nhanh hơn. Chúng ta cũng phải thừa nhận rằng một số công việc thiết kế web hiện nay kể từ giữa năm 2023 và kéo dài đến xu hướng thiết kế 2024 tiếp tục ứng dụng A.I giúp rút ngắn thời gian thiết kế rất nhiều so với trước.
Hình 14: Adobe Firefly being used for video manipulation
Một bộ công cụ thiết kế tự quảng cáo là “A.I. được hỗ trợ”, đang cố gắng triển khai Open A.I. API ở nhiều cấp độ khác nhau và cũng đang hoạt động trên A.I. model. Tuy nhiên, hầu hết các tính năng của những A.I. này chỉ đơn giản là mánh lới quảng cáo. Thiết kế Ui ngẫu nhiên, xáo trộn các asset và thậm chí cung cấp các giải pháp cơ bản cho các vấn đề khó khăn khách hàng đang gặp phải. Đây chỉ là một vài lời chỉ trích mà tôi có, và nó được rất nhiều thành viên trong cộng đồng designer ủng hộ.
Trong sự lộn xộn của những mánh lới quảng cáo này, có một số anh hùng đã đến để giải cứu thế giới đang bị lừa lọc. Một anh hùng như vậy là Relume, một nhân vật được người hâm mộ yêu thích. Công ty tập trung vào Webflow này đã đưa ra một thứ gọi là Relume A.I., một công cụ hiệu quả lập wire-framing and site-mapping tool.
Hình 15: Relume A.I in action
Bạn đưa vào một câu prompt, nói về cơ bản để mô tả dự án của bạn và nó cũng đưa ra wire-frame and site-map hoàn chỉnh cho bạn. Wire-frame này chứa đầy dữ liệu và các layout có liên quan có thể được sao chép nhanh chóng sang Figma và Webflow.
Ngoài ra, hãy cho tôi biết liệu tôi có phải là người duy nhất cho rằng Chat-GPT đang hủy hoại khả năng sáng tạo của con người và xây dựng sự phụ thuộc của chúng ta vào nó không?
6. UX tiến đến tinh thần thân thiện và đồng cảm với trải nghiệm người dùng hơn
Nếu đáp ứng đủ về visual và UI design. Ít nhất có thể nói rằng UX đã phát triển và đây là điều này có thể được chứng minh bằng những gì các nhà nghiên cứu và các designer UX đang tập trung vào. Bạn biết đấy, điều này có nghĩa là giảm bớt quy trình để khiến cho các design trở nên dễ tiếp cận và toàn diện.
Rất nhiều designer đang dấn thân vào lĩnh vực usability hơn là visual design. Điều này đã mang lại những xu hướng thiết kế website 2024 đơn giản và dễ thực hiện hơn cho trung tâm. Các designer đang tập trung vào những gì mang lại hiệu quả hơn là phát minh lại "những bánh xe cũ kỹ", bất chấp những thay đổi trong ngành trong vài năm qua.
Hình 17: Google trends graph on “UX Accessibility” from 2019 to 2023
Biểu đồ xu hướng của Google ở trên cho thấy accessible design đã trở thành một yêu cầu mang tính công nghiệp như thế nào.
Các kỹ thuật trợ năng này bao gồm từ độ tương phản màu sắc (color contrast), font chữ dễ đọc (readable font), các yếu tố hành động dễ nhận biết (recognisable action elements), cho đến việc tạo shadow cho những người có khả năng tiếp cận khác nhau để đưa các tính năng tập trung vào khả năng tiếp cận vào bảng.
Tại sao Accessibility lại có nhu cầu ngày càng tăng?
Accessibility cũng đang bị đẩy mạnh do nhu cầu thiết kế hiện tại cho mọi người ở mọi lứa tuổi và thậm chí cả những người bị hạn chế về thể chất. Các công ty muốn kiếm tiền từ tất cả các nhóm nhân khẩu học khác nhau và cũng đang thúc đẩy tính toàn diện ở mọi khía cạnh. Khi ngày càng có nhiều người sử dụng kỹ thuật số, designer gần như bắt buộc phải tập trung vào xu hướng thiết kế website 2024 dễ tiếp cận (accessible design).
Ngay cả các khóa học và chương trình đào tạo đã nắm bắt được nhu cầu từ rất xa và cũng đang chuẩn bị cho sinh viên bước vào thiết kế với kiến thức tốt về accessible design.
Cá nhân hóa
Ngoài Accessibility, cá nhân hóa là yếu tố thực sự khiến mọi người bị khóa ở lại một ứng dụng hoặc trang web nào đó. Chắc hẳn bạn đã từng thấy thông báo nhỏ này trên YouTube trước đây -
Hình 18: Youtube assessing what kind of content you like to give you better recommendations
Bạn cũng có thể quan sát thấy nhiều ứng dụng khác nhau thử nghiệm một tính năng mới trong vài ngày và sau đó rút lại vì người dùng không đánh giá cao nó. Đây là sự thể hiện trực tiếp về cách các Ux designer đang dẫn dắt cuộc chơi khi nói đến tương lai của các sản phẩm và dịch vụ và xu hướng thiết kế website 2024.
