Іконка-гамбургер: нові способи використання
Простий, функціональний, інтуїтивно зрозумілий і запам`ятовується, як і будь-який дорожній знак, іконка-гамбургер стала справжнім трендом в минулому році, і невід`ємним елементом будь-якого сучасного веб-сайту і дизайну мобільних додатків.
Цей простий значок імітує зовнішній вигляд списку меню, ідеально підходить для пристроїв з невеликими екранами і веб-сайтів, де важлива візуальна сторона, а навігація повинна стояти осторонь. Це дуже ефективний і життєздатне рішення, яке відповідає вимогам сучасного світу.
Як і будь-який інший елемент інтерфейсу, іконка-гамбургер може мати деякі відхилення від початкового варіанту, виходячи з потреб кожного окремого проекту.
Залежно від проекту і теми, значок-гамбургер може приймати різні форми, які доповнюють дизайн або можуть стати його самостійної, відмінною рисою.
Hamburger Menu Icon
Іконка-гамбургер від дизайнера Дейва ГЕЙМЗ відразу ж дарує багато теплої енергії. Мультяшний стиль додає грайливості, і створює тільки найпозитивніші емоції. Використовувати таку іконку можна сміливо на більшості сучасних ілюстрованих інтерфейсів.
Wave Menu Icon
А цю іконку з океанськими хвилями розробив Мет Уокер. Вона відмінно буде відчувати себе на різних проектах, присвячених морю. Блакитний в якості основного кольору і рамка навколо роблять цей значок ексклюзивним.
Hamburger Icon by Vanessa Grass
Чистий, яскрава і дотепна реалізація дозволить цій конструкції працювати як значок меню на кулінарних сайтах. В цьому випадку інтерфейс отримає приємну художню родзинку.
Hamburger Buttons by Nick Meloy
Дизайнер пропонує 10 цікавих версій значків-гамбургерів, які виготовлені з душею. Серія охоплює різні види бургерів: один з сиром, інший з беконом, третій з індичкою, і багато інших. Якщо у вас є веб-сайт або мобільний додаток, присвячене ресторану швидкого харчування, то вони, безумовно, стануть в нагоді. Вони так візуально цікаві, що зможуть знайти місце практично в будь-якій темі.
Burger To Fries by Ryan Doggendorf
Відео: Як використовувати SVG іконки
А цей проект представляє реалістичний гамбургер у векторі. Кнопка закриття при цьому виконана у вигляді картоплі фрі, що приймає форму «Х», з соусом або без. це креативне рішення, яке може додати екзотику в дизайн сторінки.
Star Wars
Офіційний сайт Star Wars включає в себе цікавий значок-гамбургер, який повертається. Кожен рядок розділена на дві частини так, щоб отримати вектор відбиття світла лазерних мечів. Рішення підсилює загальне враження від сайту і зміцнює бренд.
Burger Menu
Бургер меню від Пітера Тваурі - це прекрасно ілюстрована версія іконки. Ключова особливість цього значка полягає у виборі кольорів, що імітують розрізану булочку і м`ясну котлету.
MOARRRR Hamburgers! by Kylie Timpani
Серія має різні варіанти гамбургерів, які реалізуються за допомогою стилю лінії. Тут ви знайдете подвійний гамбургер, гамбургер з сиром і салатом, відкритий бутерброд і деякі інші. Знайти ідеальне рішення для вашого акуратного, плоского інтерфейсу буде просто, щоб додати пікантності і «смаку».
Hamburger Menu Icons
Художник демонструє три кумедні версії кнопки: класичний гамбургер, чізбургер і хот-дог. В основі кожного лежить один або два кольори, що робить його придатним для різних крихітних інтерфейсів. Тут колір створює правильний вид бутерброда.
Hamburgers by Ragnar Vorel
Відео: Як зробити іконки VK і Facebook з дерева?
Художник пропонує невелику анімацію, яка включає тільки один значок меню, і кілька плавних переходів, які супроводжують перетворення в звичайний «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
Проект доводить, що значок-гамбургер може виглядати яскравіше і привабливіше, коли він укладений в рамку. Це відмінний вибір для невеликих пристроїв, де така іконка буде зручною для сенсорної навігації.
Відео: 100 ШАРІВ бургер CHALLENGE
Animated Menu Icon - The Process by Sebastiano Guerriero
Дизайнер відображає простий, гладкий значок з трьох ліній, який піддається різним метаморфоз, перетворюючись в хрестик або стрілку. Анімація включає в себе кілька рішень, які можуть стати в нагоді для будь-яких проектів.
підсумки
На перший погляд може здатися, що таку дрібницю, як іконка меню, не варто приділяти багато уваги. Але якщо проявити трохи фантазії, можна перетворити його в якусь родзинку вашого інтерфейсу. Особливо, якщо розробники починають грати з його змістом, і використовують художні прийоми, щоб зробити його більш нетрадиційним і привертає увагу.
