A première vue, on pourrait penser qu’il n’y a pas vraiment de différence entre un logo et un icone. Après tout, les deux sont utilisés pour représenter quelque chose. La plupart de nous les considère identique.

Alors dans quelle catégorie se trouve votre projet de création ?

Publier un projet dans la bonne catégorie attire l’attention des bons designers / spécialistes, c’est pourquoi il est important de savoir si vous recherchez un logo ou simplement un icone.

Définissons les icones et les logos, et identifions leurs utilisations de base.

Icones

Un icone repésente directement une idée, un concept, une opération ou action. Les icones simplifient ou résument une opération par une représentation graphique, et la transmette à l’utilisateur.

Les icones sont couramment utilisés dans les applications (ou apps) pour représenter ce que fait l’app, et sont un élément clé d’une interface UI/UX.

Ils sont le plus souvent utilisés pour des actions dans la conception web adaptative (responsive web design), et aide l’utilisateur à naviguer sur le site – pensez par exemple à l’icone de la maison qui vous dirige sur la page principale.

Intéressons-nous à ce que les icones célèbres peuvent nous dire sur les caractéristiques typiques d’un icone, ce qui le rend différent d’un logo.

iTunes

Un icone en note de musique, par exemple, transmet l’idée que l’utilisation de l’application qu’elle représente est liée à la musique. Prenez par exemple l’icone utilisé pour lancer iTunes :

Icone d'Appli Itunes

Bien que l’icone ci-dessus n’ait pas “iTunes” écrit dessus, les personnes qui l’utilisent pour la première fois auront une idée que l’icone représente un programme qui a quelque chose à voir avec la musique.

Facebook Like

Un icone facilement reconnaissable est l’icone “Like” de Facebook.

L’icone représente un poing fermé avec un pouce levé. Ce geste est habituellement utilisé comme signe d’approbation.

"Bouton Like de Facebook"

Sur le site de réseautage social, l’icone est cliquée quand un utilisateur souhaite passer un message d’approbation ou poster un commentaire, ou simplement “l’aimer” sans avoir à commenter. (Si c’était dans la vraie vie, tout le monde utiliserait leurs pouces tout le temps).

Pour le rendre plus reconnaissable, il utilise seulement deux couleurs : bleu et blanc que l’on retrouve aussi dans le logo de Facebook.

Dropbox

Un autre bon exemple est l’icone pour le service d’hébergement de fichier, DropBox. L’icone est une boite ouverte, bleu clair, qui permet à l’utilisateur de déposer ses fichiers et de les retrouver peu importe où il se trouve.

Icone d'Appli Dropbox

Si vous avez DropBox installé sur votre ordinateur, c’est l’icone que vous devez recherchez et cliquez pour accéder à vos fichiers. L’icone est intégré dans le logo DropBox.

Le Menu Sandwich

Le sandwich est un icone qui est utilisé pour les barres de navigation sur un site internet. Il est principalement utilisé dans le design adapté (responsive design), où les sites internet répondent aux besoins d’appareils et tailles d’écran plus petits.

Il remplace la barre de navigation typique du aux restrictions de place.

Menu Sandwich

Menu Hamburger de Made In Haus

Icones Et Sites Internet

Un icone n’a pas toujours besoin d’être un bouton actif du web design, il peut aussi être un élément du design qui explique ce que fait la marque.

Les icones fonctionnent sur les sites internet pour illustrer ce que fait l’entreprise. Par exemple, mixpanel souligne ses secteurs d’activité de navigation, recherche, courrier, médias, et analytiques, par l’utilisation d’icones reconnaissables.

Icones utilisés dans Mixpanel

Icones utilisés dans Mixpanel

Points Clé

Les icones sont des descripteurs visuels de fonction. Les meilleurs icones trouvent une métaphore visuelle – pouce levé, boite ouverte vide ou note musicale pour transmettre la fonction principale de l’application ou de l’objet.

Logos

Un logo est un symbole reconnaissable tout d’abord utilisé pour représenter une entreprise ou organisation. Sa représentation de l’organisation peut être directe, cachée ou abstraite. Un logo doit être associé immédiatement à l’organisation qu’il représente. Il tire partie de la mentalité de l’organisation et de l’image publique, ses valeurs, et est un résumé graphique de la “marque” de l’entreprise.

Selon justcreative.com, un logo efficace doit être simple, mémorable, intemporel, versatile, et approprié.

Les logos peuvent être un bloc-logo, un logotype, ou une combinaison.

Venons-en aux exemples.

Mastercard

Le logo MasterCard représente la marque par l’utilisation de couleurs et de bloc-logo. Il ne fonctionnerait pas comme icone, car la combinaison de deux cercles ne transmet rien au public sur le service de l’entreprise en tant que système de carte de crédit.

Combinaison Logo - MasterCard

Coca-Cola

Le logo Coca-Cola est intemporel et mémorisable. Ce logo est tellement bon ! Les gens associeraient l’écriture, les formes et la couleur avec l’entreprise, même si le nom était modifié. Il porte avec lui l’héritage de la marque car c’est le logo de l’entreprise depuis 1885.

Logo - Coca

Google

Bien que ce logo ait évolué au fil du temps, il reste reconnaissable instantanément. Les gens reconnaissent les couleurs uniques de la marque, et les éléments stylistiques de la typographie. Il peut de par lui-même en dire beaucoup sur la marque.

Logotype - Google

Apple

Un logo de silhouette intemporel, le design a évolué pour retirer le texte en dessous de l’image. Malgré son apparence simple, ce n’est pas un icone, car cela ne reflète pas le service ou les actions de la marque.

Logo - Apple

McDonalds

Les arches dorées sont les éléments emblématiques de la marque, mais ne sont pas un icone. Le dessin est intemporel et illustre instantanément la marque, mais pas les actions qu’elle réalise.

Logo - McDonalds

Passons A La Partie Technique...

Pour nous donner une image plus claire de la différence entre un logo et un icone, nous devons creuser davantage dans les caractéristiques techniques.

Forme

Il n’y a pas vraiment de critères pour les icones, mais si c’est un icone pour une app d’une entreprise, il devrait rentrer dans un carré.

Icones sur Appareils Téléphoniques

Les icones n’ont pas beaucoup d’exigences techniques, et comme ils peuvent représenter une action sur un site internet, ils peuvent être de toute taille. Le designer doit cependant prendre en compte les proportions, et voir comment cela s’affichera parmi les autres éléments.

Différents Styles d'Icones

Les logos n’ont pas de restrictions en terme de dimension. Ils peuvent être carrés aussi. A cause de cela, les designs de logo permettent davantage de créativité comparés aux designs d’icone.

Taille

Les icones ne devraient jamais perdre en qualité selon les différents supports. Ils doivent être créés en vecteurs utilisant des programmes tels que Adobe Illustrator pour s’assurer qu’ils n’auront pas l’air imprécis ou flous s’ils sont redimensionnés.

En créant des icones pour une marque en particulier, assurez-vous de les garder consistants pour qu’ils gardent la même hiérarchie dans leur contexte.

Icon Set

Polyvalent et multimédias

Les logos sont aussi vecteurs et peuvent être redimensionnés dans toutes les tailles sans perdre en qualité puisqu’ils doivent aussi être utilisés sur différents produits liés à l’organisation qu’ils représentent comme les brochures, cartes de visite, site internet, bannière, affichage etc.

Design de Papeterie de NancyC

Conclusion

Bien que des logos utilisent un icone pour se distinguer, les icones et les logos sont complètement différents simplement par les aspects techniques.

Si vous mélangez icone et logo, demandez-vous de quelle création vous avez besoin, et n’oubliez jamais de penser aux besoins techniques.

Vous en Voulez Plus ?

Découvrez comment profiter au maximum du design :

Que Considérer Pour La Nouvelle Image De Votre Entreprise ?

Appli Ou Site Adapté ? De Qoi Votre Entreprise A-T-Elle Réellement Besoin ?

Written by DesignCrowd on Friday, December 21, 2018

DesignCrowd is an online marketplace providing logo, website, print and graphic design services by providing access to freelance graphic designers and design studios around the world.