• 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 5/29/20

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

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

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

Example of certificate of achievement
Example of certificate of achievement