Sức mạnh của những nút bấm Hamburger trong thiết kế web

Thứ bảy - 14/03/2015 00:37

Ngày hôm nay chúng tôi sẽ mang đến bộ sưu tập các website sử dụng các icon humburger một cách hiệu quả nhất. Đây là một giải pháp rất thông minh và hiệu quả, tiết kiệm cho thiết kế web của bạn nhiều diện tích trống để sử dụng vào những mục đích khác.

Sức mạnh của những nút bấm Hamburger trong thiết kế web

Thiết kế website theo phong cách tối giản vẫn luôn là chủ đề được yêu thích trong giới thiết kế online. Để tạo ra một website mang phong cách này, mọi chi tiết đều được tối giản hóa, từ bố cục, font chữ, đồ họa, hiệu ứng animation…và navigation menu.
Những nút bấm dạng Hamburger là nút có hình 3 đường kẻ thẳng song song, có thể đứng theo chiều ngang hoặc dọc. Biểu tượng này tuy nhỏ bé nhưng đã trở nên đặc biệt nổi tiếng trong số các thiết kế website hiện đại. Đó chính là icon của các menu trên website. Việc sử dụng chúng mang lại sự tinh tế và gọn gàng cho website.

Ngày hôm nay chúng tôi sẽ mang đến bộ sưu tập các website sử dụng các icon humburger một cách hiệu quả nhất. Đây là một giải pháp rất thông minh và hiệu quả, tiết kiệm cho thiết kế web của bạn nhiều diện tích trống để sử dụng vào những mục đích khác. 

Michael Villeneuve

Nút bấm hamburger đứng khiêm tốn ở góc bên trái trên cùng của cả thiet ke web. Thay vì hiển thị toàn bộ các dòng menu trên trang, khi ấn vào đó, bạn sẽ đến với cả menu chi tiết. Bạn sẽ thấy sự thoáng mắt đáng kể mà nó mang lại. 

Michael Villeneuve

Voisins

Nút menu nhỏ gọn thanh lịch đã góp phần làm cho thiết kế web này không bị lộn xộn và rối mắt, để người xem tập trung vào video nền toàn trang và typography đẹp mắt. 

Voisins

Tonda

Tonda là thiet ke web mang đầy tính nghệ thuật với font chữ viết tay giúp mang lại sự gần gũi và duyên dáng cho cả trang web. Nút hamburger nhỏ bé nhưng là một điểm nhấn nổi bật với màu đỏ trên nền trang. 

Tonda

Rynapse

Nút “hamburger” được đặt ở góc phía trên bên phải, vừa tinh tế, vừa giúp làm cả trang web trở nên gọn gàng đến mức ấn tượng. 

Rynapse

Born Group

Không giống những ví dụ ở trên, mọi lựa chọn sẽ được hiện ra trên một dòng duy nhất phía trên của trang khi bạn ấn vào nút hamburger. Một số hiệu ứng nhỏ được tạo ra để tạo thêm tính linh hoạt cho menu. 

Born Group

TVSmiles

TVSmiles sử dụng menu dạng  slide-out tiêu chuẩn, được ẩn dưới một nút hamburger nhỏ nhắn. 

TVSmiles

Aaltra

Website sử dụng drop-down menu nhỏ nhưng tinh tế, hiệu ứng của menu tạo ra ấn tượng hình ảnh đẹp mắt cho người dùng.  

Aaltra

Fabio Zanconato

Các chuyên gia thiết kế website  đã nỗ lực để mọi người không rời mắt khỏi khu vực chào mừng và tạo ra menu phù hợp với mục đích đó với thiết kế dạng hamburger. 

Fabio Zanconato

Powderbird

Sự cân bằng được tạo ra giữa phần nội dung đa dạng với các yếu tố cần thiết khác như navigation. 

Powderbird

Chickenbot

Phần navigation giúp bạn cảm nhận được vẻ đẹp cảu những sắc mày và phong cách thiết kế phẳng. 

Chickenbot

Teye

Teye không đi theo những lối đi truyền thống của navigation với việc cho thêm không gian 3 chiều và những icon bắt mắt. 

Teye

NutsandWoods

Nút hamburger nhỏ bé đặc ở giữa trang khiến cho trang chủ trở nên thanh lịch và tinh tế.

NutsandWood

Welspun India

Welspun India có navigation trượt từ bên trái trang khi người dùng web ấn vào nút hamburger. 

Welspun India

Mene and Money

Nút menu nổi bật nhờ sự tương phản giữa màu sắc sáng sủa và nền trang màu đen. 

Mene and Money

Davvero

Cũng giống như những ví dụ trước, việc dùng menu dạng hamburger một lần nữa khiến người dùng web được tập trung vào đồ họa và nội dung hiển thị trên trang.

Davvero

Taste Austria

Taste Austria sử dụng các icon theo kiểu vẽ tay và hiệu ứng uyển chuyển khi mở menu. 

Taste Austria

Logikstudio

Trải nghiệm người dùng được mang tới nhờ navigation menu. Menu xuất hiện ở một nửa màn hình và có hiệu ứng cuộn theo chiều dọc.

Logikstudio

Dvotion

Nút bấm menu đã gió phần không nhỏ vào việc làm mạnh thêm trải nghiệm người dùng nhờ hiệu ứng 3D tuyệt vời của nút hamburger.

Dvotion

Webgriffe

Menu xuất hiện với hiệu ứng trượt ra mượt mà từ trên đỉnh web, mang đến cho người xem không chỉ toàn bộ chi tiết của menu mà còn cả những nút bấm social media và các nút call to action sáng sủa khác. 

Webgriffe

Kinderopvang Stap Voor Stap

Việc sử dụng nút bấm hamburger như một mũi tên trúng hai đích, nó vừa không làm người xem mất tập trung vào tính nghệ thuật, vừa thể hiện được menu tương ứng với những hình vẽ rực rỡ sắc màu.

Kinderopvang Stap voor Stap

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions