RESSOURCES APP – Charte Graphique – Ressources Magic Makers

Définis la charte graphique de ton appp !

Qu'est-ce que la charte graphique ? À quoi ça sert ?

Mots-clés et définition

UI et UX, kézako ?

Tu as sûrement déjà entendu ces deux termes quand on parle d’applications mobiles ou de sites web, mais qu’est-ce que ça veut dire exactement ?

UI = User Interface (Interface utilisateur)

UX = User eXperience (Expérience utilisateur)

L’UX c’est l’expérience globale de l’utilisateur sur l’application mobile. L’UI c’est la partie « visible » de l’application et qui fait donc partie de l’UX.

Deux aspects essentiels de la création d’une application mobile sur lesquels tu vas pouvoir te concentrer avec les ressources ci-dessous !!

Et la charte graphique dans tout ça ?

La charte graphique joue un rôle important dans l’expérience utilisateur ! Dans la charte graphique, on comprend l’identité visuelle, c’est-à-dire tout ce qui va être de l’ordre la palette de couleurs, des typo, le logo… On comprend aussi ici la structure de l’application et l’organisation des éléments de tes écrans.

Avec la charte graphique, tu vas pouvoir jouer sur l’expérience utilisateur (des couleurs, images, éléments qui indiquent un chemin pour l’utilisateur, assurent une cohérence globale, répondent aux attentes de l’utilisateur, etc). La charte graphique va ainsi servir l’intention de ton projet !

Comment créer la charte graphique de ton application ?

Pour créer ta propre charte graphique, tu vas pouvoir t’aider de ce template à remplir à ton image !

Template Charte Graphique Application

Tu trouveras aussi ci-dessous plusieurs tips pour t’aider à créer une expérience utilisateur comme tu le souhaites 🙂

Structure de l'application et des écrans

Navigation entre tes écrans

Un premier point important va être la navigation : comment passe-t-on d’un écran à un autre ?

La navigation que tu choisis va avoir un impact direct sur l’expérience de tes utilisateurs. On ne remarque généralement pas la navigation d’une application jusqu’à ce qu’elle ne corresponde pas à nos attentes ! L’objectif est donc de créer une navigation simple et naturelle pour l’utilisateur. Tu peux par exemple t’inspirer des trois types ci-dessous :

Navigation Hiérarchique : l’utilisateur va faire un choix par écran pour arriver à un écran précis et ensuite revenir en arrière pour aller à un autre écran.

ex : les paramètres du téléphone où on choisit une catégorie puis une autre puis une autre pour arriver au paramètre qui nous intéresse.

Navigation Flat ou horizontale : l’utilisateur peut passer d’un écran à un autre pour accéder à différents contenus.

ex : AppStore où on peut choisir une catégorie d’apps et afficher le contenu

Navigation Experience-driven ou axé sur l’expérience : l’utilisateur peut naviguer assez librement entre les écrans en se laissant guider par le contenu.

ex : les applications de musique où on peut accéder à une chanson par recherche puis à l’album de la chanson ou faire le chemin inverse

Tu peux aussi reprendre des référentiels communs pour ta navigation. Par exemple, quand on voit une icône en forme de maison, on s’attend tous à retourner à l’écran d’accueil en cliquant dessus. Un autre exemple : on s’attend à ce que le bouton « retour en arrière » soit à gauche de l’écran !

Organiser les éléments de tes écrans

La manière dont tu places les éléments sur tes écrans a aussi son importance comme tu t’en doutes !

Suivant où un élément interactif est placé, il est plus ou moins accessible. Assure toi que tous les éléments interactifs sont facilement utilisables pour tout type d’utilisateur (droitier, gaucher, différentes tailles de doigts, etc) !

Les espaces entre tes éléments vont aussi jouer sur leur accessibilité et lisibilité.

La taille des éléments va influencer les utilisateurs. Plus un élément sera gros, plus il va attirer le regarde (et plus il sera facile à cliquer). Tu peux donc jouer avec la taille pour créer une hiérarchie d’information.

Exemple de l’utilisation des tailles et espaces pour indiquer une hierarchie d’information :

Exemple du bouton retour en haut à gauche :

Comme dit plus haut, tu peux utiliser les référentiels communs pour présenter des écrans familiers à tes utilisateurs (placer le bouton retour en haut à gauche par exemple).

Tu peux te questionner sur les applications que tu utilises et la disposition des écrans pour reprendre leurs usages : où est-ce qu’on trouve quelle information ? quels points communs entre toutes tes applications ?

Pour t’aider à placer tes éléments comme tu le souhaites sur Thunkable, tu peux regarder les deux premières vidéos de cette pages ressources : http://ressources.magicmakers.fr/ressources-makers-app-tuto/

Couleurs et Typo

Les couleurs et les typo vont aussi jouer sur la hiérarchie des infos et l’expérience de l’utilisateur !

Quelles couleurs pour ton application ?

Les couleurs véhiculent des émotions mais suivant où on habite, notre culture, notre sensibilité, ce ne sera pas forcément les mêmes.

Les couleurs vont aussi jouer sur la cohérence globale de ton projet et son identité visuelle. Tu peux ainsi reprendre les couleurs de ton logo et ne choisir que quelques couleurs pour ne pas perdre l’utilisateur.

Tu peux aussi définir une couleur pour tout ce qui est interactif. L’application « Notes » sur IOS par exemple présente la couleur « jaune » pour tout ce qui est icône interactif et c’est une des couleurs de l’icône de l’application !

Tu peux aussi indiquer des informations avec tes couleurs : par exemple dans notre culture le rouge est associé au danger, ainsi les boutons pour supprimer sont souvent rouges pour indiquer une action irréversible.

Tu peux aussi jouer avec la complémentarité des couleurs et les contrastes pour mettre en avant certaines informations. Utilise pleinement ta palette de couleur en gardant le même niveau d’information pour chacune des couleurs !

Pour en savoir plus sur les couleurs et la composition de ta palette, tu peux regarder cette page : http://ressources.magicmakers.fr/ressources-dessin-couleurs/

Pour t’aide à créer ta palette, tu peux aussi utiliser ce site.

Quelles typo pour ton application ?

La typographie est l’art de concevoir, de créer les lettres, de les assembler pour composer un mot. C’est aussi la possibilité de choisir des polices (exemples : times, arial, helvetica…), le corps (la taille du texte) et la mise en page ! Le choix typographique va influencer à la fois la lisibilité, l’identité du projet et sa personnalité.

Pour en savoir plus sur la typographie, tu peux regarder cette page : http://ressources.magicmakers.fr/ressources-dessin-typo/

Pour changer la police et définir ta typographie sur Thunkable, tu peux regarder du côté des paramètres avancés des composants avec du texte.

Attention, toutes les polices ne sont pas disponibles ! Tu peux retrouver la liste des polices supportées par Thunkable sur ce lien : https://docs.thunkable.com/fonts

Logo et Icône

Icône et logo, quelle différence ? Quel usage ?

L’icône va représenter ton application tandis que le logo permet de représenter une marque ou un produit, tu pourras donc l’utiliser dans d’autres contextes que pour l’application (flyer, stickers, support comm’, etc). On retrouvera l’icône dans les stores pour télécharger ton application ou sur les écrans d’accueil de l’appareil (téléphone, tablettes…).

Tu peux cependant reprendre une partie de ton logo pour l’icône de ton application !

Pour les marques qui ont du texte comme logo, on retrouve parfois la première lettre comme icône d’application. C’est le cas de Tumblr ou Netflix par exemple. Regarde ci-dessous les screenshots de ces deux sites à côté de l’icône de leur application :

D’autres marques ne garde que la partie « dessin » du logo pour l’icône de l’application comme TikTok ou encore Spotify. Regarde ci-dessous les screenshots de ces deux sites à côté de l’icône de leur application :

L’icône de ton application est aussi la première manière de communiquer l’objectif de ton application d’un premier coup d’oeil !

Tu trouveras ci-dessous quelques règles à suivre pour définir l’icône de ton app :

À garder en tête quand tu réalises l'icône de ton app

1/ Reste simple !

Garde un design simple, facile à reconnaître sous différentes tailles et pas trop chargé.

2/ Réalise une icône reconnaissable

Par exemple, les applications de mails ont souvent un dessin d’enveloppe car l’image de l’enveloppe est communément associée aux mails !

3/ Choisis un fond simple et pas transparent

4/ N’utilise du texte que lorsque c’est essentiel ou que ça fait partie du logo

5/ Ne mets pas l’icône de ton application sur tous tes écrans

Tu risques de perdre l’utilisateur si ton icône est placé à d’autres endroits à l’intérieur de ton application et sert d’autres objectifs.

Réutilise plutôt les couleurs de l’icône pour garder une cohérence !

6/ Teste ton icône sur différents fond d’écran

Pour s’assurer que ton icône passera bien sur les écrans des appareils de tes utilisateurs, tu peux tester ton design sur plusieurs fonds unis de couleurs différentes mais aussi sur différentes photos.

7/ Réalise ton graphisme dans un carré sans bords arrondis

EXPERIMENTER

EXPERIMENTER

PARTAGER