Il metodo progettuale per diventare Web Designer

creativecode avatar Giulio Tiseo

14 Ago, 2019

~13min.

Il miglior modo di iniziare il percorso di apprendimento per diventare web designer è cominciando dai concetti fondamentali della progettazione. In questa guida rapida capirai cosa significa realmente design e come si fa ad ideare nuove soluzioni attraverso lo sviluppo di un metodo progettuale.

Il metodo progettuale per diventare Web Designer
Requisiti

Questa guida rapida si rivolge a chi intende intraprendere il percorso per diventare web designer. Non presuppone alcun requisito se non tanta pazienza e voglia di imparare. 

 

Avvertenze

L’articolo non ti dirà come ottenere un lavoro, ma ti aiuterà a comprendere le basi per diventare un web designer.

Per diventare Web Designer devi sapere come progettare soluzioni attraverso le tecnologie del web

Prima di partire ti suggerisco di porti una domanda: “Perché sto leggendo questo articolo?“.

Vorresti diventare web designer? Hai bisogno di entrare in contatto con un collaboratore che svolge questo mestiere e non vuoi sembrare del tutto impreparato? Oppure, ti incuriosisce il processo creativo che porta alla realizzazione di applicazioni per il web?

Naturalmente dal mio punto di vista non posso fare altro che avanzare una serie di ipotesi. Tuttavia so che fra migliaia di possibilità, esiste una certezza: in questo momento non stai facendo altro che cercare di trovare la soluzione ad un problema.

In questo caso, presumo che tu non sappia esattamente come diventare web designer e immagino che starai cercando in questo articolo ciò che c’è da sapere per avviare una carriera in questo campo.

Se fino ad ora non mi sono sbagliato, sappi che ti trovi nel posto giusto, perché intendo parlarti proprio di questo: il modo giusto per risolvere problemi. Nel corso dell’articolo capirai che questo approccio ti catapulterà immediatamente nel percorso di apprendimento per diventare web designer.

# Che cos’è il design?

Il design è la disciplina creativa attraverso il quale i designer realizzano progetti funzionali e risolutivi.

Chi non lavora in questo settore pensa che il design sia una materia che riguarda esclusivamente il punto di vista estetico della progettazione e che il lavoro di un web designer consista essenzialmente nel rendere più carine la pagine web. Da un certo punto di vista quest’idea di design è corretta, dato che nell’ambito della progettazione la componente estetica gioca un ruolo fondamentale, tuttavia non si può dire sia la sola verità.

Quando si parla di design, facciamo riferimento in particolare a una serie di processi atti alla trasformazione dell’idea progettuale in prodotto concreto. Molto spesso, ciò che viene originato da questo sviluppo non è altro che la soluzione ad un particolare problema.

# Cosa significa ideare un design?

Ognuno di noi svolge quotidianamente delle azioni di design, anche chi non si ritiene affatto un designer. Infatti, anche se non ce ne accorgiamo, ogni giorno progettiamo qualcosa. In qualsiasi luogo ci troviamo o in qualsiasi momento (tranne quando dormiamo… forse) siamo impegnati a progettare le fasi della nostra giornata o della nostra vita.

Non sorprenderti! Il concetto di design è radicato nel modo in cui elaboriamo pensieri e cerchiamo soluzioni ai nostri problemi, anche i più banali.

Per esempio, quando pensi al modo per arrivare in orario a lavoro, sapendo di avere 30 minuti a disposizione per alzarti, farti la doccia, vestirti, prendere il caffè ed entrare in macchina, non stai facendo altro che progettare la soluzione ad un problema: essere in ritardo.

Per ogni problema puoi giungere a migliaia di soluzioni diverse e fra queste occorrerà valutare quale vale la pena realizzare nel tuo caso specifico. La scelta della soluzione migliore è una parte molto importante del processo creativo perché identifica il tipo di soluzione che adotterai e la durata che quest’ultima potrà avere nel tempo.

Si tratta di una soluzione provvisoria o definitiva? Può essere considerata fantasiosa o commerciale? Ne riparliamo più avanti…

Riprendendo l’esempio precedente, non sarebbe male riuscire ad implementare un design simile a quella adottato per il trasporto di Snorlax…

…ma richiederebbe un mucchio di risorse, un tempo di produzione eccessivo e un pokemon che ti dia una mano. Insomma, pur essendo geniale, dovrai bypassare questa soluzione e sceglierne un’altra meno fantasiosa.

Un buon progetto potrebbe cominciare dall’ottimizzazione dei tempi nella doccia per poi indossare velocemente i vestiti preparati la sera prima. Successivamente potresti prendere l’autostrada per saltare il traffico sulla statale e posticipare il caffè alla macchinetta che hai in ufficio, portando nella borsa dentifricio e spazzolino per evitare di macchiarti i denti.

Tutti questi passaggi rappresentano delle scelte di design o di progettazione che hai deciso di adottare per poter svolgere regolarmente la tua mattinata, applicando qualche modifica alla tua routine.

# Approccio alla progettazione un web designer

Per diventare web designer è importante essere consapevoli del fatto che si tratta prima di tutto di un lavoro di pensiero.

Un web designer brillante deve avere la capacità di trovare e saper scegliere la soluzione migliore ad un problema, attraverso le tecnologie per il web. Ovviamente non basta la sola capacità progettuale; un web designer deve necessariamente conoscere il web e tutti i concetti base che riguardano le reti. Di certo non puoi pensare di iniziare a progettare siti senza sapere da cosa è composta una pagina web.

Per avere un’infarinatura di questi concetti, ti suggerisco di approfondire la timeline che parla delle tecnologie del web che puoi trovare nei percorsi formativi.

Nella progettazione esistono degli schemi che facilitano il processo creativo. Pur essendo molto romantica l’idea di raggiungere il momento Eureka dopo milioni di tentativi, non è l’approccio migliore quando si è impegnati nella progettazione. Anche se può sembrare più immediato, lasciarsi ispirare dalle giornate o dal vento porta a delle soluzione affidate al caso… e il caso spesso fa perdere molto tempo.

Bruno Munari all’inizio del celebre “Da cosa nasce cosa“, afferma che “progettare è facile quando si sa come si fa. Tutto diventa facile quando si conosce il modo di procedere per giungere alla soluzione di qualche problema […]“. Per far si che le cose siano facili e che le idee non siano date tutte al caso, è importante che il Web Designer abbia ben chiare le problematiche reali e sviluppi un metodo progettuale efficace prima di arrivare a delle soluzioni affrettate.

# Per diventare un bravo web designer devi sapere individuare il vero problema

Scrivi questa frase su dei fogli di carta e appendili in ogni angolo del tuo studio: i problemi di design nascono dai bisogni delle persone. La prima cosa che un web designer deve fare prima di arrivare a una possibile soluzione, è comprendere l’essenza del problema senza lasciarsi condizionare dal proprio ego e focalizzando tutta la propria attenzione sulle problematiche evidenziate dal cliente.

Definizione del problema

Immaginando che il problema sia quello di un realizzare un sito web, l’approccio migliore consiste nel porsi delle domande preliminari e appuntarsi le risposte.

Ad esempio: si tratta di un sito che deve mostrare al visitatore un portfolio di lavori, una pagina biografica e magari un form di contatto (sito vetrina)? È un sito che deve dare al visitatore la possibilità di acquistare online oggetti o servizi (e-commerce)? È un sito di news su eventi o manifestazioni (blog)? Si tratta del sito di un artista che deve avere una pagina per il portfolio e un’altra per la vendita delle opere (ibrido)?

Nel caso di progetti su commissione la risposta a questa domanda è data direttamente dal cliente. In tal caso dovrai analizzare più in profondità le problematiche evidenziate: l’obiettivo del cliente è quello di aumentare i contatti della mailing list per girare promozioni che attirino le persone verso la sua attività? Il cliente vuole incrementare il proprio fatturato vendendo online i suoi prodotti? Lamenta di non essere abbastanza visibile nei motori di ricerca? Cerca un modo per poter diffondere materiale di apprendimento online?

Le possibilità sono tantissime quindi non potrò elencarle tutte, ma è importante, soprattutto per chi vuol capire come diventare web designer, definire profondamente il problema prima di buttare soluzioni a caso. Capire in cosa consiste esattamente il problema ti permetterà di individuare la soluzione più adatta, intercettando con successo le intenzioni del cliente.

Definizione della soluzione

Una volta definito il problema, dovrai capire che tipo di soluzione adottare. Pensi di sviluppare una soluzione duratura o provvisoria? Vuoi rispettare degli standard commerciali o pensi sia il caso di aggiungere un pizzico di originalità alle pagine del sito? Deve essere al passo con i tempi e seguire i trend del momento o puoi attenerti a dei canoni più classici?

Non avere paura di fissare dei paletti in questa fase, anzi! Sono utili a mettere un freno alle fantasie inutili e alimentano la creatività di cui hai bisogno. D’altronde che senso ha pensare ad un complesso sito web dalla grafica super accattivante se stai realizzando una pagina web che consiste nella documentazione di un sofisticato elettrodomestico? In questo caso la soluzione migliore sarà quella più duratura, che certamente non spiccherà in originalità, ma sarà di facile utilizzo e che rispetterà i canoni di navigazione più classici. Senza considerare il fatto che risparmierai un’enormità sui tempi/costi di produzione!

Scomposizione del problema

La parte in cui i designer smontano il problema è una delle fasi più importanti. Analizzando in profondità il problema, ti renderai conto che esistono tanti altri sotto-problemi ai quali dovrai dare delle soluzioni. Ad esempio: “è prevista un’area di gestione del profilo utente con relativo modulo di registrazione? È un sito che deve generare un certo tipo di engagement o si tratta di un insieme di pagine istituzionali? È un sito che deve attirare professionisti? Studenti? Anziani? Deve essere un template riutilizzabile in altri progetti corollari? Deve essere adattabile a display particolari come quelli degli smartwatch? Prevede particolari forme di interazione per diversamente abili? Ecc…

Questa operazione di scomposizione del problema facilita la progettazione, permettendoti di risolvere microproblemi che nella complessità del progetto rappresenteranno macroproblemi.

“Un singolo problema di design è un insieme di molti sottoproblemi. Ognuno di essi può essere risolto in modo da ottenere un campo di soluzione accettabili”

Leonard Bruce Archer

# Il momento della ricerca

Una volta identificato il problema principale e tutti i suoi sotto-problemi, la cosa migliore da fare è una ricerca sulle opzioni di design che sono state sviluppate da altri designer. Sfrutta tutto il potenziale che ti offre internet e fai ricerche approfondite per vedere le soluzioni adottate dagli altri. Cerca di comprendere le motivazioni che hanno spinto altri web designer come te a sviluppare un progetto in un certo modo. Stampa i design che ritieni più interessanti e commentali a lato con tue riflessioni personali pensando in primis al tuo progetto e alle problematiche evidenziate dal cliente. Fai una raccolta di immagini e spunti che potranno aiutarti nella realizzazione del tuo design.

Alcuni punti di riferimento per le mie ricerche sono:

  • Dribbble: community in cui i designer pubblicano prototipi di UI e UX finalizzati allo sviluppo web e mobile (occorre essere registrati);
  • Behance: piattaforma per la condivisione di portfolio per designer e artisti. È molto più generica di Dribbble ma presenta una grande varietà di lavori;
  • Pinterest: è un social network per la condivisione di fotografie e immagini. Personalmente lo uso spesso come motore di ricerca al posto di Google Immagini, perché buona parte dei lavori che troverei su Behance o altre piattaforme, sono spesso postati e linkati qui (occorre essere registrati);
  • Awwwards: se sei interessato ai trend di design per il web, vai su awwwards e lasciati ispirare da lavori sensazionali. Attenzione però, usa questo sito responsabilmente! Ricordi l’esempio che ti ho fatto poco fa sulla documentazione dell’elettrodomestico? Se non serve, non farlo. Spesso si pensa di risolvere problemi riempiendo un progetto con valori esteticamente fasulli, non cadere nella trappola.

A questo punto della progettazione cerca di non concentrarti troppo sui valori estetici dei lavori che ricerchi. Piuttosto, cerca di trovare risposte nelle motivazioni che, secondo te, hanno spinto gli autori di quei progetti a scegliere determinate soluzioni di design. Cerca di eliminare i valori estetico-decorativi e considera quelli squisitamente tecnici. Vai alla ricerca dei difetti e dei pregi dei singoli lavori.

Esempio di un sito che offre la possibilità di affittare auto:
Difetti: il design appare fluido, dinamico e moderno, ma le gif animate a centro pagina che mostrano i passaggi per effettuare la richiesta del preventivo, comprometterebbero la velocità di caricamento delle informazioni. Questo aspetto rappresenta un handicap per i visitatori mobile, che sono l’80% dell’utenza.

Pregi: la scelta di adottare un pulsante in basso a destra molto chiaro per l’help center, può essere utile al mio progetto perché consentirebbe all’utente di passare alla coda della chat per l’assistenza in tempo reale, che è uno dei punti di forza dell’azienda.

Le ricerche non sono solo importanti per trarre ispirazione, ma forniscono suggerimenti fondamentali anche su come un progetto non deve essere fatto.

# Lo spazio della creatività

In questa fase sei nella condizione in cui conosci il problema principale e hai analizzato a fondo tutte le problematiche. Hai cercato inoltre soluzioni simili a quelle di cui hai bisogno per il tuo progetto e sei stato capace di imparare da esse traendo nuove informazioni utili.

A questo punto ti trovi in quello che definisco lo spazio della creatività. Non devi fare altro che cercare di mettere tutto insieme nel modo più giusto. Immagina di avere tanti pezzi Lego e di volerli montare insieme per creare qualcosa di funzionale. L’attività creativa di un designer consiste proprio in questo: è la capacità di saper produrre qualcosa di utile attraverso l’unione di elementi diversi.

# La scelta dei componenti

L’operazione successiva consiste nel fare una ricerca sui componenti da impiegare nel progetto in base alle idee elaborate nello spazio creativo.

Hai bisogno di uno slider per le offerte del mese? Di un carousel che permetta lo scorrimento orizzontale dei prodotti? Vuoi realizzare un blog con un layout a griglia? Hai bisogno di una sidebar laterale per la navigazione interna agli articoli? Devi pensare ai pulsanti per la condivisione social? La barra dei menu è pensata per poche o tante voci?

Fai la classica lista della spesa in cui elencherai i componenti di cui avrai bisogno. Apponi una nota su ciascuno di essi se lo ritieni utile, descrivendo l’uso che l’utente dovrà farne e il punto in cui dovrà essere posizionato nella pagina.

# Sperimentare varie soluzioni

Finora non abbiamo ancora parlato di bozze progettuali e non ci siamo per niente concentrati sull’aspetto pratico della progettazione. Come ti avevo anticipato, per diventare web designer devi sviluppare idee solide, non castelli di carte. Per arrivare a questo risultato hai dunque bisogno di impiegare molto tempo sui concetti e sulle problematiche, sui possibili bug e sulle criticità di ciascuna microsoluzione.

Anche se fin qui sembra un processo piuttosto lungo, posso assicurarti che ti farà risparmiare più tempo di quanto non riusciresti andando a tentativi senza aver fatto prima un’attenta analisi delle problematiche. Ancora non hai idea di come sarà il progetto che realizzerai, ma puoi essere certo di aver limitato molto la possibilità di incappare in errori e/o soluzioni che non funzioneranno.

Puoi cominciare a costruire le relazioni fra i componenti che hai selezionato nella fase precedente, realizzando delle bozze su carta. Questi schizzi possono costituire dei modelli parziali su cui farai le tue valutazioni successivamente e sulle quali potrai appuntare dei cambiamenti o delle riflessioni in merito all’interazione e all’esperienza utente.

Diventare web designer sperimentando nuovi componenti
Bozze sviluppate nel corso della progettazione dell’esperienza utente. Per diventare web designer devi ragionare sulle funzioni dei componenti e stabilire fra loro delle relazioni coerenti

Ad esempio, immagina di dover studiare un modo per consentire la navigazione facile di un menu estremamente ricco di voci, rispettando contemporaneamente le prerogative del responsive. Potresti pensare ad una soluzione con un toggle menu a lato della navbar su cui fare click. Una volta attivato potrebbe comparire con una transizione, un menu full screen pulito e semplice da navigare su cui l’utente può focalizzare tutta la sua attenzione.

# Testing

Ogni sperimentazione deve essere sottoposta al giudizio (sincero) di un utente. Sulla base delle impressioni raccolte dal tester si valutano le possibili modifiche da apportare. Non considerare chi dice: “Questa pagina di blog non mi piace perché preferisco com’è fatto il diario di Facebook“. Digli semplicemente: “Ok.” e togligli il computer dalle mani.

A questo punto, in base ai dati raccolti e agli schizzi realizzati, puoi pensare alle relazioni che ciascun componente può avere nell’ambito di una o più pagine e cominciare a realizzare i primi prototipi.

# Realizzare i prototipi

I prototipi rappresentano la parte finale della progettazione. Puoi realizzare dei prototipi attraverso dei tool pensati appositamente alla realizzazione del design di app e siti web come Figma.

Quando si realizza un prototipo, devono essere chiare le funzionalità che intendi applicare al tuo sito web. In questa fase devi pensare a come dovrà essere esattamente il prodotto finale, considerando tutti gli aspetti della progettazione che hai affrontato.

La progettazione richiede tempo ed esperienza. Per diventare web designer occorre avere una forte passione e curiosità verso tutti gli aspetti che riguardano il web. Se non hai la spinta dell’interesse personale verso questo mondo, sarà difficile riuscire ad emergere e dimostrare di essere un valido web designer!

Mi auguro che questa guida rapida su come diventare web designer sviluppando un metodo progettuale sia stata per te utile e che ti abbia ulteriormente invogliato a coltivare il tuo interesse per il web design.

Hai letto l’articolo e vuoi approfondire ulteriormente? Hai la possibilità di scegliere fra due strade:

  • La prima: iniziare il tuo percorso di apprendimento dal codice e imparare le basi dell’HTML;
  • La seconda: approfondire l’aspetto legato alla progettazione, l’esperienza utente e il prototyping dei siti web, servendoti di tool specifici come Figma.

In entrambi i casi… “vedrai quanto è profonda la tana del Bianconiglio” (se non hai visto ancora Matrix, chiudi tutto e vai a vederlo prima di fare qualsiasi altra cosa).

A presto!