WEB DESIGN

 

Aziende e liberi professionisti stanno investendo sempre più risorse nel web design, per avere siti più belli graficamente. Questi investimenti derivano dal fatto che oggi avere un sito web dal design sorpassato, non in linea con i trend del momento, significa ritrovarsi un passo indietro ai propri competitors. E ne consegue anche una ripercussione negativa sulle conversioni.

Oggi è necessario per le aziende investire nel digitale, tenendo conto di quali sono le attuali esigenze del mercato. Tale consapevolezza si sta diffondendo, pertanto ci sono moltissime imprese che si stanno digitalizzando.

Si è compreso che aggiornare il proprio sito, renderlo accattivante e piacevole per l’utente, stando al passo con le innovazioni, premia sia in termini di conversioni, che di posizionamento sui motori di ricerca.

• Ma cosa significa creare siti web belli graficamente?
• Come ci si può adeguare agli attuali trend del web design?
• Dove trarre ispirazione?

In questa pagina parleremo di queste tematiche:

• vedremo i nuovi trend del web design, per avere siti belli graficamente e dall’ottima usabilità;
• scopriremo le novità grafiche, tecnologiche e la direzione che sta prendendo il gusto estetico nel web;
• faremo luce su quali sono le best practice da seguire per ottenere un sito che offra agli utenti un’esperienza di navigazione agevole, senza però rinunciare ad una bella veste grafica.

Ispirazioni di web design: siti più belli graficamente

Partiamo dall’ispirazione, perché come per imparare a scrivere bisogna prima leggere, così per creare siti web con un bel design bisogna prima imparare a riconoscerli. Un buon punto di partenza è osservare le best practice seguite dai professionisti del settore.

È possibile vedere alcune raccolte dei migliori siti web design del momento su siti di settore che riuniscono le ispirazioni del web design mondiale, organizzando contest, facendo analisi tecniche. Tra questi, i più rilevanti sono:

1. Awwwards – Website Awards – Best web design trends. Qui si possono trovare le eccellenze del web design mondiale.

Il progetto viene descritto così: “I premi che riconoscono il talento e gli sforzi dei migliori web designers, sviluppatori e agenzie nel mondo. Un luogo di incontro dove i professionisti del digital design da tutto il globo trovano ispirazione, impartiscono sapere ed esperienza, si connettono, e condividono critiche costruttive e rispettose”. Il loro motto, già ispirante di per sé, è “Always questioning”, “always evolving”.

Ci sono giurie internazionali che valutano i siti secondo questi criteri:

• Design
• Usability
• Creativity
• Content
• Developer

È possibile effettuare ricerche sui migliori web design in Italia, Francia, Stati Uniti, Germania, Francia e Olanda.

Inoltre, questo sito fa anche un po’ da social network: ci si può iscrivere, creare un proprio account ed entrare nella community per condividere esperienze e il proprio sapere.

Nella sezione blog sono raccolte interviste ai creatori dei migliori web design e dei siti più belli graficamente. Tra questi spicca una società italiana la Vergani & Gasco s.r.l. che con il progetto Style Novels ha vinto numerosi premi prestigiosi, il cui case history sarà illustrato in seguito.

2. Un altro sito che colleziona showcase dei migliori siti web per grafica è The FWA. Anche qui c’è la possibilità di trarre ispirazione dai siti più moderni e innovativi del momento. Si può creare un account, caricare il proprio progetto e votare quello degli altri. Si può rimanere sempre aggiornati sui trend attuali, in quanto FWA crea “uno showcasing dell’innovazione, ogni giorno, dal 2000.” La sua “missione è mostrare l’avanguardia della creatività, a prescindere dal mezzo o dalla tecnologia usati”.

3. Anche CSS Design Awards è un sito continuamente aggiornato, che raccoglie i siti più belli graficamente, che fanno avanguardia nel web design di tutto il mondo. È possibile osservare i lavori più eccellenti, caricare i propri progetti e interagire con altri utenti.

La giuria internazionale giudica e assegna punteggi ai siti selezionati, secondo i criteri di:

• UI (user interface) design
• UX (user experience) design
• INN (innovation)

CSS Design Awards è attivo dal 2009 e il suo motto è “Be inspired. Be inspiring”.

Web design: siti più belli graficamente, cosa significa?

Un web design ideale dovrebbe garantire il raggiungimento di due obiettivi:

1. dare al nostro sito un aspetto moderno
2. offrire agli utenti un’esperienza di navigazione agile e piacevole

Prima di passare in rassegna le tendenze del momento e le best practice da osservare, occorre soffermarsi su questi elementi, propedeutici a tutto il discorso.
In primis, il concetto di bello: cosa significa quando si parla di web design (oggi)?

Attualmente, dire bello di un web design equivale a dire coinvolgente, responsivo, usabile. Ma per chi? Non abbiamo ancora presentato il vero protagonista del web design, l’utente.

Per l’utente del web 2.0 vale quel che si dice del cliente: “ha sempre ragione”; per questo deve essere al centro di ogni progetto, un sito deve essere creato tenendo in considerazione che verrà navigato dagli utenti.

• Un sito web esiste perché sia navigato e l’utente naviga un sito perché cerca di soddisfare un bisogno.
• Di solito, l’utente-tipo ha fretta di trovare quello che cerca, quindi il suo customer journey deve essere semplice e veloce
• Se l’utente riuscirà ad appagare il suo desiderio in modo semplice e veloce, aumentano le possibilità che ritorni ancora su un sito, in quanto gli è stato utile
• Meglio ancora se l’utente non fatica per reperire ciò di cui ha necessità, che si tratti di un’informazione o di un prodotto, è lo stesso
• L’utente naviga molto spesso da mobile, per cui è importante che possa consultare un sito web che si adatti alla risoluzione dello schermo di ogni device
• Un utente che naviga su un sito che lo emoziona, che gli fa percepire un valore aggiunto, si convertirà molto più facilmente in cliente
• La psicologia dei colori nel marketing ci dice che i colori suscitano emozioni, e ad essi viene associato un significato. Quindi emozionare significa anche scegliere con cura, i colori del sito web.

In sintesi, l’utente tipo: è distratto, ma vuole trovare tutto e subito senza faticare, senza annoiarsi, da qualunque dispositivo sia connesso. Quindi un web design ideale deve far trovare ai navigatori quello che cercano, senza ostacoli e senza fatica, in modo veloce e anche gradevole. Qualcuno potrebbe chiedersi: “ma l’utente vuole che un sito web gli faccia anche il caffè?” (tra qualche tempo potrebbe accadere sul serio). Questa obiezione è comprensibile, ma non c’è da spaventarsi. In realtà, ottenere tutto ciò da un web design è possibile, basta seguire alcune linee guida e non serve nemmeno spendere un patrimonio per arrivare a questi risultati.

Dunque, un sito, per dirsi bello, come deve essere?

• coinvolgente perché deve catalizzare l’attenzione di utente distratto, che va di fretta (dove andranno poi tutti di corsa?)
• responsivo perché deve garantire una fruibilità agevole da ogni dispositivo, mobile o desktop che sia
• usabile perché il percorso, il customer journey, che porta l’utente a soddisfare il suo bisogno, deve essere privo di ostacoli e il più semplice possibile

Fatte queste considerazioni, risulterà chiaro perché per ogni business, che sia quello di un’azienda, o di un libero professionista, puntare a un web design, che generi siti belli graficamente, sia di vitale importanza. Per approfondire le proprie conoscenze e diventare competenti riguardo questi temi sarebbe consigliabile frequentare un corso di Website Creation e uno di User Experience, come quelli offerti da Digital Coach.

 

La migliore piattaforma per realizzare siti belli graficamente? WordPress!
Impara a usarlo scaricando la Mini-Guida Gratuita

 

I vantaggi di un sito bello graficamente

I vantaggi che un business online può ottenere con siti internet belli da visitare sono molteplici:

• una veste grafica bella e accattivante attrae gli utenti su un sito
• un web design pulito contribuisce a rendere l’usabilità intuitiva
• l’utilizzo di elementi grafici, come geometrie e pattern, guida lo sguardo degli utenti lungo il journey che è stato ideato per loro
• i contenuti multimediali, come foto e video, arricchiscono i contenuti testuali di un sito e coinvolgono l’utente emozionandolo

Queste caratteristiche premieranno in termini di posizionamento sui motori di ricerca e gioveranno anche al fatturato di un’impresa. Qualche esempio:

• Un’usabilità intuitiva permette una navigazione agevole degli utenti: se trovano in modo semplice e veloce ciò che stanno cercando aumentano le possibilità che si trasformino in clienti e che tornino sul sito. Così aumenteranno le conversioni e il trust del dominio.
• L’usabilità semplice e chiara consente inoltre che fruitori del nostro sito compiano processi di acquisto senza incontrare ostacoli, aumentando il numero delle conversioni e, di conseguenza il fatturato
• La responsività garantisce una buona usabilità e una buona leggibilità del sito da ogni device. Ciò è premiato dall’algoritmo di Google come fattore di ranking nelle SERP
• Usabilità e responsività diminuiscono il numero dei bounce negativi su un sito e anche ciò si traduce in punteggio positivo per il posizionamento sui motori di ricerca.

Quindi, stando così le cose, si può azzardare l’equazione per cui:

Bello è sinonimo di responsive

Oggi un web design di un sito bello graficamente è anche sinonimo di responsive design, progettato “mobile first”.

Questa tendenza vede le sue origini nel Mobilegeddon, l’aggiornamento dell’algoritmo di Google che, dall’Aprile del 2015, penalizza quei siti che non offrono agli utenti una buona navigazione da mobile. Difatti, la filosofia di Google è quella di offrire ai suoi utenti “la miglior esperienza di navigazione possibile”. Questo aggiornamento è stato ideato proprio per andare incontro alle esigenze dei mobile internet surfers, il cui numero è in continua crescita, grazie alla diffusione degli smartphone e al potenziamento delle reti di connessione mobile.

A proposito di Google e di responsive, scopri cos’è Google Web Designer, uno strumento messo a disposizione proprio da Google per creare pagine web graficamente attraenti e banner pubblicitari completamente adattabili allo schermo di chi visualizza.

La responsività è una caratteristica correlata al mobile first. Responsività significa che il design di uno sito web è si adatta in automatico e in proporzione alla risoluzione dello schermo del device da cui l’utente consulta il sito. Dunque, la veste grafica, il layout, il testo, le immagini, si adattano in automatico in modo da agevolare la navigazione dell’utente e la leggibilità del sito.

Come abbiamo affermato in precedenza, un web design che offra siti più belli graficamente implica che l’utente sia al centro della sua progettazione. Infatti, i trend attuali puntano verso una user experience sempre più personalizzata per ogni user.

Bisogna capire che la responsività in un sito è un obiettivo da raggiungere, ma è anche un mezzo con cui si migliora il posizionamento delle pagine sui motori di ricerca; a sua volta, il posizionamento è sia uno scopo, sia un modo di aumentare le conversioni, che possono essere aumentate ad esempio facendo sì che l’utente non incontri impedimenti nel suo percorso di acquisto su un sito.

Gli esempi di sito responsive sono numerosi Si può trarre ispirazione anche per questo aspetto su Awwward, che offre una rassegna dei 50 (più 1) migliori responsive web design.

Le 10 caratteristiche per un web design bello graficamente

Oggi un buon web design deve avere una navigabilità intuitiva perché, come abbiamo già detto, gli utenti devono potersi muovere nel sito senza difficoltà e devono trovare subito quello che stanno cercando, da ogni device. Bisogna considerare la presenza di foto e video su un sito, in quanto offrono la possibilità di comunicare concetti in modo immediato e permettono di catalizzare l’attenzione degli utenti. Gli elementi visuali ed audiovisivi permettono di emozionare e coinvolgere i navigatori, svolgendo una doppia funzione, emotiva ed informativa: i messaggi che si vogliono comunicare, sono trasmessi in modo chiaro e diretto, con una veste gradevole, che intrattiene e coinvolge.

In sintesi, le 10 caratteristiche attuali di un web design che crei siti graficamente belli sono:

1. Design minimale
2. Semplificazione del menu
3. Video riprodotti in background
4. Effetto parallax
5. Infografiche interattive
6. Attenzione alla UX
7. Effetto scrolling
8. Illustrazioni
9. Design tipografico
10. Storytelling coinvolgente

 

Scopri i migliori tool gratuiti per realizzare contenuti belli da vedere.
Scarica l’Ebook Gratis

 

I nuovi trend del web design: come avere oggi siti più belli graficamente?

Web design, questione di UX

Non bisogna stancarsi di sottolinearlo: l’utente deve essere messo al centro dell’ideazione di un sito. Dunque, parallelamente alla progettazione di un sito, va progettata una User Experience (UX). Per fare ciò è necessario l’intervento di uno user experience designer, che si occuperà di tre aspetti fondamentali, collegati a doppio filo tra di loro:

1. Estetica
2. Usabilità
3. Emozioni

L’estetica è fondamentale nella progettazione, perché l’aspetto di un sito è il primo elemento di valutazione che un utente ha a disposizione. La prima impressione è ciò che, in pochi millisecondi, farà decidere ad una persona se rimanere o meno su un sito. Si tratta di un elemento che segnerà la prima esperienza di un navigante.
Ma tenere conto dell’estetica non significa far coincidere la User Experience con la User Interface (UI), ovvero con la progettazione grafica, che invece è di competenza dei web designer: UX is not UI.

L’usabilità è un tema molto attuale, legato anche all’ambito del mobile. In generale, l’usabilità è una componente dell’esperienza che si focalizza sugli obiettivi (ad es. completare un acquisto su un sito E-commerce) che l’utente deve riuscire a compiere, senza incontrare né difficoltà, né distrazioni. La UX si occupa di studiare e creare nei siti web un percorso agevole e privo di ostacoli, per far sì che gli obiettivi siano raggiunti dagli utenti con lo sforzo cognitivo minore possibile.

Le emozioni sono un altro elemento fondamentale della progettazione di un sito. Suscitare emozioni significa andare oltre l’usabilità, significa mettersi nei panni dello user e creare qualcosa che per abbia un valore, sia piacevole e che porti a un risultato. Costruire siti interessanti che suscitano gioia, eccitazione, divertimento, significa condurre l’utente in modo agile e piacevole verso un obiettivo. Un utente che naviga un sito con piacere è più propenso alle conversioni, avrà un’esperienza gradevole e sarà incentivato a tornare.

User Interface pulita e bella graficamente

Stando ai trend attuali di web design, i siti più belli graficamente hanno di sicuro una User Interface (UI) semplice ed ordinata. La user interface è il layout di un sito, la sua interfaccia grafica, ed è creata dalla figura del web designer. Questo aspetto, nella progettazione di un sito, è di vitale importanza; infatti la user interface condiziona l’usabilità. Nelle tendenze del web design è usuale che un layout progettato in modo chiaro e funzionale in poco tempo si diffonda e diventi fonte di ispirazione, o di imitazione. Attualmente ci sono due layout che stanno ispirando il web design e i siti più belli graficamente. Si tratta:

1. Hamburger Menu, o anche detto Hamburger Button
2. Card-Based Design o Card Layout

 

L’Hamburger Menu non è un panino con bibita e patatine, bensì è un’icona grafica proveniente dal design di app e siti mobile, che poi si è diffusa in molte interfacce desktop per la sua semplicità. Infatti è un piccolo pulsante composto da tre linee verticali, come il simbolo matematico della congruenza e va a sostituire il desueto menu a tendina.

Con Card-Based Design invece si intende un layout in cui i contenuti visuali e testuali sono inseriti in più schede che costituiscono l’interfaccia utente. Dunque, in questo tipo di web design, le schede funzionano da contenitori per i contenuti. Una struttura di questo tipo presenta numerosi vantaggi, come ad esempio il fatto che le schede, e i relativi contenuti, possano essere spostate facilmente nel sito, semplificando anche la questione del responsive design. Il card layout deve la sua popolarità al social network Pinterest.

Un’evoluzione prossima delle UI potrebbe essere la Voice User Interface (VUI). Si tratta dei cosiddetti assistenti vocali già diffusi in sistemi operativi, come Siri per Apple, o Cortana per Windows. Non si tratta di fantascienza, gli assistenti vocali potrebbero davvero rappresentare un nuovo modo per gli utenti di interagire su un sito web, senza utilizzare le mani e senza necessariamente guardare lo schermo.

Layout geometrici, pattern e colori accesi 

Nei trend del web design, i siti più belli graficamente hanno abbandonato la struttura a griglia, adottando invece forme geometriche per ottenere ordine e simmetria con creatività, senza rigore.

Tramite elementi geometrici, gradienti di colori e pattern, i contenuti di un sito assumono un assetto chiaro,  stesso tempo gradevole. Inoltre, i colori accesi e le sfumature contribuiscono a rendere piacevole e coinvolgente l’esperienza degli utenti.

Illustrazioni grafiche e design tipografico

Altri due elementi che nel web design contribuiscono a distinguere un sito web dai competitors sono:

1. Illustrazioni grafiche di qualità
2. Design tipografico

Le illustrazioni grafiche permettono di comunicare con una sola immagine messaggi anche complicati e funzionano da supporto ai contenuti testuali. Le immagini hanno la capacità di catturare lo sguardo degli utenti, hanno il potere di coinvolgerlo e di guidarlo in un’esperienza utente piacevole.

Un sito che usa illustrazioni di qualità, per giunta dinamiche, per intrattenere l’utente durante le fasi di upload/download è WeTransfer.

Il design tipografico, per le attuali tendenze, si apre a molteplici sperimentazioni sui siti più belli graficamente. Prima era quasi impensabile usare caratteri che andassero fuori dagli schemi. Oggi invece si può combinare font diversi, creativi, con colori e dimensioni diverse che aiutano l’utente ad effettuare una scansione visiva del sito prima della lettura. L’importante è garantire sempre la leggibilità agevole per l’utente, scegliendo font adeguati alla linea dell’azienda, del prodotto e del target.

Animazioni e micro interazioni

Le animazioni sono ormai un must have per avere un sito al passo con i trend e graficamente piacevole. Le animazioni, oltre ad essere un elemento gradevole, ricoprono anche una funzione informativa, perché rappresentano una risposta interattiva ad un’azione che l’utente compie sul sito, dandogli così un feedback visivo di quanto sta accadendo in quel dato momento della navigazione.

Le animazioni possono riguardare molteplici elementi di un sito, come menu, icone e transizioni. Anche le GIF creano delle micro interazioni, che coinvolgono l’utente, lo intrattengono mentre naviga il sito, contribuendo sicuramente ad aumentare il suo tempo di permanenza. Si pensi ad esempio alle barre di caricamento interattive: quante volte abbiamo abbandonato un sito perché si caricava troppo lentamente? Sarebbe bene migliorare le prestazioni del sito, ma intanto si può intrattenere il navigante con una bella barra di caricamento giocosa e interattiva.

Storytelling interattivo

Il potere ai contenuti è un ever green. Secondo i trend di web design, anche nei siti più belli, non possono mancare contenuti di qualità, utili per l’utente e possibilmente anche piacevoli. Ecco che si introduce il concetto di interattività all’interno dello storytelling. Narrare una storia suscitando emozioni, diventa più semplice se c’è il supporto di elementi che fanno interagire l’utente con la storia, non solo tramite l’empatia. Per esempio siti che hanno video in background, o una serie di elementi visual che raccontano in poche immagini la storia di un’azienda, hanno il potere di coinvolgere l’utente, catalizzando la sua attenzione.

 

Apprendi come realizzare storie memorabili
scaricando ora la Mini-Guida Gratuita!

 

Scrolling infinito: niente più click?

Nei web design, lo scrolling infinito gioca un ruolo ancora importante, insieme all’effetto parallax (parallasse).

Lo scrolling infinito fa sì che un utente acceda ai contenuti senza cliccare, ma scorrendo lungo il sito che a volte è composto da un’unica pagina. Questo è il meccanismo usato ad esempio dal news feed di social network come Facebook o Linkedin, ad esempio. I contenuti sono organizzati in paragrafi e una volta terminato uno di essi, il successivo vi si allaccia in un continuum. Inoltre, sofisticati algoritmi fanno in modo che i contenuti siano filtrati in base a ciò che è utile e rilevante per ogni singolo utente, rendendo così unica e iper personale ciascuna esperienza di navigazione.

Internet of thing, forse i siti ci faranno davvero anche il caffè

“Vuoi un sito internet con un web design d’avanguardia, graficamente bello, con alte prestazioni, dall’usabilità agevole e coinvolgente per gli utenti? Vuoi anche che ti faccia il caffè?” Attenzione che potrebbe non essere più una battuta, ma potrebbe presto diventare realtà. Difatti l’Internet of Things (IoT, in italiano “l’internet delle cose”) potrebbe diventare un attuale trend di web design perché si sta sperimentando sempre più l’interazione tra siti web e dispositivi intelligenti, tra cui anche gli elettrodomestici dotati di connessione.

Staremo a vedere.

Alte performance del sito e best UX

Oltre ad essere in linea con le tendenze del momento, devono garantire alte performance, che a loro volta, renderanno migliore la user experience.

Avere molti contenuti multimediali, come video in background, immagini di qualità, gif e animazioni, potrebbe rallentare di molto il caricamento di un sito, cosa che potrebbe rendere poco piacevole la navigazione da mobile, con una conseguente penalizzazione nel ranking sui motori di ricerca. Pertanto è di vitale importanza, anche per l’ottimizzazione SEO, avere un sito web con alte performance e un’ottima UX. Si può ottenere tutto ciò, anche se i tempi di caricamento delle pagine di un sito non sono supersonici.

I web designer oggi ricorrono a degli escamotage che vanno a colpire la percezione del tempo di caricamento, a prescindere dal tempo effettivo. Come?

• Inserendo ad esempio delle barre di caricamento interattive che informano l’utente e lo intrattengono durante l’attesa;
• Dando priorità agli elementi che su un sito vengono visualizzati per primi e senza che sia necessario uno scroll;
• Utilizzando il progressive jpeg, ovvero un caricamento delle immagini in cui viene mostrata subito un’anteprima di bassa qualità per poi arrivare progressivamente alla versione di alta qualità.
  In questo modo viene mostrata l’immagine per intero e non un pezzo per volta e così si può dire addio a quegli antipatici spazi vuoti che non danno affatto idea all’utente di cosa dovrà aspettarsi.

Bot e Chatbot

Anche se non riguardano strettamente il web design e la bellezza grafica di un sito, bot e chatbot sono delle funzioni divenute oggi fondamentali per un sito web, perché contribuiscono a migliorare l’esperienza degli utenti. Bot e Chatbot risponderanno ad ogni domanda degli utenti, anche quando il customer care umano sarà impegnato o chiuso, sostituiranno gli elenchi di FAQ e ridurranno sempre più i tempi di attesa nell’assistenza al cliente.

Web design e siti più belli graficamente: case history

Style Novels è un sito che farà sicuramente tendenza nel web design. Si tratta di un sito web progettato dalla società Vergani e Gasco (www.verganiegasco.it/it) di Como. Questo progetto sta facendo scuola tra i web designer ed ha ricevuto numerosi riconoscimenti a livello internazionale, tra cui il premio People’s voice per la sezione per la sezione Design & Architecture dei Webby Awards, che sono dei veri e propri premi Oscar del web.

Questo sito in sé ha molte delle caratteristiche che abbiamo precedentemente indicato come i nuovi trend:

• design minimale
• font particolari
• sapiente combinazione di colori
• menu animato
• scrolling infinito
• storytelling interattivo
• animazioni (sia visuali che sonore)
• foto, gif, illustrazioni grafiche

Di seguito vi offriamo un sito che illustra l’esperienza di navigazione sul sito Style Novels

Vuoi approfondire? Scopri il programma dei corsi pensati per te!

Corso Web Marketing e Social Media

Corso WordPress and Website Creation

Se vuoi rimanere aggiornato sui trend del web design segui il blog di Digital Coach

SEGUI IL BLOG

Se l’argomento è di tuo interesse, leggi anche miglior programma per creare sito web.

Per saperne di più su date di partenza dei corsi, modalità di frequenza, e altro ancora, contattaci! Siamo a tua disposizione.

CONTATTACI!

Save