Guardando al 2014, possiamo vedere alcune tendenze spettacolari emergere nel panorama del Web Design: effetti di parallasse, siti web a pagina singola, e molti altri.
Il Web design sta mutando ed evolvendo rapidamente, tuttavia, non rappresenta un prodotto finale bensì una risorsa nella presentazione di un prodotto, che collega le persone con altre persone, fornendo uno strumento o un servizio.
In questo articolo, vedremo alcune delle tendenze più importanti del web design di quest’anno. È qui che possiamo trovare la vera innovazione e nuove opportunità, alcune delle quali possono cambiare completamente il significato delle parole “sito web moderno“.
1) Responsive Web Design
Nel corso degli ultimi anni, il Responsive Design si è affermato come il nuovo standard del web design dedicato al mobile.
Certo, ci sono ancora discussioni riguardo il suo utilizzo, ma rimane un dato di fatto che il trend sia in crescita e sempre più siti scelgono di andare in quella direzione. Se questo era già vero nel 2014, nel 2015, può essere considerato la nuova norma nella realizzazione di un sito web o eCommerce ottimizzati per i dispositivi mobile.
2) Material Design
“Ci siamo sfidati a creare un linguaggio visivo per i nostri utenti che sintetizza i principi classici del buon design, con l’innovazione e le possibilità che offrono la tecnologia e la scienza. Tutto ciò è Material Design.”
Quallo che le linee guida di progettazione del Material fanno, è fornire regole coerenti e logiche di comportamento che riflettono la fisica del mondo reale, riportate in un ambiente digitale con tutte le libertà che comporta. L’ambiente Material è uno spazio 3D, il che significa che tutti gli oggetti utilizzano i 3 assi x, y, z.
Il modo in cui Google fa questo è sottolineando l’uso dell’asse z per creare un senso di profondità in cui gli elementi possono occupare diversi livelli. Per dimostrare che un elemento sta occupando un livello superiore sull’asse, vengono applicati degli effetti shadow sul bordo degli elementi. Questo crea l’illusione di uno strato (elemento interattivo) che esiste al di sopra di uno strato più basso (elemento diverso), che ha come obiettivo quello di guidare l’attenzione dell’utente e mettere a fuoco attraverso più fasi di un processo o una procedura, evitando confusione quando i layout cambiano o gli elementi vengono riordinati; inoltre, migliorano la bellezza complessiva dell’esperienza.
Nel Material Design vengono definiti tutti gli elementi di cui abbiamo bisogno per costruire una User Interface di ultima generazione:
– Stile
– Layout
– Animazioni
– Componenti
– Microinterazioni
– Patterns
– Usabilità
– Risorse
Ecco un’esempio lampante di Material Design
Link al sito ufficiale dove potete trovare le linee guida del Material Design create da Google.
3) Ghost Buttons
Un pulsante fantasma viene rappresentato con una forma di base piatta – quadrato, rettangolo, cerchio, diamante – senza background di riempimento. È completamente o quasi completamente trasparente, apparte il border del contorno che solitamente ha lo stesso colore del testo.
L’effetto hover riempie il pulsante con lo stesso colore del border, mentre il colore del testo viene invertito.
Questi pulsanti li troviamo spesso sui siti e sono collocati in punti strategici, come il centro dello schermo o sopra a grandi immagini/video in background.
4) Split Screens
Un modello per un layout splittato in due lati.
Ci sono forse molte ragioni per adottare questo modello, quella principale sicuramente nasce dalla necessità di realizzare un disegn che metta in risalto due elementi primari di pari importanza. Un approccio comune al web design è quello di classificare le cose in ordine di importanza. Questa importanza viene poi riflessa nella gerarchia e la struttura del disegno. Ma cosa succede se abbiamo il bisogno di promuovere o rappresentare due elementi con la stessa priorità? Questo approccio consente di dare risalto a entrambi e permette all’utente di selezionare rapidamente uno dei due.
Provate questo splendido tutorial per costruirne uno.
5) Aumentare l’Enfasi sui fonts (Typography)
Tradizionalmente i web type-kit hanno consentito l’utilizzo di font e caratteri stupendi da utilizzare sui siti web, ma allo stesso tempo risultavano troppo costosi. Il che ha significato che i siti che adottavano pesantemente il design tipografico tendevano a richiedere budget più elevati, e i piccoli imprenditori (e la maggior parte degli utenti di WordPress) rimanevano fuori dal divertimento.
Ovviamente la musica, è cambiata. I font-kit stanno diventando sempre più accessibili (o gratuiti come nel caso dei Google Fonts) e questo significa che c’è più libertà per i progettisti che lavorano con un budget più piccolo di portare le loro competenze riguardanti la tipografia sul tavolo delle proposte relative al progetto.
Ecco un meraviglioso esempio di Typography applicato ad un layout fullscreen.
6) Card Design
Le cards sono un gran mezzo per comunicare storie veloci. Infatti i grandi (e terribili) film del nostro tempo hanno tutte storyboard utilizzando una card come formato. Ogni card rappresenta una scena. Raccontare una storia. Pensate a quando sfogliamo un album fotografico, ogni foto racconta il proprio piccolo racconto.
Il Card Design è perfetto per i dispositivi mobili e le dimensioni delle varie risoluzioni presenti sul mercato.
Ricordate, i dispositivi mobili sono il cuore e l’anima del futuro della vostra attività, non importa chi sei e cosa fai. Sui dispositivi mobili, il card layout può essere rappresentato su uno smartphone, come un flusso verticale di attività. Le cards possono essere visualizzate orizzontalmente, aggiungendo altre colonne ad esempio quando un tablet viene ruotato di 90 gradi (landscape). Possono avere un’ altezza fissa o variabile.
7) Hidden menus (menù nascosti)
Sta diventando sempre più popolare per i siti web nascondere la schermata di navigazione fino a quando non si interagisce con un elemento posto nella parte alta (header) a sinistra o destra dello schermo.
8) Microinteractions
Le Microinterazioni di solito ricevono poca attenzione. Ma ignorarle del tutto è un errore. La differenza tra i prodotti che amiamo e quelli che semplicemente tolleriamo spesso si trova proprio nelle microinterazioni che abbiamo con quest’ultimi. Si può prendere ciò che di solito è noioso e facilmente dimenticabile e renderlo divertente e indimenticabile e quindi aumentare la fidelizzazione dei clienti. Se avete a cuore l’esperienza utente (UX), è necessario preoccuparsi delle microinterazioni.
Un buon esempio per capire meglio di cosa stiamo parlando.
9) Sticky elements (fixed blocks)
Sono elementi con posizione fissa. Tra gli elementi sticky più comuni, sicuramente la testata (header), il footer e la sidebar.
Il più delle volte l’intestazione, come la sidebar vengono fissati per garantire che dopo lo scrolling della pagina, la navigazione del sito sia sempre, velocemente raggiungibile. Questo è particolarmente vero quando si tratta di un un sito web single page oppure di un magazine.
Il tutorial che segue, illustra un buon esempio di sticky sidebar
Mentre qui trovate una libreria spettacolare per creare facilmente elementi sticky come sticky header/footer.
10) Flat Design
In passato, molti web designer addottavano lo scheumorfismo tanto caro a Steve Jobs. Questa corrente di design altro non fa che riproporre in edizione digitale e virtuale ciò che si trova nella vita reale. Per esempio la grafica della pelle dell’agenda, quella della carta per il block notes, il finto cotone o i filtri/pulsanti di metallo. Equivale a riproporre gli oggetti reali sotto forma grafica.
Questa tendenza ha lasciato il posto da un paio di anni alla tendenza del design piatto (Flat Design), che si oppone a tutte queste tecniche di progettazione “artificiali”, in favore di un’estetica digitale semplificata.
Il Flat Design è un approccio design minimalista che enfatizza l’usabilità. Tra le sue caratteristiche troviamo: design pulito, bordi nitidi, colori brillanti e illustrazioni bidimensionali/piatte.
Microsoft è stato uno dei primi ad applicare questo stile di design alla sua interfaccia, visto da alcuni come una reazione contro il disegn popolare skeuomorphic che Apple ha adottato nella sua interfaccia iOS. Invece di convertire un oggetto della vita reale, come ad esempio un calendario, in una piccola illustrazione realistica, i sostenitori del flat design adottano un linguaggio di design più pulito e più ‘puro’ che crea un aspetto coerente all’interno dell’interfaccia.
Questo stile di web design user-centric nel 2015 viene adottato molto tra i siti web di tutto il mondo, quindi il Flat Design è qui per rimanere.
11) Navigation icon (e Icone)
Oltre a trasmettere personalità del marchio attraverso il colore e lo stile, le icone in un’interfaccia utente, devono prima di tutto comunicare significato. Le icone sono, per definizione, una rappresentazione visiva di un oggetto, azione o idea. Se tale oggetto, azione o idea non è immediatamente chiaro per gli utenti, l’icona si trasforma in confusione, frustrante, che impedisce alla persone il completamento un azione.
In basso 2 esempi di Navigation Icon:
Navigation – Esempio 1
Navigation – Esempio 2
Per approfondire il concetto di icona all’interno della User Interface, vi consiglio questa lettura.
12) Icone SVG Animate
SVG è una delle tecnologie più sottoutilizzata quando si tratta di sviluppo web. Nonostante la sua utilità e possibilità è ancora un mistero per molti, e quando si tratta di integrare e utilizzare le animazioni, molti sviluppatori non sanno da dove cominciare.
Lavorare con SVG file non è un’opzione in più. Con una quantità enorme di dispositivi ad alta definizione presenti sul mercato, non è sostenibile esportare diverse dimensioni delle stesse immagini e indirizzare le stesse in base al dispositivo attraverso media query CSS. Dovremmo affidarci alla grafica vettoriale ogni volta che è possibile.
Utilizzare SVG sui siti web sta diventando sempre più semplice con grandi librerie come Snap.svg.
13) Large, Beautiful Background Images & Videos
I video e le grandi immagini di sfondo sono già diventati parte integrante di qualsiasi Web designer ma sono spesso percepite come cose banali. Nonostante ciò, i progettisti cercano in loro il meglio per alimentare le loro pagine Web con nuovi elementi che rendano unico lo stile che rappresentano.
Gli utenti sono abbagliati da belle immagini, grandi, che possono completamente impostare il tono di un sito. Inizieremo a vedere queste grandi immagini alterate in modi nuovi e creativi. L’effetto ‘blur‘ è già popolare, ma quest’anno, gli altri filtri e tecniche di colore potrebbero diventare comuni.
Ecco un buon esempio di grande immagine come Background.
CONCLUSIONE
E’ ora di dire addio alle tendenze del design che sono giustamente passate di moda. Il Web design è in continua evoluzione, e se si rimane aggrappati alle vecchie tendenze, potreste riscontrare un impatto negativo sui numeri del vostro sito web/negozio.
Quali altre tendenze del design pensi che scuoteranno il Web nel 2015?
-
Gepp
-
braindeveloper