Blog

Nouvelles façons d’utiliser l’icône Hamburger

Conçu pour être vraiment simple, fonctionnel, intuitif et mémorable, comme tout «panneau routier», l’ icône du menu hamburger a volé la vedette l’année dernière et est devenue un élément essentiel de la conception de tout site Web moderne et de toute application mobile, même si elle existe depuis plus de 30 ans.

Créé par le talentueux et étonnant Norm Cox pour la première interface utilisateur graphique, Xerox Star, il reproduit naturellement l’apparence d’une liste de menus, convient parfaitement aux appareils dotés d’un petit écran et convient parfaitement aux sites Web où la qualité visuelle est essentielle et où la navigation doit être laissée de côté. Cela s’avère être une solution assez efficace et viable qui répond aux exigences du monde moderne.

Comme pour tous les détails de l’interface utilisateur, l’icône de hamburger peut être affectée par les demandes de chaque projet et peut inclure des écarts. Par exemple, Dan Davies présente une nouvelle solution en utilisant des couverts pour créer une icône, ou Timothy Deegan propose une délicieuse version réaliste.

Selon le projet et le thème, l’icône de hamburger peut prendre différentes formes qui complètent la conception ou deviennent un élément distinctif.

La collection d’aujourd’hui comprend 20 variations inventives différentes de l’icône de menu hamburger.

Hamburger Menu Icons

Icône de menu Hamburger

icon-hamburger-menu_01

Hamburger Menu Icon de Dave Gamez est une prise artistique rafraîchissante qui dégage immédiatement une énergie chaleureuse. Le style Cartoon ajoute à la communication l’amour et les émotions positives et le rend approprié pour de nombreuses interfaces utilisateur illustrées.

Icône de menu Wave

icon-hamburger-menu_02

Le Wave Menu Icon de Matt Walker se vante d’une ambiance marine bien adaptée à divers projets maritimes. Le bleu comme couleur de base et le style de contour avec une quantité généreuse d’espace blanc séparent le design des autres.

Hamburger Icon par Vanessa Grass

icon-hamburger-menu_03

Des réalisations propres, dynamiques et ingénieuses permettent à cette conception de fonctionner comme une icône de menu ou comme une icône de hamburger traditionnel. Alors que dans le premier cas, une interface prend un joli piquant artistique, dans le second cas, elle obtient un détail approprié qui reflète le sens et s’intègre parfaitement.

Boutons Hamburger par Nick Meloy

icon-hamburger-menu_04

Le designer propose 10 versions intéressantes de boutons de hamburger conçus avec une âme. La série comprend différents types de hamburgers, l’un avec du fromage, du bacon, de la dinde et d’autres. Si vous avez un site Web ou une application mobile dédiée au restaurant de sandwichs, alors ils vous seront utiles. Ils sont si intéressants visuellement qu’ils pourraient trouver une place dans presque tous les thèmes.

Burger To Fries par Ryan Doggendorf

icon-hamburger-menu_05

Le projet propose une illustration vectorielle plus réaliste du bouton de hamburger où le bouton de fermeture est réalisé sous la forme de frites en forme de «X» avec ou sans sauce. Comme dans l’exemple précédent, il s’agit d’une solution artistique et inventive pouvant ajouter une touche exotique à un dessin.

Guerres des étoiles

icon-hamburger-menu_06

Le site officiel de Star Wars comprend une icône intéressante de hamburger qui a une torsion. Chaque ligne est divisée en deux parties de manière à obtenir un reflet vectoriel du sabre laser, attribut caractéristique d’une franchise. La solution renforce le sentiment général et renforce la marque.

Menu Burger

icon-hamburger-menu_07

Burger menu 2 de Peeter Tvauri est une autre version magnifiquement illustrée d’une icône de menu pour hamburgers. La principale caractéristique réside dans le choix des couleurs qui imitent les parties intégrantes du sandwich, telles que le pain tranché et la viande hachée cuite.

Hamburgers MOARRRR! par Kylie Timpani

icon-hamburger-menu_08

La série présente différentes variantes de hamburgers réalisées à l’aide d’un style de trait. Il y a un hamburger à la viande double, un hamburger avec du fromage et une salade, un hamburger 100 galettes, un hamburger avec du fromage / salade, un hamburger à face ouverte et quelques autres. Trouvez la correspondance parfaite pour votre interface de style soignée et plate qui ajoute du piquant et du « goût ».

Hamburger Menu Icons

icon-hamburger-menu_09

L’artiste présente trois versions amusantes du bouton hamburger: classique, cheeseburger et hot dog. Chacune est basée sur un jeu de couleurs à un ou deux tons qui le rend approprié pour diverses interfaces minuscules. Ici, la couleur crée la bonne sensation pour un sandwich.

Hamburgers de Ragnar Vorel

icon-hamburger-menu_10

L’artiste propose une petite animation ne comprenant qu’une seule icône de menu et plusieurs transitions douces accompagnant la transformation en un bouton de fermeture en forme de «X» normal. Des effets spéciaux sont attribués au survol de la souris et aux événements de clic.

Icône Hamburger minimaliste

icon-hamburger-menu_11

Icône minimaliste Hamburger (fichiers Sketch et AE joints) de Mahdi Al-Farra vous donne instantanément la sensation d’un bouton de hamburger. Contrairement à la majorité des exemples ci-dessus, cet échantillon montre des manipulations habiles avec un poids plutôt que la couleur. Les lignes du haut et du bas sont plus audacieuses que le milieu et créent la sensation souhaitée. L’artiste a accepté la tâche.

Animation d’icône de menu

icon-hamburger-menu_12

Animation d’icônes de menu – Ninja Burger d’Andrew Kovardakov rompt avec les boutons de base des hamburgers et offre une solution intéressante et originale avec un sentiment mystérieux et engageant. Ici, chaque ligne est un ninja vectorisé.

Menu Burger

icon-hamburger-menu_13

Burger Menu de Peeter Tvauri est une illustration raffinée d’un hamburger au fromage et à la salade. Il peut ajouter une touche personnelle à toute interface utilisateur ennuyeuse ou apporter une contribution au site Web du restaurant.

Qu’est-ce que l’icône Hamburger?

icon-hamburger-menu_14

C’est un article où vous pouvez trouver des arguments intéressants sur l’icône de menu tendance. Il est marqué par une image comportant trois options de bouton hamburger. La première est une illustration plate de premier ordre, la deuxième est une icône colorisée de trois lignes et la troisième est une version monochromatique du deuxième échantillon qui est un choix populaire parmi les concepteurs.

Menu Ouvrir & Fermer de Romain Passelande

icon-hamburger-menu_15

Le gif montre de minuscules transitions en douceur entre l’état initial de cette icône minimaliste et élégante et son état final. Comme l’animation commence par une ligne de fond, elle est plus courte que les autres.

Menu Hamburger par Liam Spradlin

icon-hamburger-menu_16

Hamburger Menu de Liam Spradlin dégage une atmosphère rétro, car il ressemble à un jeu d’onglets scolaires pour les livres. La réalisation est audacieuse et brutale. Une telle icône frappe facilement un oeil. Cependant, il pourrait être difficile de trouver un environnement approprié pour cela.

Burger Icon vs. Word “Menu” de Andrey Drobitko

icon-hamburger-menu_17

Jusqu’à présent, nous avons considéré les icônes séparément, mais elles collaborent parfaitement avec les mots, en particulier lorsque ce mot est «menu». Bien qu’il puisse sembler redondant, ensemble, ils ont l’air raffiné et exquis. Les types plus ultra-minces et les lignes larges 1px, qui sont utilisées dans ce cas, s’emboîtent comme des pièces du puzzle.

Open / Close de Armantas Zvirgzdas

icon-hamburger-menu_18

Le projet prouve que l’icône de hamburger peut sembler plus vive, distinctive et accrocheuse lorsqu’elle est enfermée dans un cadre. C’est un excellent choix pour les petits appareils où la zone carrée est plus appropriée et confortable pour la navigation tactile.

Icône de menu animé – Le processus par Sebastiano Guerriero

icon-hamburger-menu_19

Le concepteur affiche une icône simple et élégante de trois lignes qui subit diverses métamorphoses, se transformant en un bouton «Fermer» ou «Flèche». L’animation inclut plusieurs solutions qui peuvent s’avérer utiles pour les projets.

Conclusion

Bien qu’il puisse sembler qu’un détail aussi minuscule que l’icône de menu hamburger n’a pas besoin de subir de modifications, mais avec un peu d’imagination, il peut devenir un élément distingué et exceptionnel. Surtout quand les concepteurs commencent à jouer avec son sens et essaient d’utiliser des moyens artistiques pour le rendre plus non conventionnel et accrocheur.