Android -design des icônes d’applications

android icones lancement

Exemples d’îcones de lancement Android

Lorsque j’ai eu à réaliser une icône pour une application Android pour mon travail, j’ai décidé de regrouper les informations trouvées et d’en faire un billet francophone qui servirait de référence.

Pour les icônes de l’application que vous créez, vous aurez une distinction à faire. Il y a l’icône de lancement de l’application, celle qui se retrouvera sur l’appareil Android une fois que l’app sera téléchargée et l’icône de l’application qui se retrouve à plusieurs endroits au sein de Google Play (anciennement la boutique Android).

ICÔNE DE LANCEMENT

Guide de création de l’icône de lancement (Figure 1) :

( Je vous fais un résumé de toute la documentation que vous pouvez trouver sur le site des développeurs Android.)

1.L’icône doit être graphiquement pas compliquée. Le moins de détails possibles

Image simple

2.Ne croppez pas votre graphique. Nous devons voir l’objet en entier

Image entière

3. Le visuel ne doit pas être graphiquement mince

Image de bonne épaisseur

4. Ne doit pas être plane et de forme unie (ne doit pas être carrée) et doit utiliser le channel alpha

5. Doit avoir des traitements visuels attrayants mais subtils

Image alpha et visuels attrayants

6. Doit suivre le modèle d’éclairage général Android soit éclairé par le haut

7. Votre icône de lancement de l’application doit bien représenter et promouvoir votre produit.

Specs pour l’icône de lancement  :

          • 32-bit PNG avec channel alpha (transparence)
          • vous devez produire une icône pour les multiples formats d’écrans disponibles
          • inclure un espace tampon

Exemple : l’icône de 96 X 96 px  peut contenir une forme de 88 X 88 avec 4px répartis tout autour qui servira d’espace tampon. Cet espace tampon peut aussi être utilisé pour placer une jolie ombre portée subtile. De plus ceci fait en sorte que votre icône est bien visible sur n’importe quelle image d’arrière-plan. Vous pouvez vous reférer ce document source (en anglais).

Voici un sommaire des formats que vous devez utiliser pour vos icônes

          • ldpi (120dpi) : 36px X 36px
          • mdpi (160 dpi) : 48px X 48px
          • hdpi ( 240 dpi) : 72px X 72px
          • xhdpi ( 320 dpi) : 96px X 96 px

Note : Ne pas confondre les dpi entre parenthèses qui sont les dpi des écrans des différents appareils avec les dpi de votre document photoshop. Pour tous les créatifs que vous faites pour Android, vous travaillez dans la résolution que vous souhaitez (idéalement 72 dpi parce que plus commun et plus léger pour travailler), mais gardez à l’esprit de toujours travailler dans la même résolution pour chaque document que vous avez à faire. Gardez aussi à l’esprit que pour Android, il y a plusieurs formats d’appareils et que s’il est prévu que votre app sera utilisée sur plusieurs formats d’appareils, vous aurez à faire chacuns de vos visuels en plusieurs formats (habituellement 3 ou 4 formats différents) peu importe que ce soit pour les icônes ou pour votre app. Pour plus de détails, je vous réfère à cette page de design pour écrans multiples  sur le site de développeur Android.

ICÔNE DE L’APPLICATION

Guide de création de l’icône de l’application (Figure 2) :

Figure 2. Exemples d’icônes d’application dans la boutique Google Play

Specs pour l’icône de l’application (qui doit être une version haute résolution de l’icône de lancement)

          • Requise en Haute résolution donc à faire au format 512px X 512px
          • 32-bit PNG avec alpha
          • poids maximum de 1024kb

Notes :

1. Cet icône ne remplace pas votre icône de lancement de l’application mais devrait être une version meilleure résolution de cette dernière et donc vous devez également suivre les mêmes instructions que pour l’icône de lancement.

2. Il est également conseillé d’inclure un espace tampon dans votre icône d’application pour conserver une constance visuelle avec les icônes des autres applications. Exemple : l’icône de 512px X 512px  peut contenir une forme de 464px X 464px avec 48px répartis tout autour qui servira d’espace tampon.

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s