Hosting WordPress preinstallato e gestito con il 50% di sconto. Scopri la promo
Hai un obiettivo: creare un sito web per iniziare a promuovere il tuo nome. Hai bisogno di una base stabile per fare pubblicità online e per aumentare i clienti. Ma hai ben presente che per plasmare tutto questo (in modo professionale) devi capire come disegnare una pagina web.
Prima di lanciare il sito, e di lavorare sul codice HTML, devi fare molti passi importanti. Comprare un hosting di qualità? Questo è uno snodo che deve essere risolto nel miglior modo possibile, lo stesso vale per il dominio. Ma non è sufficiente per iniziare bene.
Quando le persone arrivano sulle risorse del sito devono prendere decisioni. Che dipendono anche, ma non solo, da come hai strutturato le risorse che compongono il contenuto finale. Ecco perché capire come disegnare una pagina web diventa centrale. Da dove iniziare?
Argomenti
Quando decidi di creare un layout per un sito e di disegnare una pagina web parti da una serie di fonti e di ispirazioni. Poi, con gli strumenti per creare wireframe (che ho elencato nei prossimi paragrafi), generi una struttura che verrà ripresa dai web designer. E ottimizzata da chi si occupa del codice in termini SEO.
Questi sono i passaggi base. Però ci sono alcuni step da rispettare quando decidi la struttura di una pagina web. In primo luogo devi considerare lo scopo: a cosa serve? Perché stai creando questa risorsa?
L’utente ne ha bisogno? Come cambierà la sua esperienza? Rispondere a queste domande è importante per lavorare intorno al concetto di conversione. Vale a dire gli elementi che permettono alla pagina di raggiungere i frutti che hai tanto desiderato.
Disegnare una pagina web significa posizionare elementi in uno spazio vuoto, e tra questi ci sono pulsanti, immagini, video, blocchi di testo più o meno grandi. Per gestire questo equilibrio devi ragionare intorno agli obiettivi, ecco qualche esempio concreto da ipotizzare:
Ogni pagina web ha le sue caratteristiche, prima di iniziare a disegnare e a ipotizzare layout con Photoshop o altri programmi conviene fare un brief e definire una strategia con tanto di alberatura del sito per avere sotto controllo obiettivi delle pagine e struttura da rispettare.
Quando disegni il tuo sito – e nello specifico le pagine web – non perdere mai di vista le sezioni fondamentali che si restringono a 5 elementi da curare con grande attenzione e che hanno funzioni diverse. Il più importante è l’above the fold, la prima sezione della pagina che appare quando viene aperta nel browser. Qui puoi aggiungere header e menu di navigazione.
Senza dimenticare eventuali elementi di conversione come le call to action con relativi bottoni. Il footer, invece, è la chiusura della pagina: la parte finale del documento che raccoglie informazioni utili e ulteriori elementi di navigazione. Un destino condiviso dalla sidebar che però può avere degli scopi differenti per portare i lettori verso pagine specifiche.
In ogni caso non devi mai dimenticare la centralità del body, il corpo principale della pagina che può essere articolato in blocchi di testo, foto e video. Ma anche podcast, bottoni, icone, elementi interattivi e tutto ciò che puoi inserire per rispondere alle necessità dell’utente.
Per ottimizzare il tutto e assicurarti che lo scopo venga raggiunto dovresti muoverti in base a dati concreti. Per questo consiglio di usare, almeno in un primo momento, un programma come Hotjar per creare delle heatmap e delle registrazioni delle sessioni. In questo modo puoi capire cosa fanno gli utenti sulla pagina per migliorare l’esperienza di navigazione.
Con il termine mockup si intendono le rappresentazioni del sito web come dovrebbe essere una volta terminato. Di solito si crea un montaggio su diversi dispositivi, in questo modo il cliente può avere un’idea generale di cosa avrà alla fine dell’opera. Il mockup, a dirla tutta, serve anche agli altri componenti del team ma con quali strumenti puoi crearlo?
Per il mockup puoi usare delle basi che hanno degli spazi vuoti e che devi riempire con schermate e ipotesi. In questi casi si prosegue con Photoshop ma ci sono diverse soluzioni che ti offrono la partenza ideale. I nomi sono già noti a tutti i web designer, te li passo:
Tra le tante soluzioni consiglio quella storica: placeit.net. Quest’applicazione online è tra le più semplici e immediate, ti offre la possibilità di caricare la tua immagine e posizionarla nel miglior modo possibile su scatti di vita quotidiana o sfondi neutri con schermi di diverse dimensioni.
Una volta schiarite le idee su come disegnare una pagina è arrivato il momento di investire sui fatti: devi passare dalle ipotesi del tuo progetto alla realtà vera e propria, e per farlo devi dare indicazioni chiare a web master e web designer. Ecco perché è centrale il wireframe.
Con questo termine, nel settore che ruota intorno al mondo del web, si intende una bozza semplificata del sito web basata su forme e linee. Tutto è molto semplice in un wireframe, serve a dare una linea guida per chi deve operare con il codice. Ma quali sono i migliori tool?
Quale scegliere? Ce ne sarebbero altri ma, come spesso accade in questi casi, preferisco limitare la scelta a pochi tool. Ovviamente di qualità. Wireframe.cc è perfetto per progetti gratuiti e poco impegnativi, mentre Balsamiq è per grandi aziende che operano con tanti clienti e collaboratori. Mockflow, mi sembra chiaro, diventa la buona via di mezzo.
Da leggere: come indicizzare un sito web
Ho elencato i punti essenziali per realizzare il layout di una pagina web veloce e funzionale, con un occhio di riguardo nei confronti degli strumenti utili per questo compito. Sto parlando di tool per wireframe e mockup, elementi essenziali per presentare bozze.
Tu sei pronto per creare un template per sito web? Qual è lo strumento che preferisci per disegnare una pagina web? Come sarà il tuo progetto? Lascia le tue domande nei commenti.
