Une fois l’App écrite, testée, enfin vient le moment de libérer l’œuvre et de lui faire connaitre le vaste monde ! Hélas la publication sur les différents stores est loin d’être simple, rapide et directe… Et parmi tous les écueils à surmonter, il y a le problème des images. Non pas celles de votre App, mais celles nécessaires à la publication de votre App sur les stores ! …
Images pour le store
Je parle bien ici des images pour la publication de l’App sur chacun des stores, pas des images utilisées par l’application qui elles ont été calibrée pour chaque plateforme au développement (je l’espère pour vous !).
En effet, chaque magasin en ligne, Windows Store, Play Store, App Store, impose ses propres règles, longues et ennuyeuses d’ailleurs, permettant de faire entrer son application dans le catalogue. Parmi ces règles très codifiées et quasi absolues se trouvent les images qui seront utilisées pour présenter l’App.
C’est là qu’on ressort l’infographiste de son placard qu’il avait rejoint après la mise en forme du storyboard de l’app et les quelques crobars d’UI sous Photoshop qu’il avait pondus. Car là il va falloir qu’il bosse encore un peu.
Allez-y doucement au départ, c’est fragile ces animaux là. Appâtez-le avec un livre de Fontes, ils adorent ça, ou un livre de Logos ils en raffolent. Déposez une boite de crayons de couleur neuve à côté de leur souris, etc. Toutes ces petites attentions faciliteront son adaptation à son poste de travail. 
Sans rire, si vous n’êtes pas appuyé par un infographiste la tâche sera particulièrement difficile et le résultat sera au mieux médiocre. Et l’image ça compte, surtout celles du store, c’est cela qui donne envie de télécharger votre application au moins à 50% voire plus. Et s’il s’agit d’une App B2B elle véhicule donc … l’image de votre entreprise auprès des fournisseurs, des prospects, des clients, etc, autant dire l’importance de la chose.
Le Windows Store
Il faut des tas d’images dans des tas de ratios. Une belle illustration prévue pour un certain format ne se pliera que difficilement à toutes ces contorsions sans un bon coup de main de l’illustrateur.
Les captures d’écran
Elles sont affichées avec votre description de l’application. Pour les appareils de bureau les captures doivent faire 1366x768 ou plus.
Si votre application est mobile les captures doivent faire 768x1280, 720x1280 ou 480x800. Mais rien d’autre.
Icône vignette
L’icône vignette sera comme icône de l’application par l’OS. Elle doit faire 300x300
Image de promo
Le Windows store peut utiliser une image dite de promotion pour présenter votre App (mobile ou non). Cette image doit faire 2400x1200
Pour Windows 8.1 et antérieures elle doit faire 1000x800 ou 358x358. Un autre format semble être utilisé aussi : 414x180
Les astuces
Tous ces formats sont bien embêtants à générer, mais cela ne s’arrête pas là car il y a des astuces à connaitre… Par exemple l’image de promotion peut être utilisée de différentes façons par Microsoft. La plupart du temps temps même si elle est utilisée “plein cadre” elle sera agrémentée d’un dégradé dans son tiers inférieur, cela pour rendre lisible toute surimpression de texte promotionnel… Du coup n’utilisez pas le tiers inférieur de l’image pour autre chose que du remplissage. Microsoft diffuse un patron à suivre montrant où se trouve la zone “safe” de l’image de promotion. Tout votre contenu intéressant doit être dessiné dans cette zone, le reste est de l’habillage (qui doit rester esthétique bien entendu) :
Ce qui en pratique donne ça pour vous faire une idée :
On voit les lignes du patron en surimpression ce qui permet de visualiser la zone “safe” et de voir comment le graphiste à choisi de cadrer son illustration dans celle-ci, se servant du reste comme d’un habillage non indispensable mais ayant sens.
Mais ce n’est pas tout !
Cela serait trop simple… Il y a aussi toute une ribambelle de “normes” pour les vignettes, tuiles et autres icônes utilisées dans l’application.
je vous enjoins donc à lire avec attention l’article “Recommandations en matière de ressources de vignette et d’icône”
Mais pour vous aider Microsoft met à la disposition de votre graphiste des gabarits qui accélèreront la mise en place des images : “Téléchargements de conceptions pour les applications UWP”
Il existe un court article en US qui explique comment utiliser ces éléments : “Generating your tile/icon image assets for Windows 10 UWP using Photoshop Actions”.
Plus rusé encore, mais à tester, un développeur asiatique à créer une sorte de générateur d’images calibrées pour UWP à télécharger ici : UWP Logo Maker.
Lorsqu’on voit les dizaines d’images et leurs variations que cette application créée cela donne une bonne idée du travail que doit fournir l’infographiste ! Car en général tout recadrage ou changement de ratio n’ira pas de soi automatiquement et il faudra souvent modifier l’image originale pour qu’elle entre dans les contraintes de chaque format.
Je n’aborderai pas les descriptions dans toutes les langues supportées qu’il faudra fournir ni le jeu de piste qu’est la publication d’une App sur le Windows Store, je n’ai jamais compris pourquoi ériger autant de barrières. Tout cela pour rebuter ? Ca marche pas mal à la vue des parts de marché de Windows 10 mobile hélas…
En tout cas prévoyez une grosse journée de travail voire deux ou trois pour la simple mise en ligne de votre App sur le Windows Store, et bien plus si c’est votre première fois et qu’il faut créer un compte, le faire vérifier, entrer vos informations légales et bancaires qui seront vérifiées par un tiers de confiance, etc.
Le Play Store Google
Ce n’est peut-être pas totalement fortuit si Google connait tant de succès avec Android et s’il y a tant d’apps disponibles… Bien que très codifié aussi le format des images est beaucoup plus libre. Mais ne rêvez pas, là aussi il faudra du doigté pour que chaque image soit bien cadrée dans chacun des cas, ce qui réclamera là aussi un peu de travail !
Les captures écran
On peut ajouter 8 captures d’écran à une App sur le App Store. Pour n’importe quelle machine (téléphone, tablette, phablette, android TV et android wear).
Pour les tablettes Google à mis en ligne des recommandations que je vous suggèrede lire : Tablet App Quality. On y trouve des guidelines pour les Apps elles-mêmes mais aussi pour les icônes, logos, etc.
Les images doivent être des JPEG ou des PNG en 24 bits sans canal Alpha (pas de transparence). Elles doivent faire au moins 230 px et ne pas dépasser 3840 px. C’est moins contraignant que le Windows Store mais cela n’arrange pas toujours les choses alors soyez vigilants, de mauvaises captures ruines les téléchargements !
Icône haute résolution
Les icônes en haute résolution apparaissent sur les listings d’Apps dans le Store autant dire qu’ici aussi il faut être très attentif au résultat ! Ces icônes ne remplacent pas l’icône de lancement de l’App.
On trouve aussi des guidelines pour la conception de ces images : “Icônes”. Les marges intérieures, le centrage, tout cela est indiqué agrémenté de certains dessins qu’on pourrait croire ésotériques (bonne chance aux archéologues du futur qui croiront trouver là la trace d’anciennes religions !) :
Les icônes haute résolution doivent être ne PNG 32 bits et faire 512x512 pour une taille maximale de 1024Ko.
Je vous conseille au passage un petit utilitaire pas très connu qui réduit la taille des PNG en appliquant des algos plus poussés que ceux par défaut mais sans modifier la taille, ni la résolution et bien sûr sans altérer les images. On obtient souvent un gain intéressant, ce qui peut 
parfois permettre de faire passer une icône complexe pile poil sous le seuil de 1024K. Il s’agit de PNG Gauntlet, un outil à posséder en tout cas (même pour réduire la bande passante d’un site Web).
Les “feature graphic”
C’est l’équivalent des images de promotion de Windows Store. Leur rôle est donc essentiel pour assurer un bon visuel à votre App.
Elles doivent être en JPEG ou en PNG 24 Bits (sans canal Alpha, donc sans transparence). La taille est de 1024 x 500 px. On voit clairement ce foisonnement de résolutions et de ratios dont je parlais en introduction qui rendent ce travail absolument infernal pour une application cross-plateforme. Prévoyez un budget pour la publication sur les Store sinon vous perdrez de l’argent si vous agissez pour un tiers et si c’est pour votre entreprise cela vous évitera d’être en dépassement et d’être mal noté…
Là aussi il est conseillé d’éviter de placer des choses importantes dans le tiers inférieur. Si des textes doivent être ajoutés il faut utiliser de grandes fontes. L’image pouvant apparaitre sans l’icône de l’App il faut s’assurer d’une certaines cohérence graphique, voire d’un renvoi visuel même discret (sinon le client se perd en ne comprend pas qu’il s’agit du même produit).
Les vidéos de promo
Play Store accepte aussi les vidéos de promo ce qui est très sympa et plus vivant que des captures figées. Mais faites très attention ! Réaliser une vidéo est un boulot de pro, faire court, percutant, dans toutes les langues supportées, etc, est un travail énorme même pour quelques secondes d’images !
Les vidéos doivent avoir leur propre adresse YouTube, ne doivent bien entendu pas être limitées en fonction de l’âge, et c’est l’URL complète qui doit être indiquée et non pas un raccourci (même venant de Google).
Encore plus facilement que pour le Windows Store on trouve sur le Web de nombreux sites qui permettent de générer des images à la bonne taille pour Android, mais faites attention, Android évolue beaucoup et la fameuse fragmentation du marché se retrouve aussi dans les sites Web qui ne sont pas tous forcément à jour vis-à-vis des guidelines les plus récentes.
Apple Store
Apple restera Apple… dans le mauvais et dans le meilleur. Ici vous c’est le meilleur car vous disposez d’un site en français qui décrit toutes les guidelines. Pour une fois on s’intéresse aux développeurs hors des USA.
Sobrement intitulé “Guide Marketing des l’App Store” on y trouve les badges de téléchargement qu’on peut placer sur un site Web, un message Facebook ou autre, les visuels des produits Apple (Mock des appareil pour mettre ne situation une capture par exemple). Cela se justifie car on retrouve là le côté sombre de Apple : il est strictement interdit d’utiliser une photo d’Iphone ou de montre Apple même pour présenter une App tournant dessus !
Les icônes
Ceux d’une application dépendent de la machine visée. Pour un Iphone 6s Plus, Iphone 6 Plus les images sont en 180x180.
Pour l’iPhone 6s, 6 et SE, la taille est de 120x120.
Pour l’Ipad Pro c’est 167x167 et pour l’Ipad et le mini c’est 152x152.
L’icône utilisé par le store doit lui être 1024x1024.
Les Apps doivent aussi fournir une icônes pour Spotlight. Lorsqu’il trouve une App qui correspond aux critères de recherche de l’utilisateur c’est en effet une icône particulière qui est utilisée. Pour l’iPhone 6S Plus et Plus elle doit être en 120x120, en 80x80 pour tous les autres.
Les Apps qui offrent une page de réglage peuvent être présentées avec une icônes différentes dite “settingsd icon” qui est de 87x87 pour l’iPhone 6S Plus et Plus, et 58x58 pour les autres.
Ecran de lancement
Les écrans de lancement dépendent là aussi de la résolution des machines. Pour les iPhone 6S Plus et Plus il faut compter 1080x1920 en portrait (et l’inverse en paysage), pour les 6s et 6 750x1334, pour le SE 640x1136, pour l’Ipad Pro 12,9” 2048x2732 et pour les autres machines 1536x2048.
Guidelines
Tout comme pour Android on trouve sur le Web de nombreuses ressources et articles abordant les guidelines graphiques de la plateforme.
Par exemple “iOS graphic assests for the App Store submission” présente quelques tableaux synthétiques qu’il faut connaitre quand vient l’heure de publier une App !
“Apple App Store Application Assests Template” propose aussi des gabarits et des explications synthétiques.
Conclusion
Créer une application est déjà un long travail, on aimerait qu’il s’arrête enfin lorsqu’enfin les tests sont terminés. Mais non… il faut encore investir du temps pour publier l’App sur les Stores. Et si vous créer une application cross-plateforme le même cinéma va se reproduire jusqu’à trois fois! On retourne le même film avec les mêmes acteurs, mais pas avec les mêmes caméras, pas la même taille de bobine, pas la même taille d’écran de projection etc.
Aucun cinéaste ne ferait ça, pas une bête ne le ferait non plus. Et pourtant c’est notre boulot …
J’espère au moins que cette petite synthèse pour aidera à aller plus vite !
Stay Tuned !