Alcune riflessioni sulle competenze ed i ruoli che compongono il mondo del Frontend all'inizio del nuovo decennio

Circa una ventina di anni fa chi si occupava di gestire un sito internet era identificato con il ruolo di webmaster. Il webmaster ha delle competenza basilari ma molto estese: gestione di server e database, ideazione grafica, programmazione lato server e lato browser. La formazione di queste figure avviene soprattutto tramite corsi professionali post-diploma oppure da autodidatti, e molto spesso rimanevano interni ad aziende più grosse associati ai ruoli più classici dell ICT.

Una decina di anni dopo, grazie anche all’introduzione dei social, dell’e-commerce e delle applicazioni web in generale, alcuni incarichi sono diventati più specialistici per venire incontro ad una aumentata complessità del mondo web. Tutta la parte relativa al codice del sito web, sia server che browser, viene associata al ruolo del web developer. Spogliato delle incombenze necessarie a gestire grafica e server, il web developer può concentrarsi sullo sviluppo di sistemi web più complessi, come ad esempio i CMS, che hanno consentito alle aziende di gestirsi in autonomia i contenuti del sito senza la necessità di una figura tecnica interna. La figura del programmatore web, in questa fase, assume dei connotati di maggiore professionalità ed iniziano ad esserci richieste di persone laureate in materia.

L’evoluzione del web, sia per l’ulteriore aumento della complessità dei siti web, sia grazie all’introduzione delle applicazioni mobile, ha generato una netta separazione tra l’implementazione della logica lato server e lato browser, separando in due il ruolo del web developer: chi si occupa della logica applicativa sul server assume il nome del Backend Developer, mentre chi si specializza nella logica di presentazione sul browser viene definito Frontend Developer.

Quali sono però le competenze che deve avere un Frontend Developer nel 2020? In realtà sono piuttosto varie e complesse, tanto che porteranno nei prossimi anni alla creazione di nuove figure sempre più specializzate e che già oggi sono molto richieste.

Le competenze di base

Il cuore di un “Frontender” si basa su 3 competenze fondamentali:

• HTML
• CSS
• Javascript (DOM management)

A prescindere dalla specializzazione queste competenze di base sono essenziali per comprendere il funzionamento del prodotto finale; sia che si debba lavorare sulla progettazione, sullo sviluppo o sull’ottimizzazione le regole del gioco sono le stesse per tutti ed è necessario conoscerle, anche in modo basilare, per poter stare in campo.

Andiamo invece adesso nel dettaglio dei vari ambiti dello sviluppo frontend

UI/UX Design

Siamo nella fase di progettazione, vengono prese le decisioni che possono definire il successo o il fallimento di un prodotto.
Tra tutti gli incarichi di un frontender è quello che possiede la maggior parte di competenze ‘umanistiche’: psicologia comportamentale ed emozionale, interazione uomo-macchina, architettura dell’informazione sono alcuni degli argomenti da studiare per massimizzare il risultato finale a cui vanno aggiunti tutti gli studi scientifici relativi all’usabilità delle interfaccie.
Nella prima fase della progettazione, l’acquisizione dei requisiti, il designer lavora in collaborazione con il reparto marketing per definire le ‘persona’ in grado di rappresentare al meglio desideri, necessità e comportamente degli utenti del sito. La conversione dei requisiti in un progetto avviene bilanciando le esigenze dell’utente e quelle del cliente tramite la realizzazione di un wireframe (potrebbe essere ad alta o bassa fedeltà, oppure entrambi) e nei casi più complessi anche di un prototipo interattivo. (Qui il mio video sull'argomento)

Gli strumenti in questo caso sono moltissimi, alcuni di questi ereditati direttamente dal design grafico, ma voglio elencare alcuni di quelli studiati nello specifico e che sono:

• Sketch
• Adobe XD
• Invision Studio
• Figma

Tramite questi strumenti è possibile implementare dei wireframe, anche ad alta fedeltà, con componenti interattive che quindi possono essere usati anche come prototipi funzionali.
La versione più efficiente del prototyping rimane però quella della implementazione reale, realizzando quindi un sito, anche statico, con tutti componenti fondamentali dell’interfaccia; grazie a framework css come Bootstrap, Tailwind o Bulma (ma ce ne sono molti altri) è molto facile realizzare un sito minimale in breve tempo e con minime competenze di sviluppo.
La fase finale è invece relativa allo user testing, dove il prototipo viene messo a disposizione di alcuni utenti selezionati che possono quindi dare il primo feedback; anche in questo caso è possibile variare molto sia le metodologie che gli strumenti, ma la competenza principale riguarda la capacità di interagire con i soggetti del test, la comprensione dei feedback ricevuti e la stesura di un rapporto analitico che consenta di definire i punti di forza e di debolezza del design.

Altre risorse

https://www.smashingmagazine.com/2018/03/guide-user-testing/
https://theblog.adobe.com/a-beginners-guide-to-information-architecture-for-ux-designers/
https://medium.com/google-design/design-for-emotion-7ba0cf40e05b
https://abookapart.com/products/designing-for-emotion

Prosegui con la parte 2
o direttamente alla parte 3
o alla parte 4