Dopo aver strutturato l’User Flow del progetto Close2me, possiamo realizzare i primi Wireframe dell’app che dobbiamo progettare.

Che cosa sono i Wireframe?

wireframe sono una sorta di modello, di template “base”, utilizzato per rappresentare visivamente la struttura di un progetto web o, nel nostro caso, di un’app.

I wireframe ci permettono di capire meglio gli elementi che dovremo inserire nelle varie schermate, di scegliere la loro posizione e definirne la gerarchia (capire quindi quali di essi hanno priorità e devono essere valorizzati rispetto agli altri), di strutturare proporzioni e dimensioni di testi, immagini e pulsanti e molto altro ancora.

La creazione di Wireframes, che sia realizzata semplicemente con carta e penna o con un qualsiasi apposito tool (io utilizzavo carta e penna e poi MockFlow, ma adesso preferisco fare tutto su Adobe XD o Sketch) è uno step fondamentale del processo di design di una interfaccia poiché permette di monitorare l’usabilità della stessa, di individuare eventuali punti critici e di perfezionare l’User Flow prima di iniziare il processo di sviluppo vero e proprio.

Ricorda: I Wireframes vanno realizzati rigorosamente in scala di grigio, senza utilizzare colori. Questo ci permetterà di focalizzarci sui contenuti e sulla loro disposizione, senza alcuna “distrazione visiva”.

Ecco i Wireframe del progetto Close To Me, realizzati con Adobe XD:

Come vedi il progetto già sta prendendo forma, anche se siamo ancora lontani dalle schermate finali che andremo a consegnare al developer che si occuperà della messa in codice.

Una volta condivisi i Wireframes con il cliente e apportate le eventuali modifiche, è arrivato il momento di definire lo Style Guide e di passare al disegno vero e proprio delle schermate. Ma questo lo vedremo nel prossimo articolo :)