• 6 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/5/19

Concevez une maquette graphique avec Adobe XD

Log in or subscribe for free to enjoy all this course has to offer!

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, vous pouvez télécharger le kit UI en Material Design :

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 :

Material Design > Style > Typography - Google Guidelines

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…)

Material Design > Style > Color - Google Guidelines

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. 😇

Example of certificate of achievement
Example of certificate of achievement