Quindi, come si fa a progettare un sito web che piaccia ai clienti?<\/p>\n
Ne parliamo in questo articolo. Vi mostreremo perch\u00e9 un buon web design \u00e8 essenziale e condivideremo 15 principi di web design che potrete sfruttare per creare un sito web di alta qualit\u00e0.<\/p>\n
Perch\u00e9 un Buon Web Design \u00c8 Importante?<\/h2>\n
Chi lavora come web designer in media guadagna 57.000 dollari all’anno<\/a>, circa 8.000 dollari in pi\u00f9 rispetto ai web developer junior, che in media guadagnano 44.000 dollari all’anno. I designer ricevono compensi ragionevoli per un buon motivo: il loro lavoro \u00e8 fondamentale.<\/span><\/p>\n Quando un nuovo cliente visita il vostro sito web, si forma la prima impressione che influenza le sue future interazioni con il vostro brand. \u00c8 a questo punto che si forma la prima opinione su di voi.<\/p>\n Il vostro sito web trasmette anche l’identit\u00e0, la visione e la posizione del vostro brand all’interno del settore. Se avete concorrenti molto agguerriti con un prodotto simile, un sito web che faccia dire “wow” alla gente vi render\u00e0 pi\u00f9 memorabile e aumenter\u00e0 la notoriet\u00e0 del vostro brand rispetto alla concorrenza.<\/p>\n Inoltre, un sito web solido pu\u00f2 migliorare i vostri sforzi di ottimizzazione per i motori di ricerca (SEO)<\/a>.<\/p>\n I motori di ricerca considerano il modo in cui le persone rispondono ai siti web quando li classificano nei risultati di ricerca. Se la vostra frequenza di rimbalzo \u00e8 bassa e le persone visitano spesso pi\u00f9 pagine del vostro sito, i motori di ricerca vi posizioneranno probabilmente pi\u00f9 in alto rispetto a un concorrente con una frequenza di rimbalzo elevata.<\/p>\n Anche la SEO tecnica<\/a> \u00e8 importante. I siti web con titoli, strutture di pagine e link ben progettati sono pi\u00f9 accessibili. Per questo motivo, sia i motori di ricerca che i clienti li preferiscono. Vediamo alcuni importanti principi di web design.<\/p>\n\n Quando parliamo di “principi di web design”, ci riferiamo a regole generali per la progettazione degli elementi testuali e visivi di un sito o di una pagina web. Ogni brand adotta i principi del web design in modo diverso: alcuni sono in linea con le best practice<\/a>, altri no.<\/p>\n Per aiutarvi a creare un sito web eccellente, ecco 15 principi di web design (oltre a esempi di siti web che li usano in modo efficace):<\/p>\n Nello studio di Clutch sull’esperienza degli utenti sui siti web, il 94% dei partecipanti considera la navigazione del sito web come la “caratteristica pi\u00f9 importante”.<\/p>\n Non c’\u00e8 da stupirsi del perch\u00e9. Se un utente di un motore di ricerca arriva sul vostro sito web alla ricerca di informazioni sul “mobile design” e non le trova, il passo successivo pi\u00f9 naturale \u00e8 quello di cliccare “indietro” e cercare un altro sito web.<\/p>\n Come si fa ad adottare una navigazione ben pianificata? Ispiratevi al sito web di The Cool Club.<\/p>\n Quando entrate nella homepage del Cool Club, il layout del sito \u00e8 estremamente chiaro. Potete navigare verso le sezioni chiave dei prodotti (come “giochi di carte” e “lista dei desideri”) usando i pulsanti sul lato sinistro, oppure potete navigare verso le pagine “informazioni” e “contatti” con i pulsanti sulla destra.<\/p>\n Anche le pagine dei prodotti di The Cool Club sono molto facili da navigare. Attualmente il brand dispone di un mazzo di carte interattivo che presenta 54 belle varianti e le relative pagine. \u00c8 sufficiente scorrere verso il basso e fare clic sulla carta che si desidera vedere meglio.<\/p>\n Per creare un sito web altrettanto efficace, suddividete i contenuti in categorie chiare per gli header e i footer<\/a> e date loro titoli descrittivi. Poi ordinate le pagine per argomento, in modo che le persone possano navigare facilmente tra argomenti simili.<\/p>\n Inoltre, fate in modo che l\u2019header e il footer siano coerenti in tutto il sito.<\/p>\n Lo spazio negativo (o “spazio bianco”) \u00e8 l’area che circonda gli argomenti di una pagina, siano essi immagini, video, testo o pulsanti.<\/p>\n Molti esperti di marketing si affrettano a riempire tutti gli spazi liberi di una pagina, sperando che dare alle persone pi\u00f9 informazioni li renda pi\u00f9 partecipi. Tuttavia, questo spesso si traduce in pagine sovraccariche e confuse.<\/p>\n \u00c8 qui che entra in gioco lo spazio negativo. L’uso dello spazio negativo enfatizza gli elementi pi\u00f9 critici di ogni pagina, perch\u00e9 la mancanza di colore attira lo sguardo del visitatore verso le aree pi\u00f9 luminose.<\/p>\n Naturalmente, “usare lo spazio negativo” non significa “creare un noioso sito web tutto bianco”. Al contrario, potete sfruttare lo spazio usando i colori del vostro brand, proprio come fa Garoa.<\/p>\n La homepage di Garoa usa una palette di colori crema per creare un’atmosfera, sfruttando al contempo lo spazio negativo. Il risultato \u00e8 che lo sguardo si concentra sui contenuti introduttivi della sezione “Skincare for Autumn” al centro, invece che sulle parti meno importanti.<\/p>\n Sfruttate lo spazio bianco per mettere in evidenza la gerarchia nel vostro sito web<\/a>.<\/p>\n Quando leggete nomi di marchi come “Cadbury”, “Hershey’s” o “Nike”, probabilmente vi viene subito in mente la visione dei loro loghi, font e stili di design. Questo \u00e8 il potere di un branding coerente.<\/p>\n Quando progettate il vostro sito web, create pagine con elementi coerenti per dare al vostro brand una chiara identit\u00e0 visiva. Questo significa che:<\/p>\n Le pagine coerenti non devono necessariamente avere un aspetto completamente uniforme. Al contrario, potete bilanciare coerenza e coinvolgimento mescolando gli elementi.<\/p>\n Per esempio, potete usare font e colori diversi per gli header H1, H2 e H3. Oppure, potete modificare il layout di diversi tipi di pagine, per mescolare le cose.<\/p>\n I colori complementari sono coppie di colori che potete mescolare senza che il vostro design risulti eccessivo e pesante.<\/p>\n Il modo in cui i colori vengono visualizzati su uno schermo segue il modello di colore Rosso, Verde e Blu (RGB da Red-Green-Blue) piuttosto che il modello Ciano, Magenta, Giallo e Nero (CMYK, da Cyan, Magenta, Yellow, Black) usato nella stampa. Anche chi dipinge spesso usa il modello di colore Rosso-Giallo-Blu (RYB) che considera i colori complementari come rosso-verde, blu-arancio e giallo-viola.<\/p>\n Indipendentemente dal modello che preferite, l’uso dei colori complementari raggiunge uno scopo simile a quello del bianco e nero. I colori complementari<\/a> danno enfasi e creano una chiara identit\u00e0 visiva per il vostro brand.<\/p>\n Si vede bene sul sito web di Swab The World.<\/p>\n Nella schermata qui sotto, l’associazione benefica per la lotta contro la leucemia usa il verde e le sfumature del magenta. Questi colori cambiano in altre combinazioni di colori complementari quando si visitano le diverse sezioni del sito (anche se tutti i colori hanno una saturazione simile, per cui il brand rimane coerente).<\/p>\n I colori complementari sono un principio facile da seguire nel vostro design. Se volete mantenere le cose semplici, selezionate due colori complementari e aggiungeteli a elementi contrastanti (come un H2 e il testo del corpo). Oppure usate pi\u00f9 tonalit\u00e0 di ciascun colore in ogni pagina.<\/p>\n Se guardate i siti web di The Cool Kids, Garoa e Swab The World, potete notare che ognuno di essi ha un’atmosfera unica. Questa sensazione deriva dall’adattamento del design del sito web al pubblico.<\/p>\n La personalizzazione \u00e8 l’obiettivo finale. Alla maggior parte di noi piace acquistare prodotti e servizi da brand con cui ci sentiamo allineati e rappresentati. Infatti, una ricerca dimostra che il 72%<\/a> dei consumatori apprezza l’acquisto da aziende che “si allineano con le loro convinzioni e i loro valori”. Quindi, se qualcuno visita il vostro sito web e vede riflessi i propri valori, obiettivi e priorit\u00e0, \u00e8 pi\u00f9 probabile che acquisti da voi.<\/p>\n Per personalizzare il design del vostro sito web in base al pubblico, prendete in considerazione:<\/p>\n Punti bonus se potete usare le automazioni del sito web per offrire un’esperienza personale basata sul profilo dell’utente e sulle precedenti interazioni con il vostro brand.<\/p>\n Potrebbe essere utile trarre ispirazione dalla concorrenza o da brand che vendono cose diverse al vostro target demografico.<\/p>\n I font<\/a> che usate sul vostro sito web determinano se le persone possono leggere o meno ci\u00f2 che avete scritto. \u00c8 bene ricordare che sono molto importanti.<\/p>\n La prima cosa da considerare quando si sceglie un font \u00e8 la sicurezza sul web. I font sicuri per il web<\/a> sono supportati dai sistemi operativi e dai browser web, quindi funzioneranno sulla maggior parte dei dispositivi.<\/p>\n Dovete anche considerare l’accessibilit\u00e0. I font accessibili<\/a> devono essere chiari e facili da leggere sia a grandi che a piccole dimensioni. Per esempio, i font in corsivo non sono molto accessibili, mentre il Times New Roman lo \u00e8 abbastanza.<\/p>\n Inoltre, quando scegliete un font, osservate le tendenze dei font su altri siti web. Nel 2021, lo scienziato Michael Li ha analizzato i font di oltre 1.000 siti web<\/a>. Ha riscontrato le seguenti tendenze:<\/p>\n Potreste scegliere di sfruttare queste informazioni per selezionare uno stile di font che si adatti a ci\u00f2 che le persone cercano nei siti web. Oppure potreste scegliere di fare qualcosa di diverso.<\/p>\n Virgin \u00e8 un brand che ha scelto la seconda opzione. Nella schermata sottostante, Virgin ha utilizzato almeno cinque font. Questi font separano le sezioni della pagina e le rendono accattivanti.<\/p>\n Lo psicologo Paul Fitts svilupp\u00f2 per la prima volta la Legge di Fitt nel 1954, ma nel 2022 \u00e8 ancora di grande attualit\u00e0 nel web design. La legge di Fitt sostiene che le dimensioni di un obiettivo influenzano il tempo necessario per raggiungerlo.<\/p>\n In un contesto di web design o di User Experience (UX), questo significa che le persone impiegheranno meno tempo a fare clic su pulsanti pi\u00f9 grandi o pi\u00f9 tempo a fare clic su pulsanti pi\u00f9 piccoli. Quindi, per sfruttare la legge di Fitt, dovreste rendere i vostri pulsanti CTA estremamente grandi e ben visibili, in modo che sia pi\u00f9 facile farci clic sopra.<\/p>\n Il termine “facile” \u00e8 fondamentale in questo caso. La Legge di Hick, sviluppata dallo psicologo britannico William Edmund Hick e dallo psicologo americano Ray Hyman, afferma che le persone si affaticano ogni volta che decidono qualcosa.<\/p>\n Quindi, pi\u00f9 decisioni chiedete di prendere a chi visita un sito web, maggiori sono le possibilit\u00e0 che seguire la procedura sia troppo faticoso.<\/p>\n Quando qualcosa \u00e8 “invariante”, si distingue come un’opzione unica rispetto ad altre molto simili. L’esempio pi\u00f9 ovvio di invarianza \u00e8 l’evidenziazione dei piani nelle pagine dei prezzi, come questa di Box.<\/p>\n Ma questo non \u00e8 l’unico modo in cui potete usare l’invarianza. L’invarianza pu\u00f2 aiutarvi a stabilire una gerarchia visiva nelle vostre pagine per evidenziare le informazioni chiave e attirare le persone verso le parti importanti della pagina.<\/p>\n Per esempio, date un’occhiata a come il Frans Hals Museum ha usato l’invarianza per creare una gerarchia visiva sulla sua homepage:<\/p>\n La gerarchia in questa immagine \u00e8 la seguente: il grande “Welcome”, le immagini, il pulsante “acquista i biglietti”, il pulsante “tutte le mostre” e poi gli altri contenuti.<\/p>\n Per usare l’invarianza quando create la vostra gerarchia, classificate gli elementi della pagina in ordine di importanza. Quindi, regolate le dimensioni, il colore e la posizione di ogni elemento fino a quando gli occhi dei visitatori non si dirigeranno verso ogni elemento nell’ordine che desiderate.<\/p>\n Abbiamo accennato all’importanza di rendere i pulsanti grandi e facili da cliccare, ma le dimensioni non sono l’unico aspetto da considerare quando create i pulsanti.<\/p>\n I pulsanti cliccabili sono descrittivi e persuasivi allo stesso tempo. Incuriosiscono le persone che visitano il sito e danno loro un motivo per andare a vedere il link del pulsante.<\/p>\n Un modo per farlo \u00e8 usare un testo dettagliato come “leggi il nostro blog”, “scopri qui i nostri segreti di marketing” o “ecco il nostro report per il 2022”. Un altro modo \u00e8 quello di rendere i pulsanti visivamente interessanti o unici.<\/p>\n Rainforest Protector ha adottato entrambi gli approcci. Rainforest Protector vi permette di navigare nella foresta amazzonica visitando diverse localit\u00e0. Il pulsante di ogni localit\u00e0 include un’immagine e un’azione come “visita il villaggio”<\/a>. Per 13 anni, il team di ricerca del Nielsen Norman Group (NN Group)<\/a> ha usato l\u2019eye tracking per vedere come oltre 500 persone leggono e interagiscono con i contenuti web. Questo li ha portati a sviluppare il modello a F, secondo il quale la prima cosa che le persone fanno \u00e8 scansionare la pagina, poi leggere in linea da sinistra a destra. Come in questo caso:<\/p>\n Potete sfruttare lo schema a F sul vostro sito web strutturando i vostri contenuti in base a questo o a un modello alternativo.<\/p>\n Facebook usa un modello a forma di Z sulla sua homepage. Quando visitate la pagina, i vostri occhi vanno subito sul logo “Facebook”, poi sul pulsante “login”, poi sull’immagine a sinistra e infine sul pulsante “Create an account”.<\/p>\n Nel quarto trimestre del 2021, il 54,4%<\/a> del traffico di siti web a livello globale proveniva da un dispositivo mobile. Quindi, se il vostro sito web non \u00e8 mobile-friendly, potreste dimezzare il vostro traffico.<\/p>\n Anche la velocit\u00e0 influisce sul traffico organico dei siti web. Una ricerca di Google dimostra che il 53%<\/a> delle persone abbandona un sito web se il caricamento avviene in pi\u00f9 di tre secondi.<\/p>\n Il modo pi\u00f9 semplice per rendere il vostro sito web mobile-friendly o veloce \u00e8 scegliere un tema per siti web veloci<\/a> realizzato da designer esperti. In alternativa, se volete essere pi\u00f9 coinvolti nel design del vostro sito web, potete costruire un sito web responsive<\/a> su misura.<\/p>\n \u00c8 quello che ha fatto il team di design del film 1917<\/em>. Il sito web dedicato al film offre un’esperienza mirata a coinvolgere e far appassionare le persone. \u00c8 stato progettato specificamente per i dispositivi mobili: potete usare il dito per muovervi nelle trincee della Prima Guerra Mondiale.<\/p>\n Se prestate attenzione, noterete che anche il sito web di 1917 sfrutta il motivo F.<\/p>\n Immaginate la scena: state facendo una ricerca a tema “giochi mentali” e trovate una pagina web che sembra promettente. Tuttavia, quando ci fate clic sopra, vi ritrovate sommersi da un muro di testo difficile da leggere.<\/p>\n Come molte altre persone, anche voi potresti fuggire subito dal sito (per quanto promettente sia il contenuto!).<\/p>\n Una ricerca di eye-tracking condotta dalla Missouri University of Science and Technology dimostra che le persone che visitano un sito web impiegano in media 5,59 secondi<\/a> per leggere il testo. Quindi, se le persone non riescono a leggere il vostro testo in questo lasso di tempo, \u00e8 improbabile che riusciate a coinvolgerle.<\/p>\n Risolvete questo problema dividendo il testo in piccole parti. Inoltre:<\/p>\n Quando diciamo “usate le griglie” non intendiamo dire che dovete far assomigliare il vostro sito a una tabella di Excel. Dividete il vostro sito web in sezioni distinte che hanno uno scopo specifico, in modo che le persone possano individuare rapidamente i contenuti.<\/p>\n A tal fine non \u00e8 necessario usare le linee della griglia. Create invece delle distinzioni tra gli spazi della griglia con colori, spazi negativi e ombreggiature come ha fatto Atlason. La homepage di Atlason presenta i prodotti nuovi e quelli pi\u00f9 venduti in griglie. Poich\u00e9 i visitatori sono probabilmente alla ricerca di questi prodotti, le griglie li aiutano a trovarli in pochi secondi.<\/p>\n Uno dei modi pi\u00f9 semplici per usare le griglie sul vostro sito web \u00e8 scegliere un tema WordPress<\/a> che ne faccia uso. Alcuni esempi sono Gridframe, Masonry Grid e Shuttle Grid.<\/p>\n Nel contesto del web design<\/a>, il termine “equilibrio” si riferisce al modo in cui gli elementi di design sono posizionati l’uno rispetto all’altro e l\u2019armonia che riescono a creare. Ci sono molti modi per creare equilibrio nel vostro sito web, tra cui alcuni di questi principi di web design:<\/p>\n Potete vedere l’equilibrio in azione sul sito web di Woven. Questo sito web usa una tavolozza di colori equilibrata, il bianco e il nero per creare contrasto all’interno del testo e la simmetria per attirare l’attenzione dei visitatori sui contenuti.<\/p>\n La teoria Gestalt sostiene che le persone percepiscono qualcosa come un insieme prima di osservare i singoli elementi. O, come disse Kurt Koffka: “L’insieme esiste indipendentemente dalle parti”. Anche se di solito si fa riferimento alla teoria della Gestalt per quanto riguarda la psicologia, essa si applica anche al web design.<\/p>\n Dovete prestare attenzione ai piccoli dettagli del vostro sito web per far s\u00ec che il vostro design risulti curato e completo. Quando progettate qualcosa, \u00e8 facile concentrarsi su elementi importanti come titoli, immagini e CTA e dimenticarsi di altri aspetti:<\/p>\n Verificate due volte questi elementi prima di premere “pubblica” e assicuratevi che il vostro sito web trasmetta professionalit\u00e0. Voi potete anche trascurare piccoli difetti, ma le persone non lo faranno.<\/p>\n15 Principi per un Web Design Efficace<\/h2>\n
1. Le Pagine Devono Essere Facili da Navigare<\/h3>\n
![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-17.jpg\")
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-18.jpg\")
2. Sfruttate Sempre lo Spazio Negativo<\/h3>\n
![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-20.jpg\")
3. Le Pagine Devono Essere Coerenti, ma Coinvolgenti<\/h3>\n
\n
4. Approfittate dei Colori Complementari<\/h3>\n
![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-22.jpg\")
5. Progettate Pensando al Vostro Pubblico di Riferimento<\/h3>\n
\n
6. I Font Devono Essere Leggibili e Accessibili<\/h3>\n
\n
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-23.jpg\")
7. Seguite la Legge di Fitt e la Legge di Hick<\/h3>\n
8. Usate l’Invarianza per Evidenziare le Informazioni Chiave<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-25.jpg\")
![\"L\u2019homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-27.jpg\")
9. Per le CTA: Usate un Linguaggio Chiaro Che Faccia Venire Voglia di Cliccare<\/h3>\n
\n<\/a><\/p>\n10. Sfruttate il Modello di Lettura a F o a Z<\/h3>\n
![\"Schema](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-29.jpg\")
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-33.png\")
11. I Buoni Siti Web Sono Veloci e Compatibili con i Dispositivi Mobili<\/h3>\n
![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-30.jpg\")
12. Suddividere il Testo in Porzioni Piccole e Semplici<\/h3>\n
\n
13. Usate le Griglie<\/h3>\n
![\"Griglia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-31.jpg\")
14. Ricordate l’Equilibrio<\/h3>\n
\n
![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Untitled-32.jpg\")
15. Prestare Attenzione ai Dettagli<\/h3>\n
\n