07/10/2014

Il nostro processo creativo: Web/App

Emanuele Macri

Emanuele Macri in:   Experience Design Front-end Process VDT

Dopo un anno di esperienza lavorativa con il metodo Visual Design Thinking possiamo finalmente condividere con voi il nostro processo progettuale e creativo per la creazione di un sito web o un’applicazione.

Dopo un anno di esperienza lavorativa con il metodo Visual Design Thinking possiamo finalmente condividere con voi il nostro processo progettuale e creativo per la creazione di un sito web o un’applicazione.

Emanuele.

Nato a Taranto nel ’91, esportato a Roma nel 2008.

Vero, non è il mio curriculum, anche se servirebbe dato che questo è il primo post che scrivo su questo blog.

Ricominciamo.

Mi presento,
Emanuele Macri, Designer e Front End Developer in nois3, lavoro qui da prima che nois3 nascesse, sostanzialmente sono una delle persone che si occupa di progettare, disegnare e implementare (in parte) i siti e le app che ci date da fare. Quindi, come direbbe Carlo,

Se qualcosa va male è colpa mia

Durante quest’anno insieme ai cari soci e colleghi ho aiutato a creare e sviluppare il nostro processo creativo e lavorativo, per quanto riguarda il web e le app.

Ma perché parlare del processo direte voi? Parliamo del processo perché è probabilmente la cosa principale che ci contraddistingue da tante altre “design agency”, oltre il fatto che siamo fighissimi serissimi.

Visual Design Thinking

Avrete già sentito parlare, almeno in questo blog di Visual Design Thinking, se non l’avete fatto, fatelo, perché comincia tutto da lì. Sostanzialmente quello che facciamo fin da subito è parlare con il cliente, mettendolo in condizione di essere utile, in modo da farci capire esattamente quello che vuole (sembra una banalità vero?). Ora, dato che come forse avrete già notato mi dilungo troppo, userò una lista, così farò sembrare tutto più breve e ordinato.

NdR
Descriverò il processo di un sito, ma quello che scrivo si declina anche per la creazione di un’app. Almeno così eviterò di usare troppi sito/app, e/o e altre soluzioni fastidiose.

 

Fase 1 – Domandine

Cominciare bene è fondamentale per la buona riuscita del progetto e noi lo facciamo anche se da poco con una serie di brevi domande, in cui chiediamo al cliente di descrive in pochi punti qual è il suo core business, quali sono i visitatori/utilizzatori del suo sito e i competitors, ma soprattutto cosa offre in più rispetto ai competitors.

In fondo nessuno meglio del nostro cliente sa chi sono gli utenti del suo prodotto/servizio.

Questionari nois3

Questo ci aiuta ad avere una visione più chiara del progetto e ci permette di passare agevolmente alla fase 2.

Fase 2 – Ricerca e ispirazione

Ok, abbiamo capito cosa cerca il cliente e cosa vogliono i suoi utenti, ora apriamo il nostro caro amico pinterest e creiamo una board segreta da condividere con il cliente, in modo da poterci scambiare inspirazioni varie sulla struttura e il design del suo prodotto. Questo come forse state intuendo ci aiuta a non andare “a caso” o “a nostro gusto” quando progettiamo, anzi, ci tiene la manina mentre percorriamo il tortuoso sentiero della progettazione.

Inspiration Board nois3

Fase 3 – Wireframe

Non è ancora il momento di pensare alla grafica, ma è il momento perfetto per fare un po’ di sketching, carta e penna sono nostre care amiche, almeno all’inizio, ma in genere trasformiamo i nostri disegnini su carta in wireframe fatti bene su Sketch, per una maggiore comprensione. Chiaramente anche questi sono costantemente condivisi con il cliente, in modo che ci possa sempre confermare e in caso far cambiare la struttura.

È il momento perfetto per fare un po’ di sketching

Wireframing nois3

Fase 3 e mezzo – Prototyping

Dopo la definizione della struttura spesso ci capita di creare dei veri e propri prototipi funzionanti in HTML+CSS (delle volte anche JS), con la stessa identica “grafica” dei wireframe, questo permetterà, al cliente di capire esattamente come funzionerà il proprio sito e a noi se quello che progettiamo funziona. In questa fase cominciamo infatti i veri e propri test di usabilità.

Chiaramente per questi prototipi non cominciamo a lavorare da zero, ma ci affidiamo ad un altro nostro caro amico, il framework Foundation (ormai alla versione 5).

Ci affidiamo al nostro caro amico Foundation

Prototyping nois3

NdR
Questi prototipi essendo creati in HTML/CSS e avendo la stessa struttura del sito ci saranno molto utili per cominciare l’implementazione.

Fase 4 – Interface Design

Ci siamo, è il momento che tutti aspettavamo, abbiamo una struttura completa, funzionante e (da non sottovalutare) approvata dal cliente.

Cominciamo a disegnare l’interfaccia sulla base di quanto pinnato nella fase 2 e cercando di comprendere al meglio il target individuato nella fase 1, la struttura neanche a dirlo, è già fatta. Quello che facciamo ora è creare un mood del prodotto, partendo da una pagina (in genere la home) in modo da definire più elementi possibili.

Interface nois3

Se lo scambio di informazioni con il cliente è stato sufficiente la proposta grafica sarà accettata senza bisogno di troppe modifiche, quindi scordatevi le 2 o 3 proposte grafiche (che poi si trasformeranno irrimediabilmente in una fusione della prima proposta con le font della seconda e i colori della terza, o come ci piace dire la proposta “Frankenstein”).

Dopo l’approvazione e le piccole modifiche sul mood della home page passiamo alla creazione di un insieme di “UI Elements” (esempio), sostanzialmente la creazione della maggior parte degli elementi che andremo ad usare sul sito, dalla scelta delle font family ai colori, a elementi come bottoni, form, liste e box di informazioni vari.

Addio Frankenstein, benvenuto mood

UI Kit nois3

La fase finale per l’interfaccia sarà la declinazione degli elementi creati in altre 2, massimo 3 pagine definite più importanti dal cliente.

NdR
Non accennato nella fase processuale, ma per tutto ciò che riguarda i software usati, non usiamo più il caro vecchio Adobe Photoshop se non per fotoritocchi. Il nostro migliore amico da più di un anno è diventato Sketch, un software che si dedica totalmente alla creazione di interfacce. Giuro solennemente che presto scriverò un articolo apposito su Sketch e su come ha cambiato il nostro modo di lavorare.

Fase 5 – Mockup HTML/CSS/JS

Ci siamo quasi, adesso abbiamo un bellissimo file .sketch e tante belle .png, ma la parte divertente non è ancora finita. Vi ricordate la fase 3? Bene. Quei prototipi saranno l’inizio dei nostri Mockup HTML/CSS, che sono fondamentalmente versioni statiche del sito. In genere quello che facciamo è produrre tutte le pagine principali in versione desktop per poi procedere direttamente su browser alla definizione e creazione delle versioni tablet/mobile.

Amiamo le transizioni e le animazioni, ma non quelle inutili

Mockup HTML CSS

Diciamolo, questa fase è anche quella dove sbizzarrirsi con le transizioni e le animazioni che finora ci eravamo solo immaginati. Il Material Design di Google insegna, ogni animazioni deve avere un significato e deve portare l’utente alla fase successiva, fare animazioni senza nessun senso può essere figo, ma non utile per l’utente, anzi.

Fase 5 e mezzo – Responsive Browsing

Approfondiamo meglio questa fase, perché come per altre piccole cose ci distingue da altre design agency.

Non produciamo mai, se non strettamente necessario grafiche per le versioni tablet e mobile di un sito, per quanto ci riguarda non ha molto senso. Molti creano delle versioni “desktop”, “tablet” a 768px o 680px e “mobile” magari a 320px di larghezza, questo però fa sì che quelle siano solo versioni ideali, in quanto sappiamo benissimo che un sito responsivo si deve vedere bene dalla sua dimensione massima (1180px per noi) alla sua dimensione minima (320px/280px). Per questo motivo preferiamo di gran lunga creare la grafica della sola versione desktop per poi declinarla tramite Foundation direttamente nel browser a tutte le dimensioni.

Non produciamo mai, diverse grafiche per le versioni tablet e mobile di un sito, non ha senso.

Responsive Browsing nois3

Fase 6 – Backend WordPress

Scrivo WordPress, intendo CMS (qui potete leggere un post di Carlo su questo argomento), anche se certo, WordPress è quello che utilizziamo più di tutti. In questa “piccola” fase definiamo la struttura del CMS, creando i tipi di contenuti e i vari campi per ogni tipo di contenuto, se all’inizio del processo abbiamo fatto un buon lavoro di Information Architecture questo lavoro è molto breve.

Backend WordPress nois3

Fase 7 – Implementazione WordPress

Ok, abbiamo quasi finito, non ci resta che prendere una coppa, infilarci dentro i mockup ed il backend, mettere in forno a 220° e dopo 1/2 giorni di lavoro abbiamo il nostro sito ben cotto e pronto da mostrare al pubblico. A parte gli scherzi, in questa fase ci occupiamo banalmente di implementare la logica del sito nei nostri mockup, anche questa è una fase abbastanza veloce se tutto il processo è andato bene.

Se il processo è andato bene, l’implementazione in WordPress è relativamente veloce.

Ok, la mega lista del nostro processo è finita, quindi, per riassumere il tutto possiamo dire che questo processo aiuta sia noi che il cliente nella realizzazione del progetto. Il cliente appare più soddisfatto perché ha seguito tutto il processo progettuale e creativo, sente più suo il prodotto e sa esattamente quali sono state tutte le fasi per compiere il lavoro, noi invece, siamo più contenti perché non abbiamo perso tempo nel fare e rifare proposte, ma soprattutto abbiamo un prodotto che piace a noi, al cliente e agli utenti.

Come ogni buon tema del liceo finisco con una citazione,
anzi no, finisco con un’immagine a caso, ciao.

Una foto a caso

L’immagine di copertina è fornita gentilmente da: New Old Stock

L’immagine delle domandine è fornita gentilmente da: Startup Stock Photos 

Scritto da:

Emanuele Macri

“Creo esperienze multimediali, che siano esse un sito web, un'applicazione mobile o una Web App. Comincio dallo studio della UX, per poi passare a sporcarmi le mani con i wireframe e andando avanti a creare l'interfaccia grafica. Infine mi occupo di impacchettare il tutto dentro mockup statici, in HTML5, CSS3 e JavaScript.”

Ti piace come lavoriamo? Contattaci!

Passa a trovarci anche su Facebook, LinkedIn, Twitter e Instagram .
Condividi questo post su:
Please, rotate the screen
or view the website on other screen.