Articoli marcati con tag ‘flat design’

La campagna minimal di McDonald’s

Dopo “no logo” di McDonald’s del 2013, TBWA Parigi ha creato degli annunci in flat design che mettono in evidenza gli aspetti di sei elementi del menù della catena di fast food quali il big mac, cheeseburger e le patatine fritte.

mcdonalds-PICTOGRAM-TBWA-big mac, 2014 mcdonalds-PICTOGRAM-TBWA-cheeseburger 2014 mcdonalds-PICTOGRAM-TBWA-chicken mcnuggets, 2014 mcdonalds-PICTOGRAM-TBWA-fillet-o-fish, 2014 mcdonalds-PICTOGRAM-TBWA-french fries, 2014 mcdonalds-PICTOGRAM-TBWA-sundae, 2014

via: www.designboom.com

 

Le 4 tendenze colore sul Web

Proprio come ogni altro elemento del web design, i colori seguono le mode. Le tendenze di quest’anno sono molto diverse: colori brillanti al neon uniti ad una scala di grigi che aggiungono brio e modernità, mentre i colori pastello conferiscono morbidezza. Queste nuove tendenze si combinano perfettamente, aiutando a distinguere gli elementi e delineando sezioni.

1. Scala dei grigi con toni brillanti2013 Tendenze colore sul WebQuesto schema è notevolmente aumentato in popolarità negli ultimi tempi e ciò risulta evidente in quanto sono sufficienti solo un paio di colori vivaci per attirare l’attenzione ed evidenziare le informazioni importanti e gli elementi interattivi. La semplicità conferisce al design una grande raffinatezza.
2. Pastelli chiari 2013 Tendenze colore sul WebIl mix di toni neutri e pastello fornisce una rappresentazione accogliente che aumenta con l’inserimento di illustrazioni vettoriali o disegnate a mano con caratteri tipografici naturali.
3. Neon ed abbaglianti 2013 Tendenze colore sul Web Il tutto fornisce un look divertente.
4. Blocchi colore2013 Tendenze colore sul Web Versatili e funzionali definiscono categorie, sezioni o elementi singoli. Molto utilizzato nel flat e minimal design.

Se non si vuole seguire le nuove tendenze, è possibile utilizzare
Color Explorer che offre una serie completa di strumenti, come l’estrazione di colore, corrispondenza e conversione.

2013 Tendenze colore sul Web

Shutterstock  e TinEye sono delle risorse per cercare immagini in base al colore e parole. 2013 Tendenze colore sul Web

Flat design e le tendenze colore

Ci siamo già occupati in vari post dell’argomento. Designmodo ci indica ora quali sono i colori da utilizzare. Il flat design usa effetti non tridimensionali ed il look è di per sé semplice, diretto e di facile utilizzo e ciò lo rende sempre più di tendenza sia per il mobile che nel web design.

roybarber
squidee

Il flat design ha a disposizione una varietà di colori, ma i designers per lo più scelgono tonalità forti, brillanti e sature. Per il flat design non vengono però rispettate le regole tradizionali sulla combinazione e la corrispondenza dei colori.

I colori brillanti
Flat-UI-Colors
weather-app
weather-widget
I colori brillanti sono  una caratteristica associata al flat design e funzionano bene su sfondi sia chiari che scuri, creando contrasto e coinvolgendo gli utenti. FlatUIColors.com indica una lista dei colori di maggior tendenza quali i blu, verdi, gialli ed arancioni. Se si desidera associare con più colori brillanti è meglio optare per la semplicità scegliendo tra quelli che hanno analoghe tonalità.

brights colors
Per maggiore impatto lo sfondo dovrebbe essere bianco o nero.
Quelli di tendenza sono i blu, i verdi e i viola.

I colori retrò
Invoisse
my drinks by Jakub Antalík
Bordo Gecko
pattern-sun
I colori retrò, come indicato in un altro post, sono meno saturi, le loro combinazioni sono con l’arancione, giallo e a volte il rosso ed il blu.
retro color
I retrò hanno una maggiore resa quando sono il colore dominante insieme ad immagini o tonalità tenui. Di tendenza sono l’arancio, i toni della pesca o prugna ed il blu scuro.

Il colore monocromatico

Flat List
foundation1
blue-monorning

Molto usato nel mobile e il design app è il colore monocromatico in combinazione con il bianco e nero. Il più utilizzato è il blu, ma anche il nero, il grigio o il rosso per i buttons o i calls to action. Un’altra opzione è quella di creare un effetto monocromatico con lievi variazioni di colore ad esempio dal blu si arriva gradatamente al verde.
coloro monocromatico
Anche in questo caso ci deve essere il contrasto. Di tendenza sono i blu, i grigi ed i verdi.

Infine Designmodo ha messo a disposizione gratuitamente un Flat UI pack su GitHub.

Esempi di icone in flat design

Ci siamo già occupati in un altro post della tendenza del flat design che punta sulla semplicità, Metro di Microsoft è probabilmente l’esempio più famoso. Designmodo per promuove questa nuova tendenza ha raccolto icone in flat design.

Icona Responsive
Calendario e Notte Icona
Mail Icon
Iconex
Varie.  Icone vettoriali
Set Design Icons piatte vol.  1
Due icone piane
Profili Glyph
Stiamo assumendo
Tipi di file
Retina
Monika sta lavorando
Icone piane
Piazze
Icone piane di Ididi
Navigazione
Gimpo Studio icone piane

Comfort Icone
DoFlat Icona
FlatMail Icona
Ispirato da Google
Icona Semplice Parte 1
Piatto Icona
Hashtag Trending
Set di icone per il Nuovo Mixpanel
Icone piane

Infine Designmodo ha messo a disposizione gratuitamente un Flat UI pack su GitHub.

Il ritorno del flat design (design piatto)

Il flat design, in auge negli anni scorsi , sta ritornando di tendenza in molti nuovi siti web e nell’app design grazie anche all’introduzione di Windows 8  e del nuovo design di Google.
porri
negativo
Windows Phone
thenounproject
spelltower
Sagmeister
Il flat design non utilizza alcun effetto tridimensionale. Le icone e gli elementi sono nitidi e senza bordi sfumati ed ombre. A causa della sua natura semplice, pulita e minimalista, il design piatto funziona meglio con messaggi o prodotti che enfatizzano analoghe idee.

Come realizzarlo
Svpply
jetsetter
esperienziale

Colore. Si utilizzano molti colori vivaci e contrastanti.
Tipografia. Le parole sono essenziali. Si possono usare diversi caratteri tipografici che funzionano con il messaggio (possibilmente no Arial). Il flat design è semplice e minimalista e quindi anche i font dovrebbero esserlo come il Sans Serif.
Parole. Spesso includono anche l’inserimento di frasi, ma assicurarsi che ogni parola e importante per mantenere un design semplice.
Elementi semplici. I buttons non hanno bisogno di essere eccessivamente progettati e complicati. Basta che siano definiti e chiari grazie al colore, ben delineati, con l’uso di un font o di forme.
Creare la gerarchia. E’ di vitale importanza creare un chiaro senso di gerarchia. Nel design piatto sono meno evidenti. I link quindi dovrebbero essere chiari, di un colore diverso o contenuti in una box e cliccabili.

Risorse di flat design
Pinterest piatto

pinterest2 piatto
piazza ui

Piatto UI Dribbble
Piazza della UI

via designmodo.com