Eloha Posté(e) November 26, 2014 Signaler Share Posté(e) November 26, 2014 (modifié) 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 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. 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 ! Modifié January 7, 2015 par Eloha 1 Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Pirkoa Posté(e) November 30, 2014 Signaler Share Posté(e) November 30, 2014 J'ai hâte de voir la suite, ça m'intéresse ! Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Eloha Posté(e) December 1, 2014 Auteur Signaler Share Posté(e) December 1, 2014 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 Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Eloha Posté(e) December 24, 2014 Auteur Signaler Share Posté(e) December 24, 2014 Je vous conseille de regarder les principes du Matérial Design en interaction avec ce site : http://material.cmiscm.com/ Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Eloha Posté(e) January 7, 2015 Auteur Signaler Share Posté(e) January 7, 2015 Mis à jour : le tutoriel est plus simple de compréhension est mieux expliqués. Avec en bonus un GIF animé ! Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Azad Posté(e) January 12, 2015 Signaler Share Posté(e) January 12, 2015 Merci du partage, j'ai posté un sujet qui parle également de design et qui illustre tout à fait ton sujet. Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Eloha Posté(e) January 13, 2015 Auteur Signaler Share Posté(e) January 13, 2015 Oui mais faut pas oublier que c'est du matérial design là Et non le flat ^^ (même si ça ce ressemble beaucoup ^^) Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.