Come si disegna una pagina web? Quali sono le fasi di lavoro che riguardano la progettazione grafica, funzionale ed estetica di un sito web? In che modo si ottengono pagine performanti e quali sono gli strumenti idonei per procedere?
Per prima cosa devi affidarti al miglior host, grazie al quale ottieni uno spazio web in cui saranno ospitati i tuoi contenuti sotto un nome di dominio da te designato.
Successivamente dovrai decidere se procedere con un CMS se non hai competenze di programmazione e stabilire quali tra i tanti esistenti utilizzare.
Nel caso in cui procedessi senza CMS dovrai conoscere i linguaggi HTML, CSS e php, fondamentali per disegnare l’interfaccia utente senza l’utilizzo di un apposito programma.
Per entrambe le opzioni dovrai considerare l’aspetto estetico e quello funzionale, stabilendo le posizioni dei contenuti in base all’esperienza di navigazione. In questa guida vedremo come disegnare una pagina web a partire dal layout fino al risultato finale.
Creare il layout
Quando parliamo di layout facciamo riferimento ad un modello che darà forma alla struttura della pagina o dell’intero sito web. In breve si tratta dell’aspetto estetico, ovvero del design che la pagina mostrerà ai naviganti. Il suo ruolo è importantissimo perché si compone di elementi grafici e visivi che guideranno gli utenti nella ricerca delle informazioni a cui sono interessati.
Dal momento che navighiamo sia da PC che da smartphone, inoltre, questo dovrà essere facilmente leggibile da tutti i dispositivi per evitare che le persone fuggano a gambe levate una volta atterrate sul tuo sito.
C’è poi da considerare che certi elementi devono essere sempre posizionati laddove gli utenti sono abituati a trovarli. Per esempio il logo ed il menu non possono essere posizionati a casaccio ma devono essere sempre indicati in alto, al portata di vista per non disorientare le persone.
Tra gli elementi fissi c’è anche il footer, un riepilogo sintetico che mostra i dati di contatto, le policy e le informazioni utili a migliorare l’esperienza di navigazione. Nel mezzo del layout troverai un’infinità di possibilità di combinazioni tra elementi grafici e testuali per cui oltre ad avere un’idea chiara su come procedere, dovrai aver messo nero su bianco una precisa strategia che sia capace di venire incontro a tutte le esigenze di un sito web realmente performante:
- Ottimizzazioni SEO
- Elementi responsive
- Chiarezza informativa
- Facilità di fruizione dei contenuti
Per questo a prescindere dallo strumento che deciderai di utilizzare per impostare il layout della pagina web ti conviene sempre lavorare su un progetto da disegnare a mano o con un programma apposito.
Presentare il Mockup
Il mockup (anche detto mock-up) è una realizzazione illustrativa di ciò che si intende realizzare.
In questo caso per il sito web è la rielaborazione grafica del layout della pagina web prima ancora che questa venga disegnata con la programmazione ad HOC o con l’aiuto di un site builder fornito dal CMS.
Chiaramente ci sono tanti termini per indicare questo studio ma il punto chiave della questione riguarda proprio la necessità di disegnare un modello a mano e analizzarlo per capire se funziona o se, invece, deve essere migliorato.
Un mockup è un prototipo della pagina web da disegnare che simula l’aspetto della stessa e che di solito le agenzie inviano al cliente in procinto di realizzare il sito web. Una volta stabilito il corretto posizionamento degli elementi sulla pagina web il professionista provvederà ad inserirli così come programmato dal progetto approvato.
Il mockup, quindi, serve a distribuire i cinque elementi chiave di ogni pagina web che sono:
- header
- menu
- above the fold
- body
- footer
Come anticipato poc’anzi Header e Menu sono gli elementi sempre posizionati in alto e al di sotto dei quali si posizionano, in ordine di importanza, l’above the fold ed il body.
Il primo fa riferimento a “ciò che si trova prima della piega di una pagina”, ovvero in corrispondenza di ciò che l’utente vede non appena atterra sulla stessa. È qui che si collocheranno gli elementi essenziali che verranno approfonditi nel body, ovvero nel corpo della pagina.
In conclusione gli utenti troveranno il footer, un elemento che chiude la navigazione e che fa capire agli utenti che al di sotto non vi è più nulla da visionare.
Quali sono i tool
Quali strumenti potresti utilizzare per disegnare una pagina web?
La risposta è che non c’è una lista unica valida per tutti i designer di siti web. Tutto dipende dal budget e dalle finalità del sito.
Per esempio se userai tool come Hotjar potrai creare mappe calde, ovvero registrazioni delle sessioni di navigazione degli utenti che ti aiuteranno a capire come migliorare il layout della pagina. Per il mockup, invece, ci sono tantissimi siti web come freepik, mockupworld, dribble o mockdrop che ti permettono di produrre schermate e colonne per progettare la tua pagina web.
Successivamente potrai passare al wireframe, ovvero al passaggio della progettazione illustrativa a quella vera e propria. Questa fase può essere saltata se sei solo ad occuparti della progettazione del tuo sito web perché, di fatto, serve a trasmettere le indicazioni di layout al web master e al web designer.
I tool online per creare bozze semplificate del wireframe sono comunque utili per capire che aspetto avrà la pagina web e in che modo posizionerai all’interno di essa i tuoi contenuti. Potresti provare Mockflow o Balsamiq, due dei software pià popolare per questo genere di progettazioni. Di questi programmi ce n’è un’infinità per cui ti suggeriamo di partire da quelli più popolari e di provare a utilizzarli, creando un tuo metodo di lavoro che ottimizzerai via via, acquisendo competenze ed esperienza.
Pubblicato: | Aggiornamento: