30 giorni di design: un case study di branding

Pubblicato: 2022-03-11

Ci sono diversi aspetti importanti di cui essere consapevoli quando si lavora con i clienti: soddisfare le aspettative e le scadenze sono due di questi. Ad un certo punto della carriera di ogni designer, arriverà un cliente che ha una pressante urgenza con il proprio progetto. Questi sono i progetti che insegnano l'arte di rispettare le scadenze e quanto può diventare folle.

Ci sono in genere due tipi di progetti che ogni designer incontrerà durante la sua carriera: “Ho bisogno di un design incentrato sull'utente che corrisponda al mio progetto, senza scadenze rigide; Voglio solo la soluzione migliore”… Questo è il sogno di ogni designer. Ma ammettiamolo; in realtà le cose sono sempre più impegnative.

"Voglio una soluzione fuori dagli schemi, innovativa e creativa: una buona UX, un'interfaccia utente davvero bella... e ne ho bisogno ieri."

Quindi cosa succede quando ti rendi conto che ci sono 30 giorni per creare un logo e progettare gli elementi principali del marchio, un sito Web, interfacce utente mobili e pubblicità/grafica sui social media?

Dopo aver avuto un piccolo attacco di panico, ti rendi conto che lavorare in modo intelligente è l'unica strada da percorrere.

Fare un piano e pensare in anticipo alle cose aiuterà con produttività, precisione e qualità del design. Come per qualsiasi impresa di successo, il duro lavoro e le lunghe ore di lavoro sono alcune delle condizioni obbligatorie per realizzarlo.

Non importa cosa, ci sono sempre queste domande strazianti:

  • Vale la pena farlo con tali vincoli di tempo?
  • I vincoli di tempo porteranno a una scarsa qualità del design?
  • Farei un lavoro migliore se avessi più tempo?

Assolutamente si!

Come in ogni progetto, ci sono sempre vantaggi, svantaggi e vincoli che, come designer, dobbiamo trovare un modo per aggirare e persino sfruttare a nostro vantaggio per trovare soluzioni creative.

Avere un'idea chiara dei compiti che devono essere adempiuti per un completamento con successo del progetto è fondamentale, oltre a far sapere diplomaticamente al cliente che la breve tempistica potrebbe potenzialmente avere un impatto negativo sulla qualità complessiva del design. Tuttavia, la pressione di una scadenza schiacciante non è una scusa per non fare del tuo meglio per il tuo mestiere: usala per spingerti a fornire il miglior lavoro possibile. Uno studio condotto dalla Harvard Business School sul lavoro creativo svolto sotto la pressione del tempo ha concluso questo:

Questo studio suggerisce che i manager adottino misure per proteggere il tempo che i dipendenti possono dedicare all'elaborazione cognitiva creativa, in particolare quei dipendenti il ​​cui lavoro richiede un alto grado di creatività. […] È del tutto probabile che le idee creative non vengano spesso prodotte in completa assenza di qualsiasi pressione temporale di sorta, autoimposta o imposta dall'esterno.

Questi risultati indicano che un grande grado di pressione può agire contro il lavoro creativo, ma allo stesso tempo, lo studio suggerisce anche che un livello ragionevole di pressione sul lavoro creativo può essere utile per aiutare a produrre progetti migliori.

È sempre una sfida portare a termine tutto quando lavori come freelance con più progetti attivi, ma è una grande opportunità per essere diligenti con il tuo programma e fare in modo che il tuo tempo limitato lavori per te! Fare il lavoro a distanza per te è semplice, ma non facile. Combina questo con un piano solido e avrai una ricetta per il successo.

Giorni 1-2: per prima cosa: pianifica!

Il primo passo è suddividere il progetto in parti più piccole e calcolare quanto tempo ci vorrà per completare ogni fase del progetto. La definizione degli obiettivi aumenta la motivazione e il successo. La scienza del raggiungimento degli obiettivi consiglia di scomporre il tuo grande obiettivo in passaggi d'azione chiari e definiti: farlo ti darà un grande vantaggio nei tuoi sforzi per raggiungerlo.

Per quanto riguarda il design del marchio, una buona pratica è creare diverse versioni del design in modo che il cliente abbia diverse opzioni tra cui scegliere. La mia preferenza personale è quella di creare tre iterazioni di design del logo ed elementi principali del marchio come tipografia, tavolozze di colori, immagini e set di icone. Fare questo prima ti permetterà di portare il concetto e le idee visive al passaggio successivo.

Crea processi di lavoro e seguili.

La creazione di processi di lavoro faciliterà il flusso di lavoro e la responsabilità che derivano da ogni progetto. Quello che segue è il mio approccio abituale per un tipico progetto di design, che si tratti di branding o design dell'interfaccia utente:

Ricerca

Scopri tutto sull'attività del tuo cliente:

  • Qual è il cuore della loro attività e qual è la loro attività principale?
  • Chi è il loro target di riferimento e quali sono le loro esigenze?
  • Quali sono i loro obiettivi e quale problema deve essere risolto utilizzando il design?
  • Chi è la concorrenza e come puoi essere migliore?

Un questionario o un brief di progettazione è uno dei modi più convenienti ed efficienti per raccogliere le informazioni di cui sopra.

Crea una Moodboard

Una delle cose per cui puoi usare una moodboard è creare il concept, una parte essenziale di qualsiasi progetto. Ottieni il quadro più ampio: prendi tutte le tue ricerche e mettile su una grande tela in modo da poter vedere tutti gli elementi che dovrebbero essere incorporati nei progetti. Esistono diversi strumenti gratuiti che ti aiutano a creare facilmente moodboard.

Se non ti piacciono gli strumenti online, l'utilizzo di Adobe Illustrator funziona bene in quanto puoi creare, aggiungere e spostare liberamente elementi. Pensalo come un collage: non preoccuparti troppo del posizionamento dei dettagli; sei libero di organizzare tutto a tuo piacimento. L'obiettivo principale è vedere come i colori, le foto, le icone, la tipografia, ecc. interagiscono tra loro, visivamente e nella narrazione.

Rappresentazione visiva di un mood board
Le moodboard sono semplicissime da realizzare e ti aiuteranno a mostrare la tua idea.

Giorno 3: creare un concetto di design

La creazione di un concept è il passo successivo dopo aver completato la tua moodboard ed è la base di tutto il tuo lavoro futuro. Viene prodotto un concetto come modello sperimentale per testare la fattibilità delle caratteristiche di progettazione.

La moodboard sarà utile per impostare una prima direzione visiva che dovrebbe corrispondere al pubblico a cui ti rivolgi e agli obiettivi dell'attività. Il concetto sarà la base della tua direzione UX ed è, quindi, una parte dei 10 Deliverable UX utilizzati dai migliori designer.

È importante capire quanto sia importante questo passaggio perché un concetto solido aiuta a raccontare una storia avvincente, anche durante le prime fasi del progetto. L'obiettivo principale dovrebbe prendere in considerazione i sentimenti e le esperienze che gli utenti incontrano quando hanno a che fare con gli elementi visivi piuttosto che ciò che sono gli elementi visivi stessi.

Uno dei più influenti consulenti di marketing e oratori motivazionali del settore, Simon Sinek, ha tenuto un brillante discorso TED su questo argomento.

La moodboard può aiutarti a creare alcuni brevi slogan o magari a impostare gli stili di icone e foto in un concetto. Dal momento che è bene avere una tipografia che può essere letta rapidamente indipendentemente dal supporto, è anche importante considerare la tipografia adatta al Web e alla stampa. Questo è un elemento chiave del grande design ed è anche uno dei principi considerati dalle pratiche di progettazione universali.

Giorno 4: Progettazione di elementi visivi del marchio

Il processo di costruzione del marchio può diventare noioso e dispendioso in termini di tempo se vieni sorpreso a seguire l'approccio sbagliato fin dall'inizio. È meglio iniziare a creare iterazioni del logo dopo aver approvato un concetto e aver completato i file di guida visiva. Questo ti darà la certezza che ti stai muovendo nella giusta direzione e ti consentirà di affrontare le sfide del branding in modo intelligente ed efficiente in termini di tempo.

È essenziale fare piccoli schizzi con carta e penna delle tue idee di design. Ci vorrà meno tempo se prima disegni, quindi procedi con Illustrator, Sketch, ecc. per lavorare sul tuo logo. Questo passaggio mi ha aiutato a progettare tre diverse proposte di logo che sono tutte nella direzione visiva scelta per il marchio. Ci sono voluti alcuni giorni per finire:

Case study sul branding: esempi di logotipi

Potrebbero esserci alcune modifiche e modifiche aggiuntive al design del logo, ma una volta che il cliente ha deciso il logo e approvato altri elementi come colori, tipografia, icone e stile fotografico, hai finito con gli elementi di branding di base.

Giorni 7-15: Progettazione del sito web

Lo sviluppo del marchio include più del semplice logo: copre quasi tutti gli aspetti del design, incluso il sito web. Iniziare prima con il sito Web può essere utile, poiché puoi aggiungere al concetto visivo applicando regole visive e vedendo come funzionano insieme. Ciò è particolarmente vero quando si crea un sito Web che in definitiva ha un obiettivo ed elementi simili all'applicazione mobile.

Mappa del sito

Una mappa del sito è un elenco di pagine di un sito Web accessibile a crawler o utenti. Può essere un documento utilizzato come strumento di pianificazione per il web design o una pagina che mostra le pagine di un sito Web in modo gerarchico.

È di grande aiuto se un cliente ha già una mappa del sito perché ti dà una visione chiara di tutte le pagine che appartengono a un sito web. Se ti viene assegnato un progetto in cui è necessaria una mappa del sito, dovrai collaborare con il cliente per metterne insieme uno.

Questo potrebbe significare porre alcune domande al tuo cliente:

  • Qual è il numero di pagine del sito?
  • Quali sono le pagine più importanti?
  • Ci sono sottopagine?

Questo disegnerà un quadro chiaro della struttura del sito Web e ti darà una buona idea dell'ambito del progetto.

Copia prima

Trovo utile chiedere al cliente in anticipo di fornirmi tutta la copia e i contenuti che desidera includere nel sito. È consigliabile fare in modo che il design funzioni attorno alla copia anziché creare prima l'interfaccia utente e provare a adattare la copia in seguito.

L'approccio della prima copia consente a te e agli sviluppatori di risparmiare un sacco di tempo. Se fai il contrario, potresti riscontrare problemi. Sebbene utile a volte, l'utilizzo di testo fittizio può avere un impatto negativo su un progetto reale, specialmente quando il design si basa fortemente sulla tipografia ed è progettato attorno al contenuto. Un design incentrato sulla copia non ha svantaggi e aiuta solo a realizzare lavori creativi di qualità eccezionale.

Progettazione della home page

Seguendo tutti i passaggi precedenti, hai già linee guida visive generali, una mappa del sito e una copia. Ora puoi passare alla progettazione delle pagine per il sito web.

La home page è la prima cosa che gli utenti vedono quando visitano un sito Web e, pertanto, è la pagina più importante. L'applicazione del principio di Pareto dimostra che la homepage detiene l'80% della direzione del design (contesto, tipografia, colori, elementi ripetibili, ecc.) e il resto delle pagine il 20%.

È una buona idea iniziare il processo raggruppando e selezionando le sezioni per la home page. Il contenuto completo e il testo di solito mi aiutano a organizzare l'intera pagina e vedere quali aspetti mancano, nonché le sezioni che potrebbero essere aggiunte per massimizzare l'impatto e spingere gli utenti ad acquistare/utilizzare il prodotto o servizio.

Rappresentazione visiva di un sito web
Sii audace nei tuoi suggerimenti al cliente. Spiega che le scadenze implicano alcune limitazioni.

Per enfatizzare il servizio o il prodotto, prova a utilizzare sezioni di invito all'azione in evidenza. Sono un ottimo modo per fare pubblicità e catturare l'attenzione degli utenti per acquistare un prodotto, iscriversi a una newsletter, iscriversi, ecc.

Se la tecnologia, il pubblico di destinazione e il tipo di attività del cliente lo consentono, l'aggiunta di un design animato come GIF o animazione può fornire un sottocontesto dell'intero sito oltre a enfatizzare la sezione dell'invito all'azione. Tuttavia, i designer dovrebbero fare attenzione a non andare troppo oltre e creare qualcosa che richiederà molto tempo per essere sviluppato.

Giorni 15-25: applica Universal Design

Il design universale, come descritto dai suoi sviluppatori, "può essere applicato per valutare i progetti esistenti, guidare il processo di progettazione ed educare designer e consumatori sulle caratteristiche di prodotti e ambienti più utilizzabili".

Il concetto di design universale è una delle soluzioni più ottimali da utilizzare quando si ha a che fare con un progetto di ampio respiro: un concetto unificato e una direzione visiva mirata per il branding, il sito Web e le applicazioni mobili sono di grande vantaggio quando si progetta con vincoli di tempo.

La necessità di elementi ripetitivi può essere di per sé una sfida. Ciò accade quando si incontrano requisiti tecnici. Il sito web responsive e le piattaforme mobili hanno una filosofia e un insieme di regole completamente diversi e, quindi, possono diventare un problema se non affrontati in modo appropriato. Tuttavia, la creazione di elementi che possono essere utilizzati su più piattaforme è una delle colonne portanti del successo di qualsiasi progetto: in questa particolare circostanza, non sarebbe stato possibile coprire così tante piattaforme/dispositivi senza un design unificato che stabilisca chiaramente la direzione per il marchio sviluppo.

Rappresentazione visiva di un'interfaccia di un'applicazione iOS

Lo svantaggio di una scadenza ravvicinata e della progettazione per più piattaforme è che potresti non utilizzare tutto il potenziale di ciascuna delle piattaforme per cui stai progettando. In questi casi, a causa del vincolo di tempo, una semplice soluzione "a prova di proiettile" che sia familiare alla base di utenti potrebbe essere un'idea preziosa.

Ad esempio: riapplica un'idea su più pagine e rimodellala per ogni dispositivo. I modelli sono sostanzialmente simili, il che è a tuo favore. Potrebbe essere nel modo in cui visualizzi informazioni essenziali o inviti gli utenti ad acquistare un prodotto. In questo caso, anche una barra di ricerca potrebbe essere simile se non uguale.

Diagramma di flusso

La progettazione del sito Web è terminata e hai una visione più chiara dell'UX per le app.

Uno dei modi in cui puoi rendere il processo di creazione della UX più semplice e chiaro è creare un diagramma di flusso dell'utente.

Rappresentazione visiva di un diagramma di flusso dettagliato
Il diagramma di flusso spiega le connessioni tra le pagine e mostra come gli utenti interagiranno con l'applicazione.

Esistono diversi metodi e strumenti che puoi utilizzare per creare diagrammi di flusso: la pratica usuale è creare diagrammi grafici con titoli brevi e, se necessario, testo esplicativo. Usare Sketch o Illustrator per questo è la mia preferenza, ma qualsiasi strumento che ti permetta di creare e spostare elementi va bene per questo compito.

Will Little ha dato una grande interpretazione di questo:

È qui che gli ingegneri e i creativi devono lavorare a stretto contatto per decidere quale tipo di strumenti software può supportare al meglio le interfacce previste e il comportamento di clic/scorrimento, fino all'ultima scheda, descrizione comando, lightbox, icona, ecc... .

Rendilo alto rendendolo basso

Scoprire lo scopo principale dell'app aiuterà a definire l'UX. Ciò potrebbe essere aiutare un utente ad acquistare un prodotto, o magari aiutarlo a utilizzare un prodotto: l'esperienza dell'utente deve adattarsi a questo. Wireframe a bassa fedeltà creati su carta e poi portati a una fedeltà più alta in Sketch o Photoshop possono facilitare notevolmente il processo.

Wireframe ad alta fedeltà per un'applicazione Android
Ogni progetto è diverso e, a volte, sarà necessario creare wireframe ad alta fedeltà.

In questo caso sono stati sufficienti wireframe a bassa fedeltà poiché l'app è semplice e bastava solo per seguire i dettagli visivi dal sito web.

Se puoi, organizza un piccolo test per la tua UX. Avrai bisogno di un gruppo di test di utenti futuri per vedere se i wireframe e il flusso UX hanno senso. Dopo il test, sarai armato di preziose informazioni e potrai procedere al passaggio successivo (creazione di un'interfaccia utente).

Design unificato

Dopo aver apportato alcune modifiche all'UX, hai tutto il necessario per creare un'interfaccia utente logica e ben definita, che ti consente di adattarla ai requisiti visivi delle piattaforme iOS e Android. Poiché iOS ha alcune linee guida di progettazione molto specifiche che potrebbero impedirti di accedere all'App Store di Apple, devi conoscere queste regole e controllare attentamente come viene implementato il tuo design durante la fase di sviluppo.

Interfacce utente per un'applicazione Android

Puoi creare un design unificato per entrambe le piattaforme iOS e Android pur utilizzando i loro maggiori punti di forza seguendo le linee guida e le regole durante la progettazione dell'interfaccia utente.

Giorni 25-30: crea annunci sincronizzati con il branding

A questo punto, dovresti aver progettato un logotipo, elementi di branding, un sito Web e applicazioni mobili. Anche se hai progettato tutto in meno di 25 giorni, è troppo presto per festeggiare poiché c'è ancora un passaggio da considerare: la creazione di annunci per i social network e la stampa. È qui che il concetto che hai creato all'inizio sarà di grande aiuto.

Seguendo questi suggerimenti durante la progettazione di annunci pubblicitari e materiali per i social media, migliorerai notevolmente la qualità, i livelli di coinvolgimento e la creatività generale delle tue immagini:

  • Usa colori vividi e luminosi che risaltano.
  • Mostrare persone felici e attive aiuta con la dinamica e i sentimenti sulla tua grafica.
  • Il movimento, l'attività e l'eccitazione delle persone attirano sempre l'attenzione e aiutano con i sentimenti trasmessi in generale.

Tutte queste regole ti aiuteranno a creare una grafica eccezionale per le pubblicità. Se appropriato, utilizza la tavolozza dei colori, la tipografia e altri elementi visivi che hai utilizzato nel sito Web, nel marchio e nelle applicazioni. Questo ti aiuterà a essere coerente nei tuoi progetti e funzionerà a tuo favore quando lavori con vincoli di tempo.

Rappresentazione visiva di annunci e grafica sui social media
I tuoi risultati dovrebbero corrispondere alla direzione visiva generale del progetto.

Non impegnarti mai a una scadenza che non puoi rispettare

A volte, chiunque può sottovalutare la quantità di impegno e di lavoro che un progetto può richiedere: ecco perché pianificare ogni passaggio è fondamentale all'inizio di un progetto. Obiettivi e obiettivi realistici divisi in piccole parti sono fondamentali per fornire un lavoro solido in tempo.

Benjamin Franklin ha detto meglio: "Se non ti prepari, ti stai preparando a fallire".

In ogni momento, non mancate mai di prepararvi, e non mancate mai di anticipare la possibilità di aver sottovalutato il lavoro in termini di tempo necessario per consegnarlo. Sebbene i clienti possano avere delle scadenze, dovresti avere le competenze che ti aiuteranno a determinare se un progetto è fattibile o se vale la pena considerare in primo luogo. Tuttavia, non lasciare che questa sia una scusa per non accettare una sfida personale che, in definitiva, potrebbe aiutarti a diventare un designer e un manager più abili del tuo tempo.

• • •

Ulteriori letture sul blog di Toptal Design:

  • Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni
  • Stati vuoti: l'aspetto più trascurato dell'esperienza utente
  • La semplicità è la chiave: esplorare il design Web minimale
  • Principi euristici per interfacce mobili
  • Progettare per la leggibilità - Una guida alla tipografia Web