Che cos'è lo stile di design dei materiali: una semplice spiegazione

Lo stile di design Material rimane per la maggior parte un oggetto incomprensibile e sconosciuto. Troveremo esempi semplici e comprensibili di cosa sia e come usarlo.

Lo stile Material design (design materiale nella versione russa), avendo guadagnato una popolarità folle, rimane per la maggior parte un oggetto incomprensibile e sconosciuto. Comprenderemo esempi semplici e comprensibili di cosa sia il material design (parleremo principalmente di design di siti web ) e di come usarlo.

SCARICA LA CHECK LIST PER LA PROGETTAZIONE DEI MATERIALI

->

Inizialmente, i designer di Google si erano prefissati tre compiti globali:

• Creare non solo un nuovo stile, ma un intero sistema di design in cui principi e regole saranno enunciati chiaramente; 
• Aggiorna gli stili esistenti (FLAT/Metro, minimalismo e altri), facendo affidamento sulle nuove tecnologie. 

Questo sistema di progettazione era necessario perché le applicazioni e i siti mobili si sono trasformati da semplici aggiunte a normali siti web nella loro parte integrante.

Da dove viene il materiale Il design deriva da: statistiche di Internet mobile

Il piccolo schermo di un telefono cellulare richiede requisiti di usabilità molto più elevati, costringendo gli sviluppatori a riflettere attentamente su tutti i meccanismi dell'applicazione o del sito adattivo. Il nuovo stile di Google è stato creato per combinare i siti "mobile" e "desktop", avendo ideato un unico concetto per loro.

“Materiale” nel design: che cos'è? 

Il concetto di materiale diventa la base dello stile. Questo è il principale "elemento costruttivo" da cui sono assemblati i blocchi funzionali del progetto. Può essere brevemente descritto come segue:

• Deve essere sentito per essere sentito; 
• È interattivo e sullo schermo del monitor si comporta nello stesso modo in cui si comporterebbe un oggetto fisico nella vita; 
• Sembra carta; 
• Crea ombre, si piega, si muove come uno reale. 

Esempio di layering "digital paper "

Queste condizioni sono abbastanza comprensibili: probabilmente avrai notato - e più di una volta - che spesso vuoi cliccare sul pulsante "gustoso", voluminoso che si comporta come uno vero quando premuto. Poiché lo schermo del computer trasmette solo immagini visive, le persone con un diverso sistema di percezione (audio e cinestetico) sono deprivate e non ottengono le sensazioni a cui sono abituate. Il designer può solo fingere: fare il bottone in modo che questa immagine susciti nell'immaginazione del visitatore la sensazione che stia toccando questo bottone e ne senta la ruvidità, gli angoli, il volume. Questo è importante per i kinestet, ad esempio, queste sono persone particolarmente suscettibili alle sensazioni tattili.

Google material design

Naturalmente, tali proprietà sono state utilizzate nel design prima: ad esempio, i grandi pulsanti lucidi con riflessi erano popolari in stile Web 2.0. Ma nel design del materiale le proprietà sono chiaramente enunciate. In particolare, tutti gli elementi hanno lo stesso “spessore”: non ci sono più pulsanti webdannel che si distinguono dal resto dei blocchi di pagina.

Pulsante nello stile del materiale pulsante design e Web 2.0

Inoltre, secondo le regole che i designer di Google hanno ideato per il materiale di progettazione, i singoli elementi "giano" l'uno contro l'altro e non restano sospesi nell'aria. Di conseguenza, le ombre sono sempre piccole e hanno contorni chiari (anziché ombre di luce diffusa ravvicinata, ad esempio).

Un'altra importante differenza del nuovo stile è il suo dinamismo. La ragione anche in questo caso è nei telefoni cellulari e nei tablet: le dimensioni limitate dello schermo non consentono di posizionare tutte le informazioni e i controlli necessari in bella vista e l'utente deve spostarsi, scorrere e fare clic molto. In Google, per il design dei materiali, hanno fornito schemi ben definiti: ogni movimento ha il suo significato: o è un menu estraibile, o un elemento cancellato da uno scorrimento del dito e così via.

Errori e malintesi

Primo. Per ottenere il design del materiale, è sufficiente sostituire tutti gli elementi e gli sfondi del sito con le trame. No! Se lo fai, otterrai un sito sporco e brutto che non raggiunge nemmeno il sito webdwan.

Secondo. I materiali nel design devono essere utilizzati in modo realistico. Non necessario! È importante che si comportino come quelli reali. Non importa se si tratta di una texture in vero legno o di una texture "sintetica" creata in Photoshop utilizzando lo strumento Disturbo.

Quali trame sono adatte per il design dei materiali con lo stile di Google

Terzo. Il materiale e la sua interattività è l'unica cosa che contraddistingue questo stile. No! Per ottenere un design del materiale “canonico”, come quello di Google, è necessario seguire altri principi:

• Le immagini sono disegnate senza spazi, bordo a bordo; 
• Caratteri sans-serif grandi e ben letti; 
• Codifica a colori; 
• Icone realizzate sugli stessi principi del materiale per il design; 
• Layout adattivo. 

L'elenco completo delle regole è disponibile nella sezione ufficiale di Google sulla progettazione dei materiali.

Design del materiale Android

Ci sono alcune caratteristiche specifiche nell'applicazione delle regole generali alle applicazioni mobili. Ricordi che abbiamo parlato di ombre? Inizialmente, gli elementi di design dei materiali per Android si trovano davvero uno sopra l'altro, come fogli di carta. Ma quando si interagisce, ogni elemento, che si tratti di una finestra di dialogo o di un pulsante di navigazione, si alza. Questo è il modo in cui i blocchi attivi sono evidenziati in questo stile. Utilizza lo stesso principio che è stato incorporato nella tecnologia pop-up dal Web 2.0.

Now" stratificato il principio si è spostato dai popup all'intera interfaccia

È interessante che gli sviluppatori del materiale di progettazione in Google abbiano persino prescritto chiaramente tutti i parametri per ciascuno dei possibili elementi dell'interfaccia!

Colori nel materiale del design

L'approccio alla combinazione di colori ricorda lo stile FLAT. Questi sono colori abbastanza luminosi, succosi e naturali. Il material design prevede l'utilizzo di tre tipi fondamentali di colori:

• Il colore principale che prevale in tutte le schermate dell'interfaccia; 
• Un colore complementare, che di solito denota blocchi associati al contenuto principale, che lo spiegano o lo completano. Spesso questa è semplicemente una tonalità più chiara o più scura del colore principale. 
• Colore di accento, che viene utilizzato per evidenziare pulsanti, elementi di conversione e altre cose importanti. 

Colori dei materiali design: tavolozza google