Flat Design 2.0 – Un Nuovo Trend

Flat Design - Un Nuovo Trend

Flat Design 2.0 – Un Nuovo Trend

 Il flat design ha colpito il mondo del design con impeto negli ultimi anni ma nessun movimento di design rimane 100% ligio alle sue radici e i suoi ideali. Questo è esattamente quello che sta succedendo con il flat design: sta gradualmente subendo sottili ma significativi cambiamenti contrapposti al suo iter originale.

Questi cambiamenti sono stati abbastanza per far coniare agli esperti e agli osservatori della nuova chimera il termine Flat Design 2.0. Il 2.0 è molto interessante perché sottolinea la fine separazione fra appena abbastanza cambiamento da alterare l’esperienza dell’utente e rimanere fedeli ai suoi principi originali.

L’evoluzione del Flat nel 2.0 era inevitabile, perché man mano che i designer iniziavano a sentirsi a loro agio col Flat design, hanno iniziato a notare che nonostante tutta la sua popolarità c’erano dei problemi che non venivano gestiti adeguatamente. Così ora abbiamo il 2.0 per risolvere alcuni di questi problemi.

le origini del flat design

Guarda al Flat design come una sorta di ribellione contro l’allora popolare stile di design scheumorfismo. Si basava su effetti 3D per copiare proprietà del mondo reale degli oggetti sfruttandolo come modo per instaurare familiarità per fornire così aiuto all’utente. Per esempio, nelle interazioni iniziali con il Kindle Fire di Amazon, c’era uno scaffale 3D sullo sfondo per rinforzare lo scopo del tablet per la lettura.

001

 

Quando Apple, un enorme proponente del design  scheumorfico, decise, nel 2013, di abbandonare lo scheumorfismo, causò una grossa oscillazione verso il Flat, il quale è rimasto molto popolare negli ultimi anni. L’enfasi verso il minimalismo ha aiutato a spingerlo verso la sua corrente ubiquità.

Lo stile flat è caratterizzato dall’assenza di:

  • elementi sollevati che indichino all’utente che possono essere clickati;
  • elementi cavi o affondati che indichino all’utente che possono essere riempiti  (pensa ai campi per la ricerca o l’input)

TRANSIzione al 2.0

Nonostante il successo del flat, alcuni designer hanno iniziato a notare legittimi difetti che non erano presi in considerazione dalla community di design. Mentre il flat ha guadagnato un sacco di notorietà per il suo minimalismo, è andato un po’ troppo in là nella direzione dell’austerità. D’altro canto le caratteristiche di alcuni effeti 3D sono risultate eccessive e hanno influenzato l’esperienza dell’utente negativamente.

Perciò, era inevitabile che un altro cambiamento sarebbe avvenuto. E ‘ quello che sta succedendo oggi con l’avvento del flat design 2.0.

i problemi di utilizzo del flat design

Tutti i problemi di utilizzo possono essere riassunti nella seguente affermazione: il flat design tipicamente baratta i bisogni dell’utente per l’estetica.

In altre parole, i designer che fanno il design per un’interfaccia che sia “flat” porranno un sacco di enfasi sul mantenerla minimal, non-3D, e vibrante invece che mettere l’esperienza dell’utente per prima. Qui è dove di solito tutte le brutte cose succedono ed è per questo che il flat si è evoluto al 2.0.

Questi sono comuni problemi di utilizzo con il flat:

  • assenza di tutti gli elementi che aiutano a interpretare il significato (gradienti, ombre, sottolineature, etc.);
  • assenza di pattern familiari (blu, sottolineature per i links, etc);
  • assenza di indicazioni contestuali (Call To Action, copywriting che funzioni, etc.)

Forse l’esempio più noto nella memoria recente di noi tutti sono stati i problemi di utilizzo che ha avuto la Microsoft con il rilascio di Windows 8, con il così chiamato Metro UI. Questo design è stato il parossismo del flat perché ogni cosa è stata portata verso il piatto più estremo.

002

L’esperienza dell’utente è stata terribile perché il design completamente piatto ha creato una situazione in cui non si davano gli indizi necessari all’utente per comunicargli cosa poteva essere clickato e cosa non. Come risultato, gli utenti sono stati forzati a spendere tempo extra per capire come fare cosa per via empirica o peggio ancora, facendo errori che avrebbero preferito evitare!

Come puoi vedere, lo schermo di Windows 8 è così piatto che è impossibile per le persone dire cosa clickare e cosa non clickare. Anche se gli utenti sono già familiari con la navigazione basica di un sito, ciò non significa che sia una buona idea rimuovere tutti gli indizi significativi (indizi che indicano agli utenti gli elementi della pagina con cui possono interagire) e gli indizi di affordances (indicazioni su come gli utenti possono interagire con gli elementi della pagina).

ottimi esempi di flat design 2.0

2.0 è un sottile cambiamento e miglioramento del flat, perciò potrebbe richiedere un po’ di concentrazione trovare un sito web con vere interfacce 2.0 ma ci sono già grossi esempio di 2.0 operativi.

LA GUIDA DI DROPBOX

La guida di Dropbox potrebbe a prima vista sembrare piatta ma se guardi più da vicino, vedrai suggerimenti 3D che comunicano chiaramente agli utenti che alcuni elementi sono sollevati sopra altri. Questo è principalmente evidente nell’immagine con la testa del ragazzo (sul lato sinistro) e quella del cacciavite (sul lato destro). Entrambe le immagini sono forti e hanno, benché sottili, bordi neri che comunicano profondità e l’impressione che soggiacciono sullo sfondo anziché fondersi con esso.

003

TOLIA ICE CREAM

Tolia è pieno di sottili, sollevati effetti che danno l’impressione distinta del 3D mentre il design complessivo è ancora flat e minimal. L’impressione sollevata è presente nella headline, la sub-headline e la descrizione. Presenta anche il bottone per la Call To Action. Puoi ringraziare il sottile utilizzo d’ombre tutto attorno ai bordi di questi elementi per questo effetto sollevato.

004

GOOGLE SANTA TRACKER

Senza troppo stupore, Google è sul vagone del 2.0, e la pagine del Santa Tracker mostra come si possa integrare il 2.0 in modo divertente e utile. Le sottigliezze del 2.0 abbondano sulla pagine in ogni cosa: dai gradienti e le ombre sulle varie costruzione e le bolle alle headline in impressione 3D in cima alla pagina.

005

PUBLICIS GROUPE

La pagina del novantesimo anniversario di Publicis Groupe fa un ovvio utilizzo del 2.0.  Se guardi al lato sinistro della pagina, vedrai una combinazione di ombre e grandienti che scendono e irradiano verso l’esterno a partire dal pallido cerchio e sulla sezione blu sottostante. Il minimalismo rigido indica anche che l’estetica del design affonda ancora fortemente le sue radici nel flat.

006

JUMEIRAH

Questo sito per un hotel di lusso negli Emirati Arabi è per lo più dominato da un enorme video sullo sfondo, nonostante ciò non distrae dal sottile contributo del 2.0. La scritta “Jumeirah Inside” sulla headline ha una sottile ombra che dà l’impressione del 3D mentre il tutto mantiene un look piatto.

007

un evoluzione dettata dalla domanda

Nel mondo del design, le cose di solito cambiano perché c’è richiesta. Qualcuno nota che qualcosa manca e trova un modo di migliorare le cose, o qualcun’altro prende un concetto e lo porta a un altro livello.

Per quanto riguarda il 2.0, è definitivamente una combinazione di entrambi poiché i problemi di utilizzo sono sistemati estendendo il concetto originale in un modo che onora i principi del minimalismo che definiscono il flat.

 Per un design pulito ed efficace: contattaci, è gratis!

Le 10 regole d’oro del Design semplice e pulito

10 Regole Web Design Semplice

Le 10 regole d’oro del Design semplice e pulito

C’è molto di più nel semplice design di quanto tu possa immaginare. Un prodotto come l’iPhone potrebbe apparire pulito e non intrusivo ad occhio nudo, ma c’è molto di più sotto la superficie. La maggior parte delle persona non ne sa niente. Né necessitano di saperlo. Hanno solo la necessità di sapere che farà quello che hanno bisogno che faccia, quando hanno bisogno che lo faccia.

Questo è il principio che sottende lo stile minimal della Apple. E non significa necessariamente spogliare qualcosa di tutti i suoi componenti, ma di essere certi che sia facile da capire come fare qualcosa e accessibile con meno distrazione possibili.

Questo sono quelle che mi piace chiamare le 10 Regole d’Oro del Design Semplice e Pulito. Sono basate in modo lasco sui 10 Principi del Buon Design proposti dal noto designer industriale Dieter Rams. Le ho modificate un pochino per farle rientrare nell’obbiettivo più generale di un design semplice.

meno ma di piu’

Dieter Rams l’ha messo per primo e c’è una buona ragione per cui è primo anche in questa lista. Il design semplice non è solo sottrarre elementi da un design troppo ricco o eclettico. Deve migliorare l’efficacia generale del design. L’obbiettivo di Rams è di spogliare degli elementi non essenziali un design, per farlo tornare a uno stato puro, semplice. Tuttavia, troppi designer sembrano pensare che uno deve continuare a togliere cose anche oltre il punto in cui sono cose utili e pratiche.

Se qualcosa è essenziale ma fa sembrare il design goffo o non elegante, il tuo lavoro come designer non è di eliminarlo  ma di capire come “farlo funzionare”.

sii neutro

Questo non significa che il tuo design deve essere completamente privo di personalità ma se l’accessibilità è il tuo obbiettivo, il tuo design dovrebbe fornire un modo facile per l’utente di capire il contenuto. Ricorda, l’obbiettivo principale di un designer grafico e web è di presentare un contenuto, di nutrire le persone con l’informazione che stanno cercando causandogli meno mal di testa possibili.

sii onesto

Il tuo design ha bisogno di comunicare l’intento del tuo contenuto chiaramente e onestamente. Se il tuo utente si fa l’idea sbagliata di cosa il tuo contenuto sta cercando di dirgli, il tuo design onestamente non sarà abbastanza!

Non ci sono trucchi necessari in questa fase, tutto riguardo il design del tuo sito web -le brochure, i volantini o i poster, dalle grafiche sotto il fold ai colori- dovrebbe essere suggestivo del prodotto che viene venduto o dell’informazione che viene consegnata.

ricerca una dimensione senza tempo

Ovviamente non sta a noi dire cosa diventerà senza tempo e cosa svanirà nell’oscurità. Ma ci sono certe regole che puoi seguire per essere sicuro che il tuo design eviti strati di trend di passaggio che distruggerebbero la sua longevità. Prima di tutto, se qualcosa sembra essere un trend, probabilmente lo è. La cosa che ti aiuterà di più è leggere. Non parlo di leggere blog di design e nemmeno siti web, benché siano ottime risorse per tenersi aggiornati e mantenere la velocità dei tuoi compagni designers.

Ma certi fondamenti di design sono basici e importanti abbastanza da essere stampati nei libri ed essere ripetuti di nuovo e di nuovo in altri libri, articoli e blog. Più rimani vicino a questi fondamenti, più senza tempo sarà il tuo design.

illustrated inspired Braun Speaker by Andrew McClintock
Non pensare che solo perché qualcosa è “classico” allora deve essere noioso. E’ vero che certi approcci funzionano meglio di altri quando crei del design che parlerà sia all’utenza del presente che a quella del futuro, ma tieni a mente che quel lavoro classico è prodotto ogni giorno da professionisti creativi. Potrebbe essere “contemporaneo” oggi ma dagli una decade o due. Sarà fra i grandi nelle librerie di design di tutto il mondo.

meno “Design”

Se menzioni la parola “design” nel contesto sbagliato, alcune persone si faranno l’impressione di qualcosa di meticoloso e puntiglioso. Non è quello che vuoi.  Il tuo lavoro in quanto designer è di aprire la strada al contenuto. Si, il design può essere bello e una forma d’arte con tutta quella roba soffice e tiepida. Tuttavia, la priorità è sempre il contenuto.

Un modo di pensarla è “l’assemblaggio” contro “l’ornamentazione”. Il sushi, con i suoi chiari, separati componenti – ognuno importante per l’insieme nel modo particolare – è un perfetto esempio di un tipo di design d’assemblaggio. Il pesce, il riso, il wasabi, la maionese giapponese, le alghe marine sono come blocchi di contenuto per il design, il quale deve essere organizzato per formare un completo, conciso, delizioso boccone.


Ci sono infiniti modi in uno chef di sushi può assemblare e riarrangiare questi blocchi di contenuto e questo tipo di creatività può aiutarti molto nella creazione di un design pulito.

L’ornamentazione, d’altro canto, è come la spruzzatina sul cupcake. O per rimane in tema sushi, è il piccolo contenitore di salsa di soia o la foglia usata per tenere il wasabi extra di lato. Ottimi da avere a disposizione ma essenziali? A meno che tu non sia un fan sfegatato delle fogli di wasabi non penso.

vai a fondo

Solo perché il tuo design è semplice, ciò non significa che tu non possa diventare smielato con i dettagli. Ricorda che, in un design minimal, il risultato finale che il tuo utente vedrà illuminerà tutti gli errori del tuo lavoro. Senza nessun pietà potrei aggiungere. Quando gran parte del tuo design è spazio bianco, ci sono pochi posto per “nascondere” cattive composizione o una scelta tipografica sfortunata.

sii conservativo

Non intendo che il tuo design deve sembrare come il vestito di una anziana bibliotecaria ma dovrebbe essere conservativo nei termini delle risorse che usa.
Una nota che dovrei fare qui è che quando lotti per creare una design semplice e minimalista, la maggior parte delle tue risorse dovrebbe essere spesa nelle fasi iniziali.

Immaginala come una torta. Quando tiri fuori tutti gli ingredienti sul tavolo della tua cucina le prime volte può essere tutto disordinato e confusionario.


Ma poi una volta che hai lentamente iniziato a combinare le cose nell’ordine corretto, sai che tutte le energie che hai speso nella preparazione degli stadi iniziali ne è valsa la pena. Non puoi vedere tutte le cose che c’erano all’inizio nel prodotto finale ovviamente ma sai che ci sono e sono lì.

Il design è la stessa cosa, è proprio come la torta in cucina. Devi produrre un design semplice, chiaro e singolare che riveli molto poco riguardo a tutto quello che hai fatto.

prenditi il tuo tempo

Per dare ai dettagli del tuo design la tua piena attenzione, hai bisogno di prenderti il tuo tempo. Potrebbe sembra un luogo comune ma sono sempre sorpreso dall’opinione che molti designer sembrano avere che un design semplice è in qualche modo “più facile” o che richieda meno tempo.

illustrated inspired Braun AW20 Watch by Barry Lachapelle
Il design minimalista è come un’illusione ottica. Il risultato finale può sembrare pulito e semplice ma è proprio quello il punto. E’ come un balletto – l’intento è di far credere allo spettatore che stanno vedendo qualcosa di semplice, realizzato senza troppo sudore. Se lo fai, allora lo stratagemma è stato un successo. Ma non pensare che richieda meno sforzi raggiungere questi risultati. Se proprio c’è una differenza è che richiede più tempo.

sii capito

Il buon design non ha bisogno di essere spiegato. Lo sai, anche se non ci hai mai consciamente pensato prima. Pensa a tutti gli oggetti che usi su base quotidiana. Le probabilità sono buone che tu non debba leggere un manuale per imparare a usare ognuna di esse. Il tuo design può essere altrettanto diretto. Nota bene che non ho detto che sarà così diretto – solo che può esserlo.

Richiede tempo arrivare a tale semplicità e compostezza ma un modo per approcciarlo è di prendere nota esattamente di cosa ti piace riguardo i tuoi più semplici design preferiti. E’ la facilità di utilizzo? quanto è approcciabile? l’assenza di disordine?

fallo bello

Dieter Rams dice un buon design deve essere tanto bello quanto utile. Come mai? “Perché l’estetica qualità di un prodotto è integrale a quanto è utile perché i prodotti sono usati ogni giorno e hanno un effetto sulle persone e il loro benessere”. Ciò significa che più guardi a qualcosa e più ha un un impatto sui tuoi sensi.

Se stai guardando a un orrendo design giorno e notte, internalizzerai alcune delle sue brutture e affliggeranno l’interazione con il mondo in qualche modo. Forse sarai un pò più irritabile con il barista al bar durante il mattino, o aggrotterai un pò di più le sopracciglia e stringerai più forte la ruota del volante  quando sei bloccato nel traffico.


Se sei un designer, quella bruttura può affliggerti in modi anche peggiori. Se tutto quello che guardi è cattivo design, hai una sensazione – o quella che Rams chiama “estetica”- che rifletterà ciò e scombussolerà la tua percezione di quello che è un “buon” design. Dopo essere stato sottoposto a lungo a del pessimo design, il tuo output soffrirà e abbastanza presto potresti ritrovare te stesso a contribuire a del design terribile invece che combattere contro di esso.

Non fare ciò ai tuoi fratelli designer. Prenditi cura tramite la tua estetica e ispira anche gli altri ad essere e produrre il loro meglio.

In Conclusione

Il semplice è un modo di vivere. Devi pensare veramente duramente riguardo cosa escludere in un certo design, e come saprai che è la cosa giusta da fare. Non è un processo semplice ma più continui a provarci e più scoprirai cosa funziona e cosa non.

Ed ecco le 10 regole originali di Dieter Rams

10 Regole Buon Design - Dieter Rams Infographic

 

Vuoi restaurare il tuo sito web e ti piacerebbe se facesse vergognare tutti i tuoi concorrenti? Richiedi un consulto gratuito: info@rossofenice.com