20 cách nghịch ngợm với hamburger icon trên website (P.2)

Mặc dù có người sẽ nghĩ rằng những chi tiết nhỏ như nút bấm hamburger thì không cần chú tâm cải tiến làm gì. Nhưng không thể phủ nhận rằng những chi tiết nhỏ cũng có thể làm nên dấu ấn sâu đậm và làm tăng tính tinh xảo cho một thiết kế web chuyên nghiệp. 

Chúng ta sẽ tiếp tục khám phá những thiết kế nút bấm hamburger icon đầy ngộ nghĩnh trong phần 2 của bộ sưu tập này. 

Hamburgers by Ragnar Vorel

Người nghệ sỹ thiết kế đã mang tới những chuyển động nhỏ vào menu icon này, chúng rất mượt và khá vui mắt. Bạn sẽ thấy sự biến đổi của icon này khi di chuột hoặc click vào icon đó. 

Minimalistic Hamburger Icon

Minimalistic Hamburger Icon thiết kế bởi Mahdi Al-Farra  ngay lập tức toát ra hình dáng cơ bản của icon menu kinh điển. Không giống những ví dụ phía trước, thiết kế này tập trung vào sự khác biệt trong độ dày của các nét hơn là màu sắc.

Menu Icon Animation

Ninja Burger thiết kế bởi Andrew Kovardakov là một animation icon, cái mà đã phá vỡ những quy chuẩn thiết kếnút bấm hamburger quyen thuộc. Mỗi dòng kẻ khiến ta liên tưởng tới các ninja Nhật Bản.

Burger Menu

Burger Menu thiết kế bởi Peeter Tvauri  là một illustration lạ mắt của hamburger icon, làm ta liên tưởng tới pho mát và salad. Sự xuất hiện của icon này có thể xóa tan sự buồn chán của UI và đóng góp cho thành công của một thiết kế website nhà hàng ăn. 

What is the Hamburger Icon?

Đây là 1 bộ 3 phong cách thiết kế khác nhau: cái đầu tiên đi theo thiết kế phẳng, cái thứ hai sử dụng 2 màu sắc và cái thứ 3 là đơn sắc, trong đó cái số 2 là phương án được nhiều designer lựa chọn hơn. 

Open & Close Menu by Romain Passelande

Hiệu ứng chuyển đổi mượt mà xuất hiện khi bạn di chuột vào menu icon tối giản và thanh lịch này. Độ dài của 3 đường kẻ sẽ có sự thay đổi trước mắt bạn. 

Hamburger Menu by Liam Spradlin

Hamburger Menu thiết kế bởi Liam Spradlin mang hơi hướng retro và có hình dáng giống với những tờ giấy màu đánh dấu trang sách. Những thiết kế thế này rất bắt mắt, tuy nhiên nó rất khó ứng dụng phổ biến trong thiết kế web. 

Burger Icon vs. Word “Menu” by Andrey

Từ trước tới giờ chúng ta vẫn chỉ thiết kế riêng menu icon 3 dòng kẻ mà không kết hợp với chữ, nay điều này đã khác. Font chữ siêu mảnh được lồng kép với hamburger icon rất hài hòa. 

Open / Close by Armantas Zvirgzdas

Dự án này đã chứng minh rằng hamburger icon có thể trông sinh động và bắt mắt khi được đóng trong khung. Đây là một lựa chọn tuyệt vời cho những thiết bị duyệt web có màn hình nhỏ nơi mà khoảng không hình vuông là phù hợp và thuận tiện cho việc chạm để điều hướng. 

Animated Menu Icon – The Process by Sebastiano Guerriero

Designer thể hiện icon 3 dòng kẻ một cách đơn giản và thú vị ở chỗ nó biến hình sang hình mũi tên.. Chỉ riêng việc biến đổi này đã có nhiều phương án chuyển hình ảnh được sử dụng để tạo sự mới mẻ.