Xu hướng naviagtion mới trong thiết kế web: full-screen menu (P.1)

Thứ bảy - 18/08/2018 09:15

Hôm nay chúng ta sẽ cùng trải nghiệm cảm xúc mới mẻ với 20 thiết kế website có sử dụng full-screen navigation độc đáo.

Xu hướng naviagtion mới trong thiết kế web: full-screen menu (P.1)

Cũng giống như những chi tiết khác trong giao diện người dùng của một website, menu cũng thay đổi theo các xu hướng thiết kế web mới. Một số sự thay đổi trong cách làm menu có thể mang lại trải nghiệm tuyệt vời cho website, trong khi không ít phương án lại phá hủy một website. Việc chạy theo xu hướng, đặc biệt là khi thiết kế navigation, cần phải hết sức cân nhắc. 

Chẳng hạn như menu ẩn và thanh navigation tối giản có thể đang là trào lưu thịnh hành. Xong bạn cũng nhận thấy là nó không phù hợp với mọi dự án thiết kế. Ngược lại hoàn toàn, các menu toàn trang (full-screen menu) lại thích ứng tốt với mọi loại website. Xu hướng này có tính linh hoạt hơn và không làm hỏng UX cho nên có đang dần phổ biến hơn. Nó âm thầm hiển thị mọi dữ liệu và công cụ đa phương tiện lên bề mặt. Tất nhiên chỉ với một cú click chuột là bạn đã rời trang chủ, nhưng đó là sự hy sinh cần thiết để có một UX tốt. 

Hôm nay chúng ta sẽ cùng trải nghiệm cảm xúc mới mẻ với 20 thiết kế website đẳng cấp chuyên nghiệp có sử dụng full-screen navigation độc đáo. 

Maecia

1 maecia navigation trong thiet ke web

Maecia toát lên vẻ tinh tế và duyên dáng của những chi tiết cơ khí vốn dĩ khô khan thường ngày. Navigation dựa trên hình ảnh đã giúp truyền tải cảm xúc hoàn hảo và sự năng động của chủ đề.  

Olcese

2 olcese navigation trong thiet ke web

Olcese có một số menu cho phép người dùng khám phá website tốt hơn cũng như nhấn mạnh nhận diện thương hiệu. Navigation có bố cục dạng lưới với các hình ảnh có liên quan đến chủ đề, được sử dụng cùng với những đồ họa thông minh và hiệu ứng thú vị...đã đóng vai trò quan trọng trong sự thành công của website. 

Moeko ABE

3 moeko abe navigation trong thiet ke web

Bạn có thể mong đợi điều gì từ online portfolio của một nhiếp ảnh gia? Một trang chủ trên nền ảnh tuyệt vời với navigation đa phương tiện đã nói lên những điều đặc biệt về người nghệ sỹ. 

Conference Awwwards

4 conference awwwards navigation trong thiet ke web

Với một trang chủ tiên phong và ngay lập tức thu hút sự chú ý bằng HTML/CSS/JS aniamtion., navigation của website này chiếm toàn bộ màn hình và nạo điểm nhấn tại navigation link.  

Drygital

5 drygital navigation trong thiet ke web

Menu chính của Drygital mang lại cảm xúc tích cực và vui vẻ cho mọi người. Phần nền gradient rực rỡ của nó làm nền cho việc thể hiện navigation với những kỹ tự màu trắng. Một menu thông thường xuất hiện trên trang, nhưng nhờ diện mạo trong suốt một nửa, chúng ta có thể xem được video ở landing page. 

Aleman’s Design

6 alemans design navigation trong thiet ke web

Aleman’s Design có một navigation liền mạch và rất ăn ý với cả màn hình trang web, góp phần không nhỏ vào tính thẩm mỹ. Đội thiết kế đã sử dụng một phương án mới lạ khi tận dụng một animation backdrop để nhán mạnh các chi tiết của menu.

Mas Industries

7 mas industries navigation trong thiet ke web

Mas Industries sở hữu một full-screen navigation menu rất thanh lịch với nút bấm “hamburger” nhỏ nhắn. Cảm giác nghiêm túc và một chút lạnh lùng bao trùm website. Sự tương phản giữa tiền tố và hậu tốt tuy không tốt, nhưng đó là giải pháp để tạo sự kết nối trong website. 

Danne Olsson

8 danne olsson

Danne Olsson sử dụng hiệu quả nền ảnh với mô-típ về thiên nhiên. Người thiết kế đã chọn một màu nền đậm đà cho navigation toàn trang của mình. 

Impossible Bureau

9 impossible bureau navigation trong thiet ke web

Đây là navigation chính chia trang trước của website thành 4 cột, khiến cho bạn không thể bỏ lỡ được những khu vực quan trọng của website. Tông màu tối giúp làm nổi typographyvà hình ảnh rất phù hợp chủ đề. 

Voisins

10 voisins

Trang đầu tiên của website này là một hệ thống navigation to lớn chứa 2 menu. Cái đầu tiên đi theo xu hướng thiết kế mới với nút bấm“hamburger” icon, và cái thứ hai tận dụng toàn trang để thể hiện video một cách hiệu quả.

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: www.youthedesigner.com