Wireframe Blog Cover

Wireframe sito: cos’è e perchè va creato

Quando si comincia a ragionare sul design di un sito web o un’applicazione, è quasi inevitabile imbattersi nei wireframe: uno strumento molto utile se se ne conoscono le peculiarità e lo scopo, ma fuorviante se non si conosce bene.

Per noi si tratta di uno step fondamentale in qualsiasi progetto di UI design: idealmente posizionato tra architettura informativa e mockup, i wireframe permettono di definire e chiarire molti aspetti che precedono il visual design e che rappresentano le fondamenta di una buona progettazione.

Wireframe sito

Wireframe sito: cos’è di preciso?

Quando cerco di spiegare cos’è un wireframe a qualcuno che non ne ha mai visto uno, lo paragono sempre alla planimetria di un immobile.
Tramite una planimetria riesco a farmi una idea abbastanza precisa della casa, infatti posso capire:

  • quanto è grande l’immobile
  • la sua tipologia: è un monolocale? un negozio? un trilocale? (ovvero: si tratta di un blog? un eCommerce? un sito vetrina?)
  • come sono organizzate le sue stanze e quanto sono grandi (ovvero le sezioni del sito web)
  • dove sono posizionate le porte e, di conseguenza, quanto sono raggiungibili le stanze (ovvero i link tra le sezioni del sito)

Il wireframe è quindi composto da una serie di rappresentazioni grafiche semplificate di un sito web (o applicazione) che permettono di definire e comprendere tutti gli aspetti che stanno alla base del suo design:

  • strumenti di navigazione delle sezioni
  • flussi di navigazione
  • funzionalità del sito/applicazione
  • priorità ed organizzazione dei contenuti all’interno delle singole pagine/view
  • priorità ed organizzazione di azioni primarie e secondarie

Originariamente i wireframe erano creati sotto forma di documenti statici (ovvero immagini jpg/png), poi con l’evoluzione degli strumenti di UI/UX design si è passati a forme più evolute: oggi, grazie a strumenti come Figma, Sketch e Adobe XD, un wireframe può essere convertito in prototipo e diventare a tutti gli effetti un documento navigabile con cui si può interagire.

planimetria

Come si collocano i wireframe all’interno del processo di design

Il wireframing costituisce una parte fondamentale del processo di UI design, tuttavia non è l’unico passo da fare per avere un quadro chiaro del sito: prima di passare ai wireframe è infatti necessario redigere un design briefing esaustivo ed aver creato un’architettura informativa adeguata.

Tramite il design briefing otterremo dati fondamentali per la realizzazione dell’intero progetto, ma in particolare per i wireframe potremo capire:

  • a cosa serve il sito/app che sto per andare a disegnare?
  • ci sono funzionalità fondamentali richieste?
  • quanto sarà articolato il progetto?
  • e così via.

Una buona architettura informativa invece ci permetterà di individuare molto rapidamente:

  • Quali sono le sezioni di primo livello
  • Quali sono le sezioni di secondo livello
  • Quante e quali vie ci sono per raggiungere le sezioni principali

Solo dopo aver svolto questi due step è consigliabile passare ai wireframe del sito, che saranno a loro volta seguiti dai mockup, ed infine dai prototipi interattivi.

I wireframe rappresentano quindi una parte centrale e fondamentale del processo di UI design.

Caratteristiche fondamentali di un wireframe

Per cominciare la stesura di un wireframe è bene tenere a mente alcune caratteristiche fondamentali che permettono di creare un documento chiaro ed efficace:

  • Non devono essere presenti immagini, foto o elementi grafici (gli ingombri sono più che sufficienti)
  • E’ consigliabile lavorare in scala di grigi o bianco e nero, utilizzando un solo colore per richiamare l’attenzione su link e azioni (in Trapstudio utilizziamo il classico blu)
  • La disposizione degli elementi non deve essere per forza gradevole a livello estetico, ma deve descrivere prima di tutto le priorità della pagina (o della view, in caso si parli di app)
  • Deve essere estremamente chiaro che il documento che verrà presentato non è in nessun modo assimilabile ad un mockup

In particolare quest’ultimo punto è importantissimo per non fare andare il progetto fuori strada: al momento della presentazione del wireframe, infatti, è bene chiarire quale sia lo scopo del documento, che dovrà essere, nella sua semplicità grafica, una chiara rappresentazione delle fondamenta sulle quali verrà poi costruita l’interfaccia vera e propria.

Strumenti per creare wireframe

Nonostante il wireframing non richieda strumenti particolari per essere eseguito (c’è chi lo fa con carta e penna), esistono strumenti particolarmente validi per affrontare questo task in maniera efficiente.

Se siete alle prime armi ed avete poca confidenza con gli strumenti di design, sicuramente un editor drag & drop come Balsamiq Wireframes sarà la scelta più sensata.

Se siete UI designer, la via più semplice è sicuramente quella di utilizzare gli strumenti con cui avete già familiarità: Figma, Sketch e Adobe XD permettono infatti di svolgere il lavoro in modo rapido ed efficiente.

Se invece vi sentite avventurosi e volete lavorare con interazioni ad altissimo livello, Axure è lo strumento che fa per voi.

In Trapstudio abbiamo scelto di utilizzare Figma.

Risorse per creare wireframe con Figma

Per facilitare il processo di creazione di wireframe è consigliabile utilizzare una piccola scala tipografica ed una griglia standard, oltre ad un’eventuale libreria di componenti semplificati precostruita in caso non ne abbiate in casa: la qualità dell’output in questa fase infatti non risiede nell’estetica, ma nel ragionamento che sta alla base delle gerarchie di contenuto e dei flussi definiti per ogni sezione.

Come libreria di partenza su Figma, Lo-fi Wireframe Kit è un’ottimo punto di partenza: comprende infatti un kit di componenti neutri (ideali per il wireframing) ed una scala tipografica minimale che permette di partire da subito con delle basi solide ed una buona resa grafica.

L’adozione di una griglia standard fornisce un ulteriore aiuto: consigliamo l’adozione della classica griglia a 12 colonne, attivabile su Figma attraverso il pannello Design->Layout grid->Columns, avendo cura di selezionare prima un frame sul quale attivare la griglia.

Conclusioni

Creare wireframe può essere molto semplice a livello tecnico, ma il ragionamento dietro ogni decisione di design non deve essere affrontato con leggerezza: decisioni superficiali possono infatti influenzare il lavoro successivo, fino a portare il progetto completamente fuori strada.

Un wireframe completo e ben ragionato può essere condiviso nella fase iniziale della progettazione, in modo da stabilire i punti fermi del progetto ancora prima che questo venga disegnato: questo tipo di approccio permette di spianare la strada allo UI designer, che ve ne sarà infinitamente grato.

Con buona pace del vostro Karma.