Тренды

Иконка-гамбургер: новые способы использования

Автор Freelance.Today

Простой, функциональный, интуитивно понятный и запоминающийся, как и любой дорожный знак, иконка-гамбургер стала настоящим трендом в прошлом году, и неотъемлемым элементом любого современного веб-сайта и дизайна мобильных приложений.

Этот простой значок имитирует внешний вид списка меню, идеально подходит для устройств с небольшими экранами и веб-сайтов, где важна визуальная сторона, а навигация должна стоять в стороне. Это весьма эффективное и жизнеспособное решение, которое отвечает требованиям современного мира.

Как и любой другой элемент интерфейса, иконка-гамбургер может иметь некоторые отклонения от изначального варианта, исходя из потребностей каждого отдельного проекта.

В зависимости от проекта и темы, значок-гамбургер может принимать различные формы, которые дополняют дизайн или могут стать его самостоятельной, отличительной чертой.

Сегодняшняя коллекция включает в себя 20 различных вариаций иконки-гамбургера.

Hamburger Menu Icon 

Иконка-гамбургер

Иконка-гамбургер от дизайнера Дэйва Геймза сразу же дарит много теплой энергии. Мультяшный стиль добавляет игривости, и создает только самые позитивные эмоции. Использовать такую иконку можно смело на большинстве современных иллюстрированных интерфейсов.

Wave Menu Icon 

Иконка-баян с волнами

А эту иконку с океанскими волнами разработал Мэт Уокер. Она отлично будет чувствовать себя на различных проектах, посвященных морю. Голубой в качестве основного цвета и рамка вокруг делают этот значок эксклюзивным.

Hamburger Icon by Vanessa Grass 

Иконка меню

Чистая, яркая и остроумная реализация позволит этой конструкции работать как значок меню на кулинарных сайтах. В этом случае интерфейс получит приятную художественную изюминку.

Hamburger Buttons by Nick Meloy 

Тренд иконка-гамбургер

Дизайнер предлагает 10 интересных версий значков-гамбургеров, которые изготовлены с душой. Серия охватывает различные виды бургеров: один с сыром, другой с беконом, третий с индейкой, и многие другие. Если у вас есть веб-сайт или мобильное приложение, посвященное ресторану быстрого питания, то они, безусловно, пригодятся. Они так визуально интересны, что смогут найти место практически в любой теме.

Burger To Fries by Ryan Doggendorf 

Иконка гамбургер интересные решения

А этот проект представляет реалистичный гамбургер в векторе. Кнопка закрытия при этом выполнена в виде картофеля фри, принимающего форму «Х», с соусом или без. Это креативное решение, которое может добавить экзотику в дизайн страницы.

Star Wars 

Star Wars

Официальный сайт Star Wars включает в себя интересный значок-гамбургер, который поворачивается. Каждая строка разделена на две части так, чтобы получить вектор отражения света лазерных мечей. Решение усиливает общее впечатление от сайта и укрепляет бренд.

Burger Menu 

Бургер меню от Питера Тваури – это прекрасно иллюстрированная версия иконки. Ключевая особенность этого значка заключается в выборе цветов, имитирующих разрезанную булочку и мясную котлету.

MOARRRR Hamburgers! by Kylie Timpani 

Серия имеет различные варианты гамбургеров, которые реализуются с помощью стиля линии. Тут вы найдете двойной гамбургер, гамбургер с сыром и салатом, открытый бутерброд и некоторые другие. Найти идеальное решение для вашего аккуратного, плоского интерфейса будет просто, чтобы добавить пикантности и «вкуса».

Hamburger Menu Icons  

Необычные иконки меню

Художник демонстрирует три забавные версии кнопки: классический гамбургер, чизбургер и хот-дог. В основе каждого лежит один или два цвета, что делает его пригодным для различных крошечных интерфейсов. Здесь цвет создает правильный вид бутерброда.

Hamburgers by Ragnar Vorel  

Художник предлагает небольшую анимацию, которая включает только один значок меню, и несколько плавных переходов, которые сопровождают преобразование в обычный «X» (кнопку закрытия). Есть специальные эффекты, возникающие при наведении мышки или нажатии.

Minimalistic Hamburger Icon 

В отличие от большинства приведенных выше примеров, этот образец демонстрирует умелые манипуляции с весом, а не цветом. Верхняя и нижняя линии смелее, чем средняя, и создают правильный вид «гамбургера». Художник успешно справился с задачей.

Menu Icon Animation 

Меню анимация значка-ниндзя от Эндрю Ковардакова отличается от большинства кнопок-гамбургеров, и предлагает интересное и незаурядное решение, с таинственным и привлекательным подтекстом. Здесь каждая линия – ниндзя в векторе.

Burger Menu 

А эта иконка представляет собой иллюстрацию бургера с салатом и сыром. Это может добавить изюминку в любой скучный интерфейс. Отличное решение для сайта ресторана или кафе.

What is the Hamburger Icon? 

Что такое иконка-гамбургер

Это статья, где вы можете найти интересные рассуждения о модном значке меню. Она отмечена изображением, которое показывает три варианта кнопки-гамбургер. Первый — это первоклассная плоская иллюстрация, второй — раскрашенный значок из трех линий, и третий является монохроматической версией второго образца – это самый популярный выбор среди дизайнеров.

Open & Close Menu by Romain Passelande 

GIF показывает плавные переходы между начальным состоянием этого минималистичного и элегантного значка, и его конечное состояние. Поскольку анимация начинается с нижней строки, он короче, чем другие.

Hamburger Menu by Liam Spradlin 

Гамбургер иконка

Гамбургер меню от Лиам Спрадлин выглядит как набор школьных закладок для книг. Реализация эта — смелая и несколько грубая. Такой значок сразу заметен, тем не менее, может быть трудно найти подходящую среду для него.

Burger Icon vs. Word “Menu” by Andrey Drobitko 

Иконка баян
До сих пор мы рассматривали иконки отдельно, но они прекрасно сотрудничают со словами, особенно, когда это слово «Меню». Хотя это может показаться излишним, вместе они выглядят изысканно. Ультратонкие линии шириной в 1px, которые используются в этом случае, совмещаются как части головоломки.

Open / Close by Armantas Zvirgzdas 

Проект доказывает, что значок-гамбургер может выглядеть ярче и привлекательней, когда он заключен в рамку. Это отличный выбор для небольших устройств, где такая иконка будет удобной для сенсорной навигации.

Animated Menu Icon – The Process by Sebastiano Guerriero 

Дизайнер отображает простой, гладкий значок из трех линий, который подвергается различным метаморфозам, превращаясь в крестик или стрелку. Анимация включает в себя несколько решений, которые могут пригодиться для любых проектов.

Итоги

На первый взгляд может показаться, что такой мелочи, как иконка меню, не стоит уделять много внимания. Но если проявить немного фантазии, можно превратить его в некую изюминку вашего интерфейса. Особенно, если разработчики начинают играть с его смыслом, и используют художественные приемы, чтобы сделать его более нетрадиционным и привлекающим внимание.

 

Источник 

  • 7398