La spécification Material Design de Google visait à l'origine la plate-forme Android afin de suggérer une cohérence de la conception sur la plate-forme.
01 sur 06Comment créer une fiche de conception de matériau dans Adobe Experience Design CC
Une fois que les concepteurs ont commencé à le fouiller et à comprendre la pensée qui le sous-tendait, Material Design est devenu l'une des philosophies visuelles les plus influentes en matière de conception Web et mobile. Tout ce que vous avez à faire pour voir ce que nous voulons faire est de faire une recherche sur Material Design sur Pinterest et vous verrez des centaines d'exemples et d'expériences sur des appareils, des tablettes et même des sites Web.
L’aspect fascinant de Material Design est la réflexion de Google sur la manière dont les applications devraient apparaître et fonctionner sur les appareils mobiles, mais les concepts sont appliqués à n’importe quel écran, quelle que soit sa taille, sur toute plate-forme. Comme Google l'indique dans le paragraphe introductif de la spécification, «Nous nous sommes lancés le défi de créer pour nos utilisateurs un langage visuel qui synthétise les principes classiques du bon design avec l'innovation et la possibilité de la technologie et de la science. C'est la conception matérielle. Cette spécification est un document évolutif qui sera mis à jour alors que nous continuons à développer les principes et les spécificités de la conception des matériaux. ”
Le matériau dont il est question, en termes très généraux, est le papier et la carte est la marque distinctive de Material Design. Pensez à une fiche sur une surface et vous êtes sur la bonne voie. Une carte est un élément contenant des photos, des vidéos, des liens de texte, etc., mais s’ils diffèrent de la plupart des conceptions interactives, ils sont destinés à être centrés sur un seul sujet. Les cartes ont des coins arrondis, contiennent de faibles ombres indiquant qu'elles sont au-dessus d'une surface et si elles sont toutes sur le même plan, elles sont appelées «collection».
Dans ce “Comment”, nous allons créer une carte basée sur les spécifications. Plutôt que de créer la carte avec une variété d’outils d’imagerie et de dessin, nous allons aborder la question sous un angle différent. Nous allons utiliser les outils d'Adobe Experience Design, qui est actuellement gratuit et disponible dans un aperçu public uniquement pour Macintosh. Vous pouvez le télécharger ici.
Commençons.
02 sur 06Création du prototype d'artboard dans Adobe Experience Design CC
Il n'y a pas de moyen évident de créer un écran Android à partir de l'écran de démarrage dans Experience Design CC (XD). Lorsque nous ouvrions XD, nous avions l'habitude de sélectionner l'option iPhone 6, puis, lorsque l'interface s'ouvre, l'outil Artboard au bas de la barre d'outils et de sélectionner Android Mobile dans les sélections du panneau Propriétés à droite. Nous passons ensuite à l’outil de sélection, cliquons une fois sur le nom de l’artboard iPhone et supprimons l’artboard. Pas plus.
Dans la version actuelle de XD, il y a une petite flèche à côté de l'iPhone 6 qui, lorsque vous cliquez dessus, ouvre un menu déroulant. À partir de là, vous sélectionnez la version Android Mobile et la planche de travail Android Mobile sélectionnée s'ouvre dans l'interface.
Pour nous assurer que la carte dispose de l'espace d'écran approprié, nous nous dirigeons généralement vers Sketch 3, puis copions et collons une barre d'état, une barre de navigation et une barre d'application du modèle de conception de matériau dans la planche graphique. Sketch 3.2 contient un modèle de conception de matériau (Fichier> Nouveau à partir d'un modèle> Conception du matériau) et un autre vraiment gratuit est de Kyle Ledbetter que vous pouvez obtenir ici. Si vous n’avez pas Sketch, vous pouvez les copier et les coller à partir des autocollants XD trouvés dans Fichier> Ouvrir le kit d'interface utilisateur> Matériel Google. Vous pouvez également les télécharger à partir de Google pour les utiliser dans Photoshop, Illustrator, After Effects et Sketch.
03 sur 06Ajout d'une fiche de conception de matériau à une planche graphique Adobe XD CC
L’une des fonctionnalités les plus utiles de XD est l'inclusion de kits d'interface utilisateur pour Apple iOS, Google Material et Microsoft Windows. À bien des égards, ils ajoutent le mot «Rapide» au terme «Prototypage rapide». Ils facilitent également le travail du concepteur dans la mesure où les éléments d'interface utilisateur courants ne doivent pas toujours être recréés dans une application de conception telle que Photoshop, Illustrator ou Adobe. Esquisser.
L'élément d'interface utilisateur dont nous avions besoin était une carte. Pour y arriver, nous avons sélectionné Fichier> Ouvrir le kit d'interface utilisateur> Matériel Google et le kit ouvert comme un nouveau document. L'élément dont nous avions besoin a été trouvé dans la catégorie Cartes.
Ce que nous aimons, c’est qu’ils adhèrent aux spécifications de conception des matériaux telles qu’elles sont définies dans les spécifications relatives aux blocs de contenu, ainsi qu’aux spécifications de formatage et d’espacement du texte définies dans les spécifications de typographie.
Le style de carte que nous voulions était celui en bas à gauche. Nous le marquons simplement avec notre souris et le copions dans le presse-papiers. Malheureusement, XD ne contient pas d’interface à onglets pour les documents ouverts. Ce que nous faisons est de déplacer un peu la fenêtre de document ouverte pour révéler celle sur laquelle nous travaillons, la sélectionner et la coller. Un autre moyen de basculer rapidement entre les documents XD ouverts consiste à appuyez sur Command- '.
04 de 06Comment modifier un élément de conception de matériau dans Adobe Experience Design CC
Lorsque la carte dans XD arrive du presse-papiers, ne commencez pas à la manipuler joyeusement. La première chose à faire est de dissocier la carte parce que vous devez avoir accès aux éléments composant la carte. Pour ce faire, sélectionnez la carte et sélectionnez Objet> Dissocier ou appuyez sur Maj-Commande-G.
Votre carte est maintenant composée de trois pièces:
- Boîte gris clair pour l'image.
- Boîte gris moyen pour le texte
- La boîte arrière utilisée comme arrière-plan.
La première étape consiste à supprimer la case gris clair. Son seul but est d’agir comme un espace réservé pour l’image, ce qui la rend facultative, si vous le souhaitez.
La boîte avec le texte est en fait un gris foncé avec une opacité de 50%. Cette case peut être utilisée comme arrière-plan de texte et vous pouvez changer la couleur et l’opacité de la case.
Bien que cela ne soit pas immédiatement évident, la boîte gris clair suit les spécifications de Material Design, en ce sens que ses coins supérieurs sont arrondis à 2 pixels. Gardez cela à l'esprit si vous ajoutez une image. Il aura également besoin des coins arrondis qui peuvent être ajoutés à une application d’imagerie ou à XD.
En voyant comment il s’agit de l’état de repos de la carte, elle a également besoin d’une ombre. La spécification indique clairement qu'il existe une élévation au repos de la carte de 2 pixels. Pour ajouter ceci, sélectionnez la forme de fond noir et définissez les valeurs Y et B (Flou) sur 2 dans le panneau des propriétés.
05 de 06Comment ajouter une image à la fiche de conception de matériau dans Adobe XD CC
Connaissant la carte fait 344 pixels de large et la zone d’image a une hauteur de 150 pixels ( la moitié de la hauteur de la boîte gris clair ) Nous avons ouvert l’image dans Photoshop, l’avons recadrée à la taille et l’avons sauvegardée à l’aide de l’option @ 2x de Photoshop. Exporter en tant que boite de dialogue. L'image a été importée dans Adobe XD.
Nous avons ensuite fait glisser la zone gris clair sur l'image sur la table de montage et sélectionné Objet> Masque avec forme. Le résultat a été l'image prenant les coins arrondis de la forme. Nous avons ensuite déplacé l'image à sa position finale.
Avec l'image en place, nous avons ensuite changé la couleur d'arrière-plan de la zone Gris moyen, ainsi que le texte et la couleur du texte du lien.
06 sur 06Utilisation de la fonction de grille Adobe XD CC
Une fois la carte terminée, elle doit maintenant être correctement placée conformément à la spécification Material Design. Cela signifie qu'il y a 8 pixels de chaque côté de la carte et que celle-ci doit se trouver 8 pixels sous la barre d'applications. Pour ce faire, cliquez une fois sur le nom de la planche graphique et, dans le panneau Propriétés, sélectionnez Grille. La grille apparaît sur la planche.
La taille de grille par défaut est de 8 pixels, ce qui correspond à la même taille de grille pour Material Design. Si vous avez besoin d'une taille différente, modifiez la valeur dans la zone Grille. Si vous souhaitez modifier la couleur de la grille, cliquez sur la pastille de couleur et choisissez une couleur dans le sélecteur de couleurs obtenu.
Avec la grille visible, cliquez sur la carte et déplacez-la dans sa position finale.
Pour finir, nous avons sélectionné la carte, cliqué sur le bouton Répéter la grille et modifié l'espacement entre les cartes à 8 pixels également.
