Gli 8 comandamenti di un processo di web design (per principianti e senza codice)
Pubblicato: 2021-11-01
Scopri come creare un sito web di successo seguendo un processo strutturato di progettazione del sito web.
La nostra ipotesi è che tu abbia già trovato un nome di dominio e un provider di hosting.
Se non hai ancora scelto il tuo host, ti consigliamo davvero il nostro partner Cloudways .
Nell'esempio seguente vengono presentati i passaggi per il caso in cui stai creando un sito Web per te stesso. Se il sito Web è per un cliente, potrebbero verificarsi nuovi passaggi in termini di pianificazione del progetto, impostazione delle scadenze, contratto e altro. Ma in sostanza, dovrai comunque attenerti ai passaggi presentati di seguito.
Ora, ecco i passaggi:
- Identificazione dell'ambito : quali esigenze deve soddisfare il sito web? Con chi parla il sito? Quali sono i suoi obiettivi e le sue motivazioni? Quali aziende hanno la tua stessa portata e pubblico di destinazione?
- Definizione della mappa del sito web : quali sono le pagine web e le funzionalità che aiutano l'azienda e il pubblico a raggiungere i propri obiettivi?
- Creazione contenuti : preparazione del copy per le pagine del sito;
- Creazione del marchio visivo : preparare la tavolozza dei colori, i caratteri e la grafica da utilizzare nella progettazione del tuo sito Web, che finirà per plasmare la tua identità visiva;
- Wireframing: disegnare il layout delle tue pagine web;
- Design del sito web : creando il sito web vero e proprio, sii consapevole dei limiti degli strumenti che stai utilizzando;
- Test : assicurarsi che tutto funzioni, dai collegamenti ai moduli e ai pulsanti. Testare il sito Web su vari browser e dispositivi per assicurarsi che funzioni correttamente;
- Lancio: fai un po' di rumore prima di andare in diretta con una strategia di comunicazione attentamente pianificata.
Prendiamoli uno per uno.
I passaggi di un processo di progettazione di un sito web
1. Identificazione dell'ambito
In questa fase tu e il tuo team dovrete trovare le risposte ad alcune delle domande seguenti:
- A chi è rivolto il sito?
Un sito web accattivante potrebbe avere i suoi vantaggi, ma, se vuoi che i visitatori del tuo sito web dedichino i loro soldi o il loro tempo, significa che devi scavare di più, per convincerli che ne vale la pena. Per essere convincente, dovrai capire il tuo pubblico di destinazione, comprenderne le esigenze, le motivazioni interne ed esterne.
Questo scavo significa anche che devi creare un prodotto che sia utile e risolva il bisogno di qualcuno.
Ad esempio, supponiamo che io abbia l'hobby di realizzare composizioni floreali di carta e voglia andare oltre e trasformarlo in un'attività. Qualcuno fa fiori di carta? Dove posso trovare queste persone?
Bene, potrei pensare che i wedding planner e le future spose potrebbero volere una tale opzione.
Ma devo andare ancora oltre. Ogni sposa vorrebbe i miei fiori di carta o solo un tipo di sposa?
Ciò significa che dovrai eseguire alcune ricerche e controllare i tuoi concorrenti. Ci sono altri commercianti di fiori di carta? Competi anche con i buoni vecchi negozi di fiori. Quale sarebbe quindi il tuo valore aggiunto o la tua proposta di valore unica?
- Cosa si aspetterebbero i visitatori del tuo sito web di trovare sul tuo sito web?
Tornando al nostro esempio, probabilmente i tuoi visitatori vorranno vedere una varietà di prodotti, di colori, informazioni sulla spedizione (potrebbero aver bisogno di qualche attenzione in più perché i fiori di carta sono fragili), ecc. Che dire di alcune menzioni che la carta è riciclata ? Forse i tuoi clienti sono molto consapevoli del loro impatto sull'ambiente e si preoccupano di questi dettagli
Qualcuno può anche noleggiare i fiori?
Ora, cosa succede se includi alcune testimonianze? Forse hai disegnato delle composizioni floreali di carta per i matrimoni dei tuoi amici.
Vedi dove sto arrivando? Devi fare le tue ricerche, prima di buttarti nel design del sito web.
- Come appaiono le conversioni?
Parliamo di iscrizione al corso, acquisto di un prodotto, iscrizione a una newsletter?
Nel caso di lunedì, puoi facilmente capire le loro conversioni dalla home page. 
La conversione principale è evidente dall'invito all'azione "Inizia", che è posizionato proprio sopra il fold, al centro.
Un'altra micro-conversione è una registrazione a una conferenza, che puoi notare dal messaggio nell'angolo in alto a sinistra.
Un'altra micro-conversione è quella “Contatta le vendite”.
E il tuo sito web, c'è una conversione principale? Ce ne sono di secondari?
- Come appare il percorso del cliente?
Una mappa del percorso del cliente è una rappresentazione visiva del percorso che un visitatore compie attraverso il tuo sito Web dal suo ingresso, fino al raggiungimento dell'obiettivo desiderato e alla partenza.
Una mappa del percorso del cliente dovrebbe includere informazioni come le pagine che vengono visitate e in quale ordine, i passaggi necessari affinché un visitatore del sito Web raggiunga i suoi obiettivi, i punti di interazione tra la tua azienda e i visitatori del sito Web (moduli, chat, ecc), potenziali punti di attrito.
Un viaggio del cliente non è fisso. Inizi con un presupposto e poi ti aggiusti lungo la strada. Puoi utilizzare strumenti come Google Analytics per analizzare il comportamento del sito Web ed effettuare ottimizzazioni basate su intuizioni reali.
2. Definizione della mappa del sito del sito 
Fonte
Ora che il percorso del cliente è chiaro, è il momento di creare la mappa del sito. La mappa del sito di un sito Web viene utilizzata per stabilire l'architettura delle informazioni del sito Web e spiega le relazioni tra le varie pagine.
Puoi creare mappe del sito con strumenti che vanno da Excel a Figma.
3. Creazione di contenuti 
Ora che la struttura del sito web è stabilita, è il momento di creare contenuti per le singole pagine.
Ecco alcune best case pratiche quando si tratta di copywriting:
- Usa parole e concetti familiari ai tuoi utenti ideali;
- Non andare con lanugine e gergo;
- Cerca di comunicare come faresti in un normale incontro faccia a faccia. In questo modo indurrai una sensazione di familiarità;
- Scrivi al presente ed evita la voce passiva;
- Controlla sempre la tua leggibilità. Per questo, puoi utilizzare strumenti come Readable .
- Metti alla prova i tuoi titoli con amici, estranei, colleghi. Come dice David Ogilvy:
“In media, il numero di persone che leggono il titolo è 5 volte superiore rispetto a quanto leggono il corpo della copia. Quando hai scritto il titolo, hai speso ottanta centesimi del tuo dollaro.
Ciò significa che i titoli sono vitali su un sito web.
Cerca di ottimizzare i tuoi contenuti attorno a determinate parole chiave pertinenti per il tuo pubblico (SEO). Puoi utilizzare strumenti come Google trends (gratuito), Ubersuggest (gratuito) o Ahrefs (a pagamento).
- Utilizza il framework di copywriting di AIDA.
A – Attenzione : crea contenuti che attirino l'attenzione, che incitino alla curiosità e che convincano il tuo pubblico che ha bisogno di saperne di più sul tuo marchio.
I – Interesse : dai ai tuoi visitatori un motivo per rimanere coinvolti. La chiave qui è rendere il problema personale in modo da parlare solo con il potenziale cliente e nessun altro.
D – Desiderio : è qui che mostri ai visitatori della tua home page come le tue offerte forniscono una soluzione al loro problema/dolore. Qui puoi iniziare a spiegare le caratteristiche del tuo prodotto, concentrandoti su come queste caratteristiche possono migliorare le loro vite.
A – Azione : ora è il momento di convincere i potenziali clienti ad agire: acquistare, iscriversi, scaricare un omaggio, avviare una prova, ecc.
4. Creazione del marchio visivo
Questo passaggio non deve essere sempre il tuo quarto passaggio. Puoi iniziare anche prima nel processo con questo.
L'identità visiva si riferisce al modo in cui dai forma alla percezione attorno al tuo marchio.
Questo è un intero processo di per sé.
Qui dovrai:
- Definisci come dovrebbe apparire la tua grafica . Utilizzerai forme, grafica 3D, illustrazioni?
Fonte
- Definisci la tipografia del tuo sito web ;
Fonte
- Scegli una tavolozza di colori . Dalla tavolozza dei colori, puoi evolvere in una guida di stile, in cui puoi stabilire i colori di collegamenti, titoli, pulsanti, sfondi, ecc. Per questo puoi utilizzare strumenti come la ruota dei colori di Adobe .
Fonte
- Cura le immagini che raccontano la storia del tuo brand;
Fonte: https://convertsquad.com/blog/
- Disegna il tuo logo
Fonte
- Preparare le risorse fisiche (imballaggio del prodotto, ecc.).
Fonte
La maggior parte degli elementi sopra può essere utilizzata per creare una moodboard. Quando raccogli i tuoi caratteri, la grafica, i colori in una mood board, sarai in grado di comprendere meglio la visione generale dell'umore del sito web. Quale sarà il tuo tono generale e la tua voce: chiaro o scuro? Formale o giocoso? 
Fonte
5. Wireframe 
Fonte
I wireframe sono schizzi di una pagina Web o di un'app. Puoi disegnarli a mano, crearli in Google Docs, Sketch o Figma , a seconda della complessità del tuo sito web. Un wireframe viene utilizzato per il layout di contenuto e funzionalità su una pagina. Dovrebbe dire a un designer dove dovrebbe posizionare un video, immagini, titoli, blocchi di contenuto, pulsanti, ecc. È bene usare i wireframe prima di passare al design perché ti consentono di essere più flessibile. È più facile modificare la struttura di un wireframe rispetto a quella di un sito Web già progettato.
6. Progettazione del sito web 
Fonte
Ora parliamo di affari!
Abbiamo i nostri contenuti, wireframe, elementi visivi, ora è il momento di mettersi al lavoro.
Come accennato nel titolo, non è necessario essere un web designer o un fanatico del codice per creare un sito web. Ci sono molti strumenti là fuori per aiutarti a progettare un sito web senza codice. Si chiamano Page Builder.
La maggior parte di essi ti consente di personalizzare ogni centimetro del tuo design e di renderlo reattivo.
All'interno di WordPress, puoi utilizzare il nostro builder Colibri o Elementor, ad esempio. Al di fuori di WordPress, Wix e Squarespace sono molto popolari. Questi strumenti possono fornirti modelli che puoi arricchire aggiungendo le tue sezioni, elementi visivi e contenuti.
Ora, se il tuo design richiede determinate animazioni ed effetti, potresti dover aggiungere del codice.
7. Test
Ok, supponiamo che i tuoi contenuti e le immagini siano attivi. Il tuo lavoro non è ancora pronto. È ora di assicurarsi che tutto funzioni: non ci sono collegamenti che non portano da nessuna parte (ovvero collegamenti interrotti o 404), che tutti i pulsanti e i moduli funzionino, che il sito Web abbia un bell'aspetto sulla maggior parte dei browser e dei dispositivi.
Ora, prima del lancio, potresti testare un po' come il tuo sito web viene percepito da persone esterne. In questo modo puoi evitare di essere preso nei tuoi stessi pregiudizi. Per questo, potresti fare una semplice ricerca utente: il test di 5 secondi . Questo è un metodo che ti aiuta a misurare la prima impressione che gli utenti ottengono entro i primi cinque secondi dalla visualizzazione di una home page, ad esempio
8. Avvia
Ora, quando avvii, premi semplicemente Pubblica e il gioco è fatto. No, devi creare un po' di buzz, lanciare alcune campagne di PR, fare un grido sui social media per far sapere alle persone che sei fuori!
E questo è un involucro gente. Ora hai i passaggi giusti per un processo di web design.
Buona costruzione del sito web!
Se ti è piaciuto questo articolo e vuoi saperne di più su come progettare un sito Web WordPress , assicurati di iscriverti al canale Youtube di Colibri e seguici su Twitter e Facebook!