La scorsa volta abbiamo visto le competenze che un full stack designer deve avere nel 2020.
UX, UI, web design e sviluppo front-end sono le chiavi per accedere a questo fantiastico mondo fatto essenzialmente di mockup, schemi, diagrammi, wireframe, code editor ecc..
Quali sono gli strumenti del Full StackDesigner?
Lo so, con tutti questi termini iniziate ad avere il mal di testa, per questo motivo oggi vi parlerò proprio degli strumenti che ogni Full Stack Designer deve conoscere per considerarsi tale.
Partendo dall’analisi UX, il primo strumento fondamentale è…(rullo di tamburi!) CARTA E PENNA.
Come? Ebbene si, con queste due magici strumenti inizieremo a prendere gli appunti necessari per poter tracciare il nostro progetto digitale. Ma cosa significa essenzialmente? Mettiamo il caso che venga un cliente e abbia bisogno del classico sito vetrina. Non partiremo parlando di colori e forme, ma dovremo parlare con il committente e capire chi è, cosa fa, a chi si rivolge, cosa lo differenzia dalla concorrenza.
Ovvero quelle domande che ci permetteranno di comprendere in che modo strutturare la user experience per un determinato “user”. Senza sapere chi è il nostro utente in target, partiremmo con il piede sbagliato! Infatti il sito non deve piacere al cliente, ma deve calzare a pennello sull’utente. Se poi le due cose combaciano tanto meglio 😀
La UX non si limita solamente a queste poche domande, ma per oggi ci limiteremo solo a mostrare gli strumenti del mestiere di ogni buon full stack designer.
Una volta completata la parte di analisi, dovremo andare a realizzare gli sketch, i wireframe, i mockup e i prototipi per dare l’aspetto visivo al nostro progetto che fino ad ora era solo in forma testuale. E indovinate che altri strumenti dovremo usare? Sempre loro, Carta e Penna.
Perchè direte voi? Semplicemente perchè il livello di dettaglio richiesto per questa fase è basso e non serve andare a realizzarli in modo preciso sul pc. Su carta si chiamano sketch o bozzetti se vi piace di più il nome in italiano. Dopo gli sketch dovremo fare i wireframe per poi arrivare alla proposta grafica definitiva attraverso i mockup.
Per fare tutto ciò ci vengono in aiuto diversi software. Qualche anno fa veniva usato ancora photoshop, ma il lavoro veniva molto lento. Oggi ci sono una serie di programmi che svolgono proprio questa mansione e sono per la maggior parte free.
Io normalmente uso Figma, un ottimo software che funziona nel browser (non c’è bisogno di installarlo) e permette di creare wireframe e bozze grafiche in pochissimo tempo. Ha molte funzionalità utili per poter ri-usare i componenti in modo intelligente. Detta così non si capisce bene, per questo a breve farò un tutorial su Figma 😉
Uso anche Adobe XD, altro software molto simile a Figma ma che bisogna installalarlo su pc. Per questo motivo preferisco Figma che lo posso usare dove voglio senza il bisogno di avere il mio pc con me.
L’ultimo che ho usato per un pò di tempo è Sketch, programma per i possessori di computer Apple, molto buono anche se è a pagamento.
Tutti e tre permettono anche la prototipazione, ovvero simulano il comportamento di un’app o sito web. Significa che posso animare le varie pagine in modo fittizio, facendo capire in che modo l’utente può interagire con il nostro prodotto digitale.
I poteri del full stack designer iniziano a mostrarsi!
Ultimato questo passaggio arriviamo al momento in cui dobbiamo usare il codice. Per fare ciò abbiamo bisogno di un code editor che ci permetta di scrivere le nostre linee di codice per poter trasformare i mockup in linguaggio HTML,CSS e JS. In questo caso vengono in aiuto molti editor tra cui Visual Studio Code, Atom e Brackets.
In realtà noi potremmo scrivere codice anche sul Block Notes di Windows per poi aprirlo con il browser, ma dopo mezz’ora inizieremmo a vedere i draghi 😀
Invece con questi software il lavoro è molto semplificato, infatti con degli snippets possiamo velocemenete creare una pagina web con tutti i tag necessari per poter essere compresa dal browser.
Io uso Visual Studio Code che permette di installare molteplici plugin a seconda delle esigenze. Cito tra i tanti Beautify che in modo automatico formatta le linee di codice, aiutandoci ad avere un documento meglio organizzato.
Con questo articolo abbiamo passato in rassegna i vari strumenti che un Full Stack Designer deve conoscere per considerarsi tale. Non li ho citati tutti, ma vi assicuro che già conoscere bene questi vi prenderà un bel pò di tempo.
Al prossimo articolo per continuare il nostro viaggio nel mondo del Full Stack Designer.
