Design, PurpleI 12 macro trend da seguire nello sviluppo di un prodotto digital nel 2018

Nello sviluppo di un prodotto digital dobbiamo tenere in considerazione non solo l’esperienza utente ma bilanciarlo con la giusta cura estetica. Cosa ci aspetta in questo 2018? Abbiamo raccolto 12 macro trend che pensiamo possano affermarsi nei prossimi mesi.

Cosa sono i Design trend e perché dobbiamo sempre conoscerli

Solitamente chiamiamo trend quelle caratteristiche che, in ambito design, possono avere il potenziale per affermarsi.

Ci siamo lasciati alle spalle un anno pieno di innovazioni, alcune di loro verranno lasciate indietro, altre invece, adottate da un numero di designer in crescita, stanno avendo un’evoluzione che ci accompagnerà per tutto il 2018, altre ancora sono invece senza tempo.

Conoscerle e saperci orientare nel mondo del design anche al di fuori del puro sviluppo è molto importante per avere una percezione estetica contemporanea. Questo si traduce in un’ispirazione e delle linee guida fondamentali per noi che ci occupiamo non solo di sviluppo ma anche di consulenza nella comunicazione digitale, in modo da poggiare su solide basi per proporre soluzioni innovative sia dal punto di vista tecnico che, appunto, del design.

I punti chiave che toccheremo sono:

• Minimalismo

• Loghi dinamici

• Illustrazioni retrò

• Colori & Gradienti

• Forme fluide

• Animazioni

• Profondità e design semi-flat

• 3D

• Realtà Aumentata

• Tipografia 3D

• Tipografia

Per creare e rinfrescare questa visione “globale” attraverseremo questi punti chiave del design dal classico minimalismo all’ormai immancabile uso delle animazioni e della grafica in 3D.

VUOI CONSULTARE LA PRESENTAZIONE? Seguici su Slideshare.

1) Minimalismo

Il famoso “less is more” è quello che potremmo chiamare un macro-trend in quanto è il filo conduttore di molti progetti di design.
E’ certamente una delle correnti che non smette mai di evolvere, la gestione del whitespace viene ridefinita continuamente da anni.
Anche se gli elementi visibili sono essenziali, la cura dei dettagli è maniacale, la sensazione percepita è che tutto sia dove dovrebbe essere, consegnando il messaggio in maniera diretta ed elegante.
Alcuni esempi sono gli attuali layout split nei quali lo schermo viene letteralmente diviso verticalmente a metà, una divisione che oltre che visiva è certamente funzionale a livello semantico.
Pensiamo infatti alla divisione testo immagini o a un vero e proprio studio di architettura delle informazioni e quindi a una organizzazione visiva quanto gerarchica dei contenuti.
Con l’aumento della quantità di informazioni si sente il bisogno di un approccio così ben strutturato che dia la possibilità di adattarsi a vari contesti senza perdere di vista UX e estetica.
Un’evoluzione dello “split design” è l’utilizzo di griglie asimmetriche, ossia spingere i contenuti a staccarsi dalla rigidità delle solite grid (che sono sempre state simbolo di ordine e pulizia) e ottenere un bilanciamento tra i vari lati del design in modo che nessuna delle due parti prenda il sopravvento.

2) Loghi dinamici

C’è stata una grande evoluzione nell’ambito dei loghi dettata soprattutto dalla richiesta di variazioni adatte a contesti digitali come il sito web, l’icona della mobile app, l’avatar per i social media.
In molti casi lo stesso logo non è funzionale per ogni dispositivo e ogni viewport, ed è per questo motivo che molti designer hanno iniziato a creare le style guides al brand includendo librerie che comprendono un logo primario (full size), un logo secondario (spesso usato per social media e icone delle eventuali app) e un logo-icona utilizzabile in contesti molto piccoli (es. favicon o piccole icone).

Nonostante tutte queste varianti la leggibilità e riconoscibilità del logo e del brand di appartenenza non devono venire meno.
Se si riesce in questo intento il logo ottenuto sarà molto più flessibile e versatile, utilizzabile dunque senza limitazioni in qualsiasi tipo di progetto.
Un altro aspetto interessante e dinamico che si sta affermando è l’animazione dei loghi.

Questa pratica, un tempo utilizzata soprattutto in ambito televisivo, ultimamente ha preso piede anche in ambito digital (fubiz e Google due esempi su tutti) dove l’animazione del logo viene percepita come un’ulteriore estensione del brand. Gli esempi migliori sono quelli dove il movimento è appena percepito, sia che si tratti del logo presente in alto a lato in header oppure del protagonista principale del layout.
Certamente questo tipo di evoluzione serve a fornire maggiore memorabilità e identità distintiva al brand.

 

3) Illustrazione retrò

PSB Refinance – Inside The Head

In questo contesto è doveroso inserire una menzione particolare alle illustrazioni dal sapore retrò che si rifanno ai canoni estetici degli anni ’20 o ’30.
Queste stanno avendo una nuova giovinezza sia per l’utilizzo esteso in ambito pubblicitario e della moda ma anche perché, in ambito digital, con una leggera aggiunta di profondità e leggere animazioni sono ottimo materiale per uno storytelling interessante ed elegante data la loro natura vettoriale.

4) Colori & Gradienti

Il discorso sui colori maggiormente utilizzati è abbastanza riconducibile all’utilizzo quasi ossessivo di gradienti, pattern e palette dal gusto retro (in questo caso anni ’80/’90).
Quello che stiamo vedendo e che sicuramente continueremo a vedere quest’anno sono sfumature molto soffici o appena accennate tra colori molto brillanti.
Quello dei gradienti 2.0 è un trend riemerso dal 2015 soprattutto ad opera di Instagram e Spotify e poi abbracciato da buona parte della comunità dei designer, proprio per ricreare quel sinonimo visivo di freschezza, orientato alle generazioni digital, proprio dei due brand.
I colori molto luminosi e appariscenti, se vogliamo “fluo”, propri degli anni ’80 e ’90 così come i pattern memphis sono ormai parte di illustrazioni e layout. Questo tipo di estetica viene utilizzato con successo e risultati inaspettati anche da brand che solitamente non sono famosi per questo tipo di comunicazione. Un esempio su tutti il microsite di Ford (Make it drivable) che utilizza dei colori inusuali per il brand per trasmettere un’idea di innovazione e sfida tecnologica. (Guarda caso i colori assomigliano a quelli di Purple Network!)

5) Forme fluide

A differenza delle forme poligonali, grande trend dello scorso anno, stanno guadagnando popolarità forme più fluide.
Questo effetto “lava lamp” nei nostri browser sembra essere una naturale evoluzione delle forme poligonali e riesce, anche grazie ad animazioni studiate ad hoc, a trasmettere una sensazione di movimento tridimensionale anche utilizzando forme bidimensionali.

6) Animazioni

Contemple – Awwwards Conference

Ogni trend nominato finora trova il suo spazio in layout dove i vari elementi entrano in scena tramite animazioni che, orchestrate in maniera armonica, concorrono a rallentare l’ossessivo scroll dell’utente e a catturare la sua attenzione.

Ninjatune – Heco

Per incentivare questa armonia e non lasciare mai lo spettatore a fissare uno schermo bianco anche le transizioni da pagina a pagina sono state arricchite con elementi che al click si mescolano o si scompongono per poi riorganizzarsi a caricamento avvenuto.
Allo stesso modo continua l’utilizzo e l’evoluzione delle animazioni on scroll e via drag con comparsa di elementi o movimento in parallasse con le quali alcuni studi hanno sperimentato diversi tipi di scroll di tipo orizzontale.

7) Futurismo

Più che futurismo avrei dovuto usare visione futuristica. Il trend in questione è un revamp degli anni 2000 quando il futuro, almeno quello immaginato, era Matrix, pieno zeppo di luci pulsanti, sequenze di numeri e tecnologia all’estremo.
Ultimamente però questa visione iper-futuristica del design ha trovato il suo spazio nella visualizzazione dei big data e in molti pannelli di analytics, nel tentativo di svecchiare e rendere più interessanti dei soggetti che per indole non lo sono: ossia i dati e i numeri.

La stessa visione è abbracciata dalle interfacce delle mobile app e dalle dashboard, durante questa ricerca ho notato che i maggiori fruitori sono le applicazioni di fitness e le nascenti di trading sulle cryptovalute, probabilmente per far percepire all’utente l’alta precisione e tecnologia dalla quale i valori a schermo sono stati elaborati.

8) Profondità e design semi-flat

Dopo gli ultimi anni di total flat design è sempre più forte il desiderio di  tornare ad aggiungere un po’ di profondità ai contenuti trasmessi, l’obiettivo è creare ulteriore interesse e dinamicità ad alcuni elementi su altri.
Per costruire questa gerarchia visiva c’è un limite sottile di ombreggiature e sovrapposizioni oltre il quale non è possibile spingersi. Anche in questo caso l’equilibrio è la chiave della corretta adozione e utilizzo di questo trend.
Questo trend, introdotto e guidato soprattutto dal material design (linguaggio visivo elaborato da Google), è costituito da ombre appena accennate con tonalità molto chiare e diffuse e la sensazione che i “blocchi” o i pulsanti siano leggermente in primo piano e sensibili nello spazio al tocco dell’utente.
Tale effetto è proprio più evidente quando enfatizzato dalle animazioni, magari muovendo diversi livelli di profondità in una composizione in parallasse.

9) 3D

Il design tridimensionale è in continua crescita e utilizzato in diversi ambiti di comunicazione, soprattutto con l’avvento di nuove tecnologie come la Realtà Aumentata e la Realtà Virtuale.
Vere e proprie opere d’arte, le nature morte (o still life) come gli esempi qui riportati fanno parte del nuovo modo di comunicare e presentarsi di alcuni brand (Adobe, Yoox, Squarespace e molti altri).
Anche in questo caso, guidati dal minimalismo, la cura del dettaglio delle modellazioni e il fotorealismo dei render contribuisce al posizionamento desiderato del prodotto o del brand in questione.

10) Realtà Aumentata

La continua evoluzione della realtà aumentata ha iniziato ad essere notata anche al di fuori delle industrie del gaming, del cinema e delle applicazioni mobile. Un esperimento interessante di applicazioni di tipografia tridimensionale su oggetti di tutti i giorni proviene dall’agenzia DIA Studio, specializzata in produzioni e installazioni video digital.

11) Tipografia 3D

La tipografia 3D è un trend in continua crescita, che è diventato importante per molti brand (ad esempio Nike) nell’ottica di voler affascinare e allo stesso tempo impressionare il proprio pubblico.
Come visto attraversando i vari trend precedenti è sempre più presente l’utilizzo di elementi tridimensionali in ambito web con possibilità pressoché infinite di riportare questo genere di estetica nei prodotti digital e renderli interattivi quanto affascinanti.

12) Tipografia

Continuando il discorso dei caratteri ma abbandonando il meraviglioso mondo del 3D, una delle tendenze imminenti vedrà i caratteri trasformarsi nel tema del design stesso, l’utilizzo di headline sempre più in grassetto, la creazione di un pattern o lavorando come una maschera che incorpora immagini.
La lettera diventa sia la protagonista che l’inquadratura attraverso la quale è possibile sbirciare altro contenuto visual, che sia un’illustrazione, una fotografia animata in parallasse o lo scorrere di un video.

E poi… Il ritorno dei Serif

Sans Serif non sarà più un must, e l’uso di caratteri serif, utilizzato in composizioni minimali e dall’aspetto elegante e pulito aprirà ancora più scenari a layout creativi.

Concludendo, i trend sono molteplici (questa era solo una selezione) e alle volte sono il risultato del mix di vari trend precedenti, utilizzati in maniera inusuale e talvolta molto audaci.
Non vanno intese come linee guida ferree da copiare per poter dire che siamo al passo con i tempi sono bensì delle ottime basi di partenza che vanno prese e modellate per adattarsi a nuovi progetti e sfide di tipo comunicativo.