Vous continuez probablement à entendre l'expression «conception matérielle»? surgir dans les conversations. Le concept est assez nouveau. Il a été introduit en été et fait référence à un nouveau langage de conception proposé par Google.
Mais la conception matérielle est plus qu'une idée. il est probable que les concepteurs repensent complètement les processus de conception d'applications Web et Web. Les sites commencent déjà à définir des schémas de conception utilisant la documentation de conception de matériaux de Google. Le moment est donc venu d’apprendre de quoi il s’agit et de savoir si un cadre de conception de matériaux s’intégrera dans votre avenir.
Qu'est-ce que la conception matérielle?
La conception de matériel est un langage visuel créé par l'équipe de conception de Google pour aider les concepteurs à créer des sites Web et des applications accessibles, pratiques et utilisables. Le concept est basé sur un document évolutif accessible au public. La documentation est constamment mise à jour pour refléter les changements de portée et de technologie.
La conception matérielle est basée sur un ensemble d'objectifs et de principes plus faciles à penser qu'à accomplir. (Mais ça va. L'idée ici est de penser davantage au design et à son amélioration.)
Objectifs de conception des matériaux:
- Créez un langage visuel qui synthétise les principes classiques d'un bon design avec l'innovation et les possibilités offertes par la technologie et la science.
- Développez un système sous-jacent unique permettant une expérience unifiée pour toutes les plates-formes et tailles de périphériques. Les préceptes mobiles sont fondamentaux, mais le toucher, la voix, la souris et le clavier sont des méthodes de saisie de premier ordre.
Principes de conception des matériaux:
- La matière est la métaphore: les repères visuels doivent être fondés sur la réalité
- Caractères gras, graphiques, intentionnels: la théorie de la conception de base (utilisation du type, des grilles, des espaces, de l’échelle, de la couleur et des images) devrait guider les éléments visuels
- Motion donne du sens: le déplacement d'objets ou d'actions ne doit pas perturber l'expérience utilisateur ni assurer la cohérence
Les facteurs déterminants pour la conception des matériaux sont nombreux. (La documentation est assez impressionnante.) Elle se décompose en une variété de concepts et de traitements spécifiques. Google a mis au point un ensemble de règles? pour savoir comment créer une animation, un style, des mises en page, des composants, des modèles et la convivialité.
Toutes ces directives commencent par une compréhension des propriétés physiques, de transformation et de mouvement de base de la conception d'un matériau. La théorie qui guide est que le matériau est basé sur la réalité, où les objets résident dans un espace presque 3D. Sur le plan esthétique, il se situe entre l’échelle du design plat et le skeoumorphisme.
Couleur et typographie
Les concepts de couleurs de la conception matérielle empruntent un peu à la tendance de la conception plate. Les palettes sont audacieuses et lumineuses. La typographie suit également le thème des plats avec des sans empattements simples.
«La couleur s’inspire d’énoncés de couleurs vives juxtaposés à des environnements en sourdine, inspirés de l’architecture contemporaine, des panneaux de signalisation, du ruban de marquage de chaussée et des terrains de sport». selon la documentation de conception du matériau. ? Soulignez les ombres et les reflets audacieux. Introduire des couleurs inattendues et vibrantes.
Ce qui est bien avec les concepts de couleur, c'est l'utilisation d'un contraste distinct. Dans chaque exemple, vous pouvez voir? Design School 101? théories en action. Google fournit une palette de couleurs complète avec des échantillons téléchargeables. Les concepts de couleur sont si élémentaires qu'il faut se demander si Google pense que les concepteurs ont oublié la théorie des couleurs.
Les directives de typographie sont également fondamentales. Une police par défaut pour toutes les applications - Roboto, celle par défaut pour les applications Android - est fournie avec un lien de téléchargement et une échelle d'utilisation des polices.
Mise en page et design
La structure de base de mise en page et de conception des projets de matériaux est née des concepts de conception d'impression. Les concepteurs sont invités à créer et à utiliser une grille de base et une structure mathématique pour le placement des éléments.
La présentation se décompose ensuite en régions qui suggèrent comment et où placer les éléments pour une interaction optimale de l'utilisateur. (Il existe également des directives sur la taille des éléments de grande taille.)
Et chaque concept a un modèle téléchargeable pour créer pour Android. Les risques sont de créer un design trop simple comme un emporte-pièce ou d'avoir une application qui ressemble? Trop Android? poussé dehors pour ceux qui aiment iOS.
Éléments communs
Chaque élément de la conception matérielle est décrit en détail. De la manière de le créer à l'endroit où devrait apparaître à l'écran, il serait difficile de visualiser quelque chose qui n'existe pas. (La liste comprend 19 composants pour être exact.)
- Feuilles de fond
- Boutons
- Cartes
- chips
- Dialogues
- Diviseurs
- Des grilles
- Des listes
- Liste des contrôles
- Les menus
- Cueilleurs
- Progrès et activité
- Sliders
- Snackbars et toasts
- Sous en-têtes
- Interrupteurs
- Onglets
- Champs de texte
- Info-bulles
Les concepteurs qui aiment l'aspect des composants présentés peuvent même télécharger un fichier Adobe Photoshop d'Illustrator contenant tous les éléments et les icônes du système Android. Les feuilles d'autocollants sont livrées avec des styles et adhèrent à la grille suggérée.
Utilisabilité et interaction
«Un produit est accessible lorsque toutes les personnes - peu importe leur capacité - peuvent y naviguer, le comprendre et l’utiliser pour atteindre leurs objectifs. Un produit vraiment réussi est accessible au public le plus large possible.La documentation de conception des matériaux nous ouvre les yeux sur les modèles d'interaction, de convivialité et d'accessibilité, d'une manière très utile. Bien que de nombreuses propriétés esthétiques réelles puissent sembler fondamentales aux concepteurs expérimentés, certains concepts d’utilisabilité et d’interaction doivent être pris en compte.
La section des modèles d'interaction est particulièrement utile. Il détaille un ensemble d'idées pour rendre certains éléments universels d'un dessin à l'autre. (Pensez à des choses comme écrire une heure ou une date ou comment la recherche devrait fonctionner.) Voici quelques-uns des outils les plus élémentaires que les utilisateurs s'attendent à travailler et qui fonctionnent de manière spécifique pour tous les utilisateurs.
L’accessibilité est une autre préoccupation réelle pour laquelle la documentation de conception matérielle a été décrite et a fourni de bonnes options. Penser aux utilisateurs qui pourraient interagir avec une conception Web de manière à exclure le son ou les couleurs, avec un contraste élevé activé, avec un écran agrandi, sans écran visible ou avec uniquement un contrôle vocal ou même une combinaison de ces éléments peut être pris en compte une population d'utilisateurs importante.
10 ressources de conception matérielle
La conception matérielle fait son apparition partout. Il y a beaucoup de choses à télécharger directement à partir de Google, mais d'autres développent également des façons de les utiliser. Voici quelques ressources pour vous aider à explorer les concepts de conception de matériaux.
- Modèles de présentation Google pour les environnements mobiles, tablettes et ordinateurs
- Conception matérielle pour Bootstrap
- Angular.js Material Project
- Concepteur de polymère
- Matériau Front-End Framework
- Palette de couleurs des matériaux
- Interaction matérielle
- Conception matérielle sur la liste de contrôle Android
- Matériau de conception Modèle de croquis
- Kit d'interface matériel gratuit
Galerie de conception matérielle
Comme pour chaque tendance et concept, de nombreux sites Web et applications mobiles utilisent déjà les concepts décrits dans la conception des matériaux. Voici cinq exemples illustrant les principes et expliquant comment les concepteurs peuvent utiliser et expérimenter les concepts.
Course à pied et fitness
Paramètres Google
Mauvais lapin
Météo Chronologie
Conclusion
Le concept de conception matérielle est bon. Les directives sont propres et fraîches. Mais les concepteurs les plus expérimentés n'ont probablement pas besoin de ce niveau de guidage. Dans la documentation, presque toutes les idées incluent une triche téléchargeable. Avons-nous vraiment besoin de tant d'aide?
La documentation est amusante à lire, vous fait réfléchir et constitue un aperçu de ce qui va bientôt submerger le Web. Jouez avec les concepts, mais ne vous sentez pas mariés. Le design, en particulier en ce qui concerne les tendances et la technologie, évolue aussi rapidement que nous pouvons l’imaginer.
Comme toute autre tendance, cadre ou concept de conception, vous devez décider vous-même si les concepts sont utilisables dans vos projets. Vous voyez-vous en utilisant la conception matérielle? Pourquoi ou pourquoi pas? Faites le nous savoir dans les commentaires.