Простой, функциональный, интуитивно понятный и запоминающийся, как и любой дорожный знак, иконка-гамбургер стала настоящим трендом в прошлом году, и неотъемлемым элементом любого современного веб-сайта и дизайна мобильных приложений.
Этот простой значок имитирует внешний вид списка меню, идеально подходит для устройств с небольшими экранами и веб-сайтов, где важна визуальная сторона, а навигация должна стоять в стороне. Это весьма эффективное и жизнеспособное решение, которое отвечает требованиям современного мира.
Как и любой другой элемент интерфейса, иконка-гамбургер может иметь некоторые отклонения от изначального варианта, исходя из потребностей каждого отдельного проекта.
В зависимости от проекта и темы, значок-гамбургер может принимать различные формы, которые дополняют дизайн или могут стать его самостоятельной, отличительной чертой.
Сегодняшняя коллекция включает в себя 20 различных вариаций иконки-гамбургера.
Иконка-гамбургер от дизайнера Дэйва Геймза сразу же дарит много теплой энергии. Мультяшный стиль добавляет игривости, и создает только самые позитивные эмоции. Использовать такую иконку можно смело на большинстве современных иллюстрированных интерфейсов.
А эту иконку с океанскими волнами разработал Мэт Уокер. Она отлично будет чувствовать себя на различных проектах, посвященных морю. Голубой в качестве основного цвета и рамка вокруг делают этот значок эксклюзивным.
Hamburger Icon by Vanessa Grass
Чистая, яркая и остроумная реализация позволит этой конструкции работать как значок меню на кулинарных сайтах. В этом случае интерфейс получит приятную художественную изюминку.
Hamburger Buttons by Nick Meloy
Дизайнер предлагает 10 интересных версий значков-гамбургеров, которые изготовлены с душой. Серия охватывает различные виды бургеров: один с сыром, другой с беконом, третий с индейкой, и многие другие. Если у вас есть веб-сайт или мобильное приложение, посвященное ресторану быстрого питания, то они, безусловно, пригодятся. Они так визуально интересны, что смогут найти место практически в любой теме.
Burger To Fries by Ryan Doggendorf
А этот проект представляет реалистичный гамбургер в векторе. Кнопка закрытия при этом выполнена в виде картофеля фри, принимающего форму «Х», с соусом или без. Это креативное решение, которое может добавить экзотику в дизайн страницы.
Официальный сайт Star Wars включает в себя интересный значок-гамбургер, который поворачивается. Каждая строка разделена на две части так, чтобы получить вектор отражения света лазерных мечей. Решение усиливает общее впечатление от сайта и укрепляет бренд.
Бургер меню от Питера Тваури – это прекрасно иллюстрированная версия иконки. Ключевая особенность этого значка заключается в выборе цветов, имитирующих разрезанную булочку и мясную котлету.
MOARRRR Hamburgers! by Kylie Timpani
Серия имеет различные варианты гамбургеров, которые реализуются с помощью стиля линии. Тут вы найдете двойной гамбургер, гамбургер с сыром и салатом, открытый бутерброд и некоторые другие. Найти идеальное решение для вашего аккуратного, плоского интерфейса будет просто, чтобы добавить пикантности и «вкуса».
Художник демонстрирует три забавные версии кнопки: классический гамбургер, чизбургер и хот-дог. В основе каждого лежит один или два цвета, что делает его пригодным для различных крошечных интерфейсов. Здесь цвет создает правильный вид бутерброда.
Художник предлагает небольшую анимацию, которая включает только один значок меню, и несколько плавных переходов, которые сопровождают преобразование в обычный «X» (кнопку закрытия). Есть специальные эффекты, возникающие при наведении мышки или нажатии.
В отличие от большинства приведенных выше примеров, этот образец демонстрирует умелые манипуляции с весом, а не цветом. Верхняя и нижняя линии смелее, чем средняя, и создают правильный вид «гамбургера». Художник успешно справился с задачей.
Меню анимация значка-ниндзя от Эндрю Ковардакова отличается от большинства кнопок-гамбургеров, и предлагает интересное и незаурядное решение, с таинственным и привлекательным подтекстом. Здесь каждая линия – ниндзя в векторе.
А эта иконка представляет собой иллюстрацию бургера с салатом и сыром. Это может добавить изюминку в любой скучный интерфейс. Отличное решение для сайта ресторана или кафе.
Это статья, где вы можете найти интересные рассуждения о модном значке меню. Она отмечена изображением, которое показывает три варианта кнопки-гамбургер. Первый — это первоклассная плоская иллюстрация, второй — раскрашенный значок из трех линий, и третий является монохроматической версией второго образца – это самый популярный выбор среди дизайнеров.
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
Дизайнер отображает простой, гладкий значок из трех линий, который подвергается различным метаморфозам, превращаясь в крестик или стрелку. Анимация включает в себя несколько решений, которые могут пригодиться для любых проектов.
Итоги
На первый взгляд может показаться, что такой мелочи, как иконка меню, не стоит уделять много внимания. Но если проявить немного фантазии, можно превратить его в некую изюминку вашего интерфейса. Особенно, если разработчики начинают играть с его смыслом, и используют художественные приемы, чтобы сделать его более нетрадиционным и привлекающим внимание.
0 комментариев