Concevoir l’habillage graphique de votre application
Sans se substituer au savoir-faire d’un graphiste, ces quelques conseils et outils vous aideront à penser un design à la fois élégant et pertinent pour votre application « guide de visite ».
Étape 1 : Définir l’architecture de votre application
Avant de vous lancer dans son habillage graphique, il vous faut définir l’architecture de votre application : ses rubriques et sous-rubriques mais aussi leur nombre et leur organisation les unes par rapport aux autres.
L’architecture détermine la structure de votre application — son nombre d’onglets par exemple. Il est donc essentiel de la fixer une fois pour toute avant de vous pencher sur le design de votre application.
Contrairement aux sites internet, les applications ne supportent pas des architectures complexes ; une application smArtapps peut comporter jusqu’à 5 onglets maximum. Privilégiez deux ou trois fonctionnalités principales pour que la navigation des utilisateurs de votre application soit toujours agréable.
Pour rendre compte de l’architecture de votre application, procédez comme pour un arbre généalogique. Les onglets principaux — ceux qui figurent sur la tabbar de votre application, comme la carte et la liste — en sont le tronc. À partir de ces onglets, les utilisateurs de votre application peuvent accéder à d’autres contenus, les POI par exemple ; ce sont les branches. Depuis un POI, il est possible de consulter encore d’autres documents, comme une galerie de photos, un fichier audio ou un POI fils : voici de nouveaux rameaux.
Étape 2 : Constituer votre moodboard
Avant le maquettage votre application, réunissez en un même endroit les éléments qui servent à en élaborer la charte graphique : nuancier de couleurs, polices de caractère, icônes, boutons, images… Cela vous permettra de faire apparaître l’ambiance et le style de votre application.
Inutile de passer des heures à chercher la typographie parfaite : vos utilisateurs ne sont pas des spécialistes non plus ! N’importe quelle typographie simple et lisible conviendra parfaitement. Bon à savoir : Apple et Google conseillent l’emploi de la typographie Univers, disponible en plusieurs alphabets.
Au moment de choisir vos couleurs, gardez à l’esprit qu’elles ont une forte résonnance culturelle. Ainsi, le rouge évoque immédiatement l’interdiction et le danger tandis que le vert indique la permission.
Bien évidemment, il est primordial que l’apparence de votre application vous plaise. Cependant, ne perdez pas de vue que ces couleurs sont également des éléments signifiants et, à ce titre, peuvent être plus ou moins efficaces. Attention donc au moment de les choisir, tant d’un point de vue pratique que symbolique. Veillez à choisir des couleurs contrastées plutôt que des camaïeux afin que tous les éléments de votre application soient bien visibles à l’écran.
Pour réaliser des associations de couleurs harmonieuses, n’hésitez pas à vous aider de ces sites :
De même, quand vous choisissez vos pictogrammes, veillez à respecter l’adéquation entre leur design et le public que vous visez afin de ne pas passer à côté de votre cible. N’hésitez pas à télécharger et comparer des applications sur le même thème que la vôtre afin de ne pas faire de faux-pas.
Où trouver des icônes ? Voici quelques banques d’icônes où vous trouverez certainement celles qu’il vous faut :
Pour modifier la couleur de vos icônes, vous pouvez utiliser les versions d’essai (gratuites) des logiciels suivants :
- https://sketch.fr.softonic.com/mac — disponible sur Mac uniquement,
Enfin, dès le début du projet, commencez à réfléchir à votre icon launcher. C’est elle qui apparaîtra sur les Stores et servira de raccourci vers votre application sur le téléphone des utilisateurs. L’icon launcher est donc un élément-clef pour identifier votre application, qui ne doit pas être laissé au hasard… ni décidé au dernier moment. 😉
La check-list : avez-vous tout bon ?
- L’architecture de votre application est logique et facilite la compréhension de votre projet,
- Votre moodboard comprend bien un nuancier de couleurs, des polices de caractère, des icônes, boutons et images dont vous possédez les droits,
- Votre style graphique est cohérent entre ses différents éléments et avec le thème de votre projet,
- Vos éléments graphiques tels que les boutons et pictogrammes sont facilement compréhensibles et interprétables.
Si vous cochez toutes ces cases alors félicitations : l’interface graphique de votre application est bien partie !
Ça vous donne envie de réaliser une application à votre image ? Pourquoi ne pas participer à notre appel à projets, « L’application la plus créative » ? Proposez votre idée d’application scénarisée et ludique avant le 20 juin 2018 : le projet lauréat sera réalisé gratuitement par les équipes de smArtapps !
Et pour partir du bon pied, on vous recommande la lecture de notre article “10 bonnes pratiques pour réussir votre gestion de projet”. 🙂
