Una volta validato il welfare, è arrivato il momento che tutti aspettavamo quello di realizzare il prototipo, ossia la rappresentazione realistica del nostro prodotto per creare un prototipo.

Ci sono tanti tool che possono esserci utili.

Uno dei tour più in voga al momento è sicuramente Fig, ma consiglio di utilizzare Fig, ma per il nostro esercizio, perché ci dà anche una versione gratuita e quindi iniziare un po' a sporcarsi le mani con questo tipo di tool.

Questo tipo di tulle, che sono molto diffusi ormai da qualche anno a questa parte, in realtà sono molto simili nel funzionamento, quindi imparare ad utilizzare Fig, ma non ci preclude la possibilità in futuro di cambiare tool e andare verso uno che magari più rispetto alle nostre esigenze.

Altri tool utili per creare prototipi sono sketch e addobbi XD, ma ci sono anche tanti designer, un po' nostalgici che continuano a realizzare i prototipi con Photoshop.

L'importante è avere la possibilità di inserire le informazioni e i contenuti in maniera realistica, quindi inserire immagini, avere la possibilità di regolare in maniera puntuale le altezze, le dimensioni, le spaziature, eccetera.

Sarebbe molto riduttivo insegnare a realizzare un prototipo perché servono tantissime informazioni per farne una ad hoc.

Proveremo però a realizzarne una semplice la prima cosa da fare è andare a prendere il wolfram e vedere come la struttura del nostro prodotto.

Iniziamo con la home page.

La nostra homepage dovrà essere così.

Per comodità faccio uno screenshot, ma volendo cioè la possibilità anche di esportare una borsa intera da Miro per evitare di fare un po' avanti indietro metto il mio wireframe accanto al prototipo che sto per andare a creare per questioni di velocità.

Io ho già preparato il prototipo perché la fase di prototipazione scoprirete che una fase molto lenta, una fase in cui ci sta soffermarsi a pensare, ci sta sperimentare e soprattutto controllare che tutto sia consistente e coerente con il resto dell' interfaccia è possibile iniziare a creare una prima scherma armata e i tirare su quella per definire delle linee guida.

Ad esempio creando l'interfaccia.

Mi sono resa conto che c'erano degli elementi che potrebbero essere utili per la navigazione, come ad esempio la ricerca di una pianta tra quella che è la lista, in quanto io mi aspetto che ci sono persone anche avendo visto la harvey a cui hanno risposto gli utenti che hanno più di dieci piante.

Quindi per semplificarci la vita, gli permetto di cercarla, di filtrare tra tutte quelle che hanno inserito in.

Inoltre, ho anche deciso di cambiare il modo in cui rappresento il bottone di aggiunta pianta.

Mi sono resa conto mentre stavo facendo i miei esercizi di lui e quindi stavo provando a capire in che modo strutturare la che il bottone inserito all'interno delle mie piante risultava essere poco visibile, dato che questa è un'azione molto importante, perché se non inserisco le piante all'interno della mia app non avrò nulla.

Ho deciso di creare un bottone che maggiormente primo piano realizzando questi componenti.

Io ho definito anche delle linee guida.

Tutti i bottoni primari all'interno del mio prodotto per essere consistenti dovranno essere realizzati esattamente in questo modo i dem.

Quando vado a realizzare un componente come questa card, che è praticamente il touch point per arrivare alla scheda della pianta, devo realizzare andando a definire degli standard.

Tutte le carte all'interno della mia interfaccia dovranno essere consistenti con quella che ho creato.

Se avranno quindi la stessa funzionalità rappresentare un'immagine e un testo é un'area cliccabile dovranno essere esattamente come questa.

Se invece avessero degli scopi diversi o delle informazioni diverse rappresentate.

Possiamo prendere questa come base come linea guida e andare a realizzare una che però sia consistente con quest'ultima.

Di certo all'interno dell'interfaccia dobbiamo cercare di mantenere quanto piu' il contenuto minimalista, come definito nelle politiche di Nils.

Il contenuto, quando ricco di componenti che non sono fondamentali, rischia di far andare l'utente in overload cognitivo.

Quindi disegnare un'interfaccia che sia minimalista, che sia delicata, che sia priva di componenti che non servono, è il primo passo per rendere un prodotto usabile.

Ho quindi preso dai welfare me le altre schermate che possono essere utili per la definizione del prodotto finale realizzato, quindi anche la schermata di visualizzazione della pianta e dei suoi dettagli e soprattutto realizzato alcuni casi d'uso.

Ad esempio, nel momento in cui le informazioni da me precedentemente inserite nella pianta non fossero corrette, ho rappresentato il flusso dove l'utente cliccando su modifica va ad eseguire le azioni per cambiare delle informazioni all'interno della scheda della pianta.

Idem rappresentato in che modo i messaggi di controllo verranno visualizzati e in che modo si vedrà la famosa notifica che mi avvisa del fatto che devo innaffiare la mia pianta un'altra schermata realizzata è quella dell'aggiunta di una nuova pianta.

Idealmente vanno realizzate tutte le schermate utili per rappresentare un flusso, dato che Mockup prototipo saranno la documentazione che hi-tech utilizzeranno per andare a sviluppare il prodotto e quanto più riusciamo ad essere esaustivi possibile, meglio è problema a costruire insieme un prototipo in una prima fase abbozzata.

Possiamo semplicemente andare a realizzare tutti i componenti in maniera un po', anche disordinata, per fare un po' di brainstorming e capire in che modo vogliamo andare a rappresentare il prodotto in una seconda fase.

Andremo poi a organizzare il contenuto in maniera scalabile in maniera intuitiva, ma per ora siamo in una fase ancora produttiva, dove non sappiamo ancora che direzione prendere.

Sappiamo che il nostro luogo è questo e abbiamo avuto indicazioni al brand su quali sono i colori da utilizzare che sono questi tre.

La prima cosa da fare è creare una lavagna bianca, un art board Fig.

Ma è molto famoso per gli shorts.

Possiamo fare potenzialmente tutte le azioni possibili attraverso la tastiera.

Premendo a possiamo realizzare un nuovo art board.

Se non abbiamo idea di quale risoluzione utilizzare, possiamo scegliere tra quelle che ci mette a disposizione Fig.

ma nel nostro caso è sicuramente un device mobile, quindi scelgo un iPhone che diciamo è un po' datato, ma neanche troppo l'iphone undici Viene creato un art board e della tela bianca dove posso iniziare a creare il mio prototipo? Possiamo trascinare gli elementi all'interno della schermata.

Possiamo giocare con le immagini Fig, ma è davvero molto flessibile per quanto riguarda la composizione di nuovi di nuove schermate.

Ma se siete alle prime armi con i prototipi e volete delle basi modificabili, potete tranquillamente cercare online degli esempi di già preconfezionati, prendendo magari quegli esempi e modificandoli un po'.

Potete fare esercizio con Fig, ma nella fase di benchmarking abbiamo analizzato dei competitor.

Possono essere loro la guida per andare a realizzare il nostro primo prototipo? Nel nostro caso proviamo a fare un prototipo molto semplice e inseriamo un'immagine.

Inseriamo un testo.

Potete sia trascinarlo dal menu come potete fare tutte le altre azioni da menu e dalla sai bar oppure premere ti sulla tastiera.

Ciao, io sono un testo.

Il momento in cui andate a scrivere un testo, avete nella side bar tutte le opzioni possibili per andarlo a modificare e questo vale per qualsiasi asset inserite su Fig, ma selezionando l'immagine io tutte le opzioni che mi permettono di manipolarla in qualche modo.

Quello che consiglio di guardare sempre la side bar quando selezionate qualcosa e andare un pochino a giocare con quelle che sono le funzionalità che offre Fig.

Ma proviamo a inserire un bottone Realizziamo un bottone semplicemente con un rettangolo.

É un testo per inserire un rettangolo o lo trasciniamo dal menù così oppure prendiamo R sulla tastiera.

Selezioniamo un rettangolo.

Voglio farlo dello stesso verde che il brand mi ha dato come linea guida.

La proprietà del rettangolo è di poter essere colorato.

Selezioniamo questo contagocce che ci permette di andare a selezionare un colore e abbiamo il nostro box all'interno con la T Creiamo un testo ricca.

Mi abbiamo la possibilità, come anche per altri tool di di grafica, di ordinare gli elementi in base a delle funzionalità già predefinite.

Vogliamo centrare il tutto orizzontalmente e verticalmente e in questo modo abbiamo qualcosa di potenzialmente cliccabile un bottone.

Quello che consiglio, quindi è di controllare gli altri prodotti.

In che modo hanno organizzato il loro contenuto? All'interno di una schermata, di scaricare dei prototipi già fatti per fare della pratica con Fig.

ma nel momento in cui siamo soddisfatti delle operatività.

Quindi banalmente abbiamo giocato e ci siamo esercitati con le funzionalità di Fig.

Ma andare a creare il prototipo secondo le regole che ci siamo dati, quindi prendendo il welfare che abbiamo costruito, che a sua volta segue la i flussi del Flow chart e andare a costruire un prototipo che abbia esattamente quelle caratteristiche.