Concevez une maquette graphique avec Adobe XD

Téléchargez la maquette et préparez votre espace de travail

Pour commencer, vous pouvez télécharger le dossier contenant les éléments que j'utilise dans ce chapitre pour recréer l'écran de contact. Dans ce dossier, vous trouverez :

• La grille de composition au format Adobe XD et Adobe Illustrator.

• La photo ainsi que les icônes utilisées.

• La maquette terminée au format Adobe XD et Adobe Illustrator.

N'hésitez pas à puiser dans les kit d'UI en Material Design

Vous pouvez trouver tout un tas d'éléments sans avoir à les recréer vous-mêmes.

Pour ce qui est d'Adobe Experience Design (Adobe XD), un kit est directement disponible à l'ouverture du logiciel :

Que vous pouvez retrouver également (une fois le logiciel ouvert) dans le menu :

Si vous préférez utiliser un autre logiciel comme Sketch ou Figma, vous pouvez télécharger le kit UI en Material Design sur la page des ressources.

Respectez la charte graphique du Material Design

La police de caractères

Utilisez la police de caractères "Roboto" en respectant les règles ci-dessous :

La palette des couleurs

Pour ajouter de la couleur à vos compositions en Material Design, il est recommandé de sélectionner des teintes dans cette palette :

1. dans les tons 500 pour la couleur de thème principal (barre de l'application en particulier)

2. dans les tons A pour la couleur de l'interaction (boutons, switches, cases à cacher…)

Les ombres et les élévations

Notez qu'il y a différentes tailles d'ombres en fonction de l'élévation des objets : un bouton enfoncé n'aura pas la même taille d'ombre qu'un bouton sur lequel il faut appuyer.

La structure, l'alignement et les espacements

Prenez garde à bien aligner les éléments entre eux en respectant la structure de base ; pour cela, il suffit de s'aider des grilles de composition. 😇