Codex

Astuces et codes à emporter.

Icons d'app

Comment travailler un icon d'apppour qu'il produise l'effet escompté.

1. Qu’est-ce qu’un Icon d’app ?

L'icône est tout simplement le premier objet visuel de très haute importance. Il fait partie intégrante de la 1ère impression. On entend par 1ère impression, le premier sentiment suggéré pour le visiteur de par les éléments visuels statiques (icônes et screenshots) et/ou dynamiques (vidéos).

En effet, l'icône apparaît tout au long du processus de visite. Il est présent à chaque étape importante, de la page d'accueil des Stores, en passant par la page de résultat de recherche, pour finir sur la page de la fiche détaillée de l'App ou encore dans les applications suggérées en bas de chaque fiche détaillée d'App (suggestions, croisements, thème apparenté). Il est important de ne pas le sous-estimer car il va de plus être, sur les dernières versions d'OS, de plus en plus grand et avoir un impact de plus en plus important.

D’autre part, les visiteurs des Stores, ne regardent que très peu la page dite de l'application et prennent leur décision d'installer ou de quitter la page sans avoir consulté les informations détaillées de l'app. La lecture des visiteurs est rapide et doit être attirée à tout prix lors de cette première impression.

2. Finalité d’un Icon d’app ?

2.1. Finalité financière

L’icône d’une entreprise ou d’un projet (app) est avant tout de créer un levier pour augmenter le CVR (Taux de conversion). Il représente l’achèvement de l’action attendue (achat, abonnement, inscription, téléchargement) par rapport au nombre de visiteurs ou en d’autres termes, le nombre de conversion par rapport aux nombre d’interactions. Il est obtenu par la formule suivante :

CVR = nombre d’action attendue / nombre d’interactions

Toutes les études de marché tendent à prendre ce chiffre comme repère de leurs analyses. En augmentant le CVR, on augmente de ce fait le nombre de téléchargements et donc le chiffre d’affaire de l’entreprise.

2.2. Finalité de marque

2.2.1. .Refléter l'image du produit

L’cône d’une app doit avoir comme finalité non fiduciaire, une finalité de marque et donc faire correspondre son icône à l’image de marque de son entreprise ou de son App. Le choix des couleurs, des objets identifiés, le logo sont autant d’éléments qui ont leur importance dans cette démarche.

Il fait office de connecteur de marque. Entre la page de téléchargement des Stores et l'installation sur ses appareils, l'utilisateur reconnaît la marque, le jeu, les couleurs, le style et peut s'y référer à tout moment.

2.2.2. Se distinguer de la concurrence

Il vaut mieux se distinguer de la concurrence, de par ses choix graphiques et/ou de positionnement, que de copier la concurrence. En effet, le marché des Apps est tellement saturé que l’on peut vite devenir invisible, et notamment sur les pages de types recherche ou téléchargements des plate-formes. Assumer vaut mieux que reproduire.

Chaque application nécessite une icône mémorisable qui attire l'attention sur les magasins de téléchargement et se distingue sur l'écran d'accueil. Votre icône est la première occasion de communiquer en un coup d’œil le but de votre application. Il apparaît également dans tout le système, par exemple dans Paramètres et résultats de la recherche.

3. Informations techniques

3.1. Attributs

Tous les icônes d’App doivent adhérer aux spécifications suivantes :

Attribut Valeur
Format PNG désentrelacé
Espace colorimétrique sRGB
Calques Aplati sans transparence
Résolution Varie selon le type de support
Forme Carré sans coins arrondis
Taille Ecran HR (@3x) : 2048x2048px
Ecran HR (@2x) : 1024x1024px
Ecran HR (@1x) : 512x512px
voir la liste complète sur Material design

3.2. Formats

Il convient d’utiliser des fichiers .PNG désentrelacés pour les illustrations bitmap/raster. Le format .PNG prend en charge la transparence et, comme il est sans perte, les artefacts de compression ne brouillent pas les détails importants ni ne modifient les couleurs. C'est un bon choix pour les illustrations complexes qui nécessitent des effets tels que l'ombrage, les textures et les rehauts.

Il convient d’utiliser le format .JPEG pour les photos. Son algorithme de compression produit généralement des tailles plus petites que les formats sans perte et les artefacts sont plus difficiles à discerner dans les photos. Les icônes d'applications photoréalistes ont toutefois un meilleur aspect que les .PNG. La palette de couleurs 8 bits est préconisée pour les graphiques .PNG ne nécessitant pas une couleur 24 bits complète. Cela réduit la taille du fichier sans réduire la qualité de l'image. Cette palette n'est pas appropriée pour les photos.

Les fichiers .JPEG sont optimisés pour trouver un équilibre entre taille et qualité. La plupart des fichiers .JPEG peuvent être compressés sans dégradation notable de l'image résultante. Même une petite quantité de compression peut économiser beaucoup d'espace disque. Nous testons les paramètres de compression sur chaque image pour trouver la valeur optimale qui donne un résultat acceptable.

3.3. Traitements

3.3.1. Le design à plat

Le design plat est un style de design d'interface graphique caractérisé par son minimalisme. Il se base sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de typographie. Ce style s'inspire notamment du style typographique international. Google s’en est largement inspiré pour la création de ses icônes d’app et système.

3.3.2. Le design filaire

Le design filaire est limité à la représentation des objets par leur contour. Style énormément utilisé pour la création d’icône système ou de navigation.

3.3.3. Le design comme à la main

Le design comme à la main est une représentation dessinée d’un objet avec ses irrégularités et son style. Plus difficile à mettre en place car pour obtenir une homogénéité parfaite sur une bibliothèque d’icônes, il est parfois difficile d’appréhender certains thèmes.

3.3.4. Le design en relief

Le design en relief est plus complexe et se veut plus réaliste. Les effets lumineux, les ombres y sont souvent utilisées pour donner plus de vie aux objets ou personnages.

3.3.5. Le Skeuomorphic

Il s’agit d’un traitement qui tente de se rapprocher de la réalité par le dessin. Il tente de reproduire la réalité.

Les icônes d’app peuvent aussi s’inspirer de pictogrammes (représentation d’une chose concrète par un dessin et des phonogrammes qui représentent un son) ou d’idéogrammes (symbole graphique représentant un mot ou une idée utilisé dans certaines langues vivantes, comme le chinois et le japonais ou anciennes, comme les hiéroglyphes de l'Égypte antique). Les idéogrammes sont des représentations graphiques destinées à rendre certains faits, événements, sentiments, difficilement traduisibles autrement.

Exemple : un coeur pour l'amour, des petits dessins divers pour les injures, une bougie ou une ampoule pour montrer qu'un personnage vient d'avoir une idée, etc...

Le traitement accordé à l’icône d’App est un choix artistique autant que de positionnement marketing. Bien entendu, ce traitement dépend du thème de l’App et de son style. Si le jeu est un jeu graphique 2D à plat, préférez le mode du flat design. Si le jeu a des graphismes poussés, préférez un design en relief.

4. Recommandations artistiques

4.1. Couleurs

Depuis Héraclite (src : wikipédia) (VIe Siècle av. J-C), les choses n’ont pas beaucoup changé. Selon lui, “voir est une illusion”. La lumière n’a pas de couleur à proprement parlé. La perception de la couleur n’est qu’une expérience sensitive humaine subjective et personnelle. De plus, la couleur n’existe pas seule. Elle est souvent photographié dans un environnement complexe de couleurs. Le principe de la couleur est qu’elle se diffuse et déteint sur les objets à proximité immédiate. La couleur elle-même n'a pas de profondeur, elle ne contient ni arêtes ni ombres.

La psychologie de la couleur et son symbolisme offrent différentes interprétations des couleurs séparées. Les couleurs et leur significations ou les sensations qu’elles procurent ne dépendent pas uniquement d’une expérience personnelle mais aussi d’impressions convenues qui remontent à plusieurs siècles.

Voici un récapitulatif non exhaustif des couleurs et de leurs symboliques.

Couleur Valeurs positives Valeurs négatives Commentaires
JAUNE • optimisme
• chaleur
• clarté
• vanité
• arrogance
• envie
• jalousie
• avarice
• egoïsme
• amertume
En angleterre, le jaune est signe de lâchetée. Elle a toujours été associée aux hors-la-loi, aux persécutés et eux exclus.
ORANGE • amicale
• confiance
• bonne humeur
• joie
• efficacité
• vitalité
• amusement
• excitation
• exubérance
• fanatisme
• rudesse
• arrivisme
MAGENTA • idéalisme
• gratitude
• engagement
• ordre
• sympathie
• snobisme
• arrogance
• suffisance
ROUGE • vitalité
• joie
• activité
• activation
• énergie
• dynamisme
• impulsivité
• chaleur
• passion
• tentation
• éveil
• conquête
• vigueur
• excentricité
• surmenage
• danger
• violence
• chaos
• colère
• haine
Le feu est le signe du divin et du sacré mais aussi celui du sang et de la mort.
VIOLET • mystère
• magie
• extravagance
• créative
• imagination
• sage
• vanité
• arrivisme
• conflit
Le feu est le signe du divin et du sacré mais aussi celui du sang et de la mort.
BLEU • relaxation
• sympathie
• confiance
• fiabilité
• harmonie
• calme
• silence
• infini
• espoir
• propreté
• intelligence
• science
• désir
• imagination
• froid
• fraîcheur
• négligence
• obstination
• naïveté
• mélancolie
Le Bleu était à l'époque du moyen-âge la couleur de la noblesse et de la royauté. Aujourd'hui, elle se rapproche plus de la pureté.
VERT • endurance
• fraîcheur
• ténacité
• relaxation
• nature
• végétation
• calme
• générosité
• santé
• confiance
• indécision
• paresse
• attitude impersonnelle
GRIS • équilibre
• neutralité
• calme
• sincérité
• objectivité
• simplicité
• négativité
• incertitude
• froideur
• manque d’engagement
• misère
GRIS • résistance
• imperméabilité
• obscurité
• fonctionnalité
• dynamique
• mystérieux
• réservé
• lourdeur
• trouble
• tristesse
• négation
• isolement
• pssimisme
• désespoir
Le noir n’est pas une couleur, il est achromatique.
BLANC • lumière
• foi
• idéal
• bonté
• début
• nouveauté
• propreté
• pureté
• innocence
• modestie
• vérité
• neutralité
• intelligence
• science
• précision
• vide
• inconnu
Le blanc n’est pas une couleur, il est achromatique. Il est la somme de toutes les couleurs en synthèse additive

4.2. Saturation et désaturation

La saturation de la couleur la rend plus forte et dynamique. La désaturation, quant à elle, peut altérer la valeur positive de la couleur et de sa symbolique mais aussi d’en réduire les valeurs négatives. Un exemple avec le rouge. Si on prend le rouge saturé, la valeur positive d’énergie est accentuée et la valeur négative de danger aussi. Si on la désature, on arrive à un rouge qui tire vers le saumon. Sa valeur positive d’énergie est moindre mais sa valeur négative de danger aussi.

DésaturationDésaturation SaturationSaturation

4.3. Contraste

Le contraste peut prendre différentes formes très distinctes. Plusieurs procédés permette de le mettre en valeur : petit / grand, premier plan / arrière-plan, lourd / léger, rempli / épuré, imprimé / uni, fermé / ouvert, fin / brut, mat / brillant...

Les 7 contrastes établis par Johatan Isten : contraste chromatique, contraste clair-obscur, contraste chaud-froid, contraste de qualité, contraste simultané, contraste complémentaire, contraste de quantité, sont toujours d’actualité.

Le contraste permet, pour la création d’icônes d’app, de mettre en évidence le rapport entre le premier plan et l’arrière-plan. En effet, on peut soit travailler sur l’objet en premier plan, soit renforcer l’arrière-plan pour faire ressortir l’objet en premier plan. On parle, dans le premier cas, de focus couleur et dans le deuxième d’inondation par la couleur.

FocusFocus InondationInondation

4.5. Profondeur de champ

Le nombre de couches de surface qui se chevauchent doit être limité, car trop de couches peuvent compliquer excessivement les icônes.

Mono-coucheMono-couche
(recommandé)
Muti-couchesMuti-couches
(non recommandé)

4.6. Représentation simplifié

2 solutions sont possibles selon l’App concernée. On peut choisir un élément fort du gaming du jeu (objet ou personnage) et le mettre en avant. L’autre solution est de se servir d’un élément fort de l’image de marque du jeu (communication visuelle notamment).

Icon Gaming Icon Gaming Icon Gaming Icon Gaming Icon Gaming
Utilisation d’un élément du gaming
Icon brand Icon brand Icon brand Icon brand Icon brand
Utilisation d’un élément de l’image de marque

4.7. Itération d'objets

Privilégier un élément ou deux éléments maximum sur la scène. Utiliser plus de 2 objets altère fortement la lecture de l’icône. En effet, en petite taille, trop d’objets se mélangent et rendent la lecture moins lisible et impactante.

Carré arrondiFocus sur un seul objet
(recommandé)
Carré arrondiNombre d’itérations trop élevé
(non recommandé)

4.8. Proportions des objets

Un objet seul doit remplir entre 80 et 100% de la scène. Si nous utilisons 2 objets, le rapport devra être de 50 - 50 afin de conserver deux objets de taille importante, primordial pour une lecture en petite taille.

Carré arrondi1 objet prend 100% de la scène
(recommandé)
Carré arrondi4 objets qui prennent 25% de la scène
(non recommandé)

4.9. Formes utiles

Carré arrondiCarré arrondi CercleCercle Rectangle arrondi portraitRectangle arrondi portrait Rectangle arrondi paysageRectangle arrondi paysage

Il est important que l’objet principal soit centré sur la scène. Quand nous parlons de l’objet, nous évoquons surtout l’élément principal de l’objet (Oeil, figure, arme, …). L’oeil est au départ attiré par le centre de la scène. Si le focus se fait à cet endroit, l’oeil n’a pas d’aller-retour à faire pour comprendre la scène dans son entier.

4.10. Luminosité

Nous pouvons renforcer la luminosité de la scène pour faire ressortir l’objet principal sur des éléments sombres. La luminosité permet d’accaparer l’oeil à l’endroit ciblé.

4.11. Effets

Les effets sont courants sur les icônes d’application et notamment de jeux. Cependant, des effets trop complexes rendront la lecture de l’icône en petite taille illisible. Des effets, oui, mais avec parcimonie et simplicité !

Icon exemplePeu d’effet et bien ciblés
(recommandé)
Icon exempleTrop d’effets
(non recommandé)

4.12. Ombres

Une ombre est très pratique pour dissocier plusieurs éléments. Cependant, en petite taille, une ombre complique énormément la lecture et crée une altération de la netteté du design. L’ombre doit être bien choisie (rayon du flou et taille) pour ne pas perturber la lecture.

4.13. Mode sombre

Les utilisateurs utilisent des téléphones avec des fonds personnalisés, photos notamment. Il est important de penser à la lecture de l’icône sur fond sombre. Pour cela, une variation de l’icône sur fond sombre pourra être proposée. Les plate-forme ajoutent de leur côté un filet autour de l’icône gris clair pour le faire ressortir sur fond sombre.

5. Seo

5.1. Etiquettes de texte alternatives

Les libellés de texte alternatifs ne sont pas visibles à l'écran, mais ils permettent à VoiceOver de décrire de manière audible ce qu'il y a à l'écran, ce qui facilite la navigation des personnes malvoyantes.

5.2. Catégorisation de votre application

Choisissez bien la catégorie dans laquelle vous apparaitrez sur les magasins. En effet, certaines catégories sont saturées et votre possible référencement sera amoindri. En même temps, le visiteur lambda va chercher par style d’app donc il faut être au bon endroit au bon moment !

5.3. Titre & description d’application

Réfléchissez bien aux éléments Seo de votre page application sur les magasins de téléchargement. Les éléments importants sont :
- le titre
- la description succinte affichée sous le titre
- la description complète affichée dans les détails

Une bonne analyse et un Seo intelligent permettra à votre application de mieux ressortir lors des résultats de recherche sur les magasins de téléchargements.

Google Play Store Statistiques App Store Statistiques
Pourcentage des différents éléments d’une page d’App sur L’AppStore et le Google Play Store.
Source : Storemaven

6. Préconisations & recommandations des magasins de téléchargements d’app.

6.1. App Store

6.1.1. Simplicité

Favoriser la simplicité. Recherchez un seul élément qui capture l'essence de votre application et exprimez-le sous une forme simple et unique. Ajouter les détails avec prudence. Si le contenu ou la forme d'une icône est trop complexe, il peut être difficile de distinguer les détails, en particulier pour les tailles plus petites.

6.1.2. Focus

Fournir un seul point focal. Concevez une icône avec un seul point central qui capte immédiatement l’attention et identifie clairement votre application.

6.1.3. Reconnaissance

Concevoir une icône reconnaissable. Les gens ne devraient pas avoir à analyser l'icône pour comprendre ce qu'elle représente. Par exemple, l'icône de l'application Mail utilise une enveloppe, qui est universellement associée au courrier. Prenez le temps de concevoir une belle icône abstraite et attrayante qui représente de manière artistique le but de votre application.

6.1.4. Arrière-plan

Gardez le fond simple et évitez la transparence. Assurez-vous que votre icône est opaque et évitez d'encombrer l'arrière-plan. Donnez-lui un arrière-plan simple pour ne pas dominer les autres icônes d'application situées à proximité. Vous n'avez pas besoin de remplir toute l'icône avec du contenu.

6.1.5. Les mots

Utilisez des mots uniquement lorsqu'ils sont essentiels ou font partie d'un logo. Le nom d'une application apparaît sous son icône sur l'écran d'accueil. N'incluez pas de mots non essentiels qui répètent le nom ou ne disent pas aux gens quoi faire avec votre application, comme "Regarder" ou "Lire". Si votre conception comprend du texte, mettez l'accent sur les mots liés au contenu réel de votre application.

6.1.6. Photos, captures d’écrans

N'incluez pas de photos, de captures d'écran ou d'éléments d'interface. Les détails photographiques peuvent être très difficiles à voir dans les petites tailles. Les captures d'écran sont trop complexes pour une icône d'application et ne permettent généralement pas de communiquer l'objectif de votre application. Les éléments d'interface dans une icône sont trompeurs et déroutants.

6.1.7. Ne pas copier Apple

N'utilisez pas de répliques de produits matériels Apple. Les produits Apple sont protégés par des droits d'auteur et ne peuvent pas être reproduits dans vos icônes ou vos images. En général, évitez d'afficher les répliques de périphériques, car les conceptions matérielles ont tendance à changer fréquemment et peuvent donner à votre icône un aspect obsolète.

6.1.8. Application

Ne placez pas l'icône de votre application dans l'interface. Il peut être déroutant de voir une icône utilisée à différentes fins dans une application. Pensez plutôt à incorporer le jeu de couleurs de votre icône.

6.1.9. Tests

Testez votre icône contre différents fonds d'écran. Vous ne pouvez pas prédire quel fond d'écran les personnes choisiront pour leur écran d'accueil. Ne testez donc pas votre application avec des couleurs claires ou sombres.

Voyez comment cela se passe sur différentes photos. Essayez-le sur un appareil doté d'un arrière-plan dynamique qui change de perspective à mesure que l'appareil se déplace.

6.1.10. Coins carrés

Gardez les coins d'icône carrés. Le système applique un masque qui arrondit automatiquement les coins des icônes.

6.1.11. Etiquettes de texte alternatives.

Fournissez des étiquettes de texte alternatives pour les images et les icônes. Les étiquettes de texte alternatives ne sont pas visibles à l'écran, mais elles permettent à VoiceOver de décrire de manière audible ce qu'il y a à l'écran, ce qui facilite la navigation des personnes malvoyantes.

Chaque application doit fournir de petites icônes à utiliser sur l'écran d'accueil et dans l'ensemble du système une fois votre application installée, ainsi qu'une icône plus grande à afficher dans l'App Store.

Plus d’informations sur le site d’apple (Human Interface Guidelines)

6.2. Préconisations Google Play Store

Les icônes sont fournies au magasin Google Play, avec les exigences suivantes :
- Icône pouvant être dessinée au format PNG ou vectoriel
- Calques d'arrière-plan et d'avant-plan sans masque ni ombres d'arrière-plan
- Tous les calques doivent dépasser la forme de l'icône de base de 50%

Les exigences OEM incluent :
- Une forme pour masquer les icônes affichées sur la plate-forme OEM
- Une ombre extérieure (facultatif)

Plus d’informations sur le site de Material Design (Outil de design Icons Google).