[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 :
<ul><li>
l'innovation visuel
</li><li>
les principes classiques d’une bonne conception
</li>
<li>
les possibilités technologiques et scientifiques
</li>
</ul>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.
 
 
 
<img alt="a6quXLO.png?1" src="https://i.imgur.com/a6quXLO.png?1"/>
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.
<img alt="PpENW6v.png?1" src="https://i.imgur.com/PpENW6v.png?1"/>
 
 

Accrocher l'utilisateur
 

Ce que j'entends par là, c'est que le matérial design doit 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. 
 
<img alt="OLOnGCX.png?1" src="https://i.imgur.com/OLOnGCX.png?1"/> <img alt="ZZy2FMC.png?1" src="https://i.imgur.com/ZZy2FMC.png?1"/>
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 :
 
<img alt="task.gif" src="https://d13yacurqjgara.cloudfront.net/users/30252/screenshots/1864125/task.gif"/>
 
Quelque chose de pas clair ? Je vous propose de revoir les 3 principes en interagissant grâce à ce site : <a href="http://material.cmiscm.com/" rel="external nofollow">http://material.cmiscm.com/</a>.
 
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...:( 
<a href="http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input" rel="external nofollow">http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input</a>
Je ferai sans ^_^

Eloha

Je vous conseille de regarder les principes du Matérial Design en interaction avec ce site : <a href="http://material.cmiscm.com/" rel="external nofollow">http://material.cmiscm.com/</a>

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. 
 
<iframe data-embed-src="<base_url>/topic/1448-flat-vs-realism/?do=embed" data-embedcontent="" frameborder="0" src="//melinyel.net/applications/core/interface/js/spacer.png"></iframe>

Eloha

<blockquote class="ipsQuote" data-cite="Azad" data-ipsquote="" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="15096" data-ipsquote-contentid="1350" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1421099484" data-ipsquote-username="Azad"><div>
<div>
<iframe data-embed-src="<base_url>/topic/1448-flat-vs-realism/?do=embed" data-embedcontent="" frameborder="0" src="//melinyel.net/applications/core/interface/js/spacer.png"></iframe>
</div>
</div></blockquote>
Oui mais faut pas oublier que c'est du matérial design là Et non le flat ^^ (même si ça ce ressemble beaucoup ^^)

NodeBB

[Introduction] Le Matérial Design