Come dice il proverbio, non c'è una seconda possibilità per la prima impressione. Si richiama un sito web sconosciuto e si giudica in pochi secondi se questa pagina è "buona" o "cattiva". Soprattutto con le proprie creazioni, è infinitamente difficile fare un'analisi obiettiva. Fortunatamente esistono dei principi di design collaudati che puoi utilizzare come guida. Una panoramica.

Che cos'è un buon web design?

Il web design è piuttosto complesso: richiede più di un semplice occhio per una buona tipografia e la sensibilità per un ordine visuale gradevole. Il web design offre un'incredibile varietà di possibilità per esprimersi in modo creativo. Ma offre anche altrettante opportunità di perdersi nel processo di design. Soprattutto se si è profondamente radicati nel processo di design. Il risultato potrebbe essere un design che noi percepiamo come "cattivo".

La nostra valutazione è spesso intuitiva, quindi è difficile spiegare perché lo stesso elemento di design si adatta perfettamente a un sito web mentre sembra perso e fuori posto in un altro.

Cosa rende un sito web di successo?

I buoni siti web presentano le informazioni in modo chiaro ed efficiente, in modo che gli utenti possano orientarsi in modo intuitivo. Nella maggior parte dei casi, un sito web WordPress orientato all'utente ha successo grazie a un'interazione ben bilanciata di tipografia, elementi interattivi e tanto splendore visivo. 

E poiché questo non è abbastanza complicato, siamo anche limitati da ciò che i browser dei nostri potenziali utenti possono visualizzare. Se necessario, anche dalle competenze tecniche dello sviluppatore o dallo strumento che utilizziamo per creare il rispettivo sito web WordPress. 

Dovresti anche tener conto delle tendenze attuali e e della Corporate Identity del tuo cliente. Il web design è fondamentalmente la somma di UX design, UI design e graphic design, CI così come le tendenze attuali in considerazione delle condizioni tecniche.

La creazione di un sito web WordPress è un progetto piuttosto complesso. Non c'è da stupirsi che di solito ci sia un intero team dietro. Spesso gli individui (e purtroppo anche i team) tendono a prestare maggiore attenzione alle aree in cui sono particolarmente forti. Mentre altre aree ricevono meno - o in casi estremi nessuna - attenzione. Questo crea uno squilibrio che può far percepire un sito web WordPress come di bassa qualità e disarmonico.

Il "buon" web design è il risultato di un equilibrio tra le diverse aree di design e le condizioni tecniche.

Poiché per una considerazione dettagliata di tutti i settori mi dilungherei troppo per questo articolo, mi concentrerò principalmente sul visual design. 

Contrasto, Whitespace e colore

Il contrasto spesso va di pari passo con la scelta dei colori primari del design così come del whitespace nella composizione. Tuttavia, whitespace qui non significa necessariamente lo spazio che viene lasciato bianco. Si riferisce piuttosto agli spazi tra gli elementi. Questo spazio intermedio è chiamato anche "negative space" e può comunque essere colorato.

Molti spazi bianchi fanno apparire un sito web più ordinato e chiaro. Questo approccio va spesso di pari passo con il minimalismo. Ciò significa eliminare dal layout tutto ciò che non è necessario e che non apporta alcun valore aggiunto riconoscibile al progetto. Che si tratti di testo, elementi decorativi o una marea di CTA.

Soprattutto con la tendenza a riempire le intestazioni dei siti web con grandi immagini panoramiche, spesso troviamo sovrapposizioni di testo difficili da decifrare.

Un esempio riuscito per molto whitespace e contrasto

Un debole esempio per il contrasto

Ecco un esempio che rappresenta un problema di contrasto soprattutto nella versione mobile. La Call-To-Action scompare completamente dallo sfondo.

A volte non è così facile per i designer filtrare i colori giusti per un design. Fortunatamente, ci sono potenziali tool che ci permettono di testare rapidamente diverse combinazioni prima di passare molto tempo a creare un layout costoso.

Teoria del colore: strumenti per la selezione dei colori

Material Design Color Tool

Material Design Color Tool crea wireframe a bassa fedeltà utilizzando due colori primari.

Adobe Color Wheel

Adobe Color Wheel non solo ti aiuta a creare diverse palette di colori, ma estrae anche le palette di colori utilizzate da progetti esistenti. Di recente, questo è possibile anche in base ai gradienti di colore.

Nella scelta dei colori adatti, vale la pena dare un'occhiata al branding del cliente: quali palette di colori sono già in uso? In che misura posso discostarmi da queste?

Anche le basi della teoria del colore sono imprescindibili: in base al ramo di appartenenza del tuo cliente, si può scegliere un colore con l'effetto psicologico appropriato. Non è un caso che il blu sia spesso utilizzato nei settori più seri, come quello delle assicurazioni, della consulenza e dei siti web di comparazione. Il blu ha un effetto rassicurante e ispira fiducia. Tuttavia, è importante non essere troppo generici, perché anche le sfumature dello stesso colore possono evocare emozioni molto diverse.

Conosci la regola del 60-30-10?

Questa è raccomandata come regola d'oro per l'utilizzo delle palette dei colori. Ecco il principio applicato: il colore principale costituisce circa il 60 per cento del layout, un colore complementare compone il 30 per cento e un terzo colore mette in evidenza il 10 per cento. Questa disposizione ha un effetto particolarmente equilibrato sull'utente.

Simmetria o asimmetria?

Nell'articolo "I principi del design e la loro importanza", l'autrice e designer Cameron Chapman spiega i suoi due approcci più importanti all'equilibrio nel web design. In base a questo principio, distingue i contenuti in base alla loro appariscenza, ovvero se sono più o meno appariscenti. 

Di conseguenza, la sfida che segue è quella di disporre i contenuti in modo che trasmettano un senso di equilibrio. La decisione di progettazione "di disporre in modo simmetrico o asimmetrico" può essere d'aiuto in questo caso.

Come funzionano entrambi gli approcci?

Nell' approccio simmetrico vengono messi insieme elementi con una prominenza simile. Con l'approccio asimmetrico, invece, i contenuti più prominenti e quelli meno appariscenti sono disposti insieme. 

Ad esempio, il layout può essere mantenuto pulito. Gli elementi sono chiaramente separati l'uno dall'altro, come nel caso di Couro Azul. Spesso questi contenuti vengono posizionati leggermente decentrati per dare più spazio all'elemento più debole e creare un equilibrio.

Zero, invece, usa lo stesso principio - ma con una disposizione più libera. L'alto uso di spazi bianchi rende questo look elegante e contemporaneo.

Questo approccio funziona molto bene su schermi più grandi (a partire dalle dimensioni di un tablet). I dispositivi più piccoli, come gli smartphone, invece, beneficiano di moduli chiaramente separati e disposti uno sotto l'altro.

Definire e stabilire le priorità

Prima di iniziare la progettazione di un sito web WordPress, dobbiamo definire chiaramente il messaggio che vogliamo comunicare. Spesso la chiarezza del concetto di marketing porta anche alla chiarezza del layout del design.

Una volta determinati i messaggi chiave, è importante evidenziarli utilizzando il colore e/o la tipografia.

In questo esempio si può vedere come entrambi possono apparire combinati:

Tuttavia, anche qui ci sono molte possibilità di implementazione. Il contenuto può essere enfatizzato non solo attraverso la tipografia in grassetto e il colore. Anche attraverso le immagini - come nel ristorante di Jamie Oliver - e attraverso un gioco di principi diversi, è possibile mettere a fuoco un contenuto selezionato.

Proporzioni e gerarchia

I contenuti di un sito web devono essere presentati in modo tale da avere un senso nella loro gerarchia. I contenuti più importanti devono essere posizionati in alto. Man mano che l'importanza diminuisce, dovresti scendere. Dovresti quindi chiederti: quali sono le informazioni più importanti per il visitatore del mio sito? Cosa sono le informazioni aggiuntive? 

Questo è anche il motivo per cui nella maggior parte dei casi il menù di navigazione si trova in alto. Oltre a essere un modello di interfaccia utente, è semplicemente uno degli aspetti più importanti di un sito web. In fondo, il menù non è altro che una panoramica dei contenuti principali che offri. È, per così dire, l'indice del tuo sito WordPress.

Gerarchia visiva: cos'è veramente importante

La gerarchia può essere creata anche attraverso il cosiddetto movimento. Organizziamo il contenuto del sito web in modo che l'occhio sia guidato attraverso di esso. Questo può essere ottenuto, ad esempio, con l'aiuto di forme e disposizioni. Questo portfolio è un esempio interessante di come potrebbe apparire una cosa del genere:

L'occhio viene guidato attraverso lo schermo da sinistra a destra. Il punto 01 qui ha chiaramente la gerarchia più alta - anche tutti gli elementi sono uguali in termini di dimensioni e all'inizio appaiono equivalenti. 

Anche la proporzione gioca quindi un ruolo: elementi della stessa dimensione, colore e forma ci danno fondamentalmente la sensazione che siano fatti per stare insieme e che abbiano la stessa funzione. Questo è particolarmente importante con gli elementi interattivi.

L'esempio presentato sopra illustra che un design coerente può contribuire in larga misura all'armonia visiva: 

1. per tutte le immagini si utilizzano forme omogenee
2. tutte le immagini si armonizzano a colori 
3. in totale si utilizzano solo due diversi tipi di carattere e dimensioni dei caratteri 
4. per gli errori di battitura e i delimitatori si utilizza un solo colore
5. i delimitatori rappresentano un elemento di design ricorrente - e uniscono visivamente l'immagine e i due titoli.

Conclusione: Principi di base del web design

Nonostante tutti i principi di base citati sopra, le regole sono fatte per essere infrante. Questo è l'unico modo per creare design nuovi e interessanti!

Gli approcci che ho brevemente presentato non sono ovviamente nuovi. Si tratta piuttosto di varianti della ricerca scientifica e/o psicologica che sono state trasferite ai nostri attuali mezzi di comunicazione. Personalmente trovo importante conoscere queste teorie e questi metodi. Spesso applichiamo le regole in modo intuitivo comunque, perché il nostro occhio progettuale ha "imparato" a farlo.

Inoltre, la conoscenza dei diversi approcci nella design aiuta a valutare i propri progetti. Pensala come una lista di controllo alla quale puoi ricorrere quando noti che qualcosa non funziona dal punto visivo. Spesso non si trova la distanza necessaria per valutare obiettivamente il proprio progetto. 

I principi di design qui indicati sono tutt'altro che completi. Se vuoi approfondire l'argomento, puoi dare un'occhiata a questi articoli e ebook: 

• Web UI Design for the Human Eye (Colors, Space, Contrast)
• The Principles of Design and Their Importance
• How to Use Powerful Gestalt Principles in Design