In questo articolo sono presenti le informazioni tecniche principali ed il materiale informativo necessario per diventare un Web Designer professionista partendo da zero.
Il web designer è quella figura professionale che crea l'interfaccia grafica di un sito web o di un'app dal punto di vista del design e della sua ergonomia.
È un lavoro che ha diversi aspetti in comune con quello dello sviluppatore/programmatore, nello specifico denominato frontend developer.
Differenza tra web developer e web designer
Prima di addentrarci nel mondo del web designer è necessaria una precisazione terminologica. Spesso infatti gli utenti fanno confusione tra web developer e web designer. Spiegare quali siano le differenze tra queste due professioni serve a delineare correttamente l'ambito lavorativo del web designer.
Partiamo quindi dalla definizione che spesso viene erroneamente attribuita ai web designer: frontend developer.
Il frontend developer è principalmente uno sviluppatore di software della parte visibile di un sito web, il frontend appunto.
Il web designer invece definisce lo styling del sito web usando alcuni degli strumenti tipici di un frontend developer, anche se principalmente utilizza programmi di grafica, CSS, HTML e un minimo di JavaScript (opzionale). Più avanti saranno spiegate brevemente queste tecnologie per avere dei riferimenti di base.
Il frontend developer si focalizza maggiormente sulla creazione di codice di programmazione (prevalentemente JavaScript/TypeScript) che devono interagire in qualche modo con altri codici presenti in un server: il backend.
Approfondimento: cos'è un sistema client/server
Per semplificare si può dire che 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 dal backend.
Esempio: un modulo da compilare online.
- appare il modulo a schermo (siamo nell'area frontend).
- il modulo viene compilato e viene premuto "invio". A questo punto i dati del modulo passano al backend, che li elaborerà secondo una sua logica.
- il frontend riceve la risposta dal backend (tipicamente una conferma di avvenuta registrazione o visualizzazione di eventuali errori).
Il web designer si occupa dei punti 1 e 3 ovvero della creazione del design delle due pagine (o componenti), quelle dove sono presenti il modulo e la successiva conferma.
Il frontend developer utilizza tecniche di scripting miscelando JavaScript, HTML e CSS al fine di ricevere dati da un backend. Il backend utilizza linguaggi di programmazione diversi da quelli del frontend, come ad esempio PHP, Go, Python ecc.
Semplificando il frontend developer si occupa del comportamento della pagina, mentre il web designer si occupa dello stile.
Come è facile intuire un web designer ed un frontend developer utilizzano strumenti e linguaggi comuni ma con livelli differenti di specificità.
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 per mezzo della creazione di una UI (User Interface). Il frontend developer può realizzare tecnicamente le stesse cose di un web designer ma si "limita" a fare in modo che lo scambio tra frontend e frontend sia corretto a livello tecnico tenendo al minimo grafica e styling.
Senza scendere troppo nel dettaglio basta sapere che il web designer termina il proprio lavoro quando il sito web funziona a livello stilistico: le pagine si caricano, i link funzionano, i testi si leggono, la grafica viene ridimensionata in base al device, le immagini vengono create ad hoc, la progettazione della UI viene ragionata per generare una UX positiva, ecc.
Vediamo un esempio: il sito web deve essere ottimizzato per i motori di ricerca. Se ne occuperà il frontend developer o il web designer? Dipende.
Possono farlo entrambi. Tendenzialmente un frontend developer avrà più competenze ma la linea di demarcazione non è così netta.
Ad esempio, seguendo delle regole SEO, entrambi possono occuparsi della creazione di un web design che sia correttamente ottimizzato per i motori di ricerca.
HTML: cos'è, a cosa serve e come si impara
L'HTML è un linguaggio di codifica che costituisce la base della creazione di qualsiasi pagina web o app presente nel web.
Bisogna immaginare l'HTML come il mattone da utilizzare per creare 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 base:
- utilizza delle parole denominate tag per definire il tipo di mattone che si vuole utilizzare
<p> ad esempio è il tag "paragrafo", e serve per creare... un paragrafo :)
Mettendo un testo tra <p> e </p> si sta dicendo al browser che quel testo è un paragrafo.
Così:
<p>Questo è un paragrafo</p>
- all'interno dei tag possono essere scritti degli attributi con delle proprietà (valori) per personalizzare i tag. Una coppia attributo+proprietà determina lo stile del tag a cui l'attributo è associato.
In questo esempio si noti 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". Tutto qui.
- si possono 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 possiamo inserire all'interno dei tag.
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 dare uno stile vero e proprio alle pagine in HTML.
I web designer utilizzano i CSS per creare stili, effetti ed 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 verde 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. Questo per consentire ai frontend developer di lavorare in modo più semplice ed 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 usare 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 fare 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 mettono in collegamento tra loro per formattare i contenuti ed 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 ho la seconda edizione).
SASS: web design con stile modulare
Un terzo linguaggio che un vero Web Designer deve 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.
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 per manipolare i tag HTML e gli stili CSS, principalmente.
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 assieme 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 ninja. 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
A pagamento:
Entrambi sono ottimi programmi per fare grafica orientata al web design.
Il pacchetto Adobe è più utilizzato 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 scheda video ovvero su accelerazione GPU. Le prestazioni sono quindi superiori al pacchetto Adobe.
Adobe però, attualmente, ha più funzioni.
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.
Come programmi gratuiti per fare grafica per il web o web design abbiamo
- Inkscape (che corrisponde ad Adobe Illustrator o Affinity Designer)
- GIMP (che 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
Programmi per editing fotografico
- CaptureOne (a pagamento)
- DxO (a pagamento)
- Rawtherapee
- Dark Table (gratuito ed opensource)
- Luminar AI (a pagamento. Sfrutta l'Intelligenza Artificiale)
Programmi di animazione per il web
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, per capirci.
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.
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.
La cosa migliore per imparare l'SVG è usare Google e Youtube, cercare tutorial semplici ed imparare le basi di questo formato.
UX
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 produzione del web design
- mantiene il progetto organizzato
- la realizzazione dei concept di design risulta più veloce
- testare soluzioni alternative e creare varianti in modo più semplice
- si può condividere il progetto con clienti e membri del team
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.
Attualmente sto utilizzando Adobe XD ma ce ne sono tanti altri. Molti web designer utilizzano Figma, ad esempio. Per utenti Mac lo standard è Sketch.
Per altri strumenti di prototipazione UX conviene consultare UX Tools.
SEO
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 ai SEO di migliorare le performance dei siti web e renderli più reperibili. I SEO, potendo lavorare su codici puliti e modulari ad elevata espressività, possono strutturare ed organizzare certe informazioni in modo più intelligente.
Un web designer che collabora con un SEO, ad esempio, 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 si può occupare 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, con la qualità più estrema 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 guru 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'è fuffa, la differenza rispetto ad altri social è che la fuffa non circola nel feed generale e non può essere diffusa come avviene praticamente in qualsiasi altra piattaforma usando leve persuasive o gattini da clickbait.
La sola presenza su Behance, comunque, non è sinonimo di qualità: significa confrontarsi con realtà e creativi super skillati provenienti da tutto il mondo, non significa farne parte.
Questo social funziona lato business praticamente solo in inglese, per lavori ad 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 avere un ritorno. Mentre negli altri social bastano semplici post e un'immagine stock per raccattare 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 spulciano 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.
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.
Art Station
Art Station è 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 ecc.
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
http://localhost/nome_cartella/index.html
Dove index.html è la home page del sito.
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 minimo del 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 insidiosi 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.
Alcuni vantaggi sull'utilizzo di questa soluzione:
- standardizzare il modo di creare siti web.
- implementare le soluzioni di prototipazioni in modo più rapido.
- mantenere tutto il codice perfettamente organizzato.
- ottenere una struttura modulare per effettuare modifiche su più punti di un sito web modificaando semplicemente i componenti che utilizza.
- possibilità di vedere istantanemante 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.
Infine Git e GitHub, strumenti usati spesso 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.