Questa guida raccoglie le competenze tecniche fondamentali e le risorse essenziali per intraprendere la professione di web designer partendo da zero.
Il web designer progetta e realizza l'interfaccia grafica di siti web e applicazioni, occupandosi del design visivo e dell'usabilità per l'utente finale.
Questa professione condivide diverse competenze con quella del frontend developer, pur mantenendo un focus specifico sulla componente visiva e sull'esperienza utente.
Differenza tra web developer e web designer
Prima di addentrarci nel mondo del web designer è necessaria una precisazione terminologica. Spesso infatti gli utenti confondono web developer e web designer. Chiarire le differenze tra queste due professioni serve a delineare correttamente l'ambito lavorativo del web designer.
Partiamo quindi dalla definizione che viene erroneamente attribuita ai web designer: frontend developer.
Il frontend developer è principalmente uno sviluppatore software della parte visibile di un sito web, il frontend appunto.
Il web designer invece definisce lo styling del sito web utilizzando alcuni strumenti tipici di un frontend developer, anche se principalmente si serve di programmi di grafica, CSS, HTML e un minimo di JavaScript (opzionale). Più avanti verranno spiegate brevemente queste tecnologie per fornire dei riferimenti di base.
Il frontend developer si concentra maggiormente sulla creazione di codice di programmazione (prevalentemente JavaScript/TypeScript) che deve interagire con altri codici presenti in un server: il backend.
Approfondimento: cos'è un sistema client/server
Per semplificare: il frontend riguarda tutto quello che l'utente visualizza a monitor, mentre il backend riguarda primariamente la manipolazione delle informazioni che il frontend gli invia, ricevendo poi una risposta.
Esempio pratico: un modulo da compilare online
- Appare il modulo a schermo (area frontend)
- Il modulo viene compilato e viene premuto "invio". I dati passano al backend per l'elaborazione
- Il frontend riceve la risposta dal backend (conferma di registrazione o visualizzazione errori)
Il web designer si occupa dei punti 1 e 3, ovvero della creazione del design delle due pagine (o componenti): quella con il modulo e la successiva conferma.
Il frontend developer utilizza tecniche di scripting combinando JavaScript, HTML e CSS per ricevere dati da un backend. Il backend utilizza linguaggi di programmazione diversi da quelli del frontend, come PHP, Go, Python, ecc.
In sintesi: il frontend developer si occupa del comportamento della pagina, mentre il web designer si concentra sullo stile e sull'esperienza visiva.
Come è facile intuire, un web designer e un frontend developer utilizzano strumenti e linguaggi comuni ma con livelli differenti di specializzazione.
Il web designer è maggiormente focalizzato sulla parte visuale della pagina, sullo stile con cui vengono presentate le informazioni e sulla UX (User Experience) degli utenti attraverso la creazione di una UI (User Interface). Il frontend developer può realizzare tecnicamente le stesse cose di un web designer ma si concentra su aspetti più tecnici: assicurare che lo scambio tra frontend e backend sia corretto, gestire stati complessi dell'applicazione e implementare logiche di business.
Il web designer termina il proprio lavoro quando il sito web funziona a livello stilistico: le pagine si caricano correttamente, i link funzionano, i testi sono leggibili, la grafica si adatta al dispositivo, le immagini sono ottimizzate, la UI è progettata per generare una UX positiva.
Esempio di competenze condivise: l'ottimizzazione per i motori di ricerca (SEO).
Chi se ne occupa: il frontend developer o il web designer? Dipende.
Possono farlo entrambi. Tendenzialmente un frontend developer avrà competenze più approfondite sulla SEO tecnica, ma la linea di demarcazione non è così netta.
Seguendo le regole SEO, entrambi possono contribuire alla creazione di un web design correttamente ottimizzato per i motori di ricerca.
HTML: cos'è, a cosa serve e come si impara
L'HTML è un linguaggio di marcatura che costituisce la base per la creazione di qualsiasi pagina web o app presente nel web.
Bisogna immaginare l'HTML come il mattone da utilizzare per costruire tutta la struttura del web design.
In rete ci sono moltissime risorse per imparare a scrivere codice HTML.
L'HTML si basa principalmente su 3 concetti fondamentali:
1. I tag definiscono la struttura
I tag sono parole chiave che definiscono il tipo di elemento che si vuole creare.
<p> ad esempio è il tag "paragrafo", e serve per creare un paragrafo.
Inserendo un testo tra <p> e </p> si sta indicando al browser che quel testo è un paragrafo.
Esempio:
<p>Questo è un paragrafo</p>
2. Gli attributi personalizzano i tag
All'interno dei tag si possono scrivere degli attributi con delle proprietà (valori) per personalizzare i tag. Una coppia attributo+proprietà determina lo stile o il comportamento del tag.
Esempio con l'attributo class:
<p class="stile-paragrafo">paragrafo con stile</p>
"class" non fa altro che associare uno stile, denominato "stile-paragrafo", al testo "paragrafo con stile".
3. I tag possono essere annidati
È possibile annidare i tag formando delle strutture ad albero:
<div class="blocco-personalizzato">
<p class="colore-paragrafo">paragrafo annidato dentro un DIV</p>
</div>
Tenendo a mente questi 3 concetti è possibile studiare tutti i tipi di tag, il loro annidamento e gli attributi che possono contenere.
Per una guida su come scrivere codice HTML consiglio l'ottimo sito W3 School - HTML Tutorial.
Nel sito (in inglese) è sempre presente un piccolo editor per testare ogni singolo tag e vedere immediatamente il risultato. Un ottimo modo per prendere confidenza con il linguaggio HTML.
CSS: cos'è, a cosa serve e dove si impara
CSS è l'acronimo di Cascading Style Sheets (foglio di stile a cascata) ed è un linguaggio di formattazione che serve per conferire uno stile vero e proprio alle pagine in HTML.
I web designer utilizzano i CSS per creare stili, effetti e impaginazioni particolari: ogni volta che un titolo di un sito web ha un certo colore o quando un'immagine compie una piccola animazione al passaggio del mouse, quasi sicuramente siamo in presenza di codice CSS.
Il CSS viene scritto successivamente all'HTML.
Nell'esempio precedente era stato creato un paragrafo:
<p class="stile-paragrafo">paragrafo con stile</p>
Per trasformare questo testo in viola sarà sufficiente scrivere:
<p style="color: purple">paragrafo con testo viola</p>
ottenendo questo risultato: paragrafo con testo viola.
Da notare che questa volta è stato utilizzato l'attributo "style" al posto di "class".
Il motivo è che con "class" possiamo creare dei file CSS esterni da utilizzare con qualsiasi tag semplicemente richiamandoli, mentre con "style" è possibile definire lo stile direttamente dentro il tag, cioè inline.
Scrivendolo in modalità "inline" però non sarà possibile riutilizzare quello stile per altri tag. Se volessimo usare quello stile in altri tag dovremmo ogni volta riscrivere l'attributo e le sue proprietà per ogni tag.
In sostanza l'attributo "class" consente di collegare gli stili definiti in un file CSS ai tag che desideriamo modificare.
Esempio di un file CSS:
.colore-paragrafo {
color: red;
}
Codice HTML con la classe collegata:
<p class="colore-paragrafo">paragrafo con testo rosso</p>
Questo concetto è fondamentale per un web designer: le pagine web devono avere codici il più possibile disaccoppiati e modulari. Questo per consentire ai frontend developer (e agli stessi web designer) di lavorare in modo più semplice e organizzato.
Visto quanto sopra, ora è più chiaro comprendere perché questo articolo su come diventare un web designer è iniziato illustrando per sommi capi le differenze tra un web designer e un web developer.
Anche in questo caso, per capire come utilizzare un file CSS in una pagina web scritta in HTML è possibile leggere W3 School - CSS Tutorial ed è possibile fare delle prove online in modo rapido per imparare la sintassi del CSS.
A questo punto la cosa che consiglio di fare non è quella di imparare tutti gli attributi e completare tutti i tutorial. Per questo ci vorranno anni di pratica.
La cosa veramente importante in questo momento è capire come funziona l'HTML, come funzionano i CSS e come si collegano tra loro per formattare i contenuti e il layout (testi, immagini, video, impaginazione ecc.).
Il miglior libro sul CSS per imparare da zero
Tra i vari che mi sono capitati tra le mani consiglio l'ottimo libro di Gianluca Troiani "CSS - Guida Completa", edito da Apogeo.
Ovviamente non è un libro che tratta l'argomento in modo completo perché il CSS è un mondo sconfinato e non è possibile scrivere tutto quello che riguarda i CSS in un libro. Tuttavia è sicuramente il migliore che abbia potuto leggere in lingua italiana (io stesso possiedo la seconda edizione).
SASS: web design con stile modulare
Un terzo linguaggio che un vero Web Designer dovrebbe conoscere è SASS.
SASS permette di scrivere codice CSS molto più compatto e riutilizzabile. Prima di imparare SASS è importante conoscere bene CSS.
SASS aiuta a svolgere compiti ripetitivi, a scrivere codice più compatto, più immediato da leggere e soprattutto più modulare.
Per approfondire: SASS.
JavaScript: programmare le pagine web
Il JavaScript, a differenza dell'HTML e del CSS, è un linguaggio di programmazione, precisamente di scripting.
Uno script non è altro che un programma. I file JavaScript vengono eseguiti dai browser e servono principalmente per manipolare i tag HTML e gli stili CSS, rendendo le pagine interattive e dinamiche.
JavaScript fa molte altre cose, ma lato design si occupa della manipolazione della grafica, più precisamente del DOM (Document Object Model).
Per imparare le basi del JavaScript ci sono due risorse online gratuite, veramente ben fatte:
Ricapitolando: HTML, CSS e JavaScript sono i linguaggi standard per fare web design.
Questi linguaggi consentono di creare tutto quello che serve per fare web design e tornano utili per comprendere a fondo il funzionamento della SEO a livello tecnico-strutturale. Con questi linguaggi è già possibile creare contenuti che funzionino su qualsiasi dispositivo e soprattutto avere il totale controllo dello stile.
Se non si conoscono questi 3 linguaggi non è possibile definirsi né un web designer professionista né un frontend developer.
Bisogna ricordare che la professione di web designer potrebbe implicare un lavoro in team.
Spesso molti grafici si definiscono web designer ma in realtà non lo sono. Nel momento in cui bisogna sviluppare un sito web insieme ad altre persone è necessario conoscere i linguaggi comuni su cui si basa il web design.
Il libro migliore sul JavaScript è Professional JavaScript for Web Developers di Matt Frisbie.
In questo libro si parte dalle basi per arrivare al livello avanzato. C'è praticamente tutto quello che serve per manipolare l'interfaccia grafica di un sito web, app o web app. Non serve altro: il resto è pratica.
Programmi di grafica per web designer
Software a pagamento
Entrambi sono ottimi programmi per fare grafica orientata al web design.
Il pacchetto Adobe è più diffuso ma Affinity è comunque una suite completa per un web designer professionista.
Affinity costa decisamente meno e a differenza di Adobe ha un workflow più avanzato: tutta l'architettura del programma è basata su accelerazione GPU (scheda video). Le prestazioni sono quindi superiori al pacchetto Adobe.
Adobe però, attualmente, ha più funzioni e una community più ampia.
Entrambi hanno le funzioni tipiche che utilizzano i web designer.
Per Affinity i prodotti specifici sono Designer e Photo.
Per Adobe i prodotti specifici sono Photoshop ed Illustrator.
Software gratuiti
Come programmi gratuiti per fare grafica per il web o web design abbiamo:
- Inkscape (corrisponde ad Adobe Illustrator o Affinity Designer)
- GIMP (corrisponde ad Adobe Photoshop o Affinity Photo)
Ce ne sono molti altri, basta cercare su Google.
In questo caso ho segnalato semplicemente quelli che più si avvicinano alle pipeline dei professionisti del web design.
Approfondimento: la pipeline che utilizzo in 1micron.
Programmi di fotoritocco online
- Photopea - editor online gratuito con interfaccia simile a Photoshop
Programmi per editing fotografico
- CaptureOne (a pagamento)
- DxO (a pagamento)
- Rawtherapee (gratuito ed opensource)
- Darktable (gratuito ed opensource)
- Luminar AI (a pagamento. Sfrutta l'Intelligenza Artificiale)
Programmi di animazione per il web
- Cavalry - software per motion design e animazioni procedurali
Web design con immagini vettoriali SVG
Con i software menzionati precedentemente si creano le immagini dei siti web. Esistono due tipi di immagini per fare web design: raster e vettoriale.
Per semplificare possiamo dire che il raster rappresenta la fotografia mentre il vettoriale rappresenta disegni basati su linee e riempimenti, tipo le illustrazioni dei cartoni animati.
Il raster utilizza un insieme di pixel colorati mentre il vettoriale utilizza un codice che delimita le aree e i bordi da colorare rispetto a delle coordinate cartesiane.
Il formato principale per fare grafica vettoriale per il web è l'SVG (Scalable Vector Graphics).
L'SVG è un codice: aprendo un'immagine con un browser è possibile ispezionare il codice che lo ha generato. Modificando il codice viene modificata l'immagine.
In SVG si possono creare grafiche estremamente complesse ma anche animazioni sofisticate.
La cosa migliore per imparare l'SVG è usare Google e Youtube, cercare tutorial semplici ed imparare le basi di questo formato.
UX e prototipazione
I web designer hanno la necessità di definire un prototipo e di organizzare un progetto grafico ottimizzato per diversi dispositivi.
Un sito web complesso si può fare direttamente senza prototipo, ovviamente, ma il prototipo è un passaggio che agevola moltissimo il lavoro di creazione perché:
- evita molti problemi in fase di produzione del web design
- mantiene il progetto organizzato
- la realizzazione dei concept di design risulta più veloce
- testare soluzioni alternative e creare varianti diventa più semplice
- si può condividere il progetto con clienti e membri del team in modo interattivo
Alla fine è sempre meglio creare prototipi, cioè fare un passaggio in più.
La regola che un vero web designer tiene sempre a mente è:
spendi prima
risparmia dopo
La prototipazione è ormai obbligatoria per diventare un vero web designer professionista.
Strumenti di prototipazione
Attualmente sto utilizzando Adobe XD ma ce ne sono tanti altri. Molti web designer utilizzano Figma, che è diventato lo standard del settore. Per utenti Mac lo standard tradizionale è Sketch.
Per altri strumenti di prototipazione UX conviene consultare UX Tools.
SEO per web designer
Per essere un vero web designer non bisogna essere dei SEO specialist ma è importante, per non dire fondamentale, creare codice e grafica ottimizzata per i motori di ricerca.
In questo senso il web design deve essere sempre creato in una logica SEO.
Conoscere le basi della SEO significa creare experience di prodotto e codici migliori che consentiranno poi agli specialisti SEO di migliorare le performance dei siti web e renderli più reperibili. I SEO specialist, potendo lavorare su codici puliti e modulari ad elevata espressività, possono strutturare e organizzare certe informazioni in modo più intelligente.
Esempio pratico: un web designer che collabora con un SEO potrebbe aver bisogno di modificare la struttura di un sito web in modo rapido. Se un SEO decidesse di creare una sezione specifica con degli approfondimenti, il web designer dovrebbe riprogettare una porzione della UI (User Interface). Se il codice è stato scritto in modo modulare, il lavoro del SEO sarà notevolmente agevolato.
Il web designer può e dovrebbe occuparsi anche di questo aspetto.
I migliori social per web designer
Behance
Behance è la community di Adobe per i creativi che utilizzano i suoi prodotti. Per entrare nel mondo di Behance come web designer è fondamentale conoscere grafica e programmazione delle interfacce (UI).
Attualmente Behance è il social più competitivo al mondo per i creativi digitali, con la qualità più elevata dei lavori che si possano incontrare online. Ottenere risultati a livello engagement e business è estremamente difficile.
Su questa piattaforma ci sono i veri addetti ai lavori del web (a livello mondiale) e i veri professionisti del web design, della grafica e di altri settori della creatività digitale.
Su Behance non si cercano clienti. Sono i clienti che contattano direttamente i web designer: questo rende tutto estremamente competitivo e meritocratico.
Anche su Behance c'è contenuto di bassa qualità, la differenza rispetto ad altri social è che questo contenuto non circola nel feed generale e non può essere promosso come avviene praticamente in qualsiasi altra piattaforma usando leve persuasive o contenuti clickbait.
La sola presenza su Behance, comunque, non è sinonimo di qualità: significa confrontarsi con realtà e creativi altamente qualificati provenienti da tutto il mondo, non significa farne parte automaticamente.
Questo social funziona lato business praticamente solo in inglese, per lavori a un certo livello. Può anche essere un valido strumento per l'Italia, ma sicuramente per target internazionali è il migliore.
Inoltre anche il modo di presentare i progetti è piuttosto strutturato per ottenere un ritorno. Mentre negli altri social bastano semplici post e un'immagine stock per raccogliere anche 100 like, su Behance non vengono presi in considerazione lavori di qualità discutibile.
Questo aspetto non dipende nemmeno da fattori algoritmici: è proprio una questione legata agli specialisti che esaminano i progetti valutandone la qualità. Adobe ha infatti dei web designer, grafici e creativi che si comportano come una sorta di "giuria" per valutare i progetti.
Barare dunque è praticamente impossibile.
Instagram consente di condividere le foto dei progetti ma a livello algoritmico non ha grandi performance, salvo eccezioni dove la qualità è alta. Anche in questo caso vige la regola di sviluppare materiale visuale della massima qualità.
Su Instagram non viene valutato tanto il codice del web design bensì la parte grafica. Questo deriva dal fatto che Instagram è un social generalista a differenza di Behance.
In secondo luogo Instagram punta sulla condivisione di foto e video, mentre Behance punta sui progetti completi.
Realizzare un progetto completo di comunicazione è molto più complesso di realizzare una singola foto.
La leva migliore per emergere, dopo la qualità dei contenuti, è il numero di veri follower che seguono il profilo (con relativi like). Banale, certo, ma una fanbase di qualità è l'unica vera leva per emergere.
Dribbble
Dribbble è simile ad Instagram per quanto riguarda la presentazione ma è focalizzato sulla grafica: il suo target sono appunto i grafici, web designer e creativi digitali. È un buon compromesso tra Behance ed Instagram.
Alcune funzioni sono a pagamento ma superato un certo livello ha senso iscriversi con la versione PRO.
ArtStation
ArtStation è un'altra community di creativi e designer, molto in voga tra i giovani e con uno stile di comunicazione basato su forum. Anche qui il livello è molto alto. La piattaforma è gratuita.
LinkedIn è un altro valido strumento per comunicare i propri lavori ma segue una logica completamente diversa da quella dei social visti precedentemente.
Può essere valido per lavori entry-level ed in casi "fortunati" per progetti mid-range (progetti cioè che oscillano tra i 10K e i 100K di budget).
Costruire un sito web funzionante nel proprio computer
Per costruire un sito web funzionante, con codice e grafica, è necessario poterlo testare nel proprio computer, in locale.
A questo proposito è utile poter utilizzare un server web, un programma che consente di simulare offline un ambiente online. Praticamente si configura in locale (nel proprio computer) un ambiente molto simile a quello offerto dai provider di servizi web, ovvero le aziende che bisogna contattare per pubblicare il sito o app.
Il modo più rapido per ottenere un web server gratuito è installare XAMPP.
All'interno di XAMPP ci sarà una cartella denominata htdocs.
Se si salvano i file HTML, CSS e JavaScript all'interno di questa cartella è possibile navigare il sito web digitando nella barra degli indirizzi:
http://localhost/nome_cartella/index.html
Dove index.html è la home page del sito.
PHP per web designer
Per creare ad esempio 10 pagine e condividere un menù in tutte le pagine sarebbe opportuno studiare un minimo di PHP, un altro linguaggio backend per il web.
PHP consente, ad esempio, di includere un elemento in pagine diverse centralizzando alcuni componenti (tipo il menu).
L'unica funzione PHP che è necessario imparare da subito è include()
Installando XAMPP è possibile eseguire codice PHP all'interno del web server.
Fuori dalla cartella htdocs del web server verranno eseguiti solo i file HTML, CSS e JavaScript ma non i file PHP.
Con XAMPP viene installato un programma per eseguire PHP e creare codice HTML in modo automatico.
Esempio: se ad un file HTML si cambia estensione (da .html a .php) questo si trasformerà immediatamente in uno script, eseguendo tutto il codice PHP al suo interno prima di inviare al browser il risultato in HTML.
A titolo di esempio: se in un file HTML si scrive 2+2 a monitor comparirà "2+2". Scrivendo invece una somma in PHP si ottiene 4 perché gli script in PHP sono stati eseguiti nel backend (ovvero in Apache, che è il web server di XAMPP). In pratica l'operazione viene eseguita, il risultato viene trasformato in HTML ed infine inviato al frontend per essere visualizzato dall'utente.
PHP quindi è necessario per creare quelle istruzioni di base che consentono al sito web di essere navigabile senza dover duplicare elementi che sono presenti in più pagine.
Regola: scrivi una volta, usa ovunque. PHP serve sostanzialmente a questo per un web designer, almeno in fase iniziale.
Sempre su W3 School è possibile imparare i rudimenti di PHP. È importante sapere che un Web Designer non deve necessariamente conoscere PHP (che è un linguaggio per il backend). Deve solo conoscere le istruzioni minime per poter scrivere il codice necessario per creare web design funzionanti.
PHP quindi (o altri linguaggi di backend) coinvolgono il web designer veramente in minima parte. Diciamo che è un plus, una conoscenza aggiuntiva ma non obbligatoria che aiuta il web designer a capire alcuni aspetti del web design.
Conoscere un minimo di PHP può rivelarsi utile, ad esempio, quando un web designer deve lavorare con sviluppatori che customizzano WordPress. WordPress è scritto in PHP e un web designer, per intervenire direttamente nel template (UI), deve potersi orientare.
NodeJS: il backend dei web designer
In realtà viene utilizzato anche dai frontend developer ma, come abbiamo visto precedentemente, ci sono molte aree in comune con i web designer.
NodeJS è semplicemente un programma che consente di utilizzare una sintassi JavaScript nel backend. Conoscendo NodeJS un web designer, ad esempio, può utilizzare dei framework per UI a componenti.
Un componente non è altro che un file contenente JavaScript, HTML e CSS/SASS. Questi componenti possono "dialogare" tra loro, scambiarsi informazioni ed essere annidati uno dentro l'altro, come se fossero delle matrioska.
La combinazione NodeJS-framework consente ad un web designer di scolpire al pixel la UI in modo più rapido e preciso, al fine di generare una migliore UX.
Vantaggi dell'utilizzo di NodeJS e framework moderni
- Standardizzare il modo di creare siti web
- Implementare le soluzioni di prototipazione in modo più rapido
- Mantenere tutto il codice perfettamente organizzato
- Ottenere una struttura modulare per effettuare modifiche su più punti di un sito web modificando semplicemente i componenti che utilizza
- Possibilità di vedere istantaneamente il risultato di una modifica per mezzo di HMR (Hot Module Replacement): il sistema mostra immediatamente a schermo le modifiche effettuate sui componenti, in tutte le pagine che li utilizzano
Il sito web più autorevole per avere l'elenco completo dei framework più utilizzati dai web designer è JamStack.
Questo sito web, ad esempio, è realizzato in NuxtJS.
Come pubblicare online il sito web
Per pubblicare online il progetto un web designer dovrà conoscere almeno un software FTP: il più usato è FileZilla.
FileZilla consente di trasferire il sito web dal proprio computer a quello di un hosting provider (server) rendendone pubblico ed accessibile il contenuto.
Git e GitHub per il versionamento
Infine Git e GitHub, strumenti usati quotidianamente dai web designer, consentono di tenere traccia delle modifiche temporali effettuate nei progetti (versionamento).
GitHub, ad esempio, consente di pubblicare siti web statici: un ambiente perfetto per i web designer che vogliono testare e condividere i propri progetti online gratuitamente.
Conclusione
Diventare un web designer professionista richiede tempo, dedizione e pratica costante. Questa guida ha fornito le basi tecniche e le risorse necessarie per iniziare questo percorso.
Ricorda: la chiave del successo nel web design sta nella combinazione di competenze tecniche (HTML, CSS, JavaScript), sensibilità grafica e attenzione all'esperienza utente.
Inizia con piccoli progetti, sperimenta, sbaglia e impara. La pratica costante è l'unico modo per trasformare la teoria in competenza reale.
Buon lavoro!