[Introduction] Le Matérial Design

[Eloha]

https://www.youtube.com/watch?v=Q8TXgCzxEnw&feature=player\_detailpage

Ce que vous venez de voir là, c'est ce qu'on appelle le Matérial Design, le nouveau langage visuel du moment. Créé par Google et sponsorisé en partie pas son nouveau système d'exploitation, Android Lollipop.

Pour cette introduction, nous verrons les objectifs du Matérial Design ainsi que les principes imposé par Google.

Les objectifs

Tout d'abord, Google continu de développer les principes et les spécifiés du Matérial Design.

Donc, le Matérial Design a pour objectif de synthétiser :

• l'innovation visuel
• les principes classiques d’une bonne conception
• les possibilités technologiques et scientifiques

Google a voulu unifier l'expérience entre les différentes tailles des terminaux (n'oubliez pas que concevoir des applis mult-écrans est très importants) ainsi que les différents périphériques. Le matérial design n'est pas seulement basé sur le visuel mais implique le toucher, la voix, la souris et le clavier comme interactions.

Les Principes

Il y 3 principes du matérial design a connaître.

La métaphore

La métaphore est en faite la rationalisation de l'espace ou d'un système en mouvement dans votre maquette. Cela fait référence au fondamentaux de la lumière, la surface, et le mouvement. Ce sont les clés de la façon dont les objets se déplacent, interagissent, et existent dans l'espace. Vous devez donc introduire de la 3D par l’intermédiaire d'ombre par exemple, votre maquette doit montrer au premier coup d’œil que les données sont hiérarchisé pour montrer qu'elles sontt classés.

Accrocher l'utilisateur

Ce que j'entends par là, c'est que le matérial designdoit accrocher le visiteur en misant sur l'échelles des éléments, les couleurs, certaines typographies ou d'autres encore pour immerger l'utilisateur dans votre site et lui donner envie de continuer l'expérience. Pour ça, vous devez faire apparaître les actions de bases qui seront immédiatement visible et guider l'utilisateur grâce à des éléments bien placés.

 

Des animations simples sans rupture

Pour moi, comme pour vous (normalement du moins), j'aime bien avoir une petite animation lorsque j’interagis avec le site. Cela renforce naturellement l'expérience utilisateur.

Tout éléments ne doit pas sortir de nulle part,  vous devez faire en sorte que votre nouvelle page, ou l'élément qui vient se rajouter ne doit pas "surgir" de n'importe où, l'animation doit symboliser d'où vient l'information, elle doit indiqué d'où vient le changement, de quelle direction ? Les animations doivent être aussi faites de sortes qu'il n'y est aucune rupture, il faut une transition fluide pour accéder à des information, par exemple, pour prendre simple, le scroll vers le menu.

Un principe de plus pour immerger l'expérience de l'utilisateur.

Le tout réuni, ça donne ça :

Quelque chose de pas clair ? Je vous propose de revoir les 3 principes en interagissant grâce à ce site : http://material.cmiscm.com/.

Si vous ressortez avec l'idée que le matérial design c'est du Flat design ? Ça veut dire que vous aurez pas tout compris.

En gros, le matérial design essaye d'imiter le monde réel alors que le flat design non, pas d'ombre, pas de 3D...c'est plat.

Voilà, la rédaction de cette introduction est terminé, j'espère que ça vous aura plus !

[Pirkoa]

J'ai hâte de voir la suite, ça m'intéresse !

[Eloha]

Je suis un peu déçu pour la suite que je comptais faire car je peux pas mettre d'exemple animé comme sur le site officiel...:(

http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input

Je ferai sans ^_^

[Eloha]

Je vous conseille de regarder les principes du Matérial Design en interaction avec ce site : http://material.cmiscm.com/ 

[Eloha]

Mis à jour : le tutoriel est plus simple de compréhension est mieux expliqués. Avec en bonus un GIF animé !

[Azad]

Merci du partage, j'ai posté un sujet qui parle également de design et qui illustre tout à fait ton sujet.

[Eloha]

Oui mais faut pas oublier que c'est du matérial design là Et non le flat ^^ (même si ça ce ressemble beaucoup ^^)