Il blog di ABCFormazione
Nella realizzazione di un sito è necessario seguire precisi step al fine di progettare in modo ordinato e chiaro.
Dopo un iniziale brief con il cliente e una volta realizzata la sitemap del sito, si procederà con la realizzazione dei wireframe delle pagine web.
Ma cos’è nel dettaglio un wireframe e perché è così importante realizzarlo? Te lo spieghiamo nel nostro articolo.
Che cos’è il Wireframe?
Il Wireframe è un prototipo, una bozza grafica professionale che serve per dare un’idea di come saranno le pagine di un sito. Si tratta nello specifico della prima rappresentazione visuale del sito web.
Attraverso il wireframe è possibile identificare chiaramente:
- struttura del sito web
- architettura delle informazioni
- disposizione degli elementi all’interno della pagina
Avere uno scheletro del lavoro che si andrà a realizzare, è utile per capire sin da subito quali sono le cose che possono funzionare e quali invece sono da rivedere. Permette dunque di risparmiare sui costi di eventuali errate comunicazioni e procedere in modo ordinato e senza confusione.
Come realizzare un Wireframe di un sito web
Il wireframe di un sito web può essere:
- Wireframe manuale con carta e matita/pennino oppure su lavagna
- Wireframe digitale realizzato con una serie di tool che rendono il wireframe interattivo. Uno dei software maggiormente utilizzati è Balsamiq, insieme ad Adobe XD.
È consigliabile realizzare un wireframe a bassa definizione per non dare l’impressione che le decisioni di design siano state già prese. Solitamente, infatti, viene realizzato in bianco e in nero per dar maggiore risalto a ciascun elemento.
I designer, durante questa fase, usano dei testi in latino chiamati “Lorem Ipsum”.
Il wireframe deve essere realizzato dopo un brief con il cliente per valutare gli obiettivi del sito web.
Il wireframe, durante le fasi di sviluppo, verrà di volta in volta modificato e arricchito in base alle richieste del cliente.
Differenza tra Wireframe e Mockup
Sebbene chi non si occupa di grafica tende a pensare il contrario, il wireframe e il mockup non sono la stessa cosa.
Wireframe e mockup sono due elementi essenziali nella realizzazione di un sito. Per sviluppare il tutto è sempre essenziale partire dall’idea. La base dell’idea è rappresentata dal wireframe, la bozza grafica, lo schizzo che rappresenta lo scheletro del progetto.
Solo una volta realizzato il wireframe si può passare alla realizzazione del mockup.
Il mockup è un modello dimostrativo (in scala o a grandezza naturale) di un oggetto o un sistema che contiene colori, grafica e dati più realistici.
Solitamente vengono realizzati mockup per ogni tipologia di dispositivo: pc, tablet e smartphone.Questo è dato dall’importanza di progettare in responsive design, ovvero realizzare siti facendo in modo che le pagine adattino automaticamente il proprio layout a diversi dispositivi e risoluzioni.
Sempre più spesso ormai si progetta partendo dal mobile. Infatti, a causa del poco spazio a disposizione, costringe a semplificare e organizzare i contenuti per priorità, dall’alto verso il basso.
Vuoi diventare un Web Designer?
