10 utili frammenti di codice di progettazione dei materiali

La mania del design dei materiali sta prendendo d'assalto il mondo del web. Ogni mese trovo nuovi siti in esecuzione sullo stile materiale utilizzando framework o kit di interfaccia utente personalizzati.

Ma questa non è una brutta cosa, anzi! Questo è un modo per semplificare il processo di progettazione lavorando con tendenze comprovate che Google riconosce come linguaggio di progettazione preferito.

Se sei grande nello stile di design dei materiali, questi frammenti di codice sono per te. Questi sono solo 10 dei miei preferiti che offrono una varietà di design e componenti tra cui scegliere.

Tabella reattiva

Ecco uno snippet di design dei materiali con un tocco unico. Questo tavolo reattivo creato da Sergey Kupletsky ospita in realtà altri collegamenti a frammenti di design dei materiali. Abbastanza bello!

Questo è naturalmente creato utilizzando anche tecniche di progettazione dei materiali, quindi il tavolo dovrebbe adattarsi perfettamente al tuo layout. Ma la parte più difficile del design mobile è creare tavoli che funzionino su schermi più piccoli.

Penso che questo metodo sia uno dei modi migliori per gestirlo. Anche il tuo codice rimane pulito, il che rende estremamente facile codificare, ripulire e gestire indipendentemente dalle dimensioni del tuo tavolo.

Transizioni dell'interfaccia utente delle carte

Lo sviluppatore Ivan Villamil ha creato questo design dell'interfaccia utente delle carte davvero unico con alcune animazioni piuttosto pazze.

Dai un'occhiata alla pagina e prova a fare clic su una delle carte. Otterrai un effetto animato unico in cui il contenuto della carta si anima sul contenitore e appare in vista. È come qualcosa che ti aspetteresti di trovare in un'app mobile, ma portato sul web!

Gli effetti di animazione sono impeccabili e mostrano quanto puoi fare oggi sul web. Per non parlare dello stile del materiale perfetto per questa interfaccia utente web/mobile combinata.

Accesso compatto

Ho visto alcuni moduli di accesso molto interessanti durante i miei anni come designer. Ma questo design pazzesco potrebbe semplicemente prendere la torta per le sue funzionalità interattive e gli stili unici.

Quando fai clic sull'icona rosa brillante nell'angolo in alto a destra, otterrai un campo di registrazione che appare sulla pagina. È dannatamente unico e crea un'interfaccia davvero utilizzabile.

Allora qual è il trucco? Questo utilizza molto JavaScript, quindi non è la soluzione più ordinata dal punto di vista del codice. Ma resta comunque un eccellente esempio di progettazione con caratteristiche compatte.

Popola animazione

Scott Kellum ha sviluppato questo intrigante layout di scheda materiale che si compila automaticamente una volta caricata la pagina. Questo si sviluppa in una griglia in cui puoi passare con il mouse su ogni carta per vedere le caratteristiche del design dei materiali in azione.

Non posso dire quanto sia utile in un progetto diretto o quanto potresti ricavarne. Ma questo è uno snippet divertente che mostra il design off-grid per il web, mescolando un tocco di sapore materiale con animazioni al passaggio del mouse.

Materiale BS4 Bottoni

Tra i molti modelli Bootstrap disponibili online, è meglio che alcuni di loro utilizzino il design dei materiali. E questa penna mostra tutte le cose interessanti che puoi fare con il design dei materiali in Bootstrap 4.

In realtà questa è solo una raccolta di pulsanti ridisegnati nel linguaggio materiale di Google. Ma tutto funziona sul nuovissimo framework BS4, quindi puoi aggiungerli a qualsiasi pagina basata su Bootstrap.

Se sei serio su Bootstrap, dai un'occhiata all'ultima versione per vedere cosa ne pensi. Funziona alla grande come base per qualsiasi cosa, e questo è particolarmente vero per i siti di materiale.

Menu di selezione del design dei materiali

I menu di selezione a discesa sono un punto fermo nella progettazione dei moduli. Consentono agli utenti di scegliere tra una manciata di risposte su argomenti rilevanti come stati, paesi, lingue e così via.

Questa selezione del design del materiale eleva il menu di selezione HTML comune a un livello completamente nuovo.

Non si basa sullo stile tipico del documento per selezionare un'opzione. Invece, questo utilizza un elenco non ordinato con jQuery che gestisce le animazioni e il processo di selezione. E devo dire che questa cosa inchioda lo stile materiale.

Ombre materiali

Google spinge davvero le ombre in profondità nella loro documentazione materiale. Questo è ciò che vedrai in questa penna in cui i cerchi hanno tutti i loro distinti effetti di ombra esterna.

Con le ombre puoi designare la gerarchia degli elementi della pagina in modo che alcuni appaiano in alto, altri in basso. Crea un'illusione di spazio sullo schermo che è particolarmente utile sui touchscreen.

Un effetto piuttosto interessante e sicuramente qualcosa che potresti copiare nei tuoi progetti.

Interfaccia utente della scheda meteorologica

Lo sviluppatore Thomas Vallez ha creato questa fantastica scheda meteo in esecuzione su HTML e CSS puri. Utilizza un semplice effetto di dissolvenza in apertura sul caricamento della pagina, ma la vera bellezza qui è lo stile del design dei materiali.

Tutto, dai colori ai caratteri e persino all'icona del tempo, si basano tutti su stili di materiali naturali.

Puoi prendere questo modello e usarlo praticamente per qualsiasi tipo di layout di carta. È fenomenale e sicuramente uno dei progetti più semplici in questo elenco.

Schede Materiale

Ecco un progetto interessante che si basa sull'idea delle schede di design dei materiali. Michael Richins ha creato questa penna con alcuni JavaScript di base e una certa conoscenza delle linee guida di progettazione di Google.

Le schede funzionano proprio come ti aspetteresti su altri dispositivi simili come smartphone o tablet Android. Per non parlare di questa cosa che funziona su un semplice JavaScript vanigliato , quindi non devi mai preoccuparti di jQuery o niente di tutto questo.

Un effetto piuttosto interessante se stai cercando schede sul tuo sito. Assicurati solo di testare gli stili per vedere se si fondono naturalmente con la tua pagina.

Fare clic su Animazione risposta

Lo sviluppatore Emmanuel Pilande ha creato questo fantastico effetto di risposta come un modo semplice per replicare le microinterazioni materiali di Google.

Fare clic in un punto qualsiasi delle carte materiale per vedere l'effetto. E puoi applicarlo praticamente a qualsiasi cosa, dai pulsanti ai contenitori di pagine o ai campi di input.

Si basa su alcuni JavaScript, ma è anche semplice da aggiungere a qualsiasi progetto. Quindi, se stai cercando quell'aspetto materiale au naturale , questo è un ottimo frammento da salvare.