I Wireframe sono molto spesso utilizzati nel Design di siti web, ma anche di altri prodotti in ambito grafico web, e sono una prima bozza grafica, realizzata con carta o penna o con specifici programmi, per dare un’idea generale della realizzazione del sito web. Vengono utilizzati spesso per sviluppare lo scheletro del sito e focalizzarsi maggiormente sulla fruizione del contenuto da parte dell’utente.
Logicamente lo stadio di questo file non sarà mai definitivo, ma sarà formato, per lo più da forme e testi che, successivamente, prenderanno forma.
Come viene realizzato un Wireframe
Molto probabilmente vi sarà già capitato di eseguire un Wireframe senza neanche saperlo, magari abbozzando su carta un’idea che vi era arrivata sul momento, andando a sviluppare una prima bozza di un sito web, ecco, quello, a tutti gli effetti, si può definire un primo wireframe.
Crearli non è complesso, come detto possiamo farli con l’utilizzo di carta e penna, per eseguire uno schizzo molto veloce di ciò che abbiamo in mente, oppure possono essere utilizzati con programmi creati ad hoc (adesso utilizzo nello specifico Adobe XD).
Vengono realizzati in bianco e nero appositamente, per far si che tutto possa concentrarsi solamente sulla struttura, sulla fruizione del contenuto. Questa è una fase primordiale e fondamentale, dove si mettono le basi della user experience.
Mi è capitato, molto spesso a dir la verità, di presentare un’interfaccia già completa, in quel caso il cliente si focalizzava maggiormente sull’utilizzo di un determinato colore o di una determinata immagine, magari inserita lì come esempio, piuttosto che su tutta l’architettura del sito.
Perché usarlo? I vantaggi del wireframe
Come già detto, uno dei principali vantaggi è quello di far concentrare cliente e operatori sulla struttura e la fruibilità dei contenuti, il logo posizionato in un certo modo, il peso e le dimensioni di un font, la grandezza di immagini, icone e cosi via.
Ha, inoltre, un altro grandissimo vantaggio: la facilità e velocità di creazione e successiva modifica. Non perderai cosi tanto tempo durante le modifiche, ma realizzare il tutto sarà molto più veloce.
Sarà possibile cosi, insieme alla parte marketing, focalizzarsi sugli obiettivi a cui punta questo sito web, la posizione delle CTA, il possibile comportamento degli utenti e molto altro.
Dove vengono utilizzati?
I wireframe in genere vengono utilizzati per la creazione di pagine web, siti web o web app, ma sono molto utili anche nello sviluppo di applicazioni per dispositivi mobili.
Tools per realizzare Wireframe
Di seguito una breve lista per realizzare questi scheletri di pagine web, sia online che offline:
- Carta e penna
- Adobe XD
- Sketch
- Wireframe.cc
- mockflow
- balsamiq
- moqups
Molte di queste app permettono anche di realizzare Mockup e di effettuare prototipazioni, ma queste sono fasi più avanzate del progetto, sono dei file più completi, con l’aggiunta di grafica, testi e microinterazioni che non appartengono, invece, al wireframe.
Rispondi