10 extraits de code de conception de matériaux utiles

L'engouement pour le design matériel prend d'assaut le monde du Web. Chaque mois, je trouve de nouveaux sites fonctionnant sur le style matériel en utilisant des cadres ou des kits d'interface utilisateur personnalisés.

Mais ce n'est pas une mauvaise chose, bien au contraire ! C'est un moyen de simplifier votre processus de conception en travaillant avec des tendances éprouvées que Google reconnaît comme leur propre langage de conception préféré.

Si vous aimez le style de conception matérielle, ces extraits de code sont faits pour vous. Ce ne sont que 10 de mes favoris qui offrent une variété de conceptions et de composants à choisir.

Tableau réactif

Voici un extrait de conception matérielle avec une touche unique. Ce tableau réactif créé par Sergey Kupletsky héberge en fait d' autres liens vers des extraits de conception matérielle. Plutôt cool!

Ceci est naturellement créé en utilisant également des techniques de conception de matériaux afin que la table s'intègre parfaitement dans votre propre disposition. Mais la partie la plus difficile de la conception mobile consiste à créer des tables qui fonctionnent sur des écrans plus petits.

Je pense que cette méthode est l'une des meilleures façons de le gérer. Votre code reste également propre, ce qui le rend très facile à coder, à nettoyer et à gérer, quelle que soit la taille de votre table.

Transitions de l'interface utilisateur de la carte

Le développeur Ivan Villamil a construit cette conception d'interface utilisateur de carte très unique avec des animations assez folles.

Jetez un œil à la page et essayez de cliquer sur l'une des cartes. Vous obtiendrez un effet animé unique où le contenu de la carte s'anime sur le conteneur et apparaît en vue. C'est comme quelque chose que vous vous attendez à trouver dans une application mobile, mais porté sur le Web !

Les effets d'animation sont impeccables et montrent tout ce que vous pouvez faire sur le Web aujourd'hui. Sans oublier que le style matériel est parfait pour cette interface utilisateur Web / mobile combinée.

Connexion compacte

J'ai vu des formulaires de connexion très sympas au cours de mes années en tant que designer. Mais ce design fou pourrait bien prendre le gâteau pour ses fonctionnalités interactives et ses styles uniques.

Lorsque vous cliquez sur l'icône rose vif dans le coin supérieur droit, vous obtenez un champ d'inscription qui apparaît sur la page. C'est sacrément unique, et cela crée une interface vraiment utilisable.

Alors, quel est le problème ? Cela utilise beaucoup de JavaScript, ce n'est donc pas la solution la plus intéressante en termes de code. Mais toujours un excellent exemple de conception avec des fonctionnalités compactes.

Remplir l'animation

Scott Kellum a développé cette mise en page de carte de matériel intrigante qui se remplit automatiquement une fois la page chargée. Cela se développe dans une grille où vous pouvez survoler chaque carte pour voir les caractéristiques de conception matérielle en action.

Je ne peux pas dire à quel point cela est utile dans un projet direct ou combien vous pourriez en tirer. Mais c'est un extrait amusant qui montre une conception hors réseau pour le Web, mélangeant une touche de saveur matérielle avec des animations de survol.

Matériel BS4 Boutons

Parmi les nombreux modèles Bootstrap disponibles en ligne, vous feriez mieux de croire que certains d'entre eux utilisent la conception matérielle. Et ce stylo présente toutes les choses intéressantes que vous pouvez faire avec la conception matérielle dans Bootstrap 4.

En réalité, il ne s'agit que d'une collection de boutons restylés dans le langage matériel de Google. Mais tout fonctionne sur le tout nouveau framework BS4, vous pouvez donc les ajouter à n'importe quelle page alimentée par Bootstrap.

Si vous êtes sérieux au sujet de Bootstrap, jetez un œil à la dernière version pour voir ce que vous en pensez. Cela fonctionne très bien comme base pour tout, et c'est particulièrement vrai pour les sites de matériaux.

Menu de sélection de conception de matériaux

Les menus de sélection déroulants sont un élément essentiel de la conception de formulaires. Ils permettent aux utilisateurs de choisir parmi une poignée de réponses sur des sujets pertinents tels que les États, les pays, les langues, etc.

Cette sélection de conception matérielle élève le menu de sélection HTML commun à un tout autre niveau.

Il ne s'appuie pas sur le style de document typique pour choisir une option. Au lieu de cela, cela utilise une liste non ordonnée avec jQuery gérant les animations et le processus de sélection. Et je dois dire que cette chose cloue le style matériel.

Ombres matérielles

Google pousse vraiment les ombres pour plus de profondeur dans leur documentation matérielle. C'est ce que vous verrez dans ce stylo où les cercles ont tous leurs propres effets d'ombre portée distincts.

Avec les ombres, vous pouvez désigner la hiérarchie des éléments de la page afin que certains apparaissent en haut, d'autres en bas. Il crée une illusion d'espace sur l'écran, ce qui est particulièrement utile sur les écrans tactiles.

Un effet plutôt cool et certainement quelque chose que vous pourriez copier dans vos propres projets.

Interface utilisateur de la carte météo

Le développeur Thomas Vallez a créé cette superbe carte météo fonctionnant en HTML et CSS purs. Il utilise un simple effet de fondu sur le chargement de la page, mais la vraie beauté ici est le style de conception matérielle.

Tout, des couleurs aux polices et même à l'icône météo, ils reposent tous sur des styles de matériaux naturels.

Vous pouvez prendre ce modèle et l'utiliser pour à peu près n'importe quel type de mise en page de carte. C'est phénoménal et certainement l'un des projets les plus simples de cette liste.

Onglets de matériau

Voici un projet intéressant qui s'appuie sur l'idée des onglets de conception de matériaux. Michael Richins a créé ce stylet avec du JavaScript de base et une certaine connaissance des directives de conception de Google.

Les onglets fonctionnent comme vous vous en doutez sur d'autres appareils similaires tels que les smartphones ou les tablettes Android. Sans oublier que cette chose fonctionne sur JavaScript plain vanilla , vous n'avez donc jamais à vous soucier de jQuery ou de tout ce genre de choses.

Un effet plutôt sympa si vous cherchez des onglets sur votre site. Assurez-vous simplement de tester les styles pour voir s'ils se fondent naturellement avec votre page.

Cliquez sur Animation de réponse

Le développeur Emmanuel Pilande a conçu cet effet de réponse cool comme un moyen simple de reproduire les microinteractions matérielles de Google.

Cliquez n'importe où sur les cartes de matériaux pour voir l'effet. Et vous pouvez appliquer cela à pratiquement tout, des boutons aux conteneurs de page ou aux champs de saisie.

Il s'appuie sur du JavaScript, mais il est également simple à ajouter à n'importe quel projet. Donc, si vous optez pour ce look de matériau au naturel , c'est un excellent extrait à conserver.