WillBe | Agenzia di Comunicazione Web Agency Torino

communication and digital agency

Sketch per web designer: più creativi, con le mani sporche d'inchiostro

Sviluppo della creatività e ottimizzazione delle ore lavoro, grazie all’approccio back-to-basic del web di oggi: dove sono dirette le più grandi digital agency?

Realizzato da WillBe, aprile 2013

Il web è il settore più versatile e rapido in termini di sviluppi, evoluzioni e ribaltamenti di metodi, ruoli e figure. Ciò che oggi è una certezza, domani sarà un ricordo lontano. Ciò che oggi è una semplice intuizione, domani sarà un metodo valido e condiviso. Forse.

Rimanere sul pezzo è la sfida quotidiana di chi lavora nel settore, si tratta di difendere la propria competitività modulando skills e professionalità sulla base di ciò che avviene nel mondo. Non bisogna perdersi nulla.
Attualmente il web vive il suo momento back-to-basic, un ritorno in pieno stile alle basi, quando i web designer non sapevano ancora di essere web designer, quando si immaginava sulla carta e a fine giornata ci si trovava con un foglio pieno di idee e con le mani sporche d'inchiostro, tempera e cancellature varie.
Abbiamo noleggiato una luccicante DeLorean per muoverci più agilmente in questa sorprendente retta temporale. Abbiamo una domanda: perché le grandi digital agency e i più competenti web designer stanno tornando a progettare i siti internet su fogli di carta? Allacciamo le cinture.
Lo sketch o bozzetto è stato rivalutato nei suoi 2 fondamentali aspetti positivi:

  • libera la creatività con l'istinto (quello della mano che muove una matita);
  • ottimizza le ore lavoro su un progetto web.

L’ottimizzazione delle ore lavoro e l’aumento della creatività

Il bozzetto mette in moto rapidamente una catena di idee creative, che possono essere cancellate, modificate e sviluppate con la stessa rapidità con cui vengono abbozzate. Si fatturano meno ore di lavoro trascorse davanti al monitor e si ottengono di conseguenza più ore disponibili per la creatività.

Content e ragionamenti UX

Sketch significa individuare i contenuti critici, ragionare su come ordinarli, istituire una priorità, immaginare un percorso di navigabilità che possa rendere ottimale il sito web nella sua più intrinseca funzione, ovvero informare, interessare, convincere. Approfondire la UX, osservando le strade abbozzate e scegliendo quella che la vostra professionalità, vi suggerisce essere la più adatta.

Styling e progettazione grafica

Concentrazione sul dettaglio, flessibilità nelle correzioni e possibilità di tornare indietro velocemente e senza troppi sensi di colpa. Abbozzare per ragionare sui primi elementi dell'interfaccia utente, sull'utilità di un pulsante, sulla tipografia, su come creare icone intuitive e user friendly, call to action mirate e accattivanti.

Lo sketch nell'approccio con il team di lavoro

Ottimizzando il lavoro in team, lo sketch è un ottimo metodo per "essere sicuri di essersi capiti". L'anello di collegamento tra il designer e lo sviluppatore, un metodo semplice per trasportare le idee da una mente all'altra, con immediatezza e agilità.

Lo sketch nell'approccio con il cliente

Lo sketch rende più professionale la presentazione del progetto web, poiché rappresenta uno step che il cliente dovrà approvare per proseguire nella realizzazione del sito web. Usiamo lo sketch come strumento informale in grado di mettere il cliente a suo agio, evitando di spiazzarlo con avanzamenti che in questa fase del progetto web probabilmente non comprenderebbe; adesso deve essere impressionato e convinto della struttura, non del design. Davanti ad un bozzetto inoltre, il cliente si sente creativo per una buona mezz’ora, è quindi propenso a dire la sua e a proporre idee, molto più che di fronte ad un mock-up di Photoshop. E questo è fondamentale in rapporto alla soddisfazione finale del cliente e al raggiungimento degli obiettivi di business (e anche non di business) emersi durante il brief.

Tanto per iniziare, senza site map non si inizia

Nel realizzare un bozzetto per il web è necessario che prima sia stato compiuto un altro importante passaggio, quello relativo all'analisi dell'azienda cliente, della concorrenza e del target di riferimento per giungere ad una visione ideale dell’informazione da proliferare e ad una pianificazione del sistema dei contenuti. La mappa del sito approvata dal cliente, è il migliore “via libera” per accedere alla fase sketch.

Lanciatevi

Come abbiamo appena suggerito, per abbozzare un progetto web dobbiamo capire di fronte a che tipo di sito ci troviamo e decidere da dove partire. Le esigenze ovviamente variano, se parliamo di un e-commerce che avrà 300 pagine dovremmo fare un tot di ragionamenti che probabilmente non faremo se ci trovassimo a progettare il sito web portfolio di una giovane fashion designer.
Nel primo caso, dobbiamo pianificare un percorso di navigazione veicolato verso "l'acquisto di un prodotto", quindi immaginare le pagine istituzionali ma anche quelle più articolate. Non è detto che si scelga di partire dagli sketch della home, ma ad esempio dalla pagina prodotti o dalla "scheda prodotti" o dal dettaglio di un pulsante o di una call to action, come dicevamo prima.
Nella seconda ipotesi invece si potrebbe scegliere di partire proprio da una bella homepage, accattivante e d'impatto, che affascini l'utente nell’approfondire il suo tour, magari proprio verso la pagina dedicata al portfolio. Oppure, sempre ragionando sul portfolio si potrebbe disegnare una gallery ad hoc in grado di ottimizzare il sistema di differenziazione dei vari progetti.

Un esempio per capire se avete capito

Il cliente, un rivenditore di semplici componenti edili, necessità di un sito istituzionale (che presenti l'azienda, la mission e i vari servizi) ma esplicita l'importante esigenza di mettere in risalto i numerosi prodotti proposti, veicolando gli utenti a visionare le pagine prodotto e a richiedere un contatto per un preventivo.
Abbiamo immaginato e abbozzato il percorso che lo user intraprenderà una volta approdato sul sito. I prodotti, sono organizzati in categorie e relative micro-categorie. L'esempio di sketch che vi mostriamo, riguarda la progettazione della homepage quale primo step del percorso verso "il singolo prodotto" che ci siamo immaginati. Abbiamo deciso di offrire una prima presentazione dell’azienda, presentando d’impatto la proposta di prodotti e immediatamente dopo, facendo chiarezza sul target di riferimento.
 

 
Non vi sono regole inderogabili nella produzione di bozzetti per il web, è necessario istituire un codice comunicativo chiaro, rapido e versatile all'interno del team, ottimizzando il flusso di lavoro attraverso un proprio metodo esclusivo. Un approccio ottimale per le figure professionali che si interfacciano lungo la produzione del sito web. Adesso dobbiamo restituire questa luccicante DeLorean.
 
Thanks to Sneakpeekit.com per l'esempio di browser paper