Matériau Théminant: faire du matériel votre propre!

Le paysage en constante évolution du Web exige à la fois un flair créatif et une conception efficace et évolutive. Les meilleurs produits s'appuient désormais sur des systèmes de conception robustes pour maintenir la cohérence de la marque tout en hiérarchiser l'accessibilité et l'expérience utilisateur. La conception de matériaux, un système de conception Google, comble l'écart entre l'expression créative et le développement systématique.

Initialement, la conception des matériaux manquait de flexibilité pour exprimer pleinement les identités de marque individuelles. La rétroaction a mis en évidence deux domaines clés à améliorer: l'adaptabilité stylistique limitée et les outils insuffisants pour la mise en œuvre systématique de la marque.

Introduites chez Google I / O 2018, les capacités de thème de Material Design répondent à ces préoccupations. Le theming permet aux concepteurs et aux développeurs de tirer parti des forces du matériel tout en personnalisant son apparence. Cela implique d'ajuster la couleur, la typographie et la forme pour créer des expériences de marque uniques.

Ce message se concentre sur le thème Web à l'aide de CSS (en particulier, SCSS). Illustrons avec un modèle de connexion de base construit avec des composants Web de matériau.

Le thème a expliqué

Le thème de conception de matériaux permet les ajustements globaux de la couleur, de la typographie et de la forme, ce qui a un impact sur tous les composants. Bien que apparemment limités, ces ajustements modifient considérablement la sensation globale de la conception.

Personnalisation des couleurs

Material.io fournit un sélecteur de couleurs pour aider à la sélection des couleurs et à la vérification du contraste. À l'aide de SCSS, nous pouvons facilement modifier l'apparence de l'écran de connexion:

 $ mdc-thème-primaire: # 26418f;
$ mdc-thème-secondaire: # d1c4e9;
$ MDC-THEME-Background: # FDF6F9;

Le matériel définit automatiquement $mdc-theme-on-primary à blanc pour l'accessibilité. Vous pouvez remplacer les couleurs de texte avec $mdc-theme-on-primary et $mdc-theme-on-secondary .

Ajustements de typographie

Le matériel fournit une échelle de typographie de base personnalisable par le thème. La typographie peut être ajustée pour chaque titre de titre à l'aide de classes ou de mixins CSS. Nous utiliserons des polices Google pour la facilité:

 @Import URL ('https://fonts.googleapis.com/css?family=josefin Sans');
$ MDC-Typographie-Font-Family: Unquote ("Josefin Sans, Sans-Serif");

$ MDC-Typographie-Styles-Button: (
 taille de police: 14px,
 Police-poids: 600,
 Espacement des lettres: 0,05em,
));

Modification de la forme

La personnalisation de la forme modifie les rayons d'angle des composants (boutons, cartes, feuilles). Le matériau permet différentes formes sur divers coins et tailles de composants. Par exemple:

 $ MDC-Shape-Small-Component-Radius: 12px 4px;
$ mdc-shape-large-composant-radius: 8px;

Avec seulement quelques lignes de code, nous avons radicalement transformé l'application.

Libérez votre créativité

De nombreuses combinaisons de couleurs, de typographie et de forme existent pour créer des identités de marque distinctes. Les exemples ci-dessous présentent diverses applications de ces éléments à l'aide de composants matériels.

Exemples du monde réel

Google lui-même utilise des composants de matériel personnalisés (thème de matériel Google) sur des produits comme Gmail, Google News et Google Play. D'autres sociétés, telles que Lyft et Anchor, exploitent également la flexibilité de la conception des matériaux pour créer des expériences de marque uniques.

Commencer

Commencez à construire votre thème de matériau à l'aide du kit de démarrage des matériaux et du projet de glitch "Build a Material Thème". Expérimentez avec les variables SCSS pour personnaliser les composants. Collez simplement ces variables dans votre fichier my-theme.scss et commencez à construire.

En bref: les capacités de thème de Material Design offrent une flexibilité sans précédent. Commencez à explorer aujourd'hui!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!