Tutto quello che devi sapere sul design piatto

2

Il design piatto è nato dopo una ricerca sull'abbandono degli utenti. Le due principali cause di abbandono sono state la difficoltà di navigazione e la lentezza del download.

In primo luogo, l'utente era sempre più sconcertato dalle barriere delle nuove app e della tecnologia. Gli utenti impegnati potrebbero navigare attraverso qualsiasi mare tecnologico, ma alcuni giovani e molti anziani non erano abbastanza motivati ​​​​da investire il proprio tempo e le proprie energie.

L'altro motivo significativo per l'abbandono degli utenti è la lentezza dei download. Per sua natura, il design piatto si scarica molto più velocemente del design ricco. (Il design ricco è caratterizzato dall'uso di ornamenti digitali come riflessi, ombre esterne e sfumature).

Pertanto, i designer di comunicazione grafica si sono messi al lavoro per progettare un layout e uno stile che risultassero familiari, coerenti, accessibili e ordinati. Sullo schermo non doveva essere lasciato nulla che non desse all'utente l'accesso a ciò che desiderava. Questa era una nuova etica del design digitale; probabilmente il primo grafico della comunicazione ha guidato il movimento digitale. Microsoft ha investito molto nel design della comunicazione; e il loro uso del design piatto ne ha fatto un movimento internazionale.

Con il design piatto i limiti dello schermo vengono abbracciati, le restrizioni vengono utilizzate, non contrastate. Questo è diventato il punto di partenza per una radicale semplificazione del design dei siti Web al fine di renderli più funzionali e, agli occhi di molte persone, più attraenti.

Apple ha lottato con le loro icone goffe e la grafica retrò fino a quando anche loro hanno iniziato a utilizzare il design piatto da iOS 7 in poi.

Dai un'occhiata qui sotto per un buon esempio di design, un po' diverso. L'appartamento non deve essere blando o aziendale.


Il male è il nuovo nero – fonte.

Il design piatto ha anche aiutato lo sviluppo del design reattivo, che Google ha ora reso la configurazione mobile consigliata; ciò significa che i siti Web con interfacce per telefoni cellulari avranno classifiche più elevate. Gli schermi dei telefoni cellulari hanno vincoli di dimensioni e in passato necessitavano di un approccio diverso al layout dei contenuti. Tuttavia, con il design piatto tutti i dispositivi possono essere collegati in termini di stile, contenuto e coerenza.

Google voleva un design reattivo perché i siti di design reattivo hanno un URL e lo stesso HTML, che consente a Google di eseguire la scansione e indicizzare i contenuti. Il design piatto consente al web design di diventare più efficiente. Senza elementi di design aggiuntivi, i siti Web possono caricarsi molto più velocemente e sono più facili da ridimensionare e modellare attorno al contenuto che contiene. È molto più semplice visualizzare una tipografia nitida e riquadri ben definiti su diversi dispositivi di dimensioni diverse quando si utilizza un design piatto.

Suggerirei di guardare Flat Grid Mega Meny – Responsive come risorsa per griglie e icone di design piatto.

Principi chiave del design piatto

Queste sono le caratteristiche che devono essere affrontate quando si sviluppa un design piatto per un sito web:

Colore

Cominciamo con il colore: il design piatto è caratterizzato dal suo uso audace delle gamme di colori. Windows 8 è stato il primo a utilizzare una griglia di colori vivaci. L'uso del colore e della dimensione dell'elemento fornisce un flusso facile alle gerarchie. Il colore è stato utilizzato per aumentare l'efficienza, ma si è rivelato così esteticamente gradevole che ora è il vincitore assoluto dello stile in quanto è in grado di fornire una straordinaria gerarchia visiva. Ma il colore non ha bisogno di essere sgargiante, toni di blu lunatici, grigi, giada e lilla. Scegli con cura una tavolozza di colori e sperimenta.

Un buon modo per ottenere una gamma di colori connessa è sceglierne uno, quindi abbassare la tonalità e aggiungere il grigio per ottenere una tavolozza di tonalità correlate dello stesso colore. Minimale, elegante, individuale.

Un buon uso del colore contrasta l'argomentazione comune contro il design piatto, secondo cui la mancanza di distinzione tra gli elementi rende difficile per gli utenti sapere dove fare clic. Questo può essere facilmente superato utilizzando colore, dimensioni e testo. Ricorda che più luminoso è il colore, più dominante appare.

Puoi guardare le risorse di colore del design piatto come i colori dell'interfaccia utente piatta come punto di partenza.

Convenienza adeguata

Un'affordance è un segnale su un sito Web che qualcosa può essere utilizzato per eseguire un'attività. ‘Clicca qui' è un'offerta. Un altro esempio è l'icona di una casa per una home page.

Gli sviluppatori web devono rendere evidenti le offerte attraverso il loro design e negli ultimi trent'anni questo è stato fatto in modo intuitivo da esperti nel campo dello sviluppo web. Tuttavia, con il design piatto le qualità che rendono offerto un articolo su un sito Web sono state ridisegnate per essere accessibili a quegli utenti che non sono esperti. Questo è il motivo per cui l'accessibilità appropriata deve essere rivalutata da tutti nel settore.

UI Patterns elenca vari esempi di convenienza.

Convenienza esplicita

Quando lo scopo di un elemento sulla pagina Web è ovvio a chiunque abbia la minima conoscenza di Internet, allora si tratta di un'esplicita convenienza. Un grande pulsante con "clicca qui" sopra ti farà venire voglia di cliccarci sopra.

Esistono due scenari in cui è molto importante utilizzare l'affordance esplicita: per quei segmenti di pubblico che sono nuovi utenti e quando l'interfaccia è nuova o unica.

Quegli utenti che non sono tecnologicamente esperti devono essere rassicurati in modo che possano presto scalare i ranghi esperti di tecnologia e iniziare a riconoscere le solite icone. Anche le app innovative devono essere spiegate anche agli esperti in modo che l'affordance ‘scorri per tornare' indichi l'azione necessaria per ottenere il risultato desiderato.

Ricorda che i giovani, gli anziani e coloro che vivono in aree con scarso accesso a Internet devono essere soddisfatti. Questo è un atto di equilibrio difficile perché è anche importante non essere condiscendenti. Inoltre, l'intero obiettivo è avere una pagina ordinata.

Convenienza del modello

Questo è quando è stata stabilita la convenzione secondo cui un particolare oggetto esegue una particolare attività. Fare clic sul cuore e il sito è stato aggiunto ai preferiti. Una parola sottolineata è un collegamento; se cliccato su di esso ti porterà su un altro sito. L'affordance del modello è il tipo più comune di offerenza. Le belle pagine ordinate sono ideali per il design piatto.

Convenienza nascosta

L'affordance nascosta è quando l'affordance diventa evidente solo dopo che è stata intrapresa un'azione: passare il mouse su un menu a discesa è un buon esempio. Gran parte delle opzioni di navigazione possono essere nascoste in questo modo, il che è essenziale perché sul sito Web medio ci sono troppe opzioni da visualizzare tutte in una volta.

Ovviamente il pericolo è che l'utente non trovi l'accessibilità, quindi nel design piatto le funzioni più importanti sono rese dominanti. Tuttavia, gli utenti possono diventare molto esperti in queste offerte in un tempo molto breve.

Tuttavia, quando si progetta un sito Web, è sempre necessario porsi una domanda fondamentale: un utente potrebbe visitare il sito e andarsene, felice, senza conoscere la funzionalità? Se la risposta è sì, l'affordance nascosta è la decisione giusta.

Falsa Convenienza

Il web è pieno di false offerte, indizi, segnali e schemi che indicano che accadrà qualcosa se passi il mouse o fai clic e poi niente, nada, nix. A volte è solo un collegamento interrotto, che è di per sé un crimine digitale ma, spesso, è solo a causa di un design grafico scadente. Questa è una delle principali cause di abbandono degli utenti.

Convenienza metaforica


Icone piatte colorate di Michael Dolejs.

È semplicemente l'uso delle icone. Ad esempio, l'icona di una stampante consente (consente) la stampa di un documento. Qui è il posto giusto per dire una parola sullo scheumorfismo, sulla realizzazione di icone disegnate in modo dettagliato e realistico; questo non è il percorso del design piatto. L'affordance metaforica del design piatto utilizza solo immagini minimali piatte, riducendo l'oggetto a un simbolo facilmente comprensibile. Dribbble ha una buona gamma di icone piatte meravigliosamente minimali da scaricare gratuitamente se lo desideri.

Vedi sotto un ottimo esempio di skeumorfismo contro icona.

Tipografia

Il design piatto è per sua stessa natura minimalista e ordinato e deve esprimersi attraverso i caratteri tipografici e le capacità di progettazione della comunicazione utilizzate per sviluppare nuovi siti.

Di solito c'è pochissimo testo e poche grandi sezioni di testo, quindi i pochi pezzi che ci sono devono essere ben pensati.

I puristi del design direbbero che i caratteri sans serif per le intestazioni e il corpo del testo sono ovviamente essenziali. Nonostante ciò, vai ancora oltre per ottenere un aspetto nitido e pulito.

Rimuovi tutto ciò che non è essenziale.

Smetti di usare maiuscole iniziali in ogni intestazione. Le lettere maiuscole sono per i nomi propri e la prima parola di una frase.

Infine, controlla tutta la punteggiatura se è davvero necessario? Se riesci a comprendere il messaggio senza di esso, rimuovilo.

I tipografi adorano l'affordance metaforica perché risale agli anni '30 e al lavoro di Isotype (International System of TYpographic Picture Education), un metodo di visualizzazione delle statistiche che ha portato alla creazione del design delle icone che ci circonda oggi.


Idee per progetti di classe.


Mappatura con isotipo

Lista di controllo del design piatto

Prima che il tuo web design venga approvato per la valutazione del cliente, controlla quanto segue per assicurarti di mantenere l'estetica del design dello schermo piatto:

  • Le immagini e le icone sono nitide e pulite con icone di invito all'azione chiare?
  • C'è un'intestazione chiara su ogni pagina che dice esattamente cosa fa la pagina?
  • Lo spazio è massimizzato con uno scorrimento minimo?
  • Tutte le offerte funzionano e sono appropriate?
  • Le gerarchie sono chiaramente visualizzate?
  • Hai massimizzato la validazione social del sito? I siti di social media sono facili da condividere con un clic?

Il futuro del design piatto

Ci vorrà del tempo prima che il design piatto venga sostituito da un'altra estetica digitale. Più qualcosa viene usato, più diventa potente. Gli utenti riconosceranno tutti gli elementi e si fideranno dei siti flat design.

Quando Apple ha deciso di smettere di usare il design ricco e lo scheumorfismo è stata la campana a morto per tutti i siti web che cantavano e ballavano, hanno iniziato a sembrare datati e goffi. Non credo che Apple abbia ancora abbracciato completamente il design piatto; le loro icone iOS 8 sembrano ancora disordinate.

È interessante notare che Google non ha scelto un design completamente piatto, ma continua a utilizzare una combinazione di design piatto e ricco. Ad esempio, usano ancora i gradienti, quindi forse nel prossimo futuro gli sviluppatori inizieranno a intrufolarsi in progetti sempre più ricchi e si verificherà un'altra era di stile. Siamo onesti, l'attuale tendenza del design per il piatto è influenzata dai designer degli anni '20 e '30. Stando così le cose, dobbiamo anche accettare che si tratti ‘solo' di una moda. Tuttavia, è una moda utile e funzionale.

Designer e sviluppatori vorranno sempre mettere il loro timbro sul loro lavoro e la natura stessa del design piatto è sottomettersi a un rigoroso minimalismo. C'è un'arte nel sapere cosa rimuovere e come semplificare; ma ci vuole forza di volontà per seguire veramente l'etica del design piatto del minimalismo.

Tuttavia, non riesco a vedere scomparire lo schermo piatto, così elegante, così semplice e facile da usare. È un design molto puro e molto adattabile.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More