• 6 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 04/01/2021

Entraînez-vous en matérialisant une interface utilisateur

À vous de jouer !

Avec cet exercice, vous allez pouvoir mettre vos compétences en Material Design à l'épreuve !

Consigne

  1. Baladez-vous sur internet depuis votre ordinateur (ou tablette ou smartphone) et cherchez un site ou une application qui n'utilise pas le Material Design.

  2. Prenez une capture d'écran d'une page du site ou de l'application que vous avez choisi.

  3. Composez une alternative à cette page mais cette fois en respectant les principes du Material Design.

  4. Enregistrez votre proposition de "redesign" dans un format image.

  5. Créez un document (Word par exemple) dans lequel vous mettrez : (1) la capture d'écran de la page du site ou de l'application d'origine que vous vous proposez de redesigner avec un court paragraphe qui justifie votre choix ; (2) l'image de votre redesign avec un paragraphe qui explique votre parti-pris.

Il n'est pas nécessaire pour cette activité de reproduire au pixel près le Material Design dans tous ses aspects : en effet, inspirez-vous des lauréats des Material Design Awards qui prennent la liberté d'adapter ces principes en fonction de leur univers/besoins.

Vous êtes libre de choisir les éléments d'UI en Material Design que vous voulez (ne les mettez pas tous évidemment). Néanmoins, vous devez au moins intégrer un bouton flottant.

Exemple

Je me suis prêtée à l'exercice pour vous montrer dans les grandes lignes ce qui est attendu.

Comme vous pourrez le voir, j'ai adapté le design d'origine pour qu'il s'apparente au Material Design, mais j'ai pris certaines libertés, auxquelles vous avez droit également.

J'ai choisi de redesigner une page de cours de la plateforme Coursera (puisqu'elle n'utilise pas le Material Design). Vous trouverez mon exercice ici

Conseils

Pour faire cet exercice de redesign (proposition de composition graphique alternative), vous pouvez :

  • Utiliser un logiciel de création graphique (Photoshop, Illustrator, Adobe XD, Sketch…) puis enregistrer l'écran que vous aurez créé en PNG, ou JPEG)

ou

  • Créer une page web en HTML et CSS grâce à un framework, puis prendre une capture d'écran de votre "redesign".

ou

  • Si vous n'avez pas les compétences techniques ou que vous ne possédez pas les logiciels, ce n'est pas grave ! Vous pouvez utiliser un autre outil tel que PowerPoint par exemple qui permet tout à fait d'ajouter simplement du texte, des formes, des ombres et de la couleur ; vous pourrez ensuite enregistrer le contenu de la diapositive au format image (en sélectionnant tous les objets > clic droit > enregistrer en tant qu'image).

Vérifiez votre travail

Vérifiez bien que vous avez les éléments suivants :

  • L'image montre un site ou une application qui n'utilise pas le Material Design et le choix est justifié par écrit.

  • L'image montre un travail de composition graphique qui intègre les principes du Material Design et le choix est justifié par écrit.

  • Le redesign applique les principes du Material Design et l'ensemble est esthétique et il y a un bouton flottant.

Exemple de certificat de réussite
Exemple de certificat de réussite