Design piatto, iOS 7, Skeuomorphism e All That

La nozione di design piatto, "digitalmente autentico" è stata recentemente oggetto di discussioni e controversie popolari, in particolare con gli sforzi di progettazione del software di Apple, Microsoft, Google e i rispettivi sistemi operativi di punta. Colori tenui, tipografia leggera e altri elementi comuni del moderno design piatto hanno tutti trovato un ruolo attivo nella costruzione delle tendenze neotericamente progettuali che tutti stiamo venendo ad amare (o odiare). Daremo un'occhiata a queste tendenze in questo articolo per vedere di cosa si tratta.


Skeuomorphism: Unflat

Mentre molte specifiche delle teorie costituenti che formano il concetto di design piatto, digitalmente autentico, una cosa è certa: si è evoluta come parte di un graditissimo allontanamento dal design metaforomico e metaforico.

Lo Skeuomorphism è il termine che applichiamo a una tendenza per progettare essenzialmente qualcosa di nuovo pur mantenendo i temi di qualcosa di più vecchio e più consolidato. Lo skeuomorphism esiste in molti settori diversi - l'architettura è un esempio spesso citato - ma, nel contesto del web design e del software, conosciamo il snouomorfismo principalmente come tecnica di usare metafore per indurre familiarità.


Moody PSD Interface su Tuts+

Ho scritto un pezzo sulle metafore nel web design circa due anni fa e il concetto centrale è ancora applicabile. Metafore di varia scala vengono impiegate per paragonare azioni e idee digitali a controparti del mondo reale. Lo Skeuomorphism è stato evidente nel design digitale sin da quando la GUI è nata per combattere la curva di apprendimento coinvolta con l'interfaccia basata sulla riga di comando, che va dalla semplice implementazione di icone che ricordano un floppy disk e un cestino per l'illustrazione completa di libri e una radio per cui Apple è conosciuta.

Quando vedi un pulsante sul web, senza nemmeno averne cliccato uno, sai che è qualcosa che deve essere attivato a causa del suo design, proprio come si suppone istintivamente che un messaggio sia cattivo quando è circondato in rosso.


Dai principi di Pete Orme per il successo del design dei pulsanti
Sai cosa fare…

Lo Skeuomorphism è stato usato per aiutare coloro che sono nuovi in ​​una piattaforma a imparare le corde e andare in giro con istruzioni minime. Il design piatto è una tendenza verso una filosofia priva di elementi superflui e l'emergere di un design più sottile, fedele alla piattaforma stessa.


La Global Experience Language della BBC

Sia che utilizzi Windows o OS X, Android o iOS, probabilmente stai utilizzando qualcosa progettato con queste filosofie o in attesa di un aggiornamento per portarli in.


The Big Guys

Ci sono molti esempi di design piatto là fuori, ma, ad esempio i concetti di oggi, ci concentreremo sugli sforzi di Microsoft, Google e Apple a causa della loro vasta portata collettiva. A causa di ciascuna di queste società che presidiano un certo numero di piattaforme e asset, sono anche alcuni dei candidati più probabili ad aver stabilito linee guida di stile significative che possiamo indagare al fine di emulare la loro interpretazione del design piatto.

Microsoft

Microsoft ha optato per una delle più radicali e controverse riprogettazioni degli ultimi tempi con Windows 8. La loro creazione del linguaggio di progettazione precedentemente noto come Metro (ora noto come Microsoft Design Language, ma con il termine precedente ancora applicato colloquialmente) è stato visto per la prima volta in uso diffuso con Windows Phone (c'era anche Zune, ma meno ne parlavo meglio, ma visto che era il design inaugurale della piattaforma, non era poi così male. Era fino al rilascio di Windows 8 2012 per suscitare davvero polemiche.

Quella polemica non riguardava tanto il design in sé, quanto piuttosto la semplice azione di cambiare radicalmente i concetti chiave associati a Windows come il menu Start, che era diventato uno skeuomorfo a sé stante, ma con tutti quelli della community di web design i media mainstream che coprono il contraccolpo, il design e, quindi, Metro come linguaggio di design, sono stati messi in discussione.

Poiché Microsoft è stata a lungo uno dei primi sostenitori del design piatto e autentico, i suoi principi sono probabilmente i più sviluppati e affermati. Microsoft definisce Metro come quattro principi fondamentali: tipografia, movimento, contenuto non cromato e onestà. Ho scritto su questi principi l'anno scorso, ma ecco un riassunto:

  • La creazione di una gerarchia visiva attraverso le caratteristiche di tipografia, utilizzandolo per formare la base di un layout e la sua navigazione senza l'uso di funzioni grafiche superflue
  • Quello movimento e la fluidità e le prestazioni di un design sono altrettanto importanti per l'estetica di un design
  • Mettendo contenuto, non cromato, in anticipo, entrambi concentrano maggiormente l'attenzione sull'effettivo contenuto e consentono di ridimensionare i progetti in modo appropriato
  • Essere "autenticamente digitali" e tenere onestà per il fatto stesso che il consumo del design è digitale, lasciando la progettazione di oggetti offline, offline

Scopri Emulazione del linguaggio di progettazione Metro di Microsoft per uno sguardo più dettagliato su ciascuno di questi principi.


La homepage di Microsoft, progettata da Paravel Inc.

Google

Con il rilascio di Android 4.0 Ice Cream Sandwich, Google ha anche iniziato a stabilire il proprio linguaggio di design interno, Holo. Holo ha alcuni principi definiti, ma dal momento che sono legati in modo specifico alla progettazione delle applicazioni, non sono universalmente applicabili come quelli di Microsoft. Tuttavia, Android 4.x ricorda visivamente molti degli stessi ideali della famiglia Windows, con una leggera tipografia, icone monocromatiche all'esterno della schermata iniziale e uno schema di colori tenue ma universale.

Mela

Mentre Google e Microsoft non erano in grado di apportare modifiche sostanziali ai loro linguaggi di progettazione, Apple si è attenuta ai suoi principi skeuomorfici attraverso più generazioni del suo sistema operativo. Questo è cambiato solo pochi mesi fa con l'annuncio di iOS 7, prendendo un passo drasticamente diverso nel design del sistema operativo. Le icone sono più piatte, la tipografia è più leggera e le metafore sono fuori.

Ciò è particolarmente evidente con iOS quando si confronta l'iterazione corrente, ad esempio, dell'app calcolatrice con la sua controparte iOS 7. Quella particolare app è passata dal cercare di assomigliare a un dispositivo fisico con pulsanti significati da sfondi sfumati a un design completamente piatto, indipendente da eventuali metafore non necessarie.


Progettare piatti e silenziosamente

Il design piatto non è una tendenza di cui stiamo parlando in retrospettiva, ma piuttosto un'evoluzione costante e consolidata. Per questi motivi, è difficile definire veramente le caratteristiche esatte del design piatto, ma possiamo almeno dare un'occhiata ad alcuni dei temi comuni.

minimalismo

Il minimalismo è un principio chiave nella progettazione piatta da un certo numero di prospettive. Il contenuto di Microsoft, non la filosofia di Chrome è molto fedele a questo fatto, suggerendo che il superfluo "chrome" - gli elementi di interfaccia aggiuntivi che non sono il contenuto principale della pagina - dovrebbe essere minimo e praticamente inesistente quando non è necessario. L'uso della tipografia e della gerarchia visiva da esso stabilita è la chiave per l'esecuzione riuscita di questo tipo di interfaccia utente minimalista, che esamineremo in seguito.

Un uso salutare di spazio, margini e risvolti negativi contribuisce anche alla sensazione generale del design piatto, spazia gli elementi al posto dei dettagli che una volta li distinguevano.


Icona corrente di Safari a sinistra rispetto alla versione piatta di .app.icns. Quest'ultima rinuncia alle luci false, ai biselli e ad altri dettagli per creare un'alternativa attraente e piatta pur mantenendo la metafora della bussola.

Tuttavia, il minimalismo non è applicabile solo ai progetti nella loro interezza. Piuttosto, la vera chiave per ottenere un design piatto è attraverso l'esecuzione del minimalismo nei singoli elementi del tuo design, evitando effetti surplus come ombre, luci, gradienti non necessari e simili. Invece, la regola generale è che tutti i tuoi elementi dovrebbero apparire, come suggerisce il nome, piatti, senza finte profondità create attraverso smussature e altri effetti, un approccio molto diverso all'esperienza web che siamo abituati ad essere racchiusi in abbellimenti non necessari.

Tipografia

La tipografia è un elemento chiave nella progettazione piatta e le scelte tipografiche di successo possono portare a un'esecuzione riuscita della teoria generale del progetto. Perché, come discusso nell'ultima sezione, una grande parte del design piatto consiste nel togliere gli abbellimenti extra e i dettagli non necessari, questo porta alla tipografia che generalmente ha un ruolo da protagonista nella forma dell'intera pagina.


Poiché la tipografia inizia ad avere un ruolo fondante nella gerarchia visiva di una pagina - o, almeno, più che nei progetti tradizionali - la scelta e l'uso del font giusto è una grande decisione. In molti progetti piatti, generalmente si trova il sans-serif principalmente in gioco, poiché i servi stessi sono inutili abbellimenti e un segno di formalità piuttosto che il modernismo. Di questi tipi di caratteri sans-serif, dovrai cercare quelli con disponibilità in una varietà di pesi in modo che solo una o due famiglie siano necessarie per popolare l'intera gerarchia del tuo progetto, al fine di mantenere il tocco minimalista e semplice.

Una combinazione di uso efficace dello spazio negativo e una famiglia di font ben scelti possono rendere il testo una base efficace per il tuo design e interfacce come Windows 8 ne sono la prova. Crea una tipografia semplice e pulita e il tuo design seguirà.

Colore

I principi del design piatto possono essere applicati alla maggior parte degli schemi di colori della tua evocazione, ma c'è una tendenza in evoluzione nella teoria dei colori che viene costruita insieme all'induzione del design piatto.


flatuicolors.com

In ogni pezzo di letteratura sull'argomento ed ampiamente evidenziato in esempi di design piatto, c'è una forte tendenza: i designer usano il movimento del design piatto per introdurre colori più brillanti con una frequenza maggiore rispetto all'uso di uno o due colori in una manciata di sfumature.

Puoi ancora incarnare un design piatto usando sfumature di grigio con un colore accento, ma l'adozione di nuove tendenze cromatiche e la creazione di una tavolozza brillante e diversa possono aiutare a creare un contrasto importante e a ricreare effetti rivaleggiati solo da sfumature, ombre e altri abbellimenti in uscita. Più colori brillanti e vivaci sono la firma del design piatto.

Dispositivo agnostico

Con il web consumato su più dispositivi che mai, la creazione di un design reattivo, leggero e mobile si accompagna a un design piatto. Non lo fai bisogno creare un layout reattivo per creare un forte esempio di design piatto, ma aspetti come la tipografia pulita e scalabile e l'iconografia piatta basata su vettori rendono più facile che mai farlo.

Abbiamo coperto il responsive design in modo approfondito e ci sono molte altre risorse sul Web pronte a soddisfare il tuo interesse nel progettare la scalabilità su tutti i dispositivi. Creare un design reattivo che racchiuda il minimalismo con una forte tipografia e una riduzione della dipendenza da trame ed effetti superflui è qualcosa che i tuoi utenti ti ringrazieranno e promuoveranno il tuo lavoro come macchina indipendente.


Le tendenze sono tendenze

Il design piatto è una tendenza, non un requisito per progettare per il web. Mentre molti dei principali attori del web design e della tecnologia si stanno spostando verso progetti flat-centric, ciò non significa che ogni progetto debba o che l'estetica sia giusta per ogni scenario. Le tendenze vanno e vengono; c'è una storia piena di etica del design un tempo popolare che non vale più la pena di pensare (ricordate quando le tendostrutture erano di gran moda?)

Le tendenze sono fugaci e se le segui come una bibbia, rimarrai indietro con i tempi.

Harrison Weber

Con sempre più grandi nomi che si iscrivono all'utilizzo del design piatto, sembra una mossa naturale saltare sul carro della tendenza attuale. Ma è importante non limitare il potenziale di nessuno dei tuoi progetti perché stai cercando di rimanere aggiornato e aggiornato. Piuttosto, tratta ogni progetto in modo diverso e adotta solo le caratteristiche di questa particolare tendenza, se ce ne sono, che ritieni opportune. Il design piatto può essere popolare, ma non è una legge e non dovrebbe essere un limite alla produzione di un grande design.

Potremmo vedere tendenze radicalmente diverse il prossimo anno, ma se ti assicuri di fare le scelte appropriate e di non usarle Questo direzione dell'anno come modello rigido, il tuo progetto dovrebbe essere buono per molti anni a venire.


Conclusione

Quando il design piatto si adatta al tuo progetto, la tua creazione può essere magnifica. Combinare colori audaci, elegante tipografia e un'aura di minimalismo, libero da una finta terza dimensione e da altri abbellimenti inutili, può essere tanto efficace quanto efficiente.

Non c'è dubbio che la nascita del design piatto è in gran parte una risposta allo skeuomorphism; guarda al passaggio di Apple da iOS 6 a iOS 7 per vederlo. Il design piatto è come lo skeuomorphsim tutto cresciuto, sapendo che la maggior parte degli utenti del web ora capisce che un pulsante serve per premere, senza che bisognerebbe che uno smusso appaia come un pulsante che si potrebbe premere nella vita reale. La progettazione piatta è un concetto indipendente che può essere sorprendentemente complesso, ma, se eseguito correttamente, può portare a disegni belli su piattaforme diverse.


Ulteriori letture

Perché non hai letto abbastanza sul design piatto ...

  • The Flat Design Era di Layervault
  • Il design piatto è ottimo per i designer mediocri come me di Jonathan Libov
  • Design piatto e Skeuomorphism di Sven Lenaerts
  • Farlo funzionare: Design piatto e tendenze di colore di Carrie Cousins
  • fltdsgn.com
  • Il design piatto getta una lunga ombra di Ben Moss
  • flaticons.net
  • skeu.it Così a lungo, e grazie per tutto il pesce in legno, con scotch, con cuciture in cuoio e lino
  • iOS 7 Design su apple.com
  • iOS 7 Icon Guides PSD di Alexander Obenauer
  • Presentando il tuo Web Mockups con l'aggiunta di 3D Flair di Taras Kravtchouk
  • La morte del design piatto del danese Ali Mughal
  • Dimentica il design piatto. Passa il tuo tempo a fare qualcosa di bello da Harrison Weber