Progettazione di un sito web per principianti

1. Stabilisci obiettivi e priorità prima di tuffarti in questa avventura

Quando si pensa al web design e a uno sviluppo di successo, a molti vengono in mente: i nomi di dominio, un host web affidabile, le combinazioni di colori del sito web e i sistemi di gestione dei contenuti. Tuttavia, la progettazione di siti web di successo necessita di priorità chiare. Inizia il progetto del tuo sito web determinando ciò che conta di più per la tua attività, in modo da sapere cosa dovrebbe includere il tuo sito web.

“Annota quali, secondo te, dovrebbero essere le caratteristiche di un sito web di successo e lavora a ritroso”, afferma Jonathan. “Questo processo ti aiuterà a decidere quali elementi includere nel tuo sito.”

Potresti trovare utile guardare altri siti web nel tuo settore per trovare ispirazione per il design. Sfoglia le loro pagine e prendi nota delle informazioni che forniscono, cosa definisce la comunicazione del brand e cosa offrono per attirare e mantenere l’attenzione dei visitatori. Osserva cosa pensi funzioni bene e dove aspiri a fare di meglio con il tuo design.

Questa lista di elementi importanti del sito web ti aiuterà a creare una mappa del sito. Una mappa del sito, come suggerisce il nome, mappa il tuo sito web stabilendo le pagine che lo caratterizzeranno e come queste si collegheranno tra loro. Sarà ciò che ti aiuterà a stabilire l’architettura delle informazioni successivamente.

Valuta di includere questi tipi di pagine web basiche nel tuo sito.

• Home page:
  Questa è la pagina principale del tuo sito web, spesso la prima pagina a cui accedono i nuovi visitatori. Dovrebbero vedere prima le informazioni importanti di cui hanno bisogno, capire cosa offri e sapere facilmente come andare oltre.
• Su di noi:
  Qui i visitatori possono accedere alle informazioni di base sulla tua attività, come hai iniziato, dove ha sede, la tua missione e i profili dei membri del tuo team. Puoi anche includere link per memorizzare orari e luoghi (se li hai), link a pagine social e informazioni di contatto.
• Servizi:
  A seconda di ciò che fa la tua azienda o organizzazione, una pagina contenente brevi spiegazioni dei servizi che offri, contenuti visivi relativi ai tuoi prodotti e link a pagine dettagliate per saperne di più su questi servizi potrebbe rivelarsi molto utile per i nuovi visitatori.
• Carriere:
  Se spesso hai bisogno di nuove aggiunte nel team, prendi in considerazione l’idea di avere una pagina in cui mettere in risalto le posizioni disponibili o un modulo in cui le persone possano richiedere informazioni sulle posizioni aperte.
• Blog:
  Se pubblichi regolarmente contenuti, la pagina di un blog potrebbe consentire ai visitatori di trovarti facilmente. Potrebbe includere aggiornamenti che riguardano prodotti o servizi, articoli relativi a ciò che offri, profili di nuovi progetti e qualsiasi altro contenuto che ti consentirà di offrire ai visitatori del sito web maggiori informazioni sulla tua organizzazione.

2. Crea un wireframe per visualizzare il tuo sito web

Un wireframe è lo scheletro del tuo sito web. Proprio come il progetto di una casa, ti dà un’immagine bidimensionale del layout, della struttura e della funzionalità del tuo sito web.

I wireframe possono essere creati con carta e penna o digitalmente, utilizzando strumenti di progettazione di siti web o un website creator in grado di comunicare visivamente la struttura del tuo sito. Esistono tre tipi di wireframe e, man mano che svilupperai il tuo sito web, passerai dall’uno all’altro, ottenendo una maggiore “fedeltà” o dettagli più precisi, man mano che avanzerai.

• Wireframe a bassa fedeltà: Questi primi schizzi approssimativi, che in genere hanno forme semplici e placeholder, sono utili per mappare il flusso di navigazione. “In questa fase, concentrati solo sul contenuto e sul modo in cui l’utente interagirà con esso, piuttosto che sull’aspetto effettivo del sito”, afferma Jonathan. “Questo è il livello dedicato alla pianificazione, è solo una bozza approssimativa del sito web e della sua gerarchia.”

• Wireframe a media fedeltà: In questa fase, non hai ancora immagini o testo live. Ti dedicherai alla creazione di rendering in bianco e nero che mostrano una rappresentazione accurata del layout del sito web. Sono disponibili strumenti per creare questi rendering che offrono prove gratuite, come Sketch o Balsamiq. “Questa fase è lo scheletro del tuo sito web”, afferma Jonathan. “Non hai bisogno di un design specifico, ma di linee pulite e dimensioni accurate.”

• Wireframe ad alta fedeltà: In quest’ultima fase di design, realizzerai un mock-up che assomigli al sito web reale, con immagini, combinazione di colori e testi reali. Potrai progettare elementi come menu e contenuti interattivi. “È qui che aggiungi colore e testi, ma non confonderlo con un prototipo funzionante”, afferma Jonathan. “È ancora solo un esempio della gerarchia del tuo sito web.”

3. Progetta pensando al tuo pubblico

Mentre passi da una fase all’altra della progettazione del sito web, concentrati sulla creazione di una risorsa in grado di rispondere al meglio alle esigenze del tuo pubblico. Dopotutto, è questo l’obiettivo principale. Assicurati in ogni fase dello sviluppo del tuo sito web, dall’impostazione delle priorità alla formattazione, passando per la navigazione, di pensare alle esigenze del tuo pubblico di destinazione.

“Per quanto eccitante possa essere creare un sito web completamente unico e non ortodosso, l’utente finale dovrebbe sempre essere messo al primo posto”, afferma Jonathan.

Consulta questa checklist per creare un’esperienza utente positiva (UX).

• Fornisci una gerarchia visiva:
  Una gerarchia solida consente ai visitatori di raccogliere rapidamente informazioni e capire i punti sul tuo sito web in cui poter trovare informazioni più approfondite. La gerarchia visiva include spaziatura, colori, spazio bianco, ripetizione e altro.
• Mantieni la semplicità:
  Durante la fase di progettazione, fa’ in modo che l’esperienza sia a misura di visitatore considerando se tutti gli elementi inseriti sono realmente necessari. Potresti aggiungere funzionalità che finirebbero per complicare il sito web e rendere più difficile la navigazione per il tuo pubblico.
• Definisci una call-to-action (CTA):
  “Ordina”, “Acquista ora”, “Iscriviti”, “Contattaci” e altri CTA dovrebbero essere facili da trovare e intuitivi. Continua a chiederti se il design del tuo sito web consente al tuo pubblico di capire facilmente come procedere.
• Rendilo accessibile:
  Il tuo sito web dovrebbe essere reattivo e accessibile da qualsiasi dispositivo. Esamina le prestazioni del tuo sito web in base al dispositivo sul quale viene caricato (PC, tablet e telefoni cellulari). Assicurati che gli utenti riescano a visualizzare correttamente testo e immagini su dispositivi diversi e che i pulsanti e le CTA siano facilmente selezionabili su schermi di varie dimensioni.

4. Usa le foto per raccontare la tua storia

Un sito web è un’esperienza visiva: concentrati su immagini capaci di attrarre il tuo pubblico di destinazione per aiutare a comunicare di cosa tratta il tuo brand. Se non disponi di fotografie proprietarie che ti permettano di presentare i tuoi prodotti o servizi, esistono molte fonti di immagini stock. Siti come Unsplash, Pexels e Pixabay offrono un’ampia selezione di immagini gratuite con cui iniziare.

Jonathan suggerisce di trovare una serie di immagini stock dallo stesso set o fotografo. “In questo modo potrai mantenere una certa coerenza stilistica nel sito”, afferma. “Farà apparire il tuo sito web più professionale e la tua attività più affidabile.”

Ricorda questi suggerimenti quando scegli le immagini.

• Assicurati che le tue immagini raccontino una storia.
  Non limitarti a scegliere un’immagine perché è carina. Pensa se l’immagine funziona con i contenuti del tuo brand.
• Anche se stai usando immagini stock, sii originale.
  Non fare la scelta più ovvia. Non scegliere qualcosa che un visitatore riconoscerebbe immediatamente, come una foto d’archivio vista su una dozzina di altri siti web.
• Assicurati che le persone nelle immagini assomiglino al tuo pubblico di destinazione:
  Ciò farà sentire i visitatori come se il tuo sito web e il tuo brand, prodotto o servizio siano qualcosa in cui potersi identificare e di cui hanno bisogno.
• Sii coerente con lo stile delle immagini:
  Assicurati che gli elementi visivi del tuo sito web rimangano fedeli al brand. Mantieni coerenti i colori, i caratteri e le immagini, in modo che rafforzino l’immagine del tuo brand.
• Ritaglia le immagini per un maggiore impatto:
  Se vendi gelato artigianale, ad esempio, e trovi un’immagine che ritrae un bambino carino che mangia un cono gelato con la sua famiglia, ritaglia la foto per mettere in evidenza il bambino. Otterrà più attenzione e sembrerà unico, rispetto ad altri siti web che potrebbero aver utilizzato l’immagine non ritagliata.

5. Tieni traccia delle tue prestazioni e migliora mentre avanzi

Un sito web evolverà continuamente man mano che la tua attività crescerà. Tieni traccia delle tue prestazioni dall'inizio utilizzando i report del tuo sito web per vedere cosa funziona e cosa ha prestazioni inferiori. Effettua quindi le modifiche che ritieni più opportune per migliorare l’esperienza degli utenti e i risultati per te.

L’integrazione di Google Analytics con il tuo sito web può aiutarti a monitorare l’attività per vedere quali pagine ricevono più traffico e dove le persone fanno clic. I test A/B, in cui metti a confronto due versioni diverse, ti aiuterà a determinare quali elementi del tuo sito web funzionano meglio e ti consentirà di essere sicuro che la tua CTA motivi i tuoi visitatori. “Se vuoi creare CTA in grado di generare conversioni e di contribuire a un’esperienza web memorabile, dovrai testare continuamente ciò che funziona meglio”, afferma Jonathan.

Un modo per vedere come gli utenti interagiscono con il tuo sito web è uno strumento di heat mapping come Hotjar, afferma Jonathan. La mappatura termica fornisce una rappresentazione grafica codificata a colori dei punti verso i quali gli occhi dei visitatori del sito web vengono attratti naturalmente. Può mostrarti quali aree del tuo sito web stanno ricevendo più attenzione e guidare il futuro miglioramento del design e delle iterazioni.

“Dal momento che è il traffico in tempo reale ad essere monitorato, è adatto sia per i siti web nuovi che per quelli operativi da lungo tempo”, osserva. “E la parte migliore è che la presentazione delle mappe di calore è chiara e semplice da capire.”

Occhio ai dettagli

Mentre progetti il tuo sito web, ricorda che è il fulcro della tua attività di marketing. Potrebbe essere la prima impressione che qualcuno ha della tua attività e vuoi che sia buona, quindi non prendere scorciatoie.

Dedica tempo e sforzi affinché tutto sia fatto nel migliore dei modi, consiglia Jonathan. Assicurati che tutte le tue funzionalità funzionino su schermi di qualsiasi dimensione, in modo che gli utenti possano navigare e utilizzare il tuo sito web senza intoppi. In caso contrario, cercheranno la concorrenza.

“Il web design a basso costo non ti darà la flessibilità e il controllo necessari per rendere il tuo spazio digitale identificabile e funzionale”, afferma. “Ogni elemento conta, anche quelli di base. Non lesinare sulla qualità.”

Confronta i migliori website builder gratuiti con Mailchimp.