Principi di base per un web design armonioso

Sonja Hoffmann Aggiornato il 21.10.2020
7 Min.
Principi di base del web design
Ultimo aggiornamento il 21.10.2020

Si sa: non c'è una seconda possibilità per una prima impressione. Apri un sito web sconosciuto e giudichi in pochi secondi se è buono o no. Soprattutto con le proprie creazioni è molto difficile fare un'analisi obiettiva. Fortunatamente, ci sono principi di progettazione ben collaudati che si possono usare come guida. Eccone una sintesi.

Ma com'è 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, per cui è difficile spiegare perché lo stesso elemento di design si adatti perfettamente a un sito web mentre sembra perso e fuori posto su un altro.

Cose rende un sito web di successo?

I buoni siti web presentano le informazioni in modo chiaro ed efficiente in modo che gli utenti trovino intuitivamente la loro strada sul sito. Nella maggior parte dei casi, un sito web orientato all'utente ha successo grazie a un'interazione ben equilibrata di tipografia, elementi interattivi e tante rifiniture visuali. 

E siccome questo non è abbastanza complicato, siamo anche limitati da ciò che i browser dei nostri potenziali utenti possono mostrare. Ed eventualmente anche dalle competenze tecniche dello sviluppatore o dai tool che utilizziamo per creare il sito web in questione. 

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 è un progetto piuttosto ampio. Non c'è da stupirsi che di solito dietro ci sia un'intera squadra. Spesso i singoli (e purtroppo i team) tendono a prestare maggiore attenzione alle aree in cui sono particolarmente forti. Mentre altre aree ricevono meno attenzione o, in casi estremi, nessuna. Questo crea uno squilibrio che potrebbe farti percepire un sito web di qualità inferiore 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.

Molto whitespace di solito fa apparire una pagina più ordinata e chiara. Questa impostazione va spesso di pari passo col minimalismo. Ciò significa rimuovere dal layout in maniera coerente tutto ciò che non è necessario e che non aggiunge alcun valore riconoscibile al design. Che si tratti di testo, di elementi decorativi o di una marea di CTA.

Suggerimento

Quando si pianifica il contrasto e il colore si dovrebbe anche tenere presente quanto segue: contenuti difficili da leggere possono causare alle persone con problemi di vista (ad es. nel riconoscimento dei colori) l'impossibilità di vedere bene questi contenuti.

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

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 dei colori: questi tool ti aiutano nella scelta dei colori

Material Design Color Tool

Material Design Color Tool crea low fidelity wireframes con un'impostazione di due colori primari.

materiale-progettazione-colore-strumento

Adobe Color Wheel

Adobe Color Wheel non solo ti aiuta a creare un'ampia palette di colori, ma estrae anche le palette di colori usate da disegni esistenti. Ultimamente questo è possibile anche a partire dalle sfumature.

ruota colorata dell'adobe

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 dei colori sono inevitabili: a seconda del settore del tuo cliente, si può scegliere un colore con l'effetto psicologico adatto. Non è un caso che il blu sia spesso utilizzato in settori più seri - come le assicurazioni, la consulenza e i siti web di confronto. Il blu ispira fiducia e ha un effetto calmante. Tuttavia, è importante non essere troppo generici in questo caso, poiché anche le sfumature dello stesso colore possono evocare emozioni molto diverse.

Conosci la regola 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.

Disposizione simmetrica o asimmetrica degli elementi di design

Nel suo articolo “The Principles of Design and Their Importance” l'autore e designer Cameron spiega i suoi due approcci più importanti per l'equilibrio nel web design. Quindi differenzia il contenuto in base alla sua vistosità, cioè se è più evidente o meno. 

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. 

Qui il layout può essere mantenuto clean, ad esempio. Gli elementi sono chiaramente separati l'uno dall'altro, come nel caso di Couro Azul Spesso tale contenuto viene collocato leggermente decentrato per dare all'elemento più debole un po' più di spazio e creare un equilibrio.

Couro Azu

Zero utilizza comunque lo stesso principio, ma con una disposizione più libera. Grazie all'elevato utilizzo di whitespace, appare 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, occorre definire chiaramente quale messaggio si vuole 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, ci sono anche molte possibilità di attuazione. Dopotutto, il contenuto non può essere enfatizzato dalla sola tipografia in grassetto e dal solo colore. Anche attraverso le immagini - come per il ristorante di Jamie Oliver - e attraverso l'interazione di diversi principi si mette l'accento sui contenuti selezionati.

ristorante di Jamie Oliver

Proporzione, coerenza e gerarchia

Il contenuto di una pagina dovrebbe essere presentato in un modo che abbia un senso nella sua gerarchia. Pertanto, si mettono le cose più importanti in cima. Con un'importanza decrescente, dovresti farti strada verso il basso. Dovresti quindi chiederti: Quali sono le informazioni più importanti per il visitatore del mio sito? Quali sono solo informazioni aggiuntive? 

Questo è anche il motivo per cui il menu di navigazione si trova di solito in alto. Oltre ad essere un UI pattern, è semplicemente uno degli aspetti più importanti di una pagina. Dopotutto, il menu non è altro che una panoramica dei contenuti principali che si offrono. Per così dire, l'indice del tuo sito web.

Gerarchia visiva: cos'è veramente importante

La gerarchia può essere creata anche dal cosiddetto movement. Qui si dispone il contenuto del sito in modo che l'occhio sia condotto attraverso di esso. Lo si può ottenere, ad esempio, utilizzando shape e disposizione. Questo portfolio è un esempio interessante di come potrebbe essere:

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.

Principi di base del web design - Conclusione

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: 

Cosa ne pensi dei principi di design? Hai delle domande per Sonja? Allora puoi commentare. Vuoi essere informato sui nuovi carticoli sul web design e sullo sviluppo per agenzie e liberi professionisti? Allora seguici su TwitterFacebook o nella nostra Newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo mail non sarà pubblicato. I campi obbligatori sono contrassegnati con * marcato.