rompiamo gli schemi!

Nel web design degli ultimi anni si è affermato lo standard dettato dal Material design di Google e dal Framework Twitter Bootstrap: ciò ha reso buona parte dei siti molto simili, con minime varianti sul tema di base. E la grafica sul web è diventata un elemento neutro, di solo supporto alla navigazione, perché un sito con impostazione visiva standard, senza stravaganze, è di facile fruizione.

Tuttavia l’eccesivo cristallizzarsi di questo standard, ha portato anche una flessione della carica persuasiva per siti che hanno funzione di brand awareness. Più in generale per tutti i siti, si registra un calo dell’appeal per gli utenti e potenziali clienti, che ormai non riconoscono più un sito dal concorrente.

Da qui l’esigenza, già manifestata nel 2016, di rompere gli schemi e sperimentare, per tornare a catturare l’attenzione dell’utente, anche e sempre più tramite l'utilizzo di brevi animazioni.  Suscitare emozioni nel proprio target e rimanere impressi nella sua memoria, rimane il miglior modo di creare conversioni, nell’immediato e a lungo termine.

Di seguito alcune tendenze che interpretano questa esigenza di cambiamento.

1. HOMEPAGE ESSENZIALI E HERO AREA ACCATTIVANTE

homepage

esempio: microsoft

La prima impressione è quella che conta! E il biglietto da visita del vostro sito è la Hero area: ossia quella porzione di schermata visibile prima di un eventuale scrolling. Questa schermata deve risultare accattivante e d'impatto, per creare interesse a visitare il resto della pagina e del sito, senza quindi aggredire da subito il visitatore con troppe informazioni.
Pertanto l’indicazione è di progettare una Hero area leggera e snella, e posticipare i contenuti nelle sezioni successive della Homepage: una frase incisiva e un'immagine suggestiva o una piccola animazione bastano a introdurre l'utente e a creare un' aspettativa.
Questo approccio è facilitato dal largo utilizzo dello scrolling sul mobile, che porta gli utenti a scorrere di più anche sui siti web desktop.

Alcuni siti optano anche per soluzioni più estreme: ad esempio avere una homepage che coincide con la Hero area e viene utilizzata solo per smistare target diversi al punto di interesse. Questa scelta va valutata attentamente in quanto la mancanza di contenuti potrebbe avere risvolti negativi sul processo di indicizzazione.


2. NUOVE POSIZIONI PER IL MENU

menu siti web

esempio menu a scomparsa: thecapitol

La barra di navigazione non deve necessariamente essere “incollata” in alto alla pagina e…non deve necessariamente essere una barra!

Sia che si parli di desktop che di mobile, vediamo ora nuove posizioni per i menu: navigazione verticale, orizzontale in fondo alla pagina, menu per mobile anche nella versione desktop e tramite pop-up che riempiono tutto lo schermo. Le voci di menù posso essere aree estese e con una certa forma e non più semplici bottoni testuali.

Attenzione però... scegliere come presentare il menu, non deve mai diventare un esercizio di stile: piuttosto attraverso lo studio del vostro target e della user experience, è bene valutare dove e quando il nostro utente verrà facilitato nella navigazione, avendo a disposizione il menu in una posizione piuttosto che un'altra, e non rimanga invece disorientato!


3. GRADIENTI DUOTONE

grafica duotone

esempio: spotify

Spotify ha introdotto questo tipo di grafica che si sta rapidamente diffondendo, tanto che anche Facebook ora permette di creare post con sfondi duotone, ovvero sfondi con gradienti tra due colori brillanti e vibranti. Questo effetto viene applicato anche ad immagini fotografiche, esaltandone alcuni particolari e rendendole molto più suggestive e sofisticate.

immagini duotone

esempio: adidas

Il nome "Duotone" prende spunto da una tecnica di stampa che utilizza sfumature del medesimo colore, oppure accosta un singolo colore al nero o al bianco.

Nel web design dominato dallo stile Flat, questo tipo di grafica ha illuminato, dato nuova dinamicità e energia allo sfondo delle Hero area, spesso in abbinamento con scritte in bianco.

4. IL LETTERING CREATIVO DIVENTA PROTAGONISTA

lettering web marketing

esempio: gnosh

La tendenza a proporre messaggi concisi ed incisivi tramite l’uso di un lettering ricercato e ingigantito, era già presente nel 2016. Ora l’utilizzo di queste grafiche viene ancora di più esasperato, portando le scritte ad essere spesso l’unico elemento presente nella Hero area, diventando il vero protagonista che accoglie i visitatori sul vostro sito.

I font scelti in questo approccio sono molto ricercati e con grazie oppure calligrafici, in netto contrasto quindi con i font scelti per il menu, titoli e testo. La scritta si staglia decisa sullo sfondo: tipicamente troviamo scritte bianche su uno sfondo colorato/un’immagine/un video, oppure su sfondo bianco scritte in colori brillanti.

Sicuramente l’impatto visivo è preponderante, ma l’avvertenza è quella di non dimenticare la leggibilità della scritta!

5. UTILIZZO DI GIFS, CINEMAGRAPH, ANIMAZIONI E VIDEO

animazioni siti web

esempio: autopilothq


Da anni abbiamo dati che evidenziano come i video siano in grado di creare engagement come nessun altro tipo di contenuto.

Tuttavia la novità del 2016 che si andrà affermando sempre più nel 2017 è la realizzazione di brevi e semplici animazioni a supporto della navigazione, oppure con fini esplicativi del prodotto in vendita o ancora, semplicemente come dettagli per rendere divertente e accattivante l’esperienza sul sito.

animazioni per siti internet

esempio: www.helloheco.com

6. MAGGIORE USO DELLE MICROINTERAZIONI

Le microinterazioni sono brevi (o brevissime) animazioni interattive che hanno due funzioni principali :

-       Agevolano la comunicazione tra l’interfaccia e l’utente.  Servono ad esempio a fornire feedback circa il risultato di un azione, a confermare il completamento di una fase ( e il passaggio alla successiva ) e a segnalare eventuali errori.

interazione siti internet

-       Aumentano il coinvolgimento del pubblico. Invitano il singolo utente a personalizzare/votare/commentare i contenuti proposti, tramite un’interazione semplice ed immediata, molto spesso pensata in ottica mobile-first.

interazione emoticon

esempio: facebook

Se il primo utilizzo citato è ormai imprescindibile per fornire un’esperienza positiva al visitatore, nel 2017 vedremo un maggior utilizzo di microinterazioni anche in ottica di engagement e retainment del pubblico. L’introduzione delle Reaction sui post di Facebook va proprio in questa direzione, aumentando le opzione di scelta rispetto al classico Like.  

7. DAL MATERIAL DESIGN AL TACTILE DESIGN

tactile design

esempio: motorola

Seguendo le indicazioni del Material Design gli sfondi sono stati per anni “appiattiti” su uno stile Flat, patterns e texture sono stati per lo più banditi e lo spazio rappresentato sul web è divenuto immateriale.
Di recente invece, si ricomincia ed introdurre trame agli sfondi, addolciti talvolta dall’uso di gradienti e trasparenze. Questo stile è improntato alla volontà di avvicinare il mondo immateriale del web al il mondo concreto del visitatore: per questo vediamo gli esempi più efficaci nei casi di e-commerce che ripropongono trame capaci di immergere il pubblico in un negozio “quasi fisico” nel quale sembra possibile quasi toccare i vari materiali.

8. ROMPERE LA GRIGLIA

no griglia2

esempio: hometowntrolley

L'esigenza di evasione dalla griglia imposta dai framework sui quali sono costruiti ormai la grande maggioranza dei siti, è manifesta!

Un sostegno viene dai nuovi sistemi di sviluppo, come Flexbox che consentono maggiore elasticità nella costruzione delle pagine, ma che non sono ancora molto diffusi.

no griglia

esempio: flexboxgrid

Mentre l'approccio grafico propone sempre con maggior frequenza elementi di discontinuità che sbordano e rompono la rigidità statica proposta dal sistema modulare a griglia.


noo griglia

esempio: thecubaconsortium

no griglia4

esempio: autopilothq


CONCLUSIONI:

Il 2017 sarà quindi un anno di creatività e sperimentazione, non solo per le agenzie creative ma per tutti le aziende e società di servizi che quotidianamente investono nei propri siti, per raggiungere clienti ( e/o utenti ) nella maniera più efficacie ed efficiente.


Credits:                                                                                               
http://www.awwwards.com
https://www.uxpin.com
https://designmodo.com

MDEIG 0

Miriam MONZA
Grafica + Comunicazione Integrata

certificazione google adwords 

usiamo cookies a fini statistici per migliorare l'esperienza utente