Zoning

A cosa serve la suddivisione in zone?

Questa fase del web design viene prima della progettazione grafica. Da una struttura ad albero, che costituisce lo “scheletro” del sito, permette di definire la struttura delle pagine, attraverso la localizzazione e l’organizzazione dei vari elementi: logo, menu, colonne, aree di testo, footer, ecc.

Grazie alla suddivisione in zone, possiamo concentrarci sull’ergonomia e sulle funzionalità del futuro sito web senza essere influenzato dall’aspetto grafico di quest’ultimo. Questo passaggio consente di risparmiare tempo sulla progettazione del sito, perché consente di rilevare eventuali problemi di ergonomia e navigazione prima di concentrarsi sulla progettazione grafica.

Il lavoro di zonizzazione permette di ottenere un modello (un wireframe) che dettaglia il contenuto che si trova in ogni pagina del sito. Il wireframe, a volte chiamato anche mockup, è quindi una rappresentazione visiva dell’interfaccia di un sito.

Successivamente, il wireframe guida il progettista nel suo lavoro di formattazione grafica, aiutandolo a disegnare i modelli di ogni pagina partendo da una base chiara. Il wireframe ha il vantaggio di essere compreso da tutti (progettista, cliente, sviluppatore, ecc.), permettendo a tutti di esprimere i propri bisogni e desideri e di apportare modifiche.

Il wireframe permette di rendere un progetto chiaro e concreto, mettendo a confronto l’idea del progetto con la sua fattibilità tecnica. Lo scopo della progettazione di un wireframe è rendere un punto d’onore all’ergonomia e UX USER EXesperienza utente . Pertanto, la suddivisione in zone viene generalmente eseguita da un ergonomo o da un web designer, a volte con l’aiuto di un UX designer.

Questa fase permette anche di stimare il budget necessario per la realizzazione del sito web .

Come fare una zonazione?

Il lavoro di suddivisione in zone può essere svolto utilizzando strumenti specializzati come Mockflow, Axure, Balsamiq o Adobe Experience Design, ma anche con software di progettazione grafica come Photoshop, o anche a mano, semplicemente utilizzando un foglio di carta e una matita.

Il software specializzato ha il vantaggio di offrire una banca di elementi riutilizzabili (icone, pulsanti, ecc.) ed è intuitivo da usare. Inoltre, alcuni strumenti di wireframing consentono la creazione di mockup interattivi, al fine di testare la facilità di navigazione tra le pagine. Possiamo così metterci nei panni dell’utente, testare le diverse funzionalità in situ e correggere gli errori se necessario.

L’interesse della suddivisione in zone per il riferimento naturale?

La questione SEO deve entrare in gioco fin dalla fase di progettazione del sito. Per questo, è preferibile produrre wireframe progettati appositamente per soddisfare le esigenze del SEO. È necessario strutturarli in modo tale che la navigazione interna e i contenuti possano essere ottimizzati facilmente.

Il wireframe consente quindi agli esperti SEO di pianificare l’ottimizzazione on-page del sito e di pensare agli elementi che possono facilitare la conversione, generazione di Lead e il netlinking .

Il passaggio del wireframing può persino aiutare a preparare la ricerca di parole chiave per ogni pagina.

La strategia ideale è quella di scrivere e strutturare il contenuto (h1, h2, ecc.) prima della fase di zonizzazione, in modo da tenere conto del messaggio da veicolare e porre il contenuto al centro del wireframe. Il designer può quindi tenere conto di queste esigenze SEO per la formattazione grafica: blocchi di testo espandibili, scelta di un webfont piuttosto che di icone grafiche, ecc.