Téléchargez les ressources disponibles

Vous trouverez sur cette page toutes les ressources nécessaires pour composer des interfaces utilisateurs en suivant les principes du Material Design.

#Typographie

• Téléchargez la police "Roboto"

• Téléchargez la police "Roboto Mono"

• Téléchargez la police "Noto sans"

#Couleurs

• Retrouvez les codes hexadécimaux de la palette de couleurs.

• Téléchargez la palette sous Illustrator et/ou Photoshop.

• Aidez-vous du Color Tool de Google pour faire des associations harmonieuses et correspondre aux critères d'accessibilité.

#Icônes

• Téléchargez les icônes (pictogrammes) Material Design librement.

• Téléchargez la grille de composition d'une icône système (sous Illustrator).

• Téléchargez la grille de composition d'une icône produit (sous Illustrator).

#Grille de composition

• Téléchargez les modèles de composition pour le mobile (sous Illustrator)…

• Téléchargez les modèles de composition pour la tablette (sous Illustrator),

• Téléchargez les modèles de composition pour le desktop (sous Illustrator),

• Téléchargez les whiteframes (sous Illustrator ou Sketch).

• Retrouvez toutes les tailles d'écrans avec Device Metrics.

• Testez si la structure de votre site web est responsive avec Resizer.

#Eléments d'UI

• Téléchargez le kit UI des composants du Material Design pour Sketch, Figma, Adobe XD.

• Etudiez les propriétés des éléments d'UI et implémentez-les avec Material Components.

#Ombres et élévation

• Téléchargez la table des tailles des ombres pour Sketch.

• Téléchargez la table des tailles des ombres pour Photoshop.

• Téléchargez la table des tailles des ombres pour Illustrator.

#Frameworks et outils d'implémentation

• Utilisez le framework Flutter.

• Utilisez le framework Materialize CSS (celui vu dans le cours).

• Utilisez le framework Get Material Design Lite (getmdl).