Dopo aver abbozzato la nostra applicazione ed aver analizzato alcuni punti chiave della nostra mini app Flutter, procediamo analizzando un altro punto chiave: come impostare una perfetta UI/UX e quali tool utilizzare per velocizzare questo processo!
Iniziamo
Nel corso della mia esperienza come sviluppatore mobile, ho avuto modo di testare diverse metodologie di sviluppo di un’applicazione mobile, ed in particolar modo per quanto riguarda lo sviluppo di una buona UI/UX.
Lo so… molti di voi penseranno: ‘Ma questa parte non ci riguarda, non siamo mica grafici’. In realtà no, perché spesso e volentieri anche questa parte sarà affidata a voi. Quindi, meglio che sappiate come affrontare la cosa nel migliore dei modi.
Ho pensato di introdurre questo argomento, portandovi come esempio uno dei progetti sicuramente più interessanti e complessi su cui sto lavorando, cioè lo sviluppo della startup Nesso, assieme a Matteo Tarantino, CEO ed ideatore della stessa.
Per dirla in due righe, Nesso è una piattaforma che organizza viaggi e spedizioni di motocicli in tutta Italia, per cui abbiamo pensato di sviluppare un sito web ed una applicazione mobile che rilasceremo a brevissimo. Ovviamente, in cosa abbiamo sviluppato l’app? Beh in Flutter ovviamente!
Per questo lavoro abbiamo analizzato e testato diversi tool che permettono di disegnare senza particolari competenze grafiche. Quello che più di tutti ci ha permesso di migliorare di molto la qualità oltre che di incrementare la velocità di sviluppo è sicuramente Figma, un tool online per lo sviluppo in team di design Web & Mobile. Di questo, lascerò che sia Matteo a parlarvi del come e perché Figma ci abbia aiutato.
Sono sempre stato appassionato di grafica, nonostante non ne abbia mai fatto un vero e proprio lavoro. Negli anni ho avuto modo di imparare ad usare abbastanza bene la suite Adobe per destreggiarmi nei fotoritocchi, videomontaggi, illustrazione digitale e quant’altro.
Tanti dubbi, una sola certezza
Quando alcuni mesi fa, con Emanuel, abbiamo iniziato a lavorare all’app per la startup Nesso eravamo fortemente in dubbio se affidarci fin da subito ad un designer: in fin dei conti stavamo ancora producendo l’MVP e utilizzare in questo modo gran parte del budget ci sembrava insensato. Però notavamo in noi una spiccata predisposizione per il lavoro di squadra, ci capivamo al volo su ciò che andava fatto. Decidemmo così di metterci alla prova. Unendo le mie intuizioni grafiche, immaginando già in partenza come sarebbe venuta fuori l’app, e le sue capacità di traduzione delle geometrie complesse in codice, riuscimmo già il primo giorno a tirare fuori tre bozze delle prime tre schermate dell’app e a inserirle in un wireframe. Eravamo meravigliati di noi stessi, nessuno di noi nasceva o aveva mai fatto quel tipo di lavoro però per qualche misterioso motivo il risultato era più che soddisfacente. La felicità però duro poco e incontrammo fin da subito le prime difficoltà: come gestire le diverse risoluzioni dei vari device sulle diverse piattaforme? Come poter lavorare costantemente sullo stesso progetto senza sovrapporre il proprio lavoro su quello dell’altro? Come visualizzare dinamicamente e immediatamente il funzionamento dei componenti una volta inseriti nelle schermate dell’app? Era chiaro che fosse necessario un tool che ci supportasse nell’avventura in cui ci eravamo appena lanciati.
La ricerca del tool ideale
Eravamo pieni di incertezze ma se c’era una cosa che sapevamo era che tutto ciò rappresentava una prova. Perciò qualunque fosse il tool, senza dubbio esso doveva essere economico (se possibile gratuito) e di facile utilizzo. Non fu difficile, dopo qualche ricerca, imbattersi in questo nuovo strumento online, lanciato da pochissimo, promettente quanto familiare grazie alle shortcut e alla filosofia di funzionamento identica alla a me nota suite Adobe, chiamato Figma. Mi convinse immediatamente, non fu uno di quei casi in cui l’amicizia con il software che ti accompagnerà per giorni e giorni inizia male. Neanche il tempo a rimanere spaesato, alla vista dell’ambiente a me totalmente nuovo, che un popup provvidenziale comparve per avvisarmi che in rete erano già caricate numerose videoguide con cui poter apprendere tutti i rudimenti del UI/UX Design. Meraviglia! Terminato l’apprendimento mi lanciai nella copia delle tre schermate ipotizzate in precedenza con Emanuel. Pensai “non può esserci test migliore, se Ema riuscirà a vedere il progetto e a modificarlo avremo trovato la soluzione a tutti i nostri problemi (relativi al design ovviamente… )”. Inviai l’invito a collaborare e aspettai. Ma non riuscii a trattenere l’urrà quando mi tornò l’email di conferma. Mi lanciai subito in un’immersione in apnea nell’oceano Figma che mi si era appena aperto, come in quei film in cui il protagonista si lancia nello studio matto e intenso. Con la differenza però che dall’altra parte Emanuel vedeva ogni mia mossa. Ogni linea, ogni elemento, ogni modifica erano automaticamente trasferite in real time dall’altra parte che mi correggeva o suggeriva secondo pareri e gusti. Non vorrei sbagliare ma credo che fummo in grado di completare tutta la prima versione della UI in meno di tre giorni. Un risultato straordinario.
Riassumendo, quali particolarità di Figma, tra le altre, ci hanno permesso di iniziare il progetto con il piede giusto, anche senza avere un diploma da designer:
– Possibilità di lavoro totalmente in cloud. Ognuno entra con il proprio account e può modificare, creare, lasciare note e vedere le azioni dell’altro sul progetto.
– Intuitività di funzionamento (peraltro notevolmente alta grazie ai tutorial online caricati dagli stessi ragazzi di Figma) e filosofia identica alla suite Adobe.
– Lavoro esclusivo tramite geometrie definite in px, perciò con gli opportuni calcoli è possibile creare un design e poi ricavare le proporzioni per adattarlo alle varie risoluzioni in commercio.
– Prototipazione veloce. Il design non rimane statico bensì può essere collegato a gesture e azioni in modo da simulare i comportamenti dell’utente fin dalla fase di progettazione, per tradurre in codice solo ciò che effettivamente costituirà il risultato finale.
– Interfaccia online e universale, indipendente dal OS utilizzato. Siamo versatili, lo riconosciamo, pertanto ci piace passare da MacOS a Windows a Ubuntu tra un caffè e l’altro. Nonostante i vari cambi non abbiamo mai notato cedimenti o incompatibilità nel progetto.
Concludendo, la scoperta di Figma è stata provvidenziale perchè ci ha permesso di disegnare ciò che prima avevamo solo in mente e correggere certi dettagli che pensavamo fossero corretti mentre invece nascondevano insidie o irrealizzabilità. Non nascondiamo che fra poco, all’avanzare del progetto, avremo bisogno di un buon designer per progettare e realizzare le versioni successive dell’app. Ma questo è ovvio, non siamo professionisti e se pensassimo di esserlo saremmo narcisisti oltre che bugiardi. Però la strada così è decisamente semplificata perchè non abbiamo più bisogno di trovare le parole per descrivere la nostra immaginazione. Adesso ci basta aprire il computer e mostrarla.
Bene, ora che abbiamo un idea più chiara di Figma e delle sue potenzialità, passiamo a sviluppare una UI per la schermata di autenticazione del nostro progetto.
Figma – Realizziamo la prima schermata
Step 1: come prima cosa procediamo con la registrazione a Figma. Se effettuate una registrazione Free, potrete creare un massimo di 2 progetti ed un massimo di 2 collaboratori per progetto.
Dopo aver fatto il Login, recatevi sulla schermata di selezione dei vari progetti e cliccate su ‘New File’.
Questo vi porterà su una nuova schermata vuota, come questa:
Come prima cosa rinominiamo il file in: firebase_login_signup, come il nome che abbiamo dato alla nostra app.
Step 2: procediamo aggiungendo un Frame che sarà nient’altro che lo scheletro da cui partiremo:
Step 3: adesso che abbiamo la nostra base, iniziamo aggiungendo lo sfondo per la nostra prima schermata di Autenticazione, basterà fare un drag and drop dell’immagine che desiderate utilizzare:
Step 4: aggiungiamo i vari Textfield, per farlo useremo dei rettangoli cui diminuiremo l’opacità dello sfondo e poi inseriremo del testo:
Step 5: facciamo la stessa operazione per quanto riguarda il Flat Button che abbiamo usato per il tasto che permette di Switchare da Login a Registrazione e per il button di Login.
Step 6: Come ultima cosa, aggiungiamo un Logo. In questo caso utilizzerò il logo di Flutter. Per aggiungerlo, basterà fare un drag and drop dell’immagine e successivamente ridimensionarla (io l’ho settato a 100px):
Bene, direi che ci siamo. Come avete visto in 5 minuti abbiamo abbozzato una UI per la nostra App (certo, si può fare di meglio, ma al momento non è la nostra priorità. Vi invito a fare tutte le prove del caso e a postare i vostri risultati su Instagram o Facebook utilizzando l’hashtag #flutteryourfantasy 😉).
Ora non ci resterà altro che implementare quello che abbiamo fatto su Figma nel nostro codice ma lo faremo nella prossima guida.
Intanto vi spoilero i contenuti della prossima guida, almeno per lasciarvi un po’ di hype!
- “Tips and Tricks” per rendere responsive i Widget che utilizzeremo
- Uno dei metodi migliori per caricare ed utilizzare gli Asset nella nostra applicazione.
Per concludere come sempre, ecco il LINK del repository github di questo progetto, vi invito a seguirmi anche lì! Flutter your fantasy! 😉
Commenti recenti