Da qualche anno a questa parte si è assistito ad un cambiamento radicale nella progettazione e nel design delle pagine web. Due cambiamenti: il primo è l’avvento delle griglie (es: Bootstrap), il secondo è la nascita del flat design.
Il flat design è uno stile volto a creare semplici interfacce esteticamente attraenti ma allo stesso tempo funzionali e facili da usare, indipendentemente dal device utilizzato per la visualizzazione delle pagine. Inoltre, elemento non trascurabile, il flat design può avere un notevole impatto positivo in termini di prestazioni, altro fattore che va a migliorare la user experience.
Il mondo degli smartphone guida la tendenza al flat
L’esplosione di Internet e l’uso intensivo di applicazioni mobile hanno trainato questo rinnovamento nelle pagine e l’adozione di queste interfacce.
Una serie di fattori ha contribuito al successo del flat design, tra cui:
1. trasversalità: impiegato prima su desktop e poi su mobile dalla stessa Microsoft (famosa la grafica apparsa sul suo sistema operativo, piatta senza effetto 3D, con icone monocromatiche dai contorni netti) il flat design ha fatto appunto breccia anche su altri sistemi operativi;
2. semplicità: la linearità con cui vengono realizzati elementi grafici ha reso fruibili e facili da capire i contenuti anche su display piccoli come quelli degli smartphone.
Le caratteristiche grafiche e strutturali di un sito flat
Il flat design ha portato con sè una vera e propria filosofia di progettazione delle pagine. Se prima non c’era nessun elemento ricorrente tra i milioni di siti ora possiamo invece riconoscerne molti, rendendo i siti molto più intuitivi e fruibili.
Ecco alcune caratteristiche da tenere in considerazione quando si progetta un sito flat:
La Struttura grafica
La tendenza è quella di sfruttare tutto lo spazio disponibile e di eliminare, se possibile, vincoli strutturali come bordi, riquadri e ombre. Si riduce l’utilizzo di inutili texture o l’uso improprio di “pesanti” immagini di fondo e si da spazio a badge e icone chiare: l’interfaccia deve essere minimale semplice ed intuitiva.
Colori
Utilizza colori accesi, vivaci e forti, senza aver paura di osare!
Non sono ammessi ornamenti, decorazioni ed ombre, nè tanto meno effetti 3D, texture e pattern; il flat design non li prevede, le tinte devono essere piatte.
Spazio quindi a colori nitidi e palette dai toni “aspri” dove verde, azzurro, arancio, viola o magenta vengono utilizzati senza timore.
Icone
Le icone sono uno dei punti di forza di questo stile, devono essere semplici e di facile interpretazione, le forme geometriche che le costituiscono sono piatte, ben definite e bidimensionali. Inoltre c’é la tendenza a sostituire le parti testuali in eccesso con icone e simboli identificativi.
Font
Il lettering diventa una delle caratteristiche principali di questo design. Font minuscoli e testi poco importanti rispetto alla grafica lasciano spazio a caratteri leggibili e di grandi dimensioni.
C’è dunque la possibilità di scegliere tra diverse tipologie di font, non si è più rilegati ai classici caratteri tipografici, ma c’è molta più libertà grazie all’uso dei web font.
Bottoni o Tasti azione
Anche questi semplici e grandi; gli angoli smussati vengono abbandonati del tutto o quasi, a favore di forme dagli spigoli vivi.
Anche gli e-Commerce ne traggono vantaggio
Tra tutti i tipi di siti che possono godere i vantaggi di questa nuova tendenza ci sono sicuramente gli e-commerce.
Ma perché adottare un “design flat” per il proprio sito o ecommerce?
Ovviamente banale a dirsi è che in generale un sito che aggiorna la sua veste grafica risulterà più piacevole, curato e susciterà fiducia e attenzione verso l’utente, ma se fosse solo per questo non varrebbe la pena di svecchiarlo. Il motivo nettamente più importante per passare al flat design è un altro: eliminare elementi visivi di distrazione normalmente presenti nei siti, in modo che i protagonisti assoluti diventino le immagini, i prodotti.
Questo processo combinato con il sistema a griglie per la gestione della visualizzazione sui dispositivi mobile e ad una navigazione chiara, razionalizza e ordina nella pagina tutte le informazioni che si vogliono comunicare, limitando alle sole call to action il compito di guidare l’occhio ma soprattutto la mano dell’utente verso l’acquisto.
Il flat design può essere arricchito grazie al material design, aggiungendo alcuni colori alla progettazione complessiva, in modo da rendere le pagine più seducenti per gli utenti e invogliarli a fare acquisti sull’e-commerce. Anche in questo caso è importante applicare le regole della psicologia del colore. Non è importante scegliere semplicemente i colori che più piacciono, ma quelli che suscitano l’istinto di comprare. L’arancio e il rosso ad esempio sono tra i colori che possono spingere un utente al clic sul tasto “compra ora”.
Attenzione però a non esagerare. Infatti esiste un rovescio della medaglia anche per il flat design.
Il rischio infatti è quello di passare da una giusta razionalizzazione degli elementi ad un drastico design minimalista in cui pulsanti, tab e scrollbar appaiono come semplici rettangoli colorati, molte volte con una diversa (molto leggera) gradazione di colore. In alcuni siti capita di non riuscire più ad individuare facilmente i pulsanti e questo è estremamente controproducente, specie in un e-Commerce. “Acquista”, “Prosegui” , “Vai al carrello” e “Concludi l’acquisto” devono essere ben riconoscibili, contrastati, devono staccare dal resto della pagina. I pulsanti “Ghost” dovrebbero essere usati veramente con parsimonia in quanto hanno una visibilità molto minore quasi alla pari di un link testuale.
Quindi bisogna prima di tutto cercare di progettare con intelligenza qualcosa di usabile, solo in questo modo si donerà una vita più lunga e remunerativa al nostro progetto.