Luigi Sabbetti

Il mondo del web a 360 gradi

come diventare web designer

Come diventare Web Designer


di // Pubblicato il: 24 Marzo 2020

Sempre più spesso, mi capita di ricevere messaggi da parte di utenti che mi chiedono come diventare web designer. Molti si domandano quale percorso di studi sia meglio seguire, se esistono delle scuole di specializzazione in Italia e/o all’Estero, se c’è bisogno di un qualche attestato per entrare a far parte di questo settore, quali sono i corsi e i migliori libri di web design sui quali studiare e quali siano le skills spendibili nel mondo del lavoro.

Ho cercato di mettere assieme tutte queste domande e racchiudere le mie risposte all’interno di un singolo articolo. Con questa guida, infatti, cercherò di spiegare nel dettaglio quali sono i software e i linguaggi che dovresti conoscere per poterti definire un web designer.

Cercherò di mettere a tua completa disposizione l’esperienza che ho maturato in questo settore, nel quale lavoro ormai da 8 anni. Ti posso assicurare che molte cose sono cambiate nel corso degli anni. Per i neofiti, senza dubbio, la cosa più difficile da comprendere sono i meccanismi che regolano il web.

Ma facciamo un passo indietro, partendo dagli albori. Nei primi anni 2000 non vi era molta distinzione tra chi si occupava di frontend e chi si prendeva cura del backend. Erano i “programmatori” ad occuparsi di tutto, poiché le prime versioni di HTML e CSS non lasciavano grande spazio alla creatività.

I siti web di quell’epoca erano decisamente rozzi. In quel periodo, gli unici siti ad avere una veste grafica erano quelli sviluppati in Flash, un software della Macromedia che, successivamente, cadde in disuso poiché presentava diverse pecche: prima fra tutte quella di creare delle pagine disastrose a livello SEO.

In quegli anni, infatti, i motori di ricerca facevano capolino nelle nostre vite. Sempre più utenti trovavano risposte attraverso il neonato Google e Flash non era in grado di restituire HTML semantico.

Successivamente, nacquero diversi linguaggi web, i CSS, anche attraverso l’avvento di Less e Sass divennero abbastanza complessi da utilizzare. Il frontend delle pagine web divenne estremamente customizzabile, dando vita alla figura del graphic designer, questo per sopperire alla scomparsa di Flash, che permetteva di realizzare grafiche accattivanti mediante l’utilizzo di Action Script.

Indice dei contenuti

Di cosa si occupa un web designer?

La prima domanda alla quale cercheremo di fornire una risposta é: di cosa si occupa un web designer? Una domanda che forse, a prima vista, può sembrarti banale.

Come ti dicevo, infatti, nel corso degli anni sono venute a crearsi diverse figure professionali. I linguaggi web hanno assunto una maggiore complessità ed è difficile per un singolo professionista padroneggiare tutti gli stack del web.

Nello specifico, con la parola Web Designer andiamo a definire quel professionista che si occupa di tutta la comunicazione visiva del sito web. In che modo? riuscendo a tradurre le proposte grafiche in codice. Queste proposte grafiche, definite in gergo tecnico Mockup, possono essere disegnate da lui stesso, oppure da un graphic designer.

Il web designer, quindi, “monta” la grafica delle singole pagine e lo fa avvalendosi del linguaggio di Markup HTML, dei CSS e di Javascript. Per facilitarsi il lavoro può, alle volte, utilizzare dei framework (ovvero degli ambienti di lavoro) come ad esempio Bootstrap o Foundation, dei quali parleremo in seguito.

Per realizzare le animazioni, il web designer si avvale di tecniche avanzate derivanti dall’utilizzo di CSS3, ma anche di Javascript e di librerie UI come ad esempio jQuery.

HTML

Tim Berners Lee - HTML
In foto Tim Berners Lee, il papà dell’HTML

Ora che hai capito di cosa si occupa, puoi iniziare ad analizzare gli strumenti che un web designer utilizza tutti i giorni nello svolgimento delle proprie mansioni. La prima cosa da conoscere a menadito, è senza dubbio l’HTML.

Sono sicuro che avrai sentito molto spesso questo termine. Se sei deciso a percorrere questa strada, stai pur sicuro che sarà il termine che maggiormente ascolterai. L’HTML, infatti, è il linguaggio principe del web. Sebbene non sia tecnicamente un linguaggio di programmazione, bensì un linguaggio di Markup. Ogni sito web presenta al suo interno del codice HTML.

HTML è l’acronimo di HyperText Markup Language ed è il linguaggio di Markup che ci permette di impaginare le nostre pagine web. Nato nel 1991, grazie al genio di Tim Berners Lee, HTML è giunto ormai alla sua quinta versione. I browser, non fanno altro che leggere il codice HTML delle pagine web, elaborarlo e restituire così del contenuto visivo all’utente finale. La rappresentazione dell’HTML, infatti, viene gestita attraverso gli stili, ovvero il CSS.

L’unione di HTML e CSS ci permette di dar vita a dei mockup statici, andando a creare la parte visiva delle nostre pagine web. Si tratta, quindi, del primo tassello, indispensabile, per potersi fregiare del titolo di web designer. HTML può essere studiato, ovviamente, online. Esistono anche diversi libri che possono aiutarti con questo compito.

Ti cito, dunque, due libri che ho letto e che ho trovato molto interessanti: uno in lingua italiana, l’altro in lingua inglese. Come potrai vedere, i tomi che andrò a citarti contengono in realtà sia HTML che CSS al loro interno. Le due cose, infatti, vanno di pari passo e ti consiglio di apprenderle simultaneamente. Molti fanno l’errore di studiare prima HTML e subito dopo CSS, è invece meglio assimilarli assieme, in questo modo potrai da subito creare pagine graficamente accettabili e questo ti darà la spinta per continuare ad apprendere.

HTML e CSS. Progettare e costruire siti web

html e css libro
HTML&CSS – Progettare e costruire siti web. Apogeo Editore

Il primo libro è sicuramente “HTML e CSS. Progettare e costruire siti web“. Un libro edito da APOGEO scritto da John Duckett. Un libro che ha davvero fatto scuola, tanto da ottenere una valutazione di quasi 5 stelle su Amazon.

Ho trovato questo testo davvero interessante poiché fornisce un modo semplice per imparare, attraverso diversi esercizi. Un nuovo metodo, basato su un approccio semplice per imparare HTML nella sua ultima versione, ma anche CSS3.

Si può affermare con certezza che questo libro non è il “classico” manuale di informatica. Le informazioni sono chiare, puntuali e dettagliate. I capitolo sono divisi in modo tale da rendere questo libro non solo piacevole alla lettura, ma anche facilmente accessibile e riutilizzabile durante il lavoro di tutti i giorni. Ho apprezzato, infine, le divertenti infografiche: esplicative, semplici da comprendere anche per chi è alle prime armi.

HTML and CSS for beginners

Html and CSS for beginners
Html and CSS for beginners | Mario Wheeler

Il secondo tomo, in lingua inglese, porta il nome di “HTML and CSS for beginners: A Complete Beginners Guide To Learn HTML and CSS“, scritto da Mario Wheeler e disponibile su Amazon anche in formato Kindle ad un prezzo economico.

Un libro che ho apprezzato molto, poiché si rivolge al suo lettore con parole semplici. Adatto anche ai neofiti, permette di acquisire tutte le conosce utili nella creazione di markup statico. Il libro, infatti, è concepito per chi non ha precedenti esperienze nel settore. All’interno troverai molti esercizi pratici da eseguire comodamente da casa attraverso un programma come Notepad.

CSS

Il CSS (acronimo di Cascading Style Sheets) è il linguaggio che utilizziamo per stilizzare l’HTML. La sua prima versione, risale al 1996. Da allora molta strada è stata fatta e CSS è diventato un linguaggio maturo, arrivando alla sua terza release.

Un tempo gli stili venivano incorporati direttamente all’interno dell’HTML. Una pratica che, tuttavia, non è ancora caduta in disuso e in alcuni casi può rilevarsi utile. Tralasciando alcuni casi particolari, ad ogni modo, il foglio di stile dovrebbe sempre trovarsi in un documento dedicato, avente estensione .css, rispetto al documento HTML.

Un documento HTML può richiamare diversi fogli di stile. L’approccio migliore, infatti, è scindere i fogli di stile in base alle area di utilizzo, creando così dei componenti atomici facili da riutilizzare.

Ai fini delle performance, tutti i vari fogli di stile andrebbero poi unificati, attraverso una procedura automatica che prende il nome di bundle.

Negli ultimi anni, infine, sono nati quelli che comunemente prendono il nome di preprocessori. I preprocessori, LESS e SASS sostanzialmente, ci consentono di rendere CSS molto simile ad un vero linguaggio di programmazione. Ci consentono di effettuare calcoli complessi, creare variabili e generare molto più codice di quello che effettivamente scriviamo.

Una volta assimilate le rudimentali regole di CSS, insomma, ti consiglio di apprendere l’utilizzo di almeno un preprocessore. Al giorno d’oggi non puoi esimerti dall’apprendere almeno un preprocessore poiché sono indispensabili nel mondo del lavoro odierno.

LESS e SASS non differiscono di molto. Io ti consiglierei di cominciare con SASS. Le statistiche, infatti, dicono che sia attualmente il più utilizzato dei due. Puoi studiare attraverso le varie risorse presenti sul web, oppure acquistare un libro.

Non esistono veri e propri tomi su SASS, perché si tratta di un argomento abbastanza snello, riassumibile in poche pagine. Sass per principianti, di Luca Pulina, può essere una valida risorsa per iniziare. Un valido aiuto, invece, è Sassmeister che ti permette di testare i SASS che scrivi direttamente online.

Javascript

Se HTML e CSS costituiscono la struttura di una pagina web, Javascript fa si che tutto questo si animi. Quando parliamo di Javascript, ci stiamo già avventurando in quello che è un vero e proprio linguaggio di programmazione orientato ad oggetti. Javascript, al momento, è sicuramente uno dei linguaggi più utilizzati e questo perché può essere utilizzato sia lato client che lato server (Node.js).

In ambito web design, viene utilizzato per la creazione di effetti dinamici interattivi, tramite delle funzioni che vengono definite, per l’appunto, script. Sono tantissime le operazioni che possiamo effettuare attraverso Javascript. Si pensi ad esempio alla creazione di una gallery, popup, animazione di un menù, creazione di slider e caroselli.

Javascript è senza dubbio un elemento indispensabile nel lavoro di un web designer. Padroneggiarlo, tuttavia, non è affatto semplice. La curva di apprendimento è decisamente più ripida rispetto a CSS e HTML e questo perché, per sua natura, Javascript rientra già nell’ambito dei linguaggi di programmazione. Dovresti, quindi, conoscere alcuni concetti di base della programmazione per utilizzarlo: creazione di variabili, cicli, funzioni e oggetti.

Sul web esistono varie risorse che ti permettono di apprendere Javascript e testare fin da subito le sue peculiarità. Se preferisci un libro, invece, ti consiglio questo “JavaScript & JQuery. Sviluppare interfacce web interattive.“. Come puoi vedere racchiude al suo interno sia Javascript che jQuery: i due argomenti vanno di pari passo.

Il libro è sempre edito da APOGEO e, come avrai modo di vedere, non è altro che un sequel del primo libro che ti ho consigliato su HTML e CSS di Jhon Duckett.

jQuery

Passiamo adesso a jQuery. jQuery ha totalmente rivoluzionato il mondo delle interazioni. Si tratta di una libreria Javascript che ci consente di effettuare delle operazioni di UI in modo molto semplice, utilizzando pochissimo codice rispetto a quello che utilizzeremmo per creare le stesse cose in Vanilla JS.

Il motto di jQuery è, infatti, “write less do more”. Sebbene, nel corso degli anni, la popolarità di jQuery abbia registrato un calo, anche grazie all’avvento di framework Javascript come Vue e React (che vedremo in seguito), jQuery continua a difendersi abbastanza bene e, attualmente, risulta ancora essere uno dei metodi più semplici e veloci per la creazione di eventi dinamici.

jQuery è abbastanza facile da imparare, questo perché ripercorre la sintassi di CSS. Attraverso jQuery avrai modo di selezionare alcuni elementi del DOM attraverso la stessa sintassi che già utilizzi per selezionarli tramite CSS. Una volta stabilito il tuo target, potrai “interagire” con esso, andando ad intercettare tutti i suoi eventi, come ad esempio un click su di esso.

Le applicazioni di jQuery sono moltissime, non solo nella sua forma base. Esistono, infatti, migliaia di librerie basate su jQuery che ti permettono di estenderlo. jQuery rappresenta, sicuramente, un tassello fondamentale nei tuoi studi. Su jQuery.com puoi trovare tutta la documentazione di cui necessiti e svariati esempi che ti introdurranno in questo mondo.

Se preferisci apprendere attraverso il cartaceo, invece, ti consiglio di dare un occhio a questo libro, edito da APOGEO.

Framework CSS: Bootstrap, Foundation

Ma un web designer scrive codice da zero per ogni nuovo progetto? Ovviamente NO!

Sarebbe stupido, infatti, reinventare la ruota ad ogni singolo progetto. Non a caso sono nati, nel corso degli anni, alcuni framework css che hanno migliorato notevolmente la vita di chi opera in questo settore. I framework, come ad esempio Bootstrap e Foundation, ci permettono di risparmiare moltissimo tempo, soprattutto nella composizione di layout responsive.

Facci caso, gli elementi in comune tra i diversi siti web sono moltissimi. Si può affermare che tutti i siti abbiano almeno un menù, dei bottoni, delle form. I framework ci forniscono una stilizzazione di base di questi elementi attraverso delle classi che possiamo riutilizzare più e più volte. Questo non vuol dire che utilizzando un framework otterremo siti web tutti uguali. Chi pensa questo evidentemente utilizza il framework in modo del tutto sbagliato.

Il framework non è altro che una base, un punto di partenza per evitare di reinventare ogni volta la ruota. Come ti dicevo i più rinomati sono Bootstrap di Twiiter e Foundation della Zurb. In passato scrissi una valida guida sul primo. forse è il momento giusto per darci una sbirciata 😉

I Software: Sketch, Adobe XD

Ora che hai capito quale percorso di studi seguire per padroneggiare al meglio i codici, possiamo passare alla parte visiva. Un sito web che si rispetti, infatti, nasce sempre da un’attenta osservazione e progettazione. Prima della UI, viene infatti la UX, ovvero l’esperienza utente. Prima di scrivere qualsiasi riga di codice, è bene avere a disposizione delle Mockup grafiche.

Come ti dicevo nell’incipit, queste Mockup grafiche possono essere create da un web designer oppure da un Graphic Designer. Si tratta di due figure affini, ma da non confondere.

I programmi per la creazione di questi Mockup sono svariati. In ambiente MAC è bene utilizzare Sketch. Su Windows, invece, il software più utilizzato è ADOBE XD, anche se devo dirti che molti graphic designer utilizzano ancora Photoshop. Photoshop, per quanto sia un programma completo, nasce come programma di fotoritocco e dovrebbe rimanere confinato in tale nicchia. Non tutto ciò che è disegnabile su photoshop, infatti, è fedelmente riproducibile sul web, ecco perché ti sconsiglio di utilizzarlo nella creazione di mockup.

Esistono, infine, tool che ti consentono di animare le tue mockup per dare al cliente la sensazione di “navigare un prototipo”. Sto parlando ad esempio di InVision, Figma e altri software similari.

Alcuni di questi software sono a pagamento, ma restano indispensabili per effettuare un buon lavoro. Se non hai l’ambizione di disegnare i tuoi siti da zero, non dovrai di certo imparare ad utilizzarli tutti. La cosa che dovrai sicuramente imparare a fare è estrapolare immagini e stili disegnati su di essi per essere in grado di trasformare il tutto in codice.

Next step: Frontend Developer

In questo capitolo cercherò di fornire alcune risposte su un’altra figura professionale, ovvero il Frontend Developer. La differenza tra Web Design e Frontend Developer è minima, tuttavia, con il passare del tempo le due figure stanno prendendo strade diverse.

Come ti dicevo, infatti, è sempre più difficile per un professionista ottenere una buona padronanza di tutti i linguaggi che popolano il web. Il numero, infatti, è in continua crescita ed è difficile essere preparati su tutto, anche studiando e cercando di stare al passo.

Ecco perché, in questi anni, è nata la posizione di Front End Developer, un po diversa da quella del Web Designer. Il Front End, infatti, è un developer a tutti gli effetti, si occupa in minima parte di HTML e CSS e possiamo dire che si discosta quasi totalmente dal punto di vista grafico di un sito. La sua mansione è più simile a quella di un programmatore, in quanto si occupa di chiamate AJAX, gestione delle API e sviluppo Javascript avanzato, soprattutto attraverso l’utilizzo di Framework Javascript come VueJS e React.

Non è detto, dunque, che una singola persona non possa ricoprire entrambi i ruoli, tuttavia è bene fare questa distinzione nei ruoli. Il mondo del lavoro, nella maggior parte dei casi, distingue le due figure ed è giusto che tu lo sappia. L’errore che molto spesso fanno i neofiti, a mio avviso, è quello di pensare che un professionista del web debba essere in grado di realizzare qualsiasi sito dalla A alla Z.

Non è affatto così. Un professionista conosce, a grandi linee, tutti i processi che sono alla base dello sviluppo di un sito, siano essi Backend e Frontend, tuttavia collabora con tantissimi altri professionisti.

Il grado di specializzazione dipende soprattutto dalla dimensione dell’azienda in cui lavori. Un’azienda di piccole dimensioni, probabilmente, non può permettersi di diversificare i ruoli, tanto da piegare su CMS già sviluppati, come ad esempio WordPress. Un’azienda di grande dimensioni, invece, avrà la possibilità di avere delle figure professionali altamente specializzate.

Il mio consiglio è quello di specializzarti in un unico ramo così da diventare un professionista qualificato in ciò che ti piace di più. Il Full Stack Developer è, a mio avviso, una figura quasi mitologica. Ognuno di noi ha delle peculiarità e dovrebbe scegliere la propria professione in base alle proprie attitudini.

Framework Javascript: React, VueJS

Così come per la parte HTML e JS esistono dei Framework, la stessa affermazione è valida anche per Javascript. Esistono, infatti, dei Framework che ti permettono di scrivere codice in modo molto semplice e reattivo. I più blasonati sono senza dubbio: Angular di Google, React di Facebook e VueJS, framework creato da Evan You.

Queste tecnologie ti permettono di creare pagine web “reattive”, non a caso vengono definiti come Progressive Javascript Framework. Le potenzialità di questi tool sono incredibili e ti permettono di sviluppare codice in modo del tutto innovativo.

Non voglio dilungarmi troppo nella spiegazione dei Framework Javascript, poiché rientrano di diritto nelle competenze del Frontend Developer, tuttavia era giusto spiegarti brevemente il loro funzionamento. Se sei interessato all’argomento, ti consiglio di dare uno sguardo a questa guida VueJS che scrissi qualche tempo fa.

Conclusioni

Spero vivamente che, attraverso questa guida, sia riuscito ad aiutarti a mettere un pò di ordine nella tua testa. All’inizio io stesso faticavo a comprendere cosa dovessi studiare per diventare un web designer. Non è affatto semplice, senza consigli, capire come fare ad entrare nel mondo del lavoro, comprendere quali sono le figure che le aziende cercano e soprattutto quali sono gli argomenti da studiare, oltre ad avere un ordine mentale con il quale apprendere le cose.

Se vuoi aggiungere altro, raccontare la tua esperienza o fornire qualche consiglio utile, scrivimi pure e sarò lieto di inserire i tuoi consigli all’interno di questo articolo.

ULTIMO AGGIORNAMENTO 24/03/2020


Ti è piaciuto questo articolo?
Vuoi restare aggiornato sul mondo del web attraverso i miei articoli? Iscriviti alla newsletter!
Solo contenuti utili e zero spam, parola di lupetto

Luigi Sabbetti

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Mi piace scrivere e condividere conoscenze informatiche attraverso il mio sito web. Vuoi chiedermi qualcosa? Contattami su Linkedin