Material Design de Google

“Materiel design” ou un langage visuel qui synthétise les principes classiques d’une bonne conception de l’innovation et de la possibilité de la technologie et de la science.

Cette spécification mise en ligne par Google est un document évolutif qui sera mis à jour que nous continuons à développer les principes et les spécificités de la conception matérielle.

Autre objectif, outre le langage visuel

  • une expérience unifiée Multi plates-formes et multi-device (toutes les tailles ; desktop, tablette, smartphone). Les préceptes mobiles sont fondamentaux : le toucher, la voix, la souris et le clavier sont toutes des méthodes d’entrée.

Les principes à retenir :

  •  Métaphore et affordance : l’utilisation d’attributs tactiles familiers permet aux utilisateurs de comprendre rapidement les affordances.  Lumière, surface, et le mouvement sont les éléments clés de notre perception (la façon dont les objets se déplacent, interagissent, et existent dans l’espace les uns par rapport aux autre. Un éclairage réaliste montre les limite, divise l’espace, et indique les possibilités d’actions, de tap).
  • Audacieux, graphique, intentionnelle : Les fondamentaux de la conception tels que la typographie, les grilles, l’espace, les couleurs, les pictos (et autres visuels) sont à la base du traitement visuel. Ils hiérarchisent, donnent du sens, orientent et imergent l’utilisateurs dans une expérience. Autant d’éléments qui participent à l’affordance, donne du corps aux éléments tapables ou avec lesquels on peut interagir.
  • Le mouvement fait sens : l’interactivité est le moteur de l’utilisateur, l’animation ou feedback de ses actions attire son attention, le guide et le rassure. Toute action se déroule dans un environnement unique. L’expérience se déroule dans la continuité même si l’interface se transforme et se réorganise de façon cohérente.

Dans la suite de cette documentation vous trouverez les chapitres suivants  :

  • AnimationAuthentic Motion, Responsive Interaction, Meaningful Transitions, Delightful Details
  • Style : color, typography, Icon, Imagery
  • Layout : principles, Metrics and Keylines, Structure
  • Components : Bottom Sheets, Buttons, Cards, Chips, Dialogs, Dividers, Grids, Lists, List controls, Menus, Progress and Activity, Sliders, Snackbars and Toasts, Subheaders, Switches, Tabs, Text fields, Tooltips
  • Patterns : Selection, Gestures, Promoted Actions, Settings, Imagery Treatment, Search
  • Usability : accessibility
  • Ressources : Layout Templates, Sticker Sheets, Roboto Font, Color Palettes

Bonne lecture et que cette documentation précieuse vous soit profitable…

 

Publié dans Billets d'humeur