Il tuo sito web è la prima cosa che i potenziali clienti vedono quando entrano in contatto con il tuo marchio. Un sito web ben progettato mette in evidenza i tuoi servizi e le tue proposte di vendita uniche (USP), con conseguenti tassi di conversione più alti e più vendite per la tua attività.
Molte persone confondono il web design con lo sviluppo web. Mentre lo sviluppo web si occupa dello sviluppo backend del sito, il web design ha più a che fare con il modo in cui il tuo sito appare – layout, colori, testo e funzionalità del sito. Se hai appena iniziato come web designer, questo tutorial ti mostrerà come progettare siti web.
Ti può interessare anche: 7 App Indispensabili Quando Si Lavora da Casa
Ottieni le linee guida del marchio
Progettare un sito web è spesso parte di un processo di costruzione del marchio. La maggior parte dei marchi inizia con un logo, uno slogan, caratteri e colori. Questi elementi variano a seconda della personalità del marchio e dell’immagine che vuole trasmettere al pubblico.
Se il tuo marchio fosse una persona, come sarebbe? Sarebbe quello zio che è l’anima della festa o il tuo cugino raffinato che sorseggia martini? Traducendo questo al tuo sito web, quali colori, layout e font dovrebbe contenere il tuo marchio?
Per esempio, il colore primario del tuo marchio è il blu marino. Determina quali altri colori vorresti abbinare a quel blu. Per la maggior parte dei marchi, due tonalità sono sufficienti. Valuta la ruota dei colori e scegli un colore complementare o analogo. Per esempio, il blu va con il giallo, l’arancione o il viola, a seconda dell’effetto che stai cercando. Quando hai deciso i colori del tuo marchio, prendi il codice esadecimale per quei colori e attieniti ad essi.
Infine, il tono del tuo marchio è la voce della tua personalità. Che tipo di frasi usa la tua personalità? Applicalo al tuo testo. La tua scrittura dovrebbe essere formale, casual, eccitante, accademica? Queste sono cose da considerare con il tono del marchio.
———————————————
Definisci la sitemap
Una volta che hai definito il tuo marchio, hai bisogno di creare una mappa del sito, che è paragonabile al progetto di un edificio. Una mappa del sito fornisce una panoramica generale del tuo sito web. Delinea il contenuto che apparirà su ogni pagina del tuo sito web.
Questo tipo di sitemap è anche conosciuto come sitemap HTML. Mostra la struttura e la gerarchia delle diverse pagine del tuo sito web e come un utente può navigare attraverso di esse. Per esempio, un utente interagisce prima con la homepage, sceglie una categoria, poi clicca sulle pagine all’interno di quella categoria.
Per i siti più grandi con più di 500 pagine, le sitemaps aiutano i motori di ricerca a scorrere questi siti web e ad indicizzarne il contenuto. Questo si traduce in un SEO ottimizzato per siti più grandi e complessi.
——————————————-
Ricerca i tuoi concorrenti
Una regola generale di business è quella di ricercare i tuoi concorrenti per sapere come ti distinguerai da loro. Questa stessa regola si applica anche al marketing collaterale come i siti web.
Quando fai ricerche sui tuoi concorrenti, dovresti sapere quanto segue:
- Hai molti concorrenti?
- Per quali parole chiave sono in classifica?
- Quanto bene si stanno posizionando per quelle parole chiave?
- Punti di vendita unici
Valutare le parole chiave per le quali i tuoi concorrenti sono in classifica ti aiuta a decidere strategicamente il tuo SEO. Vuoi competere con loro per quella parola chiave o vuoi saltare su un’altra query di ricerca dove hai più possibilità di posizionarti?
Se il termine di ricerca “scarpe in pelle vendita” mostra molti domini concorrenti, potresti voler ottimizzare il tuo contenuto per un termine di ricerca diverso. Buoni esempi potrebbero essere “scarpe in pelle fatte a mano in vendita” o “scarpe in pelle economiche in vendita”.
Tuttavia, se sei abbastanza audace da competere per le query di ricerca competitive, guarda i domini commerciali di più alto livello. Valuta il contenuto della loro pagina, poi prova a replicarlo con il tuo marchio e la tua USP.
————————————————-
Considera le ultime tendenze del web
Tenere d’occhio le ultime tendenze del web aiuterà il tuo sito web a rimanere rilevante e a garantire che non sembri datato.
Puoi prendere ispirazione per il web design dalle seguenti fonti:
- Siti web dei concorrenti
- Adobe Behance
- Comunità di creatori (cioè Reddit, Discord)
Se ti senti insicuro nel prendere ispirazione da fonti esterne, puoi ricordare a te stesso che non ci sono idee completamente originali, solo quelle esistenti che vengono con un nuovo tocco. Infatti, molte di queste tendenze, come il design adattivo, esistono perché funzionano con gli utenti.
Tuttavia, non c’è bisogno di saltare su ogni tendenza in circolazione, solo quelle che potrebbero essere utili alla tua attività. Se una tendenza non si adatta alla personalità del tuo marchio o non aiuta il tuo sito web a funzionare meglio, non dovresti sentirti obbligato ad applicarla al tuo sito.
————————————–
Crea i tuoi wireframe
Creare un wireframe ti permette di vedere come sarà il tuo sito web dalla parte dell’utente. Ti permette di vedere alcuni bordi grezzi nel design che non sarebbero visibili su carta. Puoi facilmente abbozzarne uno, o disegnarlo in Photoshop.
Il wireframe accelera il processo di web design dal momento che permette ai non-web designer di vedere il tuo lavoro senza andare ancora in diretta. Questo ti dà una visione ottimale da parte di diversi dipartimenti su ciò che deve essere rielaborato. Creando i wireframe, puoi giocare con diverse combinazioni di elementi web senza la spesa e il fastidio della rielaborazione.
Ogni pagina dovrebbe avere un wireframe: la tua homepage, la tua pagina delle informazioni, la tua pagina dei contatti, tutte queste pagine. Puoi anche disporre i tuoi wireframe secondo la tua mappa del sito su una lavagna di sughero. Collega le pagine di collegamento con del filo rosso per aiutare i collaboratori a visualizzare completamente il sito web mocked-up.
Dopo un paio di incontri con il personale chiave, dovresti avere i tuoi wireframe finali abbozzati.
———————————————-
Leggi anche: Risorse Gratuite per il Web Design
Considera l’esperienza utente (UX)
Cose chiave da ricordare quando si ottimizza l’UX del tuo sito web
- Mostra visivamente le USP e le caratteristiche
- Usa immagini e colori contrastanti per evidenziare le CTA
- Rendilo facile da navigare
Il processo di navigazione del tuo sito web dovrebbe essere come sfogliare una brochure o un menu. Particolari tipi di tipografia richiamano le caratteristiche chiave, mentre le immagini attirano visivamente l’osservatore verso un prodotto o un servizio.
Noterai nell’esempio qui sopra che la maggior parte degli elementi chiave sono organizzati insieme. Per esempio, il pulsante call-to-action (CTA) si trova proprio sotto il testo. Il testo è anche disposto in modo da imitare il modo in cui gli occhi di un utente scansionano e comprendono il testo – in questo caso, da sinistra a destra e dall’alto in basso. L’UX del sito web includerà anche le cose che accadono dopo che l’utente clicca sulla CTA.
Quando l’utente raggiunge il piè di pagina della tua homepage, dovrebbe avere un’idea visiva di cosa fa la tua azienda e cosa ti distingue dalla concorrenza.
——————————————-
Imposta i tuoi KPI e fai aggiornamenti se necessario
Una volta che hai ottenuto un’agenzia di web design per dare vita ai tuoi wireframe, devi fare in modo di monitorare costantemente il tuo sito web. Puoi monitorare questi KPI con Google Analytics e il software heatmap.
I KPI differiscono a seconda degli obiettivi dell’azienda. Tuttavia, la maggior parte dei web designer considera queste le metriche più importanti da monitorare:
- Heatmaps
- Distanza di scorrimento
- Frequenza di rimbalzo
- Visitatori di ritorno
Si può sostenere che anche il traffico giornaliero è un KPI di un sito web performante, ma una campagna di marketing influisce più del sito stesso.
Vedere dove gli utenti passano il mouse e cliccano è un indicatore sano di quali elementi del tuo sito web attirano l’attenzione. Le mappe di calore mostrano questo.
Osservando quanto il visitatore medio scorre determina la scannerizzabilità della tua pagina web, se è troppo pesante o semplicemente non abbastanza coinvolgente per essere scrollata ulteriormente.
La frequenza di rimbalzo è la gente che entra in un ristorante e poi se ne va come se fosse entrata nella toilette sbagliata. Un’alta frequenza di rimbalzo sul tuo sito web può indicare un tempo di caricamento della pagina scarso o una homepage non invitante.
I visitatori di ritorno sono un indicatore sano, specialmente se non hai una campagna di retargeting in gioco. Questo significa che qualcosa nel tuo sito web deve colpire il tuo pubblico, facendolo tornare per saperne di più.
Se stai modificando il testo, la leggibilità del carattere o i tipi di media, questi KPI ti aiuteranno a individuare cosa migliorare.
—————————————
Conclusione
Creare un sito web è una necessità assoluta per le aziende nel mondo online di oggi.
Quando crei il tuo sito web, attieniti alle linee guida del marchio. Qual è il colore, la personalità e il tono del tuo marchio? Questi dovrebbero tradursi nell’esperienza complessiva del tuo sito web attraverso i caratteri, gli elementi di design, i media e il testo.
Successivamente, crea la tua mappa del sito. Questo servirà come il tuo progetto. Poi, fai una ricerca sui tuoi concorrenti e valuta la qualità del loro sito web. Conosci i termini di ricerca per i quali i tuoi concorrenti si stanno posizionando in modo da poter strategizzare se saltare su un altro termine di ricerca o competere con loro per lo stesso termine di ricerca.
Guarda anche le tendenze per mantenere il tuo sito web fresco, rilevante e aggiornato con la concorrenza attuale nel settore.
Poi, crea dei wireframe per il tuo sito web. Questo ti aiuterà a visualizzare la parte utente del tuo sito web e a raccogliere informazioni da altri dipartimenti. Una volta che il tuo sito web è attivo, traccia le prestazioni del tuo sito rispetto ai tuoi KPI.
Seguendo questi passi avrai un punto d’appoggio sulla piattaforma digitale online e ti assicurerai che il tuo business generi vendite.
Se ti è piaciuto questo articolo leggi anche: Piccole Azioni che Potrebbero Fare Una Grossa Differenza Nel Web Design
[wpmoneyclick id=”7217″ /]