Les icônes sont petites, mais font toutes la différence en ce qui concerne le succès de votre application mobile. Entre autres, elles augmentent le nombre de téléchargements, elles améliorent les résultats de vos campagnes de publicité et elles communiquent les fonctionnalités de votre produit. Ça fait beaucoup et nous avons de vous en faire profiter ! C’est pourquoi nous avons créé ce petit guide récapitulant tout ce que vous avez besoin de savoir sur le design des icônes d’application mobile :

rainbow app icon
Icône réalisée par MAM2 pour cryptgram

Qu’est-ce qu’une icône d’application mobile?

Tout d’abord, une icône d’application mobile n’est pas un logo. Mais ça remplit les mêmes fonctions, non? Hmm… en quelque sorte.

Là où un logo permet d’identifier et de représenter la marque et/ou le produit d’une entreprise, une icône permet d’identifier et de représenter, vous l’aurez compris, l’application mobile d’une entreprise.

 

leather legal app icon
Icône skeuomorphique en cuir réalisée par Joekirei pour SPM Studios.

Pensez aux icônes comme à de petits conteneurs à taille fixe qui contiennent, en une « bouchée », l’information visuelle de votre application. Oui, bien sûr, vous pouvez tout à fait utiliser le logo de votre entreprise ou de votre produit comme icône, si vous le souhaitez. Mais ça ne fera pas de votre icône un logo pour autant (et ce n’est pas la meilleure solution en ce qui concerne l’expérience utilisateur).

Voyez donc : les logos ont la liberté de s’utiliser au-delà du cadre de l’application mobile. Ils peuvent être utilisés à n’importe quelle échelle et se retrouvent dans n’importe quel contexte : flyers, site web, cartes de visite, etc. Mais parlons plutôt des icônes d’application.

Dans l’app store

Comme vous le savez sûrement déjà, plus votre icône est attrayante, plus les utilisateurs téléchargeront votre appli. Cela dit, ce qui peut être attrayant pour telle personne ne l’est pas forcément pour une autre. Il ne s’agit donc pas de créer une icône qui « ira à tout le monde », mais plutôt de trouver un design qui plaira à votre audience cible. Il est essentiel de penser à ce que donnera votre icône sur un coupon de réduction par exemple… Voyons ça de plus près.

Google Play store screenshots
Google Play store screenshots
Google Play store screenshots

Si vous recherchez « caméra » sur le store de Google Play, par exemple, pouvez-vous deviner quelle application est le plus téléchargée simplement en observant les icônes? Golden Camera arrive en dernière position avec 10-50 000 téléchargements estimés, Professional HD Camera entre 1 et 5 millions de téléchargements estimés, Open Camera et Camera MX ont entre 10 et 50 millions de téléchargements estimés, et en première position, on retrouve Candy Camera avec 100-500 millions de téléchargements estimés.

Étant donné que Candy Camera est l’application la plus téléchargée, on s’en servira pour comprendre ce que les utilisateurs de ce secteur apprécient le plus. Le design est joyeux et coloré, tout en restant simple et fonctionnel. L’icône de Open Camera et de Camera MX sont également assez sobres (ce qui explique le fait qu’elles restent dans la course), mais elles manquent de couleurs et de gaieté. Ce que l’on peut retenir c’est que l’audience cible des applications mobile d’appareil photo recherche une application simple, mais fun.

On peut également regarder les choses sous un autre angle : Candy Camera a choisi un design étroitement basé sur les directives de Material Design de Google (on y reviendra plus tard). Autrement dit, Candy Camera est la seule application de cette liste qui a réalisé son icône selon les standards de design actuels. Les icônes de Golden Camera et de Open Camera ont l’air d’avoir été créées alors que le flat design et le skeumorphisme étaient de mise. Excepté que désormais, ces tendances sont dépassées. Il est important de suivre les tendances actuelles.

Aussi fascinant soit-il de regarder de plus près les différents mécanismes dans les exemples ci-dessus, ce qu’il faut retenir ici c’est que les icônes ont clairement un gros impact sur le nombre de téléchargements.

Connaître les standards actuels

phoenix app icon
Cette icône fonctionne sur iOS. Icône réalisée par MAM2 pour Minimal Twitter Client.

Bien que vous ne soyez pas obligé de suivre quelle que règle que ce soit (à part de respecter les dimensions requises), Google et Apple ont mis au point une série de directives pour vous aider à comprendre ce qu’ils attendent de vos designs — et suivre ces directives n’est pas tout à fait idiot. Comme nous l’avons vu plus haut, les icônes qui suivent ces directives donnent le sentiment d’être en phase avec les tendances actuelles. Et cela leur permet d’être plus populaires auprès des utilisateurs.

Google a implémenté, en même temps que la dernière mise à jour d’Android, une nouvelle tendance appelée Material Design. Il s’agit essentiellement d’une longue série de directives pour créer une interface visuelle cohérente, et destinées plus particulièrement à créer une expérience qui donne le sentiment d’interagir avec de vrais matériaux (alors qu’il ne s’agir de pixels…). Pour les graphistes qui aiment contribuer à cette tendance, Google a également publié une documentation très complète. Les directives sur les icônes d’application mobile sont disponibles ici.

Apple a également publié des directives similaires pour iOS, appelé Human Interface Guidelines. Ces informations sont très utiles pour les graphistes spécialisés sur iOS. Et bien que ces directives ne soient pas aussi complètes que celles fournies par Google pour le Material Design, c’est un bon point de départ si vous n’êtes pas certain de ce à quoi devrait ressembler votre icône. Pour consulter ces directives, cliquez ici.

Cohérence du design

dune app and app icon
via Google Play.
Word Connect app icon and app design
Icône et design de l’application Word Connect

Bien sûr, l’icône de votre application doit correspondre à l’identité de l’application elle-même — les utilisateurs veulent savoir à quoi s’attendre une fois l’application téléchargée. Comment vous sentiriez-vous si vous achetiez un pot de peinture « blanc coquille d’œuf » pour vous rendre compte après l’avoir ouvert qu’il s’agit en fait d’un marron foncé? Même si certains œufs sont en effet de couleur assez sombre, il ne faut pas cependant perdre de vue les attentes du consommateur…

Et cela s’applique également aux icônes d’applications mobiles : si vous avez opté pour un flat design pour votre appli, votre icône doit, elle aussi, être en flat design. Si votre application contient du skeuomorphisme, votre icône doit également comprendre un élément de skeuomorphisme. Si votre application a été réalisée suivant les directives de Google de Material Design, votre icône doit avoir subi le même traitement. Regardez les exemples ci-dessus pour vous rendre compte des similitudes entre les différentes applications et leurs icônes respectives.

Communiquer sur les fonctions de votre application

Calc+ app icon
Calc+ app icon via Google Play.
Classic Notes app icon
Classic Notes app icon via Google Play.
Flashlight app icon
Flashlight app icon via iTunes.
Alarm Clock Free app icon
Alarm Clock Free app icon via iTunes.

Les icônes ont un rôle à jouer dans l’expérience utilisateur de l’application en général. Prenez une application utilitaire par exemple, comme une calculette ou une lampe torche. Les icônes de ces applications doivent être conçues de sorte que l’utilisateur soit certain d’avoir la fonctionnalité recherchée en un clic, tout comme c’est le cas lorsqu’on attrape un crayon, un thermomètre ou une règle « dans la vraie vie ». Les exemples ci-dessus illustrent bien cette l’évidence de la fonctionnalité de chacune des applis.

En plus de communiquer clairement l’utilité du produit, les exemples ci-dessus sont reconnaissables immédiatement en tant qu’applications utilitaires. L’une des techniques employées par les graphistes consiste à intégrer un repère visuel bien connu de l’audience cible, par exemple l’heure du réveil sur l’application Alarm Clock ci-dessus. Tout le monde comprend immédiatement de quoi il s’agit !

astronaut game app icon
Game publisher app icon by milomilo for Charles Jr.
Bowling King app icon
Bowling King app icon via Google Play.
Roll the Ball® logo icon
Roll the Ball® logo icon via Google Play.
Pokémon GO app icon
Pokémon GO app icon via iTunes.
Fruit Ninja Classic app icon
Fruit Ninja Classic app icon via iTunes.

Les jeux constituent une grande partie des applications mobiles du marché. Contrairement aux applications utilitaires, ces icônes-là doivent attirer l’utilisateur dans l’univers du jeu en question. Autrement dit, elles doivent tout simplement donner envie de jouer ! Difficile d’ignorer les quilles et la boule de bowling dans l’exemple ci-dessus ! On pense tout de suite à l’excitation du moment, l’action, le mouvement et le fun ! De la même manière, la Poké Ball posée sur une planète dans les étoiles incite à aller explorer ce Nouveau Monde.

Il est également important de s’assurer que ces icônes attirent l’attention. Dans le cas de l’application de bowling, les quilles sont mises en mouvement et non pas droites et immobiles. Ce serait trop plein d’ennui ! On retrouve le même principe dans l’icône de Fruit Ninja Classic, où l’action est au centre du design.

Faire réaliser une icône pour son appli

Si vous avez déjà trouvé un graphiste freelance pour créer l’interface de votre application, il n’est pas idiot de lui demander de créer également une icône correspondante de sorte à maintenir une certaine cohérence visuelle. Autrement, vous pouvez lancer un concours sur 99designs, ce qui vous permettra d’obtenir des dizaines d’idées différentes.

Photoshop app icon template
Modèle Photoshop d’icône d’application mobile via Every Interaction.

Si vous avez décidé de créer vous-même votre icône et que vous cherchez un bon point de départ, n’en dites pas plus ! Photoshop, Illustrator et Sketch sont de très bons choix en termes de logiciel. De manière générale, Photoshop sera plus performant si vous voulez créer un effet « raster » (ombres, reflets de lumière, etc.), Illustrator sera plus performant pour réaliser un design complexe en vecteurs, et Sketch sera de mise si vous préférez partir d’un modèle déjà pré-conçu (préalablement installés et gratuits). Pour vous renseigner davantage sur les différences entre ces logiciels, rendez-vous ici.

Connaître sa plateforme

Avant de renter dans les détails relatifs à la création d’une icône, il est important de savoir qu’il y a deux clans bien distincts dans le monde de l’application mobile : Android et iOS. Tandis que les icônes sont, dans tous les cas, de petits boutons carrés sur lesquels il est possible d’appuyer, il existe de grandes différences entre les deux types, à commencer par les dimensions et les styles graphiques recommandés. Voyons voir cela de plus près !

Taille et format

app icon sizes
Icône d’une appli de relaxation réalisée par Daylite Designs ©.

Sur les appareils Android, les icônes font généralement 96×96, 72×72, 48×48 ou 36×36 pixels (selon l’appareil). Cependant, Android recommande de travailler sur une planche de 864×864 pixels de sorte à pouvoir modifier son design facilement. Aussi, les designers d’applications Android ont l’habitude de sauvegarder les différentes tailles d’icône pour chacune des densités d’écran des appareils généralisés, et de les conserver dans un répertoire par application, en fonction de la densité. Pour plus d’information à ce sujet, cliquez ici. Les icônes des applications Android doivent impérativement être enregistrées au format PNG.

En ce qui concerne iOS, les icônes doivent être au format 1024×1024 pixels. Tout comme pour Android, elles doivent également être redimensionnées en fonction de l’appareil et du contexte, mais Apple s’occupe de faire cela pour vous. Si vous souhaitez connaître le détail de ces spécificités de sorte à pouvoir tester votre design, cliquez ici. Les icônes iOS doivent impérativement être enregistrées au format PNG.

Faites-vous une icône unique et originale

Nous savons bien que vous avez plein de bonnes idées… et c’est pour cela que vous devriez prendre le temps de trouver une icône tout aussi géniale ! Tenez-vous-en à ce guide pour être certain de faire mouche auprès de votre audience cible. Pas mal, non?

Ressources pour la création d’icônes d’applications mobiles

Êtes-vous prêt à faire le design d'une icône d'appli?
Rencontrez dès à présent notre communauté de graphistes !