Rebrand Tuta: Aprire la sorgente del nostro nuovo universo visivo

Attivare la privacy. Questo è ciò che offriamo dal primo giorno di Tuta(nota). Ora l'architettura del nostro marchio lo riflette in un nuovo ecosistema di app.

New Tuta logo, its grid and the brand architecture in a new product ecosystem.

Ci si sveglia, gli occhi si aprono e si chiudono - ci si riaddormenta. La sveglia strilla, ci si alza e si esce dalla stanza barcollando. Fuori è ancora buio, click! Accendete la luce del corridoio, le pupille si contraggono. Con gli occhi ancora chiusi azionate l'interruttore della luce del bagno e vi lavate il viso. Clic! Entrate in cucina e vi preparate un caffè per leggere alcune e-mail. La luce del sole entra in casa, è ora di uscire. Aprite la porta che dà sulla strada e improvvisamente il vostro spazio privato si trasforma in uno spazio pubblico. Non appena si mette piede sul marciapiede, i lampioni si spengono. Clic!


Una metafora e il suo potenziale narrativo

New Tuta logo, its grid and the brand architecture in a new product ecosystem. Quante volte avete premuto un interruttore oggi?

Noi di Tuta abbiamo la missione non solo di offrire applicazioni, ma anche di promuovere la consapevolezza della sicurezza e della privacy sul web. A questo scopo, lo storytelling con associazioni figurative è uno strumento potente per risvegliare le persone al di là di una spiegazione tecnica e razionale.

Probabilmente si azionano interruttori così tante volte al giorno che non si può nemmeno dire con certezza quante volte, giusto? Lo facciamo in modo così automatico che non ce ne rendiamo nemmeno più conto. Il web è un luogo simile. Semplicemente non ci pensiamo, ma ci aspettiamo che le aziende digitali mantengano i nostri dati al sicuro, ad esempio con la crittografia. Questo è ciò che noi di Tuta facciamo e che promettiamo a tutti i nostri utenti: Pieno controllo, nelle vostre mani.

La nostra identità di marchio, completamente rinnovata, riflette esattamente questo. Con un simbolo minimalista, ricco di potenziale narrativo, utilizzando colori di supporto più vivaci, abbiamo dato al marchio Tuta un aspetto moderno, caldo ed energico.

Tuta new website building process following the new brand creative direction Dopo aver lanciato il nuovo logo, abbiamo iniziato con Yohei (sviluppatore web) a disegnare i wireframe per il nuovo sito web.

Passo dopo passo, avete potuto vedere la transizione di Tuta verso una nuova direzione creativa. Per prima cosa abbiamo lanciato il logo - lo switch - nell’app e sul nostro vecchio sito web. Più recentemente, abbiamo lanciato il nostro nuovo sito web con il nuovo slogan: “Turn ON Privacy”. In questo modo, la nostra narrazione visiva si collegherà alla funzione di base di questo dispositivo: accendere facilmente qualcosa. Con gli ultimi aggiornamenti, abbiamo completato una parte importante del nostro rebranding. I prossimi passi saranno quelli di sviluppare il nuovo marchio direttamente nel prodotto.

Continuate a leggere per saperne di più sul nostro processo creativo, sui concetti che hanno guidato ogni decisione e, soprattutto, su come questo porterà valore all’UX e all’UI dei nostri prodotti Tuta Mail e Tuta Calendar.

Nuovo marchio, nuove analogie

Il design è un processo, il che significa molte iterazioni e cambiamenti di rotta. Abbiamo quindi intrapreso un percorso tortuoso, come quello del vecchio logo, per arrivare al nuovo simbolo. In questo percorso, siamo passati attraverso vari concetti, dai cliché visivi della crittografia (chiavi, lucchetto, scudo, personaggi, ecc.), fino agli animali come mascotte. In tutte queste opzioni, mancava ancora qualcosa. Poi, all’improvviso, un “clic”!

Part of the mood board that shaped the creation process for Tuta's new brand Riferimenti, bozze, studi (a sinistra) e un mood board (a destra) che hanno coinvolto il processo creativo del marchio Tuta.

Fin da Platone - o anche prima - le allegorie sulla luce e sull’ombra fanno parte della filosofia e della letteratura; il mito della caverna di Platone è solo una di queste.

L’interruttore della luce che si usa tutti i giorni ha un grande potenziale. È un simbolo ricco di storie, che esplora la transizione tra spazi pubblici e privati attraverso la luce e l’ombra. Questa relazione non è nuova e nel nostro processo è stata ispirata dalle idee di Hannah Arendt - che, come Tuta, è nata ad Hannover. La Arendt ha riflettuto a lungo sulla sfera privata e su quella pubblica, considerando la prima come l’ombra accogliente delle pareti domestiche - necessaria per rimettersi in piedi come individui - e la seconda come la luce del giorno che dimostra che possiamo vivere in comunità, lo spazio pubblico dove possiamo sviluppare il nostro potenziale. Per lei, entrambi gli spazi sono fondamentali per una vita soddisfacente.

Una vita trascorsa interamente in pubblico, in presenza di altri, diventa, come diremmo noi, superficiale. Pur mantenendo la sua visibilità, perde la qualità di emergere alla vista da un terreno più oscuro che deve rimanere nascosto per non perdere la sua profondità in un senso molto reale e non soggettivo.

Hannah Arendt, La condizione umana.

Graffiti illustrating Hannah Arent (1906-1975) on the same building where she was born in Linden (Hanover) “Nessuno ha il diritto di obbedire”. Graffiti all’interno dell’edificio di Hannover dove nacque Hannah Arendt, situato a pochi isolati dalla sede di Tuta. (Opera: Patrik Wolters / Kevin Lasner. Foto: Bernd Schwabe).

È stato inoltre rilevato che la metafora del simbolo precedente - un percorso verso una sensazione di relax attraverso la crittografia - era diventata troppo subliminale per il nostro attuale posizionamento. Con la nuova metafora, manteniamo il credo del diritto alla privacy, ma in modo più oggettivo/materiale: l’utente ha il pieno controllo. Tuta non solo apre la strada alla privacy, ma è anche un dispositivo di privacy quotidiano, semplice e facile da usare.

Durante il processo di revisione del vecchio marchio, ci siamo resi conto che la maggior parte delle aziende tecnologiche, in particolare nel settore della crittografia/privacy, trattano l’argomento con neutralità e freddezza, e che avremmo potuto apportare più energia e sentimenti umani alla nuova identità.

Il nuovo look dovrebbe anche allinearsi meglio con la voce del nostro marchio, che ha sempre riflesso una forte personalità. Questo significa che non rinunciamo mai alla massima sicurezza, nemmeno se ciò comporta un vantaggio commerciale. In quest’ottica, la nuova direzione creativa ha cercato di umanizzare e aggiungere calore alla comunicazione di una lotta per questo diritto fondamentale: la possibilità di scegliere la privacy.

Il sigillo: una metafora visiva potente (e non scontata)

The animation that inverts the Tuta's new signet plays on the storytelling of the brand's tagline, “Turn on Privacy” Spazio alla narrazione. Le associazioni creative con la crittografia aprono uno spazio per sensibilizzare pubblici diversi.

Nel 2023 abbiamo cambiato il nostro nome da Tutanota a Tuta. Il nome più corto dava anche un tono minimalista alle immagini, quindi abbiamo cercato una semplicità formale che traducesse la missione di Tuta: una privacy accessibile a tutti. È con questa premessa che, dopo un’intensa ricerca sulla strategia di marketing e di branding, abbiamo ideato una rappresentazione grafica di questo oggetto così presente nella nostra vita quotidiana.

Stilisticamente, l’interruttore Tuta non si impegna a essere illustrativo, e ancor meno cerca di essere una rappresentazione realistica di questo oggetto, ma è piuttosto un’astrazione minimalista che isola alcune proprietà e comportamenti di questo apparecchio.

From inspiration in a real switch to geometric abstraction based on the golden ratio grid Rappresentazione isometrica di un interruttore a bilanciere. La griglia di costruzione della nuova insegna Tuta utilizza una base di rettangoli quadrati dorati, suddivisi secondo la sequenza di Fibonacci (Φ = 1.618).

Sebbene minimalista e isometrica, questa rappresentazione come logo ha cercato di preservare geometricamente il funzionamento fisico dell’interruttore, in un modo che fosse ancora abbastanza riconoscibile da poter giocare a volte con la narrazione nelle animazioni delle posizioni ON / OFF, o “Turn ON Privacy” / “Turn OFF Surveillance”, invertendo verticalmente la posizione della forma originale.

Poiché i loghi non pretendono di essere illustrazioni realistiche, c’è sempre spazio per la soggettività e l’interpretazione di chi li guarda. A volte siamo persino sorpresi quando scopriamo che un logo che ci piace rappresenta qualcosa che non avevamo mai immaginato. Ecco perché a volte i loghi ci piacciono senza essere sicuri di cosa rappresentino esattamente: la loro forma, la loro composizione o l’emozione che trasmettono possono essere sufficienti per conquistare la nostra simpatia.

Meetings of the rebranding team, creating at the same time the new brand and website Dall’alto a sinistra a destra, Matthias (co-fondatore), Daniel (designer), Yohei (sviluppatore web), Hanna (responsabile marketing) e Arne (co-fondatore). In basso a sinistra, Brandon e Daniel parlano delle variazioni del logo. (Foto: Lena Britz)

Una preoccupazione per il nuovo simbolo era che non venisse confuso con qualcosa di negativo o a cui non avremmo voluto essere associati. Durante i test di percezione con il pubblico, non è stata individuata alcuna associazione indesiderata.

La facilità d’uso è una qualità sempre ricercata da Tuta. Quale oggetto potrebbe portare meglio questo concetto di scelta della sfera privata con una tale usabilità? Nella scelta di questo simbolo universale si è tenuto conto anche dell’obiettivo di ampliare il pubblico e dare accesso alla privacy a tutti. L’animazione che inverte la nuova insegna di Tuta gioca sulla narrazione della tagline del marchio, “Turn on Privacy”.

Marchio: caratteri minuscoli personalizzati

Una volta finalizzato il design del simbolo, la sfida è stata quella di pensare al modo migliore per creare lettere tipograficamente armoniose per l’interruttore, completando così il design del nuovo logo. L’uso di lettere minuscole e di caratteri tipografici ispirati al corsivo è stato un modo per trasmettere l’informalità, un modo più amichevole di presentare questa piccola parola con un grande significato: sicuro.

Fabio Haag studio typographically polished our first wordmark draft until we arrived at the final letter shape Partnership. Lo studio Fabio Haag è stato incaricato di esplorare la bozza originale del marchio, iterando i caratteri tipografici per conferirgli maggiore personalità e una buona leggibilità.

Poiché il nostro simbolo è geometrico, abbiamo bilanciato questo aspetto progettando un tipo di carattere che apportasse un contrasto alla composizione, offrendo forme più organiche ed espressive, come la “a”, ispirata alla lettera “a” scritta a mano. Gli angoli diagonali dell’interruttore hanno portato naturalmente il carattere all’asse del corsivo. Il marchio Tuta è stato personalizzato per il nostro simbolo, quindi le diagonali hanno influenzato direttamente non solo l’asse delle lettere, ma anche il taglio degli apici e delle estremità della lettera ‘t’. Per questa missione ci siamo affidati al talento del type designer Fabio Haag, che ha svolto un lavoro eccellente.

The parts that make up the new Tuta brand L’anatomia del nuovo marchio Tuta.

Colori e caratteri: più sfumature e contrasti

La lotta contro i giganti tecnologici, la missione di deGoogle, non è fredda e il nostro approccio a questa sfida è tutt’altro che tiepido. Per ottenere l’energia necessaria a questa missione, abbiamo ampliato la nostra tavolozza di colori.

Warmer and more dynamic. A comparison of the brand and website before and after the rebranding, from Tutanota to Tuta Da Tutanota a Tuta. Prima freddo e monotono (a sinistra), ora caldo e dinamico (a destra).

Il vecchio simbolo soffriva di un problema tecnico: a piccole dimensioni, la fine del percorso scompariva otticamente, poiché il dettaglio dell’ultima curva diventava troppo piccolo per essere leggibile. Il minimalismo del nuovo simbolo e gli spazi più generosi e rettilinei rendono il nuovo logo facilmente leggibile a dimensioni molto piccole, senza soffrire di distorsione dei pixel.

La lettura del wordmark “tuta” ha guadagnato significativamente in presenza e consistenza, rispetto alla tipografia che prima era meno legata al simbolo e aveva una lettura più frammentata, in quanto mescolava due diversi pesi di font.

Il nostro vecchio schema di colori era freddo e monotono, con una sola tonalità di rosso, supportata da sfondi bianchi e grigi. Con una gamma più dinamica, ci affidiamo meglio all’energia dei colori per guidare la nostra lotta per la privacy.

Il classico colore rosso vino è stato conservato e un nuovo nero carico di rosso è stato aggiornato per sostituire il vecchio nero al 100%. Abbiamo inoltre aggiunto ulteriori strati di intensità al colore vino originale, ora anche con sfumature secondarie di rosso, magenta e rosa. I colori saturi, come il rosso vibrante chiamato “Fighter”, si combinano con l’atmosfera solare dell’arancione e del giallo e con la sensazione di benessere dei toni del beige e del pesca. È con questo “umore umano” in mente che abbiamo cercato di contrastare l’impersonalità che aleggiava sul bianco e sul grigio come colori di sfondo. Questa decisione è in linea con il modo in cui vediamo la nostra missione, una missione di natura molto umana. Perché per noi la privacy riguarda le persone e i loro diritti fondamentali.

New corporate typography and colors bring the energy and contrast needed to fight for privacy L’energia dei colori e delle forme per dare impulso alla nostra lotta per la privacy.

Abbiamo anche fatto il primo passo verso una migliore tipografia aziendale. Il nostro vecchio carattere tipografico era un sistema sans serif. Per mantenere l’universalità e le prestazioni, ma con un maggiore contrasto tipografico, abbiamo optato per Noto nelle varianti Sans e Serif SC. Questo è il primo passo verso un sistema tipografico pensato appositamente per il nuovo marchio. E sul nuovo sito web è possibile realizzare una gerarchia tipografica più interessante.

Immagini: l’underground monocromatico incontra il pop caldo

The images on our website were dark and heavy, now the images transfer warm lights between red and yellow Prima (a sinistra), le immagini erano scure e pesanti, elaborate applicando effetti monocromatici nei software. Ora il colore è pianificato con la luce, sotto la direzione creativa in collaborazione con il fotografo Alireza Husseini.

Visivamente, le nostre decisioni creative riflettono una certa conservazione del nostro look punk-hackish, apportando note pop alla ‘band’, ad esempio nei nuovi colori e nelle nuove illustrazioni. Il nostro marchio ha ora un’immagine autentica ed eviteremo il più possibile i database di immagini generiche. Il nostro team è quello che illustra i nostri valori, e per questo stiamo lavorando con fotografi locali, come Alireza Husseini, che ha scattato le foto del team per il nuovo sito web. Le illustrazioni e l’iconografia seguiranno la stessa linea autoriale, stiamo lavorando con illustratori locali, come Mel Wilken di Hannover, e internazionali, come Feu che viene dal Brasile.

Tuta si è sempre distinta per essere un marchio più umano tra le aziende tecnologiche. Sia per i suoi valori meno commerciali, sia per il suo aspetto più amichevole che si riflette nell’essere un piccolo collettivo di persone con una missione audace che sfida la logica delle grandi aziende tecnologiche.

La scelta era tra Tuta e l’altro ragazzo in circolazione. Ho navigato su ogni sito web per farmi un’idea; ho preferito la cordialità di Tuta e la sua cultura orientata alla condivisione delle conoscenze rispetto all’altro, che sembrava più commerciale. Il lato umano di Tuta mi ha spinto a scegliere questa strada: l’umanità al di sopra del profitto e non sono rimasto deluso”.

cdrc @cdrc@tux.social, 10 marzo 2024

Tuta keeps the alternative-punk-underground look mixed with pop notes Il film Trainspotting e un’opera dell’artista Banksy (a sinistra), il vecchio sito web (sopra) e le cornici sulla parete del nostro ufficio con i membri del team (sotto).

L’aspetto stencil, presente fin dal marchio precedente, porta sicuramente un valore underground che si adatta al posizionamento di rivoluzione della privacy di Tuta.

In questa posizione di protesta punk nei confronti del mercato, abbiamo cercato di conservare l’essenza di questo look underground, come le illustrazioni a stencil del team, perché riflette la posizione ancora underground di lotta contro i giganti aziendali. Amiamo essere una piccola azienda, amiamo essere alternativi, amiamo l’underground, ma questo non significa che vogliamo limitare le nostre soluzioni a una nicchia, ma piuttosto estendere il nostro raggio d’azione sensibilizzando e rendendo possibile la privacy sul web.

Tuta's new illustrations work with contrast of light and shadow and more vibrant colors A sinistra alcune delle illustrazioni realizzate da Mel Wilken per l’interfaccia di feedback dell’utente e a destra le illustrazioni di Feu per l’interfaccia di benvenuto della nostra app.

Le nostre nuove illustrazioni lavorano sul concetto di contrasto tra luce e ombra / pubblico e privato, attraverso ombreggiature realizzate con la tecnica del puntinismo (concentrazione di punti scuri per creare ombre). Utilizzando anche la nostra nuova tavolozza di colori, più dinamica.

Fasi del rebranding e prodotti futuri

La quantità di branding di cui ha bisogno l’icona di un’app è relativa e può dipendere da diversi fattori, da quelli strategici a quelli formali. La coerenza visiva tra un marchio e i suoi prodotti può essere ottenuta in diversi modi, ad esempio attraverso i colori, lo stile delle illustrazioni e la tipografia. Durante il nostro processo di rebranding, ci siamo resi conto che volevamo portare il nostro marchio sui prodotti anche a livello di forma. Per questo motivo, le icone dei prodotti Tuta sono derivate dalla griglia del marchio e hanno in parte la stessa struttura. La famiglia di app Tuta si distingue per il sistema di colori e per i primi caratteri, come la “M” per mail e il “31” per calendario.

The Tuta logo and brand architecture with the new Tuta Mail and Tuta Calendar products Un logo progettato per l’architettura del marchio e le sue icone di prodotto.

Attualmente siamo nella fase 3 del nostro rebranding, denominata Brand Development. Il nostro processo è stato suddiviso in quattro fasi che abbiamo chiamato come segue:

  1. Brand Audit (analisi del vecchio marchio)
  2. Brand Creation (creazione del nuovo logo: simbolo, marchio e colori)
  3. Sviluppo del marchio (estensione della nuova direzione creativa a tutti gli asset e i prodotti del marchio)
  4. Implementazione del marchio (adozione di un sistema di design coerente).

Il processo di rebranding ha visto la partecipazione dell’intero team a diversi workshop, in tutte le fasi, ma soprattutto nella fase di Brand Audit.

The Tuta new product ecosystem: Tuta Mail, Tuta Calendar, and more to come. La famiglia cresce. Il nuovo ecosistema di prodotti Tuta è appena iniziato con Tuta Mail e Tuta Calendar.

All’insegna del motto ” crittografia di tutto e per tutti”, molte nuove funzionalità sono in arrivo con il nuovo ecosistema di prodotti Tuta. Inaugurazione della famiglia con Tuta Mail e Tuta Calendar.

Come prossimo passo principale del rebranding, inizieremo a lavorare ancora più direttamente sulla UX/UI dei prodotti, cioè ad allineare le nostre app alla nostra nuova direzione creativa.

Qui a Tuta siamo entusiasti della crescita dei nostri prodotti dell’ecosistema criptato, che soddisfano le richieste di persone e gruppi diversi, come aziende, cliniche mediche, attivisti e giornalisti. Nei prossimi post sul design, approfondiremo i dettagli delle prossime release, mostrando come influiscono positivamente sulla vostra esperienza con le soluzioni criptate di Tuta.