11 xu hướng thiết kế web và giao diện người dùng hàng đầu năm 2020

11 xu hướng thiết kế web và giao diện người dùng hàng đầu năm 2020

Chúng tôi đã bắt đầu thấy một số yếu tố thiết kế sẽ nóng trong năm 2020 (và có thể hơn thế nữa). Hầu hết các chủ đề thiết kế web theo xu hướng này là sự tiếp nối của những thứ đã được xây dựng trong các dự án thiết kế – nhiều độ dốc hơn , kiểu chữ phá vỡ quy tắc và rất nhiều sự tối giản.

Nhưng cũng có những xu hướng đang nổi lên, những thiết kế như vậy có các chế độ tối tối, nhiều giao diện với các yếu tố âm thanh và một cú hích lớn cho hình ảnh và các yếu tố 3D.

Thiết kế web và xu hướng giao diện người dùng sẽ tiếp tục vào năm 2020

Chủ nghĩa tối giản + Không gian trắng

Điều tốt nhất về xu hướng thiết kế này là trong khi nó vẫn mạnh mẽ, nó vẫn tiếp tục phát triển. Chủ nghĩa tối giản vào năm 2020 được đánh dấu bằng những dải lớn của không gian trắng. Và không phải lúc nào cũng ở nơi bạn mong đợi.

11 xu hướng thiết kế web và giao diện người dùng hàng đầu năm 2020
11 xu hướng thiết kế web và giao diện người dùng hàng đầu năm 2020

Trong khi Whiteboard có phong cách tối giản cổ điển hơn – thậm chí có thể tối giản hóa – Soldo sử dụng chủ nghĩa tối giản mới một cách đẹp mắt. Bức ảnh đơn giản gần như trắng và nằm trên nền trắng với khoảng trắng bất đối xứng để giúp thu hút người dùng thông qua nội dung.

Cả hai ví dụ cho thấy lý do tại sao chủ nghĩa tối giản hoạt động: Chúng thanh lịch, đẹp và dễ hiểu (làm cho chúng có khả năng sử dụng cao).

Chế độ tối Dark

Với rất nhiều người dùng lựa chọn chế độ tối tối trên các ứng dụng và các ứng dụng như email, không có gì ngạc nhiên khi nhiều trang web cũng đang tạo ra các thiết kế có tính thẩm mỹ tối. (Người dùng đã nói rằng họ muốn và sử dụng nó, vì vậy các nhà thiết kế đang phân phối.)

Điều làm cho các thiết kế chế độ tối này trở nên đẹp – và có lẽ là lý do tại sao chúng có xu hướng – là các giao diện tối được bổ sung các yếu tố dấu sáng và kiểu chữ dễ đọc để đảm bảo rằng thiết kế có thể đọc được.

CanneSeries thực hiện nó với màu sắc gần như neon và hoạt hình với chữ in đậm, trong khi Davenport sử dụng các chữ cái khối màu trắng và màu vàng trang nhã để kêu gọi hành động và các yếu tố có thể nhấp khác.

Quy tắc phá vỡ kiểu chữ

Chìa khóa để làm cho xu hướng thiết kế này hoạt động là ngay cả khi phá vỡ các quy tắc loại – khoảng cách lẻ, kích thước hoặc khoảng cách dòng hoặc ngắt – người dùng vẫn cần hiểu những gì bạn muốn nói. Thông thường nhất, typography trong phong cách này là một yếu tố nghệ thuật và ít hơn một thông tin.

J Powers Sự kiện phá vỡ các quy tắc loại theo cách không ảnh hưởng đến khả năng đọc với tiêu đề chính xuyên qua không gian của nền và hình ảnh nền trước. Điều đặc biệt thú vị ở đây là kiểu thay đổi màu sắc với vị trí, tạo hiệu ứng lớp. Thiết kế cũng sử dụng một yếu tố văn bản tròn giữa các yếu tố nền để kết nối các không gian.

Makers & Dreamers lật, turs và xoắn kiểu chữ theo những cách mà bạn sẽ không nghĩ đến việc thử. Nhờ các lựa chọn công việc đơn giản và thiết kế tổng thể sạch sẽ, các từ vẫn có thể đọc được và thiết kế đi kèm với nhau.

Xu hướng minh họa nghệ thuật

Minh họa nghệ thuật – đặc biệt là các yếu tố với hình vẽ theo phong cách và gợi ý về hoạt hình – đang tiếp tục phát triển phổ biến. Xu hướng thiết kế trang web này dường như đã đạt được các giao dịch bởi vì nó trông và cảm thấy xác thực, không bị ràng buộc và một chút hay thay đổi.

Thiết kế vô lý thể hiện điều này với một bộ sưu tập các yếu tố nghệ thuật giàu trí tưởng tượng, sáng tạo và một chút ma quái. Mỗi hình minh họa được thực hiện để trông giống như nó đã được phác thảo trên màn hình.

Heschung sử dụng các hình minh họa đơn giản, theo phong cách để kể một câu chuyện bằng hoạt hình. Các hình minh họa cũng hay thay đổi, và sự đơn giản của thiết kế giúp giữ sự tập trung vào câu chuyện trong tầm tay.

Trộn Minh họa và Hiện thực

Trang web của Constance Burke có thể giới thiệu nó rõ ràng nhất với hình ảnh mặc các mảnh quần áo minh họa. Thật sôi nổi và tuyệt vời. Thiết kế của Bubka thật tuyệt vời với hình minh họa, hình dạng địa lý táo bạo, hình động và hình ảnh tất cả di chuyển và chảy cùng nhau trong thiết kế. (Lưu ý cách mọi thứ liền mạch di chuyển cùng nhau khi bạn cuộn.)

Hoạt hình sáng tạo

Hầu như mọi trang web bạn truy cập dường như bao gồm một số hình thức hoạt hình. Điều thực sự thịnh hành là hoạt hình theo phong cách lỏng với chuyển động trông giống như nước.

Hoạt hình lỏng có thể hoạt động cho toàn bộ cảnh như một cách để chuyển các yếu tố video, dưới dạng trạng thái di chuột để lôi kéo nhấp chuột hoặc như một hoạt hình chung giúp thu hút người dùng vào thiết kế. Bí quyết để làm cho xu hướng này hoạt động là trong tốc độ di chuyển. Nó phải mượt mà, trôi chảy và đúng lúc cho cảm giác chân thực nhất.

Xu hướng thiết kế 3D

Thêm chiều sâu tạo ra cảm giác chân thực hơn cho một thiết kế. Hình ảnh ba chiều là một phần mở rộng của ý tưởng đó. Đó là một xu hướng chúng ta bắt đầu thấy rất nhiều vào gần cuối thập kỷ này, và hy vọng sẽ thấy nhiều hơn nữa vào năm 2020.

Các thiết kế 3D tốt nhất mang đến cho người dùng một điều gì đó hơi bất ngờ, chẳng hạn như mặt nạ bị vỡ trên trang Metaconf Meetup hoặc cuộn sang một bên cho đôi giày nhỏ trên trang Toke.

Xu hướng thiết kế trải nghiệm người dùng âm thanh

Mặc dù bạn có thể mong đợi đọc nhiều hơn về thiết kế giọng nói trong năm tới, một phần của xu hướng đó đã có ở đây – thiết kế với âm thanh.

Tôi chưa bao giờ là một fan hâm mộ của âm thanh tự động phát trên một trang web. (Tôi thấy nó khá khó chịu và chói tai hầu hết thời gian.) Nhưng không thể phủ nhận rằng trải nghiệm người dùng âm thanh đang là xu hướng. (Chỉ cần nhớ hỏi người dùng trước khi làm nổ nhạc chủ đề!)

La Ofrenda Mas Grande de Mexico và Tạp chí IFly đều tôn trọng quy tắc đó và sử dụng âm thanh để nâng cao chất lượng của hành trình người dùng trong các thiết kế của họ. Việc sử dụng tốt nhất trải nghiệm người dùng âm thanh có thể là trong các thiết kế có rào cản ngôn ngữ, bởi vì âm nhạc có thể là một công cụ tuyệt vời khi nói về cách kể chuyện dựa trên web.

Các lớp và các phần tử chồng chéo

Lớp, lớp, và nhiều lớp hơn. Các lớp và các phần tử chồng chéo không hoàn toàn tạo ra hiệu ứng 3D, nhưng chúng làm tăng thêm cảm giác về chiều sâu và kích thước cho các dự án.

Mặc dù các lớp chồng lấp có thể ở dạng một phần tử, xu hướng này thường bao gồm nhiều phần tử chồng chéo. Phần tốt nhất là nó hoạt động với hầu hết mọi loại sơ đồ thiết kế.

Bạn có thể chồng chéo các hộp và hình nền, hình ảnh hoặc video, văn bản hoặc các thành phần giao diện người dùng và biểu tượng. Phần khó nhất có thể là đảm bảo rằng giao diện chồng chéo chảy qua cuộn của thiết kế.

Craft Kitchen sử dụng nhiều yếu tố chồng chéo – ảnh trong điều hướng, văn bản trong ảnh và khung ảnh trong khung ảnh. Các yếu tố tiếp tục xếp chồng và chồng lên nhau trên cuộn để duy trì chủ đề hình ảnh.

Trang web của Curt Thompson MD làm điều đó với các thẻ hình chữ nhật với các góc tròn. Bạn gần như có thể mong đợi bất kỳ yếu tố thiết kế nào với các cạnh tròn sẽ chồng lên một thứ khác để tạo độ sâu của trường. Đó là một cách hay để tổ chức nhiều loại yếu tố và nội dung khác nhau theo cách thống nhất.

Xu hướng tốt nghiệp

Có một khoảng thời gian ngắn trong chiều cao của thiết kế phẳng mà các nhà thiết kế tránh xa độ dốc. Nhưng họ đã quay trở lại và sẽ còn lớn hơn vào năm 2020.

Từ nền đậm với độ dốc nhiều màu cho đến độ dốc tinh tế cho kết cấu, xu hướng này có ở khắp mọi nơi. Những gì chúng ta đang thấy bây giờ, là độ dốc kết hợp nhiều màu sắc với khá nhiều độ tương phản, thay vì độ dốc đơn sắc tinh tế hơn phổ biến vào cuối.

Điều hướng hợp lý

Mặc dù điều này có vẻ như là một ý tưởng mạo hiểm lúc đầu, nhưng nó thực sự có nhiều ý nghĩa. Hầu hết người dùng truy cập trang web của bạn thông qua công cụ tìm kiếm và có thể không bắt đầu trên trang chủ. Điều hướng ít hơn tạo ra một đường dẫn trực tiếp hơn đến nơi bạn muốn người dùng tham gia nhiều nhất vào thiết kế. Sắp xếp hợp lý các kiểu điều hướng cung cấp nhiều chỗ hơn trên khu vực vải chính để nhắn tin và nội dung.

Phần kết luận

Hãy lưu ý ví dụ trên của Sony Music. Nó sử dụng một gradient đầy màu sắc, phác thảo tối thiểu, hoạt hình lỏng và phá vỡ các quy tắc chính tả khi hoạt hình lấn vào không gian của văn bản. (Và mặc dù nghe có vẻ nhiều, nhưng thiết kế hoàn toàn không áp đảo.)

Nhiều yếu tố thiết kế hiện đại làm việc với nhau, vì vậy bạn có thể kết hợp và kết hợp các xu hướng và phong cách để tạo ra thứ gì đó hợp thời trang và tinh tế. Thường thì bạn học cách chỉ sử dụng một thiết kế lừa Thủ thuật, nhưng với các sơ đồ thiết kế phức tạp hơn, quy tắc này dường như bị bỏ lại phía sau.

Miễn là xu hướng thiết kế đóng góp vào khả năng sử dụng và không lấy đi từ đó, hãy thoải mái chơi và kết hợp các xu hướng để tận dụng tối đa các dự án.