Brand Strategy & Identity

Processo Creativo: Logo Design

Kromin – rebranding

Crowdata – Brand Strategy

MGFStyle | Marcell Figueiredo Fashion Blog

Smart Watering System

Samadhi

Crowdfuture

Possiamo esserti d’aiuto?

di lettura
Introduzione
Brand Strategy & Identity

L’esperienza delle persone con le marche comincia spesso dall’identità visiva.
Per questo in NOIS3 applichiamo il nostro processo centrato sull’ascolto delle persone per comprendere come evidenziare al meglio i valori di un’azienda.

Un brand è l’insieme di aspettative, ricordi, storie e relazioni che, nel loro insieme, rappresentano la decisione di un consumatore di scegliere un prodotto o un servizio rispetto ad un altro.

Questo sostiene qualcuno di influente nel settore. Una serie di elementi che poco hanno a che fare con il solo aspetto visivo, approfondiremo il concetto più avanti. Non solo: spesso è il punto di arrivo di un lavoro più ampio fatto di vision e mission, strategia, tono di voce di comunicazione, valori fondanti e proposizione di valore delle aziende o organizzazioni stesse.

In questa raccolta di casi di studio passati, vi mostriamo i nostri lavori più rappresentativi sia come singolo lavoro di Design dell’identità visiva, sia contestualizzati nell’ambito di un progetto più ampio.

 

 

Capitolo 1
Brand Strategy & Identity

Processo Creativo: Logo Design

Bene.
Sarà passata un’ora da quando ho iniziato a fissare insistentemente la pagina bianca di fronte a me, aspettando che arrivasse l’improvvisa ispirazione per cominciare in maniera brillante quest’articolo.
Non è arrivata.

Lo dico sempre io, ripeto in continuazione che non sono bravo con le parole «per questo lavoro con le immagini».

Vabè.
Ultimamente abbiamo avuto un bel po’ di visibilità grazie ad un progetto che mi è particolarmente caro, Samādhi, un lavoro di cui mi sono occupato poco più di un anno fa, il primissimo lavoro affidatomi appena entrato a far parte del team di nois3.

È il primo progetto in cui abbiamo applicato un metodo rigoroso al processo di partenogenesei di un logo, che è tra l’altro lo stesso che utilizziamo come approccio alla progettazione in generale.

!

Qui una precisazione, che potrà sembrare superflua ma che trovo importante per evitare di essere equivocato dai “non addetti ai lavori”: il logo è solo una componente della strategia di comunicazione di una qualsivoglia organizzazione commerciale.
Il concetto di Brand si riferisce all’ideale complessivo percepito dal consumatore, in maniera emozionale, nei confronti di una compagnia e dei suoi prodotti e servizi nella loro totalità. Spesso si dice che è ciò di cui le persone discorrono tra loro al riguardo.

Seth Godin scrive:

“Un brand è l’insieme di aspettative, ricordi, storie e relazioni che, nel loro insieme, rappresentano la decisione di un consumatore di scegliere un prodotto o un servizio rispetto ad un altro.”

Sembra chiaro che non basti un logo accattivante per portare una persona a fare questa scelta, giusto?

Cos’è un logo, allora, e a cosa serve?

Il logo (o marchio) è quella componente dell’identità visiva che comunica – o meglio – simboleggia le qualità riconoscibili e immediatamente memorizzabili della compagnia.
È ciò che identifica, nella maniera più rapida e semplice, il brand.

Se si pensa ad un brand come una persona fisica, il logo è il suo volto.

Bene.
Dopo tutte queste chiacchiere, infine, possiamo dire: ciò che rende un simbolo così speciale ed iconico è principalmente la sua distintività.

Questo è il tratto più importante di un buon logo, oltre a caratteristiche più formali come la semplicità della forma, la leggibilità anche in piccole dimensioni e la capacità di risultare comunque accattivante in bianco e nero.

All’inizio del processo di progettazione, quindi, diviene necessario comprendere bene le necessità e gli obbiettivi del cliente.
Eviterò di parlare qui di questa prima fase perché comporta la partecipazione di più elementi (a volte tutti) del nostro team, e che sarà trattata in un post a parte; mi soffermerò invece sulla parte più strettamente “visiva”.

 

1.

Ricerca interattiva con il Cliente.

Spesso i clienti, occupandosi ovviamente di campi diversi dal nostro, si ritrovano ad avere un bagaglio culturale riguardante la comunicazione e le arti visive in generale insufficiente. Viceversa, gli ambiti di business del nostro cliente spesso ci sono totalmente estranei.

Urge quindi trovare un canale di comunicazione, creare un immaginario visivo comune.
Ci è particolarmente utile a questo scopo creare una board segreta su Pinterest dove poter “pinnare”, sia noi che il cliente, referenze, idee e concetti.
Cerchiamo di spingerlo, maieuticamente, a tirare fuori il vero problema di comunicazione che necessita di essere risolto, facendogli poi prendere confidenza con il nostro mondo e i suoi elementi, e per lo meno osservare il modo in cui si comunicano altre compagnie, che siano competitors o meno.
Può sembrare uno sforzo notevole, ma pensate solamente a quanto sia utile per chi progetta non solo comprendere da subito i gusti del cliente, ma anche aiutarlo a disfarsi di preconcetti e prese di posizione mostrandogli cose nuove, che lo colpiscano, rendendo tutto il processo più leggero e “agile” per entrambe le parti e riducendo il rischio di fraintendimenti.

Sāmadhi Board

2.

Sketchare. Tantissimo.

Schizzare (“sketchare”, non suona incredibilmente meglio?) è ancora oggi importantissimo.

Abbozzare le prime idee su carta, fare degli schizzi a matita, è ancora uno strumento utilissimo per comunicare con i clienti. Questo è spesso molto più utile che usare il computer nei brainstorming con il cliente. Il tuo scarabocchio non necessiterà di essere perfetto, sarà solo una rozza rappresentazione di quello che il cliente potrà vedere come il prodotto finale, lo aiuterà a concentrarsi sul concetto piuttosto che sulla finitura dei dettagli e lo stile utilizzato. E sarà utile ad isolare quelle due, tre solide idee che probabilmente verranno portate avanti fino alla fine del processo.

Personalmente, amo disegnare, lo trovo incredibilmente rilassante e stimolante.
Dopo ore passate davanti ad un monitor, usare penna e carta fa sì che le idee fluiscano molto più naturalmente. Sketchare è una strada eccellente per sperimentare ed esplorare le possibilità di un segno in maniera veloce, aiuta a risparmiare tempo e a separare le buone idee dalle cattive.
Questo non è semplicemente un parere, soggettivo ed opinabile, ma un assioma (quasi) assoluto nell’ambito del design.

Sketches

3.

Raffinatura delle bozze in vettoriale.

Ok. Se tutto è andato bene il grosso del lavoro lo abbiamo fatto.
Non ci succede di rado di riuscire a portare avanti in questa fase solo una o al massimo due proposte, piuttosto definite, effettuando prima noi una pre-selezione e scartando assieme al cliente le idee meno buone, il tutto attraverso gli schizzi.

Questa fase, piuttosto tecnica, essenzialmente tratta del rielaborare in vettoriale le bozze fatte su carta. Colori, dettagli, numerosi “cazzilli” vengo aggiunti e levati, vengono fatte revisioni con il cliente. A volte un logo che sembrava così promettente su carta non riesce tanto bene tradotto sullo schermo.
Tutto questo può essere più o meno complesso a seconda del caso specifico, del tempo a disposizione e dalla sensibilità del designer.

Faccio due esempi.

Samādhi Logo

 

Per Samādhi sono stato fortunato, è un logo essenzialmente geometrico e avevo già costruito e lavorato su griglia fin dalla fase di sketch. Non ho dovuto inventarmi nulla, solo cambiare il supporto da analogico a digitale.
Mi sono poi concentrato sul disegnare il logotipo e le diverse versioni, di assemblaggio e in riduzione.

Tutt’altra storia Wed in Florence –prossimamente sui vostri schermi– invece: abbiamo portato avanti due proposte, di cui una era un logo calligrafico, in cui tutti i caratteri erano disegnati da zero.
Per quanto si può aver il pallino di fare degli schizzi accurati, su software cambia molto. Dopo molte giornate di lavoro e molti cambiamenti, alla fine con il cliente abbiamo abbandonato questa strada essenzialmente per la poca visibilità in riduzione della tipologia di segno, optando per la rifinitura dell’altra opzione, più iconica.

Wed in Florence Draft

4.

Logo definitivo.

In realtà con il logo abbiamo finito.
A questo punto inizierebbe il bello: ricordate? il logo è solo l’inizio di una Brand Identity: biglietti da visita, carta intestata e il resto della stationery, sviluppo di icone brandizzate, trattamento delle immagini e uso della tipografia nella comunicazione ufficiale, sito web e tanta altra robetta simpatica.
Di questo parleremo prossimamente in un post specifico, dato che, seppur molto diverso, è un argomento non meno complesso.

Potete intanto approfondire nello specifico il processo di web design nell’articolo del buon vecchio Emanuele, che tra l’altro ci dice:

“…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.”

 

Non so come chiudere quindi vi faccio un disegnino.

ciao

Kromin – rebranding

Data Driven Agency // 2020

Brand Strategy ~ Design System ~ Experience Design

Discover Brand Strategy Workshop


Nella fase iniziale di Co-Design il percorso del Discovery Brand Strategy Workshop si è rivelato fondamentale per individuare l’essenza di Kromin, quindi gli elementi distintivi del marchio come la personalità, la target audience e l’obiettivo di posizionamento che ci hanno guidato nel processo di progettazione.
In particolare l’esercizio The Airplane ha sottolineato lo stato di partenza, gli ostacoli attuali, i traguardi da raggiungere e i punti di forza.

Una nuova identità


Giovane realtà, alti obiettivi e spirito di innovazione: tutto questo è Kromin, azienda specializzata in performance marketing e software development. Fin dal primo incontro è emersa un’impronta stilistica basata sul ricorrere ai dati per ogni decisione, di conseguenza Data Driven è stato il mantra che abbiamo ripetuto nel corso delle sessioni di Co-design: quasi un’ossessione. L’esigenza che ci hanno trasferito è stata quella di curare per loro il rebranding completo dell’azienda: una trasformazione per cui non sarebbe bastata una semplice rivisitazione estetica, bensì un lavoro di discovery approfondito e Human-centered.

Dark Mode


Non solo dettame estetico ma anche necessità di interpretare l’identità visiva nel pieno valore della sua funzionalità: così è arrivata la declinazione Dark Mode. I toni scuri permettono la totale fruizione del logo anche con background dalla tonalità completamente opposta. Oltre a facilitare la lettura, risultando riposante per la vista, cattura l’attenzione grazie alle linee definite che determinano l’identità del brand. 

Da Mobile First Design a Multicanale


L’attuale tendenza di accesso al web vede prevalere i dispositivi mobili rispetto al desktop, di conseguenza occorre non solo progettare secondo questa ottica ma considerare la Customer Journey in ogni possibile direzione: una visione immediata, responsive e performante su ogni dispositivo.

I diversi touchpoint multicanale consentono di raggiungere Kromin con semplicità, facilitando e ottimizzando la User Experience.

Design System


L’impronta del logo garantisce un impatto dettato dall’unicità e dalla riconoscibilità, per una corretta condivisione e diffusione in ogni medium.
Abbiamo stabilito e formalizzato il flusso di regole che garantisce la perfetta applicabilità nelle diverse dimensioni di utilizzo.
La visione del logo contempla l’unione del marchio e del logotipo Kromin: la rinnovata lettera K + il nome dell’azienda.
La struttura del marchio e le proporzioni sono basate su una griglia quadrata e il perimetro deve essere rispettato per non alterare l’impatto visivo. Le forme geometriche sono semplici, chiare e immediate e la composizione dello spazio punta all’armonia tra presenza e assenza.
Kromin è legato al colore viola, una caratterizzazione sottolineata dalla scelta successiva di una palette di colori primari del viola e secondari composta da blu scuri per dare ulteriore forma all’innovazione.
Personalità, leggibilità e novità sono incorporati dalla presenza dei font Proxima Nova e Muli.
Muli è un carattere minimalista Sans Serif, progettato sia per il web che per l’utilizzo tipografico.
Il Proxima Nova è il ponte che copre il divario tra caratteri come il Futura e l’Akzidenz Grotesk. Il risultato è un ibrido che combina proporzioni moderne con un aspetto geometrico.
La styleguide

Crowdata – Brand Strategy

Intelligence in the Data Revolution // 2018

Brand Strategy ~ Design System ~ User Interface Design

Good ol' Design System


La mission del progetto era sfidante: creare una brand identity originale con un design system flessibile, sviluppata tra digitale e fisico.

I valori emersi durante il processo di Co-Design con il cliente sono infatti quelli di innovazione e concretezza, orientati al cambiamento continuo.

intro

Identità Flessibile


Una piattaforma futuribile come Crowdata ha bisogno di una Brand Identity flessibile e duttile.

Per questo abbiamo pensato a molte possibili declinazioni, su tanti supporti diversi.

Dai più tradizionali e classici fino a future espansioni che al momento sono in fase di costruzione o implementazione.

Branding

Una piattaforma usabile


Crowdata è uno strumento di lavoro per i brand. La scelta oculata della tipografia, della palette di colori e delle interazioni è fondamentale per la buona resa della piattaforma.
Per questo abbiamo optato per due famiglie di font Sans-Serif, rigorose e facilmente leggibili, con una palette di colori legata al blue istituzionale per restituire un’idea di professionalità alla corporate identity complessiva.
Lo scopo del nostro lavoro è stato quello di rendere convincente e usabile la piattaforma per gli utenti finali, aiutandoli nel trovare soluzioni per il proprio business.
Dashboard
Symbol & Icon System
Landing Page

MGFStyle | Marcell Figueiredo Fashion Blog

Not just another Fashion Blog // 2015

Appassionato di moda sin da giovanissimo, Marcell Figueiredo condivide il suo punto di vista su gli ultimi trend, suggerimenti su come migliorare il proprio stile e approfondimenti dal mondo delle passerelle. Un fashion blog assolutamente da non perdere!

Brand Strategy ~ Experience Design ~ Front-end
we love details - this is a zoom for this web view

Web&Brand Identity


Per Marcell abbiamo voluto disegnare qualcosa di completamente differente rispetto ai soliti blog di moda: era necessario di far spiccare immediatamente il giovane fashion blogger nel mare dei suoi competitor.
Per MGFStyle blog  abbiamo puntato, quindi, su un approccio modulare, con una forte referenza verso i prodotti dell’editoria classica, con l’aggiunta di alcuni elementi che strizzano l’occhio ad un gusto più moderno.

MGFStyle on iPad
we love details - this is a zoom for this web view
we love details - this is a zoom for this web view

MGFStyle Outfit


Per un fashion blogger come Marcell Figueiredo avere una sezione dedicata agli outfit per poter mostrare singolarmente i capi che indossa in ogni post è importantissimo.
È per questo che abbiamo fornito a Marcell un sistema di gestione visuale ed efficace per far vedere tutti i capi di cui parla nei suoi articoli.

we love details - this is a zoom for this web view

Multi-Purpose Responsive Website


Da una risoluzione desktop a una risoluzione mobile c’è un mare in pixel di distanza, circa 880. Abbiamo adattato l’interfaccia alle diverse risoluzioni, modificato le dimensioni e i tipi di contenuti mostrati, mantenendo però la stessa esperienza di navigazione su tutti i device per avere MGFStyle.com sempre sotto mano durante i viaggi di stile e moda.

Responsive Webdesign

Smart Watering System

Cultivate the Future! // 2014

SWS – Smart Watering System è una piattaforma per la razionalizzazione delle risorse idriche, ottenuta non solo tramite sensori sul campo ma anche tramite elaborazioni in base alle previsioni meteo.

Brand Strategy ~ Experience Design ~ Front-end
Hero

Branding


Abbiamo creato un’immagine minimale e pulita, per comunicare in maniera immediata l’ambito di cui si occupa il Brand.
Inoltre la goccia, integrata nelle lettere del marchio, rende il segno interessante e distintivo.
Oltre le varianti di assemblaggio marchio & logotipo abbiamo disegnato anche una versione iconica da abbinare con la tipografia.

we love details - this is a zoom for this web view

Website


Ci è stato richiesto di realizzare un one page per il prodotto a scopo principalmente promozionale piuttosto che informativo, una sorta di flyer in versione web.
Fin da subito, però, è nata la necessità di produrre un’infografica che comunicasse in modo semplice le fasi del processo, rimanendo ugualmente accattivante nonostante il tema molto tecnico.

Website
we love details - this is a zoom for this web view

Samadhi

We empower visionaries to shape the future. // 2014

Samadhi investe in imprenditori e società la cui passione per il proprio lavoro è sfrenata, proponendosi la sfida di creare prodotti che cambino il mercato e i servizi attraverso innovazioni tecnologiche, affinché siano i sognatori a plasmare il futuro.

Brand Strategy
we love details - this is a zoom for this web view
we love details - this is a zoom for this web view

Concept e Significato dell’identità visiva


Samadhi è un termine sanscrito proprio delle culture buddista e induista che indica l’unione del meditante con l’oggetto della meditazione. Il termine sanscrito samādhi deriva da saṃ (“insieme”) rafforzato dalla particella ā + la radice verbale dha (“mettere”).

Utilizzando alcune caratteristiche visive che fanno parte del nostro immaginario abbiamo reso il brand immediatamente riconducibile a questo tipo di cultura. Il “nodo senza fine”, simbolo classico del buddismo tibetano, ci è sembrato la scelta migliore sia per impatto visivo che per densità di significato.

we love details - this is a zoom for this web view
we love details - this is a zoom for this web view
scroll down
birds
logo

Crowdfuture

Il futuro del crowdfunding in Italia // 2013

crowdfuture è la conferenza che affronta tutti gli aspetti legati al finanziamento collettivo di idee innovative.

Brand Strategy ~ Experience Design ~ Front-end
Welcome
Welcome

L'evento


È l’evento italiano che solleva questioni e propone risposte, che guarda al presente e al futuro del crowdfunding, identificando e spiegando sfide e nuovi trend. L’evento è nato nel 2012 grazie ad una nostra partnership con la società scozzese di consulenza e ricerca aziendale twintangibles. L’intento della prima edizione era quello di indagare il fenomeno, evidenziare problemi, sfide e soluzioni per poter offrire un’introspettiva sul futuro del crowdfunding. L’edizione del 2013 si è focalizzata invece sulle tendenze più attuali del mercato, analizzando i singoli aspetti seguendo delle track tematiche: Regolamentazione Europea, Aspetti Legali, Civic Crowdfunding, Open Source e Gamification.

we love details - this is a zoom for this web view

Il Web


Un sito responsive creato con HTML5/CSS3 e JavaScript per un’esperienza d’uso veloce e per uno sviluppo agile. 
Per rendere il più semplice e immediata possibile la consultazione delle informazioni su Crowdfuture e allo stesso modo permettendoci di aggiornare i contenuti. Abbiamo optato per un frontend leggero basato sul nostro Framework CSS preferito, Foundation, affiancato da un webservice realizzato con WordPress come API JSON. Questo ci ha permesso, con totale flessibilità, di gestire al meglio le performance del sito, senza sacrificare l’aspetto che ci preme di più: il Design.

we love details - this is a zoom for this web view
hover menu
hover icon
newsletter
web perspective

Web App


Una soluzione (mobile) elegante e conveniente per rendere i contenuti della conferenza accessibili anche sui dispositivi mobili, abbiamo realizzato una mobile web app che ha il grande vantaggio di non dover essere installata pur funzionando proprio come un’applicazione vera e propria sui display di tutti gli smartphone, attingendo i dati da un Web Service REST realizzato con WordPress.

we love details - this is a zoom for this web view
we love details - this is a zoom for this web view
Capitolo 8
Brand Strategy & Identity

Possiamo esserti d’aiuto?

Facciamo al caso della tua azienda o pensi che possiamo aiutarti a raggiungere i tuoi obiettivi?
Faccelo sapere oppure passa a prendere un caffè da NOIS3.

    Please, rotate the screen
    or view the website on other screen.