Share
Parlons de ce qui est nouveau, de ce qui a changé et de ce qui a été amélioré dans la nouvelle conception de matériaux de Google..
Material Design est un langage de design visuel, développé par Google en 2014. Il est né du besoin de plus de cohérence entre les produits Google, multiplate-forme. Au fil du temps, il a évolué, a été publié en open source et ses idées continuent de croître grâce à un grand nombre de collaborateurs..
matériel.ioPlus tôt cette année, lors de la conférence des développeurs d’E / S 2018 de Google, ils ont annoncé une version mise à jour de Material Design. Selon l'équipe derrière cela, Material est maintenant:
«Un système de conception adaptable, basé sur un code source ouvert, qui aide les équipes à créer des expériences numériques de haute qualité»
Material Design n'est plus seulement un langage de conception. Il évolue vers un ensemble d'outils destinés à améliorer le flux de travail de conception et de développement. Commençons par regarder «Material Theming».
«Material Theme Editor» est un plug-in pour Sketch. Il vous permet (en supposant que vous soyez un utilisateur de Sketch et donc de Mac OS) de contrôler entièrement les couleurs, la typographie, les composants, etc. Pour le télécharger, rendez-vous sur le site Matériel et cliquez sur le bouton important. Double-cliquez sur le package à installer, puis dans Sketch, vous pouvez y accéder via Plugins> Matériel> Ouvrir un éditeur de thème…
Cliquez sur Créer un nouveau thème dans la boîte de dialogue qui apparaît, après quoi vous pouvez choisir parmi une sélection de thèmes prédéfinis et appuyer sur sauvegarder.
Sélection d'un nouveau thèmeL'enregistrement prend un moment, car Sketch crée essentiellement un nouveau document pour vous, en le complétant avec les actifs et les composants Material Design, tous soigneusement organisés en pages, symboles, styles et échantillons..
La longue liste de symboles, parfaitement organiséeLa Galerie est une autre nouvelle fonctionnalité Matériau, vous permettant de partager et de collaborer sur vos conceptions. Ceci est une plate-forme en ligne à laquelle vous pouvez accéder en visitant https://gallery.io. Connectez-vous en utilisant votre compte Google:
Pour ajouter des projets à votre galerie, retournez dans Esquisse et accédez à Plugins> Matériel> Télécharger dans la galerie… Vous êtes invité à sélectionner un projet ou à en ajouter un nouveau, il en va de même pour la collection à laquelle vous souhaitez l'ajouter. C'est tout! Votre projet est maintenant disponible pour partager avec d'autres. Les collaborateurs peuvent laisser des commentaires, et même inspecter des éléments de vos conceptions, en leur donnant accès aux dimensions et aux détails sans avoir besoin de Sketch eux-mêmes..
Les utilisateurs recevront également une référence à la documentation du composant qu'ils inspectent - c'est utile maintenant.!
L'outil Couleur est une offre de Material Design qui vous aide à expérimenter des combinaisons de couleurs et des palettes dans un environnement intuitif. Visitez https://material.io/tools/color/ pour y accéder..
Cliquez sur l'interface utilisateur pour définir une couleur primaire, une couleur secondaire et des détails supplémentaires tels que du texte sur votre couleur primaire et du texte sur votre couleur secondaire. Les aperçus vous donnent des mises à jour en temps réel pour vous montrer à quoi ça ressemble.
Il existe également un onglet Accessibilité qui vous avertira de toute combinaison de couleurs non conforme aux directives de lisibilité recommandées..
Lorsque votre combinaison de couleurs vous convient, vous pouvez exporter vers Android, iOS ou le Web (sous la forme d'un CodePen):
Options d'exportation de l'outil de couleur de conception de matériauUne liste complète de tous les nouveaux composants proposés par Material est disponible sur le site Web, mais en voici quelques-uns qui me semblent particulièrement intéressants:
Ceux-ci sont utilisés pour afficher la navigation et les actions clés, au bas des écrans de mobiles.
Les arrière-plans sont destinés aux composants qui apparaissent derrière d'autres surfaces, ce qui est utile pour afficher du contenu contextuel..
Ensuite, nous avons des bannières. Ce sont de nouveaux composants qui affichent des messages et des actions associées.
Les listes d’images sont également un nouvel ajout, bien qu’elles fussent auparavant connues sous le nom de «listes de grille» légèrement moins polyvalentes..
Enfin, nous avons des champs de texte. Pas exactement neuf, mais un remplacement pour la génération précédente, et maintenant disponible dans les deux rempli et esquissée les saveurs.
Bien là nous l'avons; un aperçu rapide des nouveautés de la dernière version de Material Design de Google. Inutile de dire cela, mais il y a encore beaucoup à apprendre et à intégrer, alors allez jeter un coup d'œil, plongez au plus profond et dites-nous ce qui vous frappe le plus à propos des nouveautés.
Accentsconagua