Rebrand Tuta: Abrir a fonte do nosso novo universo visual

Ativar a privacidade. É isso que oferecemos desde o primeiro dia da Tuta(nota). Agora, a arquitetura da nossa marca reflecte isto num novo ecossistema de aplicações.

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

Acordamos, os olhos abrem-se e fecham-se - voltamos a adormecer. O despertador toca, levanta-se e sai a cambalear do quarto. Ainda está escuro lá fora, clique! Acende a luz do corredor, as suas pupilas contraem-se. Com os olhos ainda fechados, acende a luz da casa de banho e lava a cara. Clique! Entra na cozinha e prepara um café para ler alguns e-mails. A luz do sol invade a casa, é altura de sair. Abre a porta que dá para a rua e, de repente, o seu espaço privado transforma-se num espaço público. Assim que pisa o passeio, os candeeiros da rua apagam-se. Clique!


Uma metáfora e o seu potencial para contar histórias

New Tuta logo, its grid and the brand architecture in a new product ecosystem. Quantas vezes acionou um interrutor hoje?

Na Tuta, a nossa missão não é apenas oferecer aplicações, mas também promover a sensibilização para a segurança e a privacidade na Web. Para o efeito, a narração de histórias com associações figurativas é uma ferramenta poderosa para despertar as pessoas para além de uma explicação técnica e racional.

Provavelmente, accionamos interruptores tantas vezes por dia que nem sabemos ao certo quantas, certo? Fazemo-lo de forma tão automática que já nem nos apercebemos. A Web é um sítio semelhante. Simplesmente não pensamos nisso, mas esperamos que as empresas digitais mantenham os nossos dados seguros, por exemplo, com encriptação. É isso que nós na Tuta fazemos e o que prometemos a todos os nossos utilizadores: Controlo total, nas suas mãos.

A nossa identidade de marca completamente renovada reflecte exatamente isso. Com um símbolo minimalista, cheio de potencial para contar histórias, utilizando cores de apoio mais vibrantes, demos à marca Tuta um aspeto moderno, caloroso e enérgico.

Tuta new website building process following the new brand creative direction Depois de lançar o novo logótipo, começámos com o Yohei (programador Web) a desenhar wireframes para o novo sítio Web.

Passo a passo, foi possível ver a transição de Tuta para uma nova direção criativa. Primeiro, lançámos o logótipo - o interrutor - na aplicação e no nosso antigo sítio Web. Mais recentemente, lançámos o nosso novo sítio Web com o novo slogan: “Turn ON Privacy”. Desta forma, a nossa narrativa visual ligar-se-á à função básica deste dispositivo: ligar algo facilmente. Com as últimas actualizações, concluímos uma parte importante do nosso rebranding. Os próximos passos serão desenvolver a nova marca diretamente no produto.

Continue a ler para saber mais sobre o nosso processo criativo, os conceitos que orientaram cada decisão e, acima de tudo, como isto irá valorizar a experiência do utilizador e a interface do utilizador dos nossos produtos Tuta Mail e Tuta Calendar.

Nova marca, novas analogias

Design é processo, o que significa muitas iterações e mudanças de rota. Por isso, percorremos um caminho sinuoso - tão sinuoso como o antigo logótipo - para chegar ao novo símbolo. Neste caminho, passámos por vários conceitos, desde os clichés visuais da criptografia (chaves, cadeado, escudo, personagens, etc.), até animais como mascotes. Em todas estas opções, ainda faltava algo. Então, de repente, houve um “clique”!

Part of the mood board that shaped the creation process for Tuta's new brand Referências, rascunhos, estudos (à esquerda) e um mood board (à direita) que envolveram o processo criativo da marca Tuta.

Desde Platão - ou mesmo antes - que as alegorias sobre a luz e a sombra fazem parte da filosofia e da literatura, sendo o próprio mito da caverna de Platão apenas uma delas.

O interrutor de luz que é utilizado todos os dias tem um grande potencial. É um símbolo rico para contar histórias, explorando a transição entre espaços públicos e privados através da luz e da sombra. Esta relação não é nova e, no nosso processo, foi inspirada pelas ideias de Hannah Arendt - que, tal como Tuta, nasceu em Hanover. Arendt passou muito tempo a refletir sobre as esferas privada e pública, tratando a primeira como a sombra aconchegante das paredes de casa - necessária para nos reerguermos como indivíduos - e a segunda como a luz do dia que prova que podemos viver em comunidade, o espaço público onde podemos desenvolver o nosso potencial. Para ela, ambos os espaços são fundamentais para uma vida plena.

Uma vida passada inteiramente em público, na presença de outros, torna-se, como diríamos, superficial. Embora conserve a sua visibilidade, perde a sua qualidade de se erguer à vista a partir de um terreno mais escuro que deve permanecer oculto para não perder a sua profundidade num sentido muito real e não subjetivo.

Hannah Arendt, A Condição Humana.

Graffiti illustrating Hannah Arent (1906-1975) on the same building where she was born in Linden (Hanover) “Ninguém tem o direito de obedecer”. Graffiti no interior do edifício em Hanôver onde nasceu Hannah Arendt, situado a poucos quarteirões da sede da Tuta. (Obra de arte: Patrik Wolters / Kevin Lasner. Foto: Bernd Schwabe).

Foi também identificado que a metáfora do símbolo anterior - um caminho para uma sensação de relaxamento através da encriptação - se tinha tornado demasiado subliminar para o nosso posicionamento atual. Com a nova metáfora, preservamos o credo do direito à privacidade, mas de uma forma mais objetiva/material: o utilizador tem o controlo total. Tuta não só abre o caminho para a privacidade, como também é um dispositivo de privacidade quotidiano, simples e fácil de utilizar.

Durante o processo de auditoria da antiga marca, apercebemo-nos de que a maioria das empresas de tecnologia - particularmente no sector da encriptação/privacidade - trata o assunto com neutralidade e frieza, e que poderíamos trazer mais energia e sentimentos humanos à nova identidade.

O novo visual também deve estar mais alinhado com a voz da nossa marca, que sempre reflectiu uma personalidade forte. Isto significa que nunca desistimos da segurança máxima, nem mesmo se isso tivesse uma vantagem comercial. Com isto em mente, a nova direção criativa procurou humanizar e tornar mais calorosa a comunicação de uma luta por este direito básico: a possibilidade de escolher a privacidade.

Sinete: uma metáfora visual poderosa (e não óbvia)

The animation that inverts the Tuta's new signet plays on the storytelling of the brand's tagline, “Turn on Privacy” Espaço para contar histórias. As associações criativas com a criptografia abrem espaço para sensibilizar diferentes públicos.

Em 2023, mudámos o nosso nome de Tutanota para Tuta. O nome mais curto também deu um tom minimalista ao visual, então buscamos uma simplicidade formal que traduzisse a missão do Tuta: privacidade acessível para todos. Foi com esta premissa em mente que - após uma intensa pesquisa sobre marketing e estratégia de marca - criámos uma representação gráfica deste item tão presente no nosso quotidiano.

Estilisticamente, o interrutor Tuta não tem o compromisso de ser ilustrativo e muito menos procura ser uma representação realista deste objeto, sendo antes uma abstração minimalista que isola algumas propriedades e comportamentos deste aparelho.

From inspiration in a real switch to geometric abstraction based on the golden ratio grid Uma representação isométrica de um interrutor basculante. A grelha de construção do novo sinete Tuta utiliza uma base de rectângulos quadrados dourados, divididos de acordo com a sequência de Fibonacci (Φ = 1,618).

Embora minimalista e isométrica - esta representação como logótipo procurou preservar geometricamente o funcionamento físico do interrutor - de uma forma que ainda fosse suficientemente reconhecível para jogar por vezes com o storytelling em animações das posições ON / OFF, ou “Turn ON Privacy” / “Turn OFF Surveillance”, invertendo verticalmente a posição da forma original.

Como os logótipos não pretendem ser ilustrações realistas, há sempre espaço para a subjetividade e a interpretação de quem vê. Por vezes, até ficamos surpreendidos quando descobrimos que um logótipo de que gostamos representa algo que nunca imaginámos. É por isso que, por vezes, gostamos de logótipos sem ter a certeza do que representam exatamente - apenas a sua forma, composição ou a emoção que transmitem podem ser suficientes para ganhar a nossa simpatia.

Meetings of the rebranding team, creating at the same time the new brand and website De cima, da esquerda para a direita, Matthias (cofundador), Daniel (designer), Yohei (programador Web), Hanna (diretora de marketing) e Arne (cofundador). Em baixo, à esquerda, Brandon e Daniel a falar sobre as variações do logótipo. (Fotos: Lena Britz)

Uma preocupação com o novo símbolo era que não fosse confundido com algo negativo ou com o qual não gostaríamos de ser associados. Durante os testes de perceção com o público, não foi identificada nenhuma associação indesejada.

A facilidade de uso é uma qualidade sempre buscada aqui na Tuta. Que objeto poderia trazer melhor esta noção de escolha da esfera privada com tanta usabilidade? O objetivo de alargar o público e dar acesso à privacidade a todos foi também considerado na escolha deste símbolo universal. A animação que inverte o novo sinete da Tuta joga com o storytelling do slogan da marca, “Turn on Privacy”.

Marca nominativa: tipo minúsculo feito à medida

Uma vez finalizado o design do símbolo, o desafio foi pensar na melhor forma de criar letras tipograficamente harmoniosas para o interrutor, completando assim o design do novo logótipo. A utilização de letras minúsculas, bem como de tipos de letra inspirados na cursiva, foi uma forma de transmitir informalidade, uma forma mais amigável de apresentar esta pequena palavra com um grande significado: seguro.

Fabio Haag studio typographically polished our first wordmark draft until we arrived at the final letter shape Parceria. O estúdio Fabio Haag foi então encarregado de explorar o nosso projeto original de marca nominativa, iterando tipograficamente para lhe dar mais personalidade e uma boa legibilidade.

Uma vez que o nosso símbolo é geométrico, equilibrámos este aspeto concebendo um tipo de letra para dar contraste à composição, oferecendo formas mais orgânicas e expressivas, como o “a”, que foi inspirado na letra “a” escrita à mão. Os ângulos diagonais do interrutor conduziram naturalmente o tipo para o eixo itálico. A marca nominativa Tuta foi personalizada para o nosso símbolo, pelo que as diagonais influenciaram diretamente não só o eixo das letras, mas também o corte dos vértices e das extremidades da letra ‘t’. Para esta missão, contámos com o talento do designer de tipos Fabio Haag, que fez um excelente trabalho.

The parts that make up the new Tuta brand A anatomia da nova marca Tuta.

Cores e tipos de letra: mais tons e contraste

A luta contra os gigantes da tecnologia, a missão deGoogle, não é uma missão fria e a nossa abordagem a este desafio está longe de ser morna. Para conseguir a energia necessária para esta missão, alargámos a nossa paleta de cores.

Warmer and more dynamic. A comparison of the brand and website before and after the rebranding, from Tutanota to Tuta De Tutanota a Tuta. Anteriormente frio e monótono (esquerda), agora quente e dinâmico (direita).

O antigo símbolo sofria de um problema técnico: em tamanhos pequenos, o fim do caminho desaparecia opticamente, pois o detalhe da última curva tornava-se demasiado pequeno para ser legível. O minimalismo do novo símbolo e os intervalos mais generosos e rectos tornam o novo logótipo fácil de ler em tamanhos muito pequenos, sem sofrer distorção de pixels.

A leitura da marca nominativa “tuta” ganhou significativamente em presença e consistência, em comparação com a tipografia que anteriormente estava menos ligada ao símbolo e tinha uma leitura mais fragmentada, uma vez que misturava dois pesos de letra diferentes.

O nosso antigo esquema de cores era frio e monótono, utilizando apenas um tom de vermelho, apoiado por fundos brancos e cinzentos. Com uma gama mais dinâmica, confiamos melhor na energia das cores para impulsionar a nossa luta pela privacidade.

A clássica cor vermelho vinho foi preservada e um novo preto carregado de vermelho foi atualizado para substituir o antigo 100% preto. Também adicionámos mais camadas de intensidade à cor vinho original, agora também com tons secundários de vermelho, magenta e rosa. Cores saturadas como o vermelho vibrante apelidado de ‘Fighter’ são combinadas com o ambiente solarengo do laranja, amarelo e a sensação de aconchego dos tons de bege e pêssego. Foi com esta “disposição humana” em mente que procurámos contrariar a impessoalidade que pairava sobre o branco e o cinzento como cores de fundo. Esta decisão está em linha com a forma como vemos a nossa missão, uma missão de natureza muito humana. Porque, para nós, a privacidade tem realmente a ver com as pessoas e com o seu direito básico.

New corporate typography and colors bring the energy and contrast needed to fight for privacy A energia das cores e das formas para impulsionar a nossa luta pela privacidade.

Também demos o primeiro passo para uma melhor tipografia empresarial. O nosso antigo tipo de letra era um sistema sem serifa. Para manter a universalidade e o desempenho, mas com um pouco mais de contraste tipográfico, optámos pelo Noto nas variações Sans e Serif SC. Este é o primeiro passo para um sistema tipográfico pensado, especialmente para a nova marca. E no novo sítio Web é possível realizar uma hierarquia tipográfica mais interessante.

Imagens: o underground monocromático encontra o pop quente

The images on our website were dark and heavy, now the images transfer warm lights between red and yellow Antes (à esquerda), as imagens eram escuras e pesadas, trabalhadas através da aplicação de efeitos monocromáticos em software. Agora, a cor é planeada com luz, sob a direção criativa em parceria com o fotógrafo Alireza Husseini.

Visualmente, as nossas decisões criativas reflectem uma certa preservação do nosso visual punk-hackish, trazendo notas pop à “banda”, por exemplo, nas novas cores e ilustrações. A nossa marca tem agora imagens autênticas e evitaremos tanto quanto possível bases de dados de imagens genéricas. A nossa equipa é quem ilustra os nossos valores e, para isso, estamos a trabalhar com fotógrafos locais, como Alireza Husseini, que tirou as fotografias da equipa para o novo sítio Web. As ilustrações e a iconografia seguirão a mesma linha autoral, estamos a trabalhar com ilustradores locais, como Mel Wilken, de Hannover, e internacionais, como Feu, do Brasil.

A Tuta sempre se destacou por ser uma marca mais humana entre as empresas de tecnologia. Tanto no sentido dos seus valores menos comerciais como no seu aspeto mais amigável, que se reflecte no facto de ser um pequeno coletivo de pessoas com uma missão ousada que desafia a lógica da grande tecnologia.

Foi uma decisão entre Tuta e o outro miúdo que andava por aí. Naveguei em cada um dos sítios Web para ter uma ideia; preferi a simpatia de Tuta e a sua cultura orientada para a partilha de conhecimentos à do outro, que parecia mais comercial. O lado humano do Tuta fez-me optar por esse caminho - a humanidade acima do lucro - e não fiquei desiludido.”

cdrc @cdrc@tux.social, 10 de março de 2024

Tuta keeps the alternative-punk-underground look mixed with pop notes O filme Trainspotting e uma obra do artista Banksy (à esquerda), o antigo sítio Web (em cima) e as molduras na parede do nosso escritório com os membros da equipa (em baixo).

O visual de estêncil que está presente desde a marca anterior traz definitivamente um valor underground que se enquadra no posicionamento de revolução da privacidade da Tuta.

Nesta postura punk de protesto contra o mercado, tentámos preservar a essência deste visual underground, como as ilustrações a stencil da equipa, porque reflecte a posição ainda underground de lutar contra os gigantes empresariais. Adoramos ser uma pequena empresa, adoramos ser alternativos, adoramos o underground, mas isso não significa que queiramos limitar as nossas soluções a um nicho, mas sim alargar o nosso alcance, aumentando a sensibilização e permitindo a privacidade na Web.

Tuta's new illustrations work with contrast of light and shadow and more vibrant colors À esquerda, algumas das ilustrações que Mel Wilken fez para a interface de feedback do utilizador e, à direita, as ilustrações de Feu para a interface de boas-vindas da nossa aplicação.

As nossas novas ilustrações trabalham com o conceito de contraste entre luz e sombra / público e privado, através de sombreamento feito com a técnica do pontilhismo (concentração de pontos escuros para criar sombras). Utilizando também a nossa nova paleta de cores, mais dinâmica.

Fases do rebranding e produtos futuros

A quantidade de branding necessária para um ícone de aplicação é relativa e pode depender de diferentes factores, desde estratégicos a formais. É possível obter consistência visual entre uma marca e os seus produtos de diferentes formas, por exemplo, através de cores, estilo de ilustração e tipografia. Durante o nosso processo de rebranding, apercebemo-nos de que queríamos trazer a nossa marca para os produtos também a um nível de forma. Por este motivo, os ícones dos produtos Tuta derivam da grelha do sinete da marca e têm, em parte, a mesma estrutura. A família de aplicações Tuta distingue-se pelo seu sistema de cores e pelos seus primeiros caracteres, como “M” para correio e “31” para calendário.

The Tuta logo and brand architecture with the new Tuta Mail and Tuta Calendar products Um logótipo concebido para a arquitetura da marca e os seus ícones de produtos.

Estamos atualmente na fase 3 do nosso rebranding, denominada Desenvolvimento da marca. O nosso processo foi dividido em quatro fases, que designámos da seguinte forma:

  1. Auditoria da marca (análise da marca antiga)
  2. Criação da marca (criação do novo logótipo: símbolo, marca nominativa e cores)
  3. Desenvolvimento da marca (estender a nova direção criativa a todos os activos e produtos da marca)
  4. Implementação da marca (adoção de um sistema de design consistente)

O processo de rebranding contou com a participação de toda a equipa em vários workshops, em todas as fases, mas especialmente na fase de Auditoria da Marca.

The Tuta new product ecosystem: Tuta Mail, Tuta Calendar, and more to come. A família está a crescer. O novo ecossistema de produtos da Tuta acaba de começar com o Tuta Mail e o Tuta Calendar.

Sob o lema ” encriptação de tudo e para todos”, o novo ecossistema de produtos Tuta inclui muitas novas funcionalidades. Inaugurando a família com o Tuta Mail e o Tuta Calendar.

Como o próximo passo principal do rebranding, começaremos a trabalhar ainda mais diretamente na UX/UI do produto, ou seja, alinhar as nossas aplicações com a nossa nova direção criativa.

Aqui na Tuta, estamos todos entusiasmados com o crescimento dos produtos do nosso ecossistema encriptado, atendendo às demandas de diferentes pessoas e grupos, como empresas, clínicas médicas, ativistas e jornalistas. Nas próximas postagens de design, entraremos em mais detalhes sobre os próximos lançamentos, mostrando como eles afetam positivamente sua experiência com as soluções criptografadas da Tuta.