Diventare un web designer

Come diventare un Web Designer professionista
DATA
21/01/2021
AGGIORNATO
21/01/2022
Ci sono diverse strade per diventare un web designer professionista. Una di queste è seguire i consigli di un altro web designer con più di 20 anni di esperienza sul campo. Le basi del web design, il percorso di studi, i libri ed i link più utili per diventare un vero web designer.

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 front-end 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 spessso viene erroneamente attribuita ai web designer: front-end developer.

Il front-end developer è principalmente uno sviluppatore di software della parte visibile di un sito web, il front-end appunto.

Il web designer invece definisce lo styling del sito web usando alcuni degli strumenti tipici di un front-end 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 front-end developer si focalizza maggiormente sulla creazione di codici di programmazione che devono interagire in qualche modo con altri codici presenti in un server: il back-end.

Approfondimento: cos'è un sistema client/server

Per semplificare si può dire che il front-end coinvolge tutto quello che l'utente visualizza a monitor mentre il back-end riguarda primariamente la manipolazione delle informazioni che il front-end gli invia, ricevendo poi una risposta.

Esempio: un modulo da compilare online.

  1. appare il modulo a schermo (siamo nell'area front-end).
  2. il modulo viene compilato e viene premuto "invio". A questo punto i dati del modulo passano al back-end, che li elaborerà secondo una sua logica.
  3. il front-end riceve la risposta dal back-end (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, quelle dove sono presenti il modulo e la successiva conferma.

Il front-end developer utilizza tecniche di scripting miscelando Javascript, HTML e CSS in quei punti dove i dati devono essere inviati e ricevuti dopo un'ulteriore elaborazione che avviene in un server tramite linguaggi di programmazione per back-end (PHP, Go, Python ecc.).

Semplificando il front-end developer si occupa del comportamento della pagina, mentre il web designer si occupa dello stile.

Come è facile intuire un web designer ed un front-end developer utilizzano strumenti e linguaggi comuni ma con livelli differenti di specificità.

Il web designer è maggiormente focalizzato sulla grafica della pagina, sullo stile con cui vengono presentate le informazioni e sulla UX (User Experience) degli utenti. Il front-end developer può realizzare tecnicamente le stesse cose di un web designer ma si "limita" a fare in modo che lo scambio tra front e back 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 UX è ottimale ecc.

Vediamo un esempio: il sito web deve essere ottimizzato per i motori di ricerca. Se ne occuperà il front-end developer o il web designer? Dipende.

Possono farlo entrambi. Tendenzialmente un front-end developer avrà più competenze ma la linea di confine 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:

  1. 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>
  1. 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.

  1. 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: green">paragrafo con testo verde</p>

ottenendo questo risultato: paragrafo con testo verde.

Da notare che è stato cambiato "class" con "style".

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, 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 con i tag che desideriamo modificare.

Esempio di un file CSS

<code class="language-css">
.colore-paragrafo{
    color: red;
}
</code>

Codice HTML

<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 front-end developer di lavorare in modo più semplice ed organizzato. Ecco spiegato uno dei motivi per cui questo articolo inizia spiegando la differenza tra web designer e 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 è completo come da titolo perché il CSS è un mondo e non è possibile scrivere tutto quello che riguarda i CSS in un libro ma questo è sicuramente il migliore che abbia potuto leggere in lingua italiana (io stesso ho la seconda edizione).

SASS: per web design con stile modulare

I web designer utilizzano SASS per creare siti web strutturati e modulari

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 (rispetto a quello che il codice deve fare) e soprattutto più modulare.

esempio di codice SASS

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:

  1. W3 School - JS Tutorial.
  2. Javascript su MDN.

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 come funziona la 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 front-end 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.

Programmi di grafica per web designer

A pagamento:

  1. Adobe Creative Cloud
  2. Affinity

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

  1. Inkscape (che corrisponde ad Adobe Illustrator o Affinity Designer)
  2. 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.

Adobe
Affinity
Opensource
workflow (flusso di lavoro)
⭐⭐
⭐⭐⭐
funzionalità
⭐⭐⭐
⭐⭐
velocità
⭐⭐⭐
⭐⭐
prezzo
20-60 € mese
€50 cad. uno
gratuito
semplicità
⭐⭐
documentazione
⭐⭐⭐
⭐⭐
presenza di tutorial
⭐⭐⭐

Programmi di fotoritocco online

Programmi per editing fotografico

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 è il formato tipico delle fotografie mentre il vettoriale è quel formato utilizzato per creare 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 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.

creare web design con SVG

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é:

  1. evita molti problemi in produzione
  2. mantiene il progetto organizzato
  3. la realizzazione dei concept di design risulta più veloce
  4. testare soluzioni alternative e creare varianti in modo più semplice
  5. 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 è

ap_virgolette_up
spendi prima
risparmia dopo

La prototipazione è ormai obbligatoria per diventare un vero web designer professionista.

Prototipazione in Adobe XD per la realizzazione di un web design

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 scalare le classifiche dei motori di ricerca lavorando su codici puliti e modulari ad elevata espressività.

Un web designer che collabora con un SEO ha bisogno di poter modificare la struttura di un sito in modo rapido, personalizzando la UX senza rifare il sito da capo.

Il web designer si può occupare anche di questo aspetto.

I migliori social per web designer

Behance

I progetti selezionati di grafica e web design di 1micron su 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 dubbia qualità.

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 designer che si comportano come una sorta di "giuria" per valutare i progetti.

Barare dunque è praticamente impossibile.

Instagram

Utilizzare Instagram per pubblicare immagini di web design

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 e sulle foto, 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 ma è focalizzato sulla grafica: il suo target sono appunto i grafici ed i web designer. È 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.

artstation.com

LinkedIn

Utilizzare linkedin come web designer

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 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 back-end (ovvero in Apache, che è il web server di XAMPP). In pratica l'operazione viene eseguita ed il risultato viene trasformato in HTML ed inviato al front-end 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 back-end). 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 back-end) 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. :)

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).

Nicola Del Ben, Antico Muratore del Web Sviluppo soluzioni di business in chiave marketing dal 1997. Online alcuni mi conoscono come "antico muratore del web".