Như thường lệ, hàng năm The Next Web đưa ra một danh sách các xu hướng thiết kế website. Trong năm 2019, xu hướng thể hiện trong nhiều yếu tố thiết kế như layout, màu sắc, typography, khoảng trắng, tất cả mọi thứ đều có thể được tận dụng để làm nổi bật trang web của bạn.

1/ Phá vỡ Grid trong thiết kế và sử dụng bố cục bất đối xứng

Trong hầu hết website, ta có thể dễ dàng nhận ra grid thông qua bố cục trang web. Tuy nhiên, với các thiết kế gần đây, grid bị phá vỡ. Các đối tượng xếp đè lên nhau hoặc trên một grid khó nhìn thấy hơn. Điều này làm các website bớt khô cứng và có phần phá cách.

times-talks-su-dung-typography-mot-cach-pha-cach-voi-mot-phan-text-de-len-phan-hinh-anh-va-grid-bi-pha-vo
Times Talks sử dụng typography một cách phá cách với một phần text đè lên phần hình ảnh và grid bị phá vỡ.

2/ Sử dụng các thiết kế hoặc element gợi cảm giác tự nhiên

Các thiết kế mang hơi hướng flat-design với shape hình học vuông, tròn, tam giác dần được thay thế bằng các shape gợi cảm giác tự nhiên. Các shape này tạo cho thiết kế cảm giác thân thiện hơn với người dùng.

mot-phan-trong-trang-chu-cua-wandering-aimfully-de-thay-ben-duoi-cac-shape-tron-chua-hinh-anh-la-cac-organic-shape-voi-tone-mau-nhe-nhang
Một phần trong trang chủ của Wandering Aimfully, dễ thấy bên dưới các shape tròn chứa hình ảnh là các organic shape với tone màu nhẹ nhàng.

3/ Thiết kế tạo cảm giác hoài cổ

Lịch sử dường như lặp lại. Và những gì được cho là cool của quá khứ dường như cũng có thể thành cool của hiện tại. Năm 2019 chúng ta có thể thấy nhiều trang web có thiết kế mang hơi hướng hoài cổ, gợi nhắc đến thẩm mỹ của một thời đã qua.

website-statamic-su-dung-cach-phoi-mau-goi-nhac-den-nhung-hinh-anh-cua-thap-nien-1980
Website Statamic sử dụng cách phối màu gợi nhắc đến những hình ảnh của thập niên 1980

4/ Cải tiến tối đa trong việc sử dụng hình ảnh

Hình ảnh luôn là cơ hội để tạo điểm nhấn cho website. Đặt hình ảnh trong khung tròn, chuyển hình ảnh sang trắng đen, đổ bóng cho hình ảnh, tất cả các kỷ thuật trên đều được designer sử dụng để thu hút sự chú ý của người dùng.

Thay vì chỉ sử dụng một hình ảnh một hình ảnh lớn đơn giản để làm hero-header, ta có thể sử dụng nhiều phương pháp khác như biến hình ảnh thành đơn sắc, thêm pattern, thêm các shape để làm nổi bật chủ thể…

thay-vi-su-dung-mot-hinh-anh-lon-thong-thuong-website-kobu-tach-roi-chu-the-ra-khoi-anh-nen-nguoi-dung-co-the-xem-qua-lai-cac-thanh-vien-cua-team-qua-thao-tac-slide
Thay vì sử dụng một hình ảnh lớn thông thường, website KOBU tách rời chủ thể ra khỏi ảnh nền. Người dùng có thể xem qua lại các thành viên của team qua thao tác slide.

5/ Sử dụng màu màu đơn sắc hoặc đen trắng

Sử dụng màu sắc để tạo điểm nhấn cho website là phương pháp phổ biến của designer. Chúng ta có hàng triệu màu để chọn lựa. Tuy nhiên, sẽ ra sao nếu designer chỉ sử dụng giới hạn một màu hoặc không sử dụng màu sắc trong thiết kế? Nếu sử dụng một cách linh hoạt và đúng phương pháp, website của bạn sẽ nổi bật và dễ gây ấn tượng cho người dùng trong hàng tá website đầy màu sắc khác.

website-digital-bro-chi-su-dung-tone-mau-vang-cho-thiet-ke-cua-minh
Website Digital Bro chỉ sử dụng tone màu vàng cho thiết kế của mình.

6/ Chồng đè các yếu tố lên nhau trong thiết kế website

Chúng ta đã quen với việc các yếu tố trên trang web luôn có không gian riêng, khu vực nào ra khu vực đó. Do vậy, khi chồng đè các yêu tố lên nhau, trang web mặt nào đó sẽ trở nên thú vị và nổi bật hơn.

Tuy thế, phương pháp này cần được sử dụng một cách có cân nhắc. Trên các thiết bị mobile, các yếu tố chồng đè lên nhau dễ trở nên lộn xộn nếu không được xử lý tốt, gây khó khăn đáng kể cho người dùng.

mad-studio-su-dung-cac-yeu-to-chong-len-nhau-text-hinh-anh-shape
Mad Studio sử dụng các yếu tố chồng lên nhau (text, hình ảnh, shape). Thêm vào đó, website sử dụng thêm một số hiệu ứng animation khi người dùng tương tác tạo cho website có cảm giác 3-D

7/ Sáng tạo lại khu vực hero header

Thông thường, khu vực hero header (thuật ngữ khác là “above the fold”) được xử lý với một hình ảnh lớn, text được thêm vào để nhấn mạnh nội dung và thu hút sự chú ý của người dùng. Trong nhiều năm gần đây, khu vực này được xử lý với nhiều cách khác nhau thể hiện sự sáng tạo của đội ngũ designer và developer.

zoo-creative-thiet-ke-khu-vuc-hero-header-nhu-mot-bang-quang-cao-kho-rong-voi-cac-animation-duoc-su-dung-mot-cach-hop-ly
Zoo Creative thiết kế khu vực hero header như một bảng quảng cáo khổ rộng với các animation được sử dụng một cách hợp lý.

8/ Thanh điều hướng to hơn và mang lại nhiều trải nghiệm hơn

Thanh điều hướng là một thành phần cơ bản của website. Có thể nói, thanh điều hướng định nghĩa một cách căn bản việc chúng ta sử dụng website theo cách nào. Mỗi năm, ta lại thấy một thay đổi nào đó liên quan đến thanh điều hướng. Trong năm 2019, thanh điều hướng được sử dụng như một điểm nhấn cho trang web chứ không chỉ đơn thuần thực hiện chức năng riêng biệt là dẫn link sang các trang khác

website-gander-su-dung-phan-dieu-huong-lon-nam-o-bon-goc-cua-website-thay-vi-nam-phia-tren-hay-phia-duoi-cua-website
Website Gander sử dụng phần điều hướng lớn nằm ở bốn góc của website thay vì nằm phía trên hay phía dưới của website.

9/ Sử dụng tối đa khoảng trắng trong thiết kế

Khoảng trắng không phải là một điều lãng phí giống như những gì chúng ta nghĩ. Sử dụng khoảng trắng trong thiết kế hiện đại là một phương pháp để tạo điểm nhấn cho website.

daniel-boddam-su-dung-mot-khoang-trang-rat-lon-trong-website-duoc-xem-la-xu-huong-thiet-ke-website-2019
Daniel Boddam sử dụng một khoảng trắng rất lớn trong website của mình. Thay vì trình bày nhiều content, website này tận dụng khoảng trắng vừa như một phần không gian nghỉ, vừa thu hút sự chú ý của người dùng

10/ Phá vỡ các giới hạn trong việc sử dụng Typography

Trong thiết kế in ấn, các trải nghiệm đến từ typography dễ dàng hơn trên môi trường website. Tuy nhiên, code của website ngày càng có những cải tiến đáng kể tạo điều kiện cho designer thử nghiệm những tính năng mới liên quan đến typography.

website-kurppa-hosk-su-dung-typography-va-cac-hieu-ung-animation-nhu-mot-yeu-to-chinh-trong-trai-nghiem-nguoi-dung-text-se-bung-ra-nhieu-huong-theo-dang-tron-khi-nguoi-dung-di-chuyen-chuot
Website Kurppa Hosk sử dụng typography và các hiệu ứng animation như một yếu tố chính trong trải nghiệm người dùng. Text sẽ bung ra nhiều hướng theo dạng tròn khi người dùng di chuyển chuột.

Tạm Kết

Chúng ta dần bỏ qua xu hướng flat design trong những năm gần đây. Với việc sử dụng tối đa khoảng trắng, biến thanh điều hướng thành khu vực tạo điểm nhấn, thử nghiệm mới với typography…, năm 2019 là một năm sôi động với nhiều cải tiến trong từng thành phần của website.

Theo The Next Web

Xem thêm