Il racconto della prima esperienza con la prototipazione: dalla scelta del software al prototipo, passando per il wireframe e il mockup.
In questo articolo voglio condividere la mia esperienza nella creazione del mio primo prototipo di sito web, partendo come completo principiante nel mondo della prototipazione e del design di mockup.
Inizio del progetto
Innanzitutto, partiamo dall’obiettivo dell’attività: realizzare un prototipo basilare che illustri il funzionamento di base di un sito web richiesto da un cliente, con le principali pagine e funzioni, in modo da poter ragionare assieme al cliente su tutta la struttura e le funzioni che dovrà avere il prodotto finale.
Dal wireframe al prototipo, passando per il mockup
Da qui è partita la mia attività, con molta libertà e autonomia ho potuto iniziare a progettare il mio primo prototipo.
Il primo passo è stato sicuramente quello di comprendere il progetto del cliente, per aver piena consapevolezza di quello che dev’essere il prodotto da creare.
Penna alla mano, ho iniziato a mettere su carta le prime bozze del sito, con appunti e schizzi. In questo modo, sono andato a realizzare i miei wireframe, ovvero le prime interfacce schematiche.
La scelta di Figma
Il passo successivo alla realizzazione del wireframe è quello di trasformare tutto in digitale, andando così a realizzare il primo mockup del sito.
A questo punto è comparso il primo vero ostacolo dell’attività: come faccio a trasformare uno schema su carta in un’interfaccia grafica? Dopo qualche ricerca sul web per capire come poter risolvere questa questione, ho capito che avrei dovuto utilizzare un software per la prototipazione, che mi avrebbe permesso prima di realizzare il mockup e successivamente renderlo funzionante, creando così il prototipo.
Il dubbio principale era quale software di prototipazione scegliere. Da totale inesperto del settore, mi sono completamente affidato a ciò che ho letto nei vari articoli e nelle recensioni online, e ho scelto Figma (link al sito web), siccome l’ho ritenuto fin da subito molto completo e intuitivo da utilizzare e ricco di funzionalità gratuite.
In breve: cos’è Figma?
Figma è una piattaforma di design basata su cloud che supporta la creazione collaborativa di wireframe, mockup e prototipi per interfacce utente.
La realizzazione del mockup
Una volta entrato su Figma, mi sono immerso nel software e ho iniziato a capire le varie funzioni.
Ho cominciato col definire il frame ovvero le dimensioni dello schermo su cui realizzare il mockup. Successivamente sono passato a impostare il layout delle mie interfacce, trasformando i wireframe creati su carta in veri e propri mockup digitali. Ho ricreato tutti i vari elementi presenti sulle pagine web: header, footer, menù, pulsanti, ecc. Nella creazione dei mockup ho applicato così anche un certo stile, impostando colori, sfumature, dimensioni, font ecc.
Lo step finale: il prototipo
Dopo aver creato tutti i mockup ovvero tutte le interfacce utili al prototipo, è cominciata la fase di prototipazione vera e propria.
Sempre su Figma ho potuto creare il Flow, la sequenza di schermate e interazioni che l’utente può compiere e visualizzare attraverso dei clic su pulsanti, link ecc.
La praticità di Figma nella prototipazione entra in gioco proprio ora: con un semplice drag and drop si possono creare i collegamenti tra i vari elementi, come ad esempio la visualizzazione di una certa schermata dopo un clic su un pulsante. Infatti, attraverso la visualizzazione in modalità prototipo del mockup basterà collegare l’elemento da cliccare, come ad esempio un pulsante, al frame da visualizzare al suo clic.
Ovviamente si possono creare diversi tipi di attivazioni di interazioni tra elementi, non solamente al clic, ma anche al trascinamento, alla sovrapposizione del mouse, quando si preme un tasto.
Come ho imparato rapidamente le basi di Figma
Durante questa prima esperienza con Figma per creare il prototipo del sito, ho deciso di prendere una scorciatoia per apprendere lo strumento più velocemente.
Non essendo un esperto di design digitale, ho fatto un breve corso di un'ora chiamato "Figma Basics" su Learnn, piattaforma di video-corsi. Questo mi ha aiutato a capire rapidamente le funzioni principali di Figma, rendendo più veloce il passaggio dalle idee ai mockup interattivi.
Considerazioni finali
Usare Figma per creare il prototipo del sito web è stata un'esperienza davvero positiva.
Anche se ero nuovo nel mondo del design digitale, ho trovato Figma molto facile da usare e pieno di funzionalità utili. Mi ha permesso di passare facilmente dai miei schizzi su carta a mockup dettagliati e prototipi interattivi. La sua interfaccia semplice e le potenti funzionalità di prototipazione hanno reso facile visualizzare e testare le mie idee di design.
Software approvato e consigliato per chiunque desideri addentrarsi nel mondo del product design e della prototipazione!
