Dopo la prima fase di progettazione di un sito web o di una applicazione mobile arriva il momento di tradurre in pratica la nostra idea. Il primo passo sono i modelli base, che ci aiutano ad organizzare la disposizione visiva dei contenuti. Probabilmente avrai già sentito parlare di wireframe, prototipi e mockup. Sono termini che vengono spesso usati come sinonimi, in realtà sono molto differenti: non solo hanno un aspetto diverso ma servono a scopi diversi. Analizziamoli insieme.
Un wireframe è la rappresentazione a bassa fedeltà di un design, assolutamente non interattivo. Si tratta di uno schema generale per la disposizione dei gruppi di contenuti, la struttura delle informazioni, e una prima visualizzazione di base dell’utente. In genere è in bianco e nero, con spazi vuoti delimitati da linee e bordi: proprio un ”filo di ferro”, come suggerisce la traduzione letterale del termine.
Un mockup si differenzia perché è statico come il wireframe ma è dotato di elementi visivi (anche quelli del brand committente); rende l’idea del progetto finale ma senza l’interattività di un prototipo. Rappresenta la struttura delle informazioni e la disposizione dei contenuti, insomma dimostra tutte le funzionalità di base ma sempre in maniera statica. Il mockup è il modello che viene in genere presentato al cliente perché è più comprensibile e più vicino al prodotto finale.
Un prototipo, invece, è una rappresentazione più dettagliata e fedele del prodotto finale. La sua particolarità rispetto al wireframe e al mockup è data dalla possibilità di interazione con l’utente, per questo è lo strumento principale utilizzato nei test di usabilità prima della fase di sviluppo. È un passaggio cruciale proprio perché simula l’interazione finale tra utente e interfaccia.
Come si realizzano questi modelli? C’è chi preferisce usare carta, gomma e matita ma sono disponibili molti software che consentono di avere ottimi risultati in poco tempo (e più comodamente). Qui a DoLab nelle scorse settimane abbiamo già usato programmi di questo tipo durante il corso User experience & Mobile Usability: ad esempio Balsamiq per creare un primo wireframe di una app, e Marvel per elaborare il prototipo finale.
Utilizzeremo Marvel anche per la realizzazione di un hi-def Interactive prototype di una applicazione mobile durante Disegna la tua app, il corso tenuto da Nicola Di Cosmo in partenza il prossimo 23 febbraio, specifico sulla user interface. Se hai un’idea di app è il momento giusto per tirarla fuori dal cassetto e disegnarla! E se non hai ancora un tuo progetto nessun problema: puoi partecipare alla creazione di un project work per Tutored, startup di LUISS ENLABS, per lo sviluppo della loro app.
Leggi il programma completo e contattaci per saperne di più. Ma affrettati, il corso inizia il 23 Febbraio!