Principi di base del web design

Principi di base per un web design armonioso

Come dice il proverbio: non c'è una seconda possibilità per una 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, ci sono principi di design provati e testati che puoi usare come guida. Una panoramica.

Cos'è un buon web design, comunque?

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 su 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 trovare intuitivamente la loro strada attraverso il sito. La maggior parte delle volte, un sito WordPress orientato all'utente ha successo attraverso un'interazione ben bilanciata di tipografia, elementi interattivi e molto stile 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 usiamo 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.

Creare un sito web WordPress è un progetto abbastanza esteso. Non c'è da stupirsi che di solito ci sia un'intera squadra 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 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.

Un sacco di spazi bianchi di solito rende un sito web più ordinato e chiaro. Questo approccio va spesso di pari passo con il minimalismo. Questo significa rimuovere coerentemente dal layout tutto ciò che non è necessario e che non porta alcun valore aggiunto riconoscibile al design. Che si tratti di testo, di elementi decorativi o di una marea di CTA.

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

Suggerimento per contrasti di successo

Quando si pianifica il contrasto e il colore, si dovrebbe anche tenere a mente quanto segue: Un contenuto difficile da leggere può, in certe circostanze, far sì che le persone con difficoltà visive (per esempio il riconoscimento dei colori) non siano più in grado di percepire questo contenuto.

Un esempio riuscito per molto whitespace e contrasto

Principi di base per un web design armonioso
Principi di base per un web design armonioso

https://aiven.io/

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.

why-ux-fails
https://www.opitz-consulting.com/

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à usando due colori primari.

material-design-color-tool

Adobe Color Wheel

Adobe Color Wheel non solo vi aiuta a creare diverse tavolozze di colori, ma estrae anche le tavolozze di colori utilizzate dai progetti esistenti. Recentemente, questo è possibile anche sulla base di gradienti di colore.

adobe-color-wheel

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 inevitabili: secondo il rispettivo ramo del vostro cliente, si può scegliere un colore con l'effetto psicologico appropriato. Non è una coincidenza che il blu sia spesso usato in rami più seri - come l'assicurazione, la consulenza e i siti web di confronto. Il blu ha un effetto che ispira fiducia e rassicura. Tuttavia, è importante non essere troppo generici qui, poiché 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?

Nel tuo articolo "The Principles of Design and Their Importance", l'autrice e designer Cameron Chapman spiega i tuoi due approcci più importanti all'equilibrio nel web design. In base a questo, distingue il contenuto in base alla sua cospicuità - cioè, se è più accattivante o meno prominente. 

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. 

Per esempio, il layout può essere mantenuto pulito. Gli elementi sono chiaramente separati l'uno dall'altro, come nel caso di Couro Azul. Spesso, tale contenuto è posto leggermente fuori centro per dare all'elemento più debole un po' più di spazio 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 fissare le priorità

Prima di iniziare con il design di un sito web WordPress, dovremmo definire chiaramente quale messaggio vogliamo comunicare. Spesso, la chiarezza nel concetto di marketing porta chiarezza anche nel 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:

cowboy
https://cowboy.com

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.

ristorante di Jamie Oliver

Proporzione e gerarchia

Il contenuto di un sito web dovrebbe essere presentato in modo tale che abbia senso nella sua gerarchia. Il contenuto più importante dovrebbe essere messo in cima. Man mano che l'importanza diminuisce, si dovrebbe scendere. Dovresti quindi chiederti: quali informazioni sono più importanti per il visitatore del mio sito? Cos'è solo un'informazione aggiuntiva? 

Questo è anche il motivo per cui il menu di navigazione è in cima nella maggior parte dei casi. Oltre ad essere un modello di UI, è semplicemente uno degli aspetti più importanti di un sito web. Dopo tutto, il menu non è altro che una panoramica del contenuto principale che offrite lì. È, 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 tale che l'occhio sia guidato attraverso di esso. Questo può essere ottenuto, per esempio, con l'aiuto di forme e disposizioni. Questo portfolio è un esempio interessante di come potrebbe apparire una cosa del genere:

portfolio

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.
Consenso*
Questo campo è per la convalida e non deve essere modificato.

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: 

Le tue domande sul web design armonioso

Che domande hai per Sonja? Sentitevi liberi di usare la funzione di commento. Vuoi essere informato sui nuovi articoli sul web design e lo sviluppo? Allora seguiteci su Twitter, Facebook, LinkedIn o tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato.