Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Cronaca di un redesign

La case history del lavoro sul brand e sull'identità visuale della conferenza The Future of Web Apps
La case history del lavoro sul brand e sull'identità visuale della conferenza The Future of Web Apps
Link copiato negli appunti

Questa è la traduzione dell'articolo Designing the "Future Of" Sites di Ryan Nichols pubblicato originariamente su Digital Web Magazine il 13 agosto 2007. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Sono un appassionato di branding. Nella società con cui lavoravo, Apples to Oranges, avevamo la fortuna di lavorare su molti progetti legati al branding e alla costruzione dell'identità visuale, sia creando nuovi brand, sia modificando e rivitalizzando brand esistenti. Come designer il nostro lavoro non cade mai nel vuoto. Ogni pezzo è parte dell'identità visuale del brand. Il nostro compito non è solo quello di fare siti che siano belli e accattivanti, ma anche quello di rafforzare e comunicare il messaggio del brand.

Quando Ryan Carson di Carson Systems ci ha contattati per un progetto di rebranding delle loro serie di conferenze, ho subito colto al volo l'occasione di cimentarmi con questa operazione. Il progetto consisteva nella creazione di un'identità visuale e di un sito web per tre conferenze. La prima conferenza, The Future of Web Apps, aveva già avuto un primo appuntamento a Londra, il prossimo si sarebbe dovuto tenere a San Francisco. Le altre due conferenze erano state chiamate The Future of Web Design e The Future of Online Advertising: entrambe erano state fissate per il 2007. Il mio ruolo nel progetto è stato quello di Creative Director. Ho lavorato con il nostro Lead Designer, Ian Maine e con l'illustratore Jason Ruddy.

Sviluppare la strategia

Il nostro primo passo in ogni progetto consiste nel formulare una strategia per il design. È molto importante perché ci aiuta a far sì che il design comunichi il giusto messaggio sul brand. Ci aiuta anche perché dà a noi e al cliente qualcosa rispetto a cui testate le nostre idee. La strategia viene elaborata a partire da un questionario sul brand, da un'intervista e da una ricerca svolta sui competitori.

Il questionario sul brand per questo progetto consisteva in una lista di domande spedita a Ryan Carson; poi è stata svolta un'intervista telefonica per discutere le risposte date da Ryan nel questionario.

Lo scopo del questionario era quello di capire il messaggio chiave del brand, il suo tono, che valore aveva da offrire ai clienti, come e in che cosa le loro conferenze differivano da quelle dei concorrenti.

Sulla base delle risposte ottenute, sono stati ricavati due punti di comunicazione fondamentali per le loro conferenze. Primo: volevano chiaramente comunicare l'idea che si trattava di conferenze più piccole e intime. Secondo: le conferenze riguardavano argomenti di strettissima attualità.

Inoltre, abbiamo esaminato alcuni aggettivi che descrivessero al meglio il tono del brand. Abbiamo discusso una varietà di toni contrastanti: femminino e mascolino, formale e informale, energico e rilassante. Abbiamo deciso che il tono dovesse essere un mix di fresco, progressivo e amichevole, ma mantenendo una certa professionalità.

Questo set di aggettivi è stato usato come se se si trattasse degli ingredienti in una specie di torta metaforica. Un po' di questo, un po' di quello, applicando il giusto mix man mano che il processo di design andava avanti. Può sembrare una cosa irragionevole, ma queste sono le sfide che mi piacciono: mettere insieme tutti gli elementi potenzialmente contrastanti di un'opera di design per ottenere solo il giusto bilanciamento nel tono.

Figura 1 - Questionario
questionario

Una volta completata la fase di domande e interviste con Ryan, il prossimo passo è consistito nel fare un po' di ricerche per i concorrenti della Carson Systems. Il nostro obiettivo era quello di capire quale messaggio i competitor comunicavano attraverso i loro elementi visuali e quali colori usavano per identificare il loro brand. Ciò ci ha aiutato a decidere in che cosa avremmo dovuto distinguere le conferenze "Future of" e come creare un'identità che fosse unica e rimanesse impressa nella memoria.

Figura 2 - Siti dei concorrenti
concorrenti

Il risultato della ricerca ha mostrato che molti siti di conferenze, specialmente quelli più grandi e importanti, avevano un aspetto molto corporate, aziendale. La mia prima impressione è stata che mentre gli argomenti erano tutti legati al Web 2.0 e Ajax, il tono che emergeva era molto conservativo. Divenne subito chiaro che per differenziare le conferenze "Future of" dovevamo mostrarci al mondo come qualcosa all'avanguardia, cosa che si adatta perfettamente con il tono progressivo che avevamo identificato nel questionario sul brand.

Per prima cosa, dunque, abbiamo prodotto come un documento sulla strategia di branding. Non fatevi ingannare dal nome: non abbiamo fatto altro che comunicare i risultati delle nostre riunioni, cosa avevamo scoperto nelle ricerche sui concorrenti, le nostre raccomandazioni. Fornire questo documento è importante per stabilire una relazione di fiducia con il cliente durante tutto il processo e per rimuovere tutto ciò che può essere casuale nelle decisioni di design.

Identità e colore

Con una solida direzione in mente, ho lavorato con Jason Ruddy per iniziare a concepire l'idea del logo e della palette di colori per le tre conferenze. Jason ha iniziato con il creare un po' di pagine con schizzi a mano delle varie idee. è una cosa che ci consente di poter lavorare con una gran varietà di idee con il minimo investimento. Abbiamo alla fine passato tutto allo scanner e inviato tutto a Ryan insieme alle nostre riflessioni su quelli che erano i migliori candidati.

Molti dei loghi usavano un acronimo e sono stati inizialmente rigettati da Ryan. La sua preoccupazione era che il nome delle conferenze fosse la frase intera: "The future of XXX": Potevo capire che l'idea potesse risultare strana in un primo momento, ma non mi sono arreso, sono andato un po' più a fondo. In base alle mie precedenti esperienze con l'assegnazione di nomi e con il branding sapevo che la gente tende ad abbreviare il nome comunque perché è più veloce e più facile da pronunciare. Un po' di ricerche confermarono che quasi tutti i riferimenti alle precedenti edizioni di Future of Web Apps sui blog, nella stampa e nei resoconti dei partecipanti erano sotto il nome di FOWA. Lo abbiamo fatto notare a Ryan presentandogliela come un'opportunità per creare un brand più solido e facile da ricordare. Grazie a Ryan per essersi assunto il rischio.

Abbiamo poi deciso di usare il simbolo della freccia nella parte superiore sinistra degli schizzi (si veda l'immagine qui sotto). Questa combinazione ci ha dato una forma facilmente riconoscibile che era anche flessibile e poteva essere usata su diversi media. Il font lo abbiamo fatto noi appositamente. Porta con sé un effetto stiloso e moderno che corrisponde perfettamente a quelle che erano le nostre intenzioni. Dopo un po' di rifiniture, avevamo un marchio ben bilanciato che funzionava bene quando era combinato con il nome completo della conferenza. La presentazione ha aiutato Ryan a mitigare la sua preoccupazione, dal momento che molti usi del logo prevedevano anche l'uso del nome intero della conferenza.

Figura 3 - Schizzi del logo
loghi

Mentre davamo gli ultimi ritocchi alla versione digitale del logo, Jason e io abbiamo iniziato ad esplorare le palette dei colori per ciascuna conferenza. Crediamo che il colore sia un mezzo do comunicazione molto importante. Contribuisce molto al tono e al messaggio che il brand deve veicolare.

Dalle informazioni che avevamo raccolto nella fase di definizione strategica, sapevo che volevamo creare una palette che avesse energia ed evidenza per distinguersi dai concorrenti. Il primo passo è stato di mettere insieme una mood board per dare un'occhiata ad alcune palette che avevano queste caratteristiche. Alcuni esempi, come il 2, il 6 o il 12 erano troppo forti. Altri, come il classico look del 10, o il 3, erano troppo tranquilli.

Figura 4 - Collezione di palette di colori
palette

Alla fine abbiamo deciso di usare un solo colore forte per ciascuna conferenza abbinato con un marrone cioccolato più conservativo e tranquillo. Ciò avrebbe dato ad ogni brand un look fresco, il marrone avrebbe bilanciato il tutto e fatto in modo che l'insieme non apparisse troppo selvaggio o forte. Ciò ci ha anche consentito di usare il marrone come un tratto unificante tra le diverse conferenze, legandole di fatto l'una all'altra.

Figura 5 - Loghi
loghi

Estendere l'identità del sito web

Con una solida strategia alle spalle, le palette dei colori definite e lo stile generale impostato nella complessiva identità visuale, fare il sito è stato semplice. OK, magari non proprio semplicissimo, ma questo approccio generale ha certamente semplificato le cose nel corso del processo. Il cliente era ben cosciente di quello che sarebbe stato l'effetto generale del sito ben prima che fosse completato. Dunque, niente sorprese.

Lavorando con il nostro Lead Designer, Ian Maine, la prima pagina che abbiamo creato è stata la home page di WOFA. Il nostro approccio è consistito nel vedere ogni elemento come parte di una gerarchia che guida il visitatore verso la meta che si è prefisso di raggiungere. Ogni elemento guida il lettore lungo un percorso: si parte senza saper nulla sulla conferenza e man mano si accresce l'interesse, fino a portarlo alla decisione di partecipare. La prima domanda a cui abbiamo dovuto rispondere in questo percorso è stata: "Cosa otterrò dalla partecipazione a questa conferenza?"

Abbiamo quindi dovuto spiegare chiaramente i benefici principali offerti dalla conferenza e perché era interessante per chi visitava la pagina.

Per ottenere questo obiettivo abbiamo creato una sezione iniziale molto evidente nella parte superiore della pagina con la foto di uno speaker e uno slogan. Nella versione iniziale abbiamo provato una foto dell'auditorium principale, mostrando un sacco di gente seduta in un bell'edificio, ma non catturava sufficientemente l'attenzione. Invece, convogliare l'attenzione su una singola persona non solo si è rivelato più coinvolgente, ma ha fatto sì che passasse meglio il messaggio che FOWA è una conferenza più piccola e intima. Il titolo dice "Tre giorni di ispirazione e approfondimento". La foto dinamica di uno speaker in azione combinata cone le parole chiave 'ispirazione' e 'approfondimento' ha formato un'eccellente accoppiata.

La domanda successiva a cui la pagina doveva rispondere era: "Posso partecipare a questo evento?". Abbiamo deciso di piazzare la data e la location in una posizione molto evidente, su tutto il sito. Abbiamo anche un'area per i dettagli finali, come il prezzo e le opzioni per i biglietti, che attraversa l'area con il messaggio principale. L'idea era quella di guidare l'occhio attraverso l'area del messaggio principale, quindi sul pannello dei dettagli e infine sul pulsante di registrazione.

Figura 6 - Percorso dell'occhio sulla home page
loghi

L'area sotto al messaggio principale è stata usata per evidenziare gli speaker della conferenza. Abbiamo optato per delle grandi foto con il nome di ciascun speaker. Il nostro progetto prevedeva inizialmente che la foto sembrasse una Polaroid, con in basso una riproduzione in corsivo del nome degli speaker, come se fosse la firma. Era un approccio volto ad evidenziare il tono amichevole e intimo del sito. Potete vedere lo schema qui sotto. Alla fine il cliente ha deciso di rimuovere queste foto dal sito, prima di tutto perché le immagini così concepite richiedevano troppo tempo per eventuali modifiche dell'ultimo momento.

Figura 7 - Foto degli speaker nel progetto iniziale
loghi

Evoluzione del progetto

Man mano che il progetto andava avanti molte sono state le evoluzioni. Dopo aver speso tanto tempo con il design del sito di FOWA, ho iniziato a pensare che i colori fossero un po' troppo desaturati. Dopo un po' di esperimenti abbiamo deciso di usare un marrone più ricco, che contrastasse di più con il colore della conferenza primaria. Potete vedere sotto le differenze. La seconda tonalità di marrone dà l'effetto di una maggiore energia. Un piccolo cambiamento che ha consentito di avvicinarsi di più a quanto fissato nella strategia di design.

Figura 8 - Modifica dei colori
loghi

Abbiamo anche rivisto il contenuto della home page. Buona parte di queste modifiche sono state suggerite da Ryan e dal suo team quando hanno iniziato a valutare se il contenuto e la sua presentazione fossero o meno adeguati agli obiettivi da raggiungere. Ci hanno mandato dei nuovi testi per l'area dei messaggi principale, ma a noi è parso che fosse troppo per essere dato in pasto ai lettori proprio lì, all'inizio della pagina. Come compromesso abbiamo trasformato i punti principali in titoli di una sola parola e usato una breve frase sotto il titolo per espandere il concetto. Il risultato finale è stato molto effiacce per far concentrare l'attenzione sui punti fondamentali e sui benefici della conferenza.

Missione compiuta

Compessivamente sono stato molto soddisfatto di quanto ottenuto lavorando per Carson. Sono stato felice della direzione che abbiamo impresso all'identità visuale e al brand su cui abbiamo operato. Ora è qualcosa di unico, fresco, specialmente se paragonato ai concorrenti. Questa differenziazione li aiuterà sicuramente a costruire una solida presenza nella mente dei loro clienti.

Ti consigliamo anche