Marca Tuta: Abriendo la fuente de nuestro nuevo universo visual

Activar la privacidad. Eso es lo que ofrecemos desde el día 1 de Tuta(nota). Ahora nuestra arquitectura de marca lo refleja en un nuevo ecosistema de aplicaciones.

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

Te despiertas, abres y cierras los ojos y vuelves a dormirte. Suena el despertador, te levantas y sales tambaleándote de la habitación. Afuera todavía está oscuro, ¡clic! Enciendes la luz del pasillo y tus pupilas se contraen. Con los ojos aún cerrados accionas el interruptor de la luz del cuarto de baño y te lavas la cara. ¡Clic! Entras en la cocina y te preparas un café para leer algunos correos electrónicos. La luz del sol inunda la casa, es hora de salir. Abres la puerta que da a la calle, de repente tu espacio privado se convierte en público. En cuanto pisas la acera, las farolas se apagan. ¡Click!


Una metáfora y su potencial narrativo

New Tuta logo, its grid and the brand architecture in a new product ecosystem. ¿Cuántas veces has pulsado un interruptor hoy?

En Tuta, tenemos la misión no sólo de ofrecer aplicaciones, sino también de promover la concienciación sobre la seguridad y la privacidad en la web. Para ello, contar historias con asociaciones figurativas es una poderosa herramienta para despertar a la gente más allá de una explicación técnica y racional.

Probablemente pulsas interruptores tantas veces al día que ni siquiera puedes decir con seguridad cuántas veces, ¿verdad? Lo hacemos de forma tan automática que ya ni nos damos cuenta. La web es un lugar similar. Simplemente no pensamos en ello, pero esperamos que las empresas digitales mantengan nuestros datos a salvo, por ejemplo con encriptación. Eso es lo que hacemos en Tuta y lo que prometemos a todos nuestros usuarios: Control total, en sus manos.

Nuestra identidad de marca, completamente renovada, refleja exactamente eso. Con un símbolo minimalista, lleno de potencial para contar historias, utilizando colores de apoyo más vibrantes, hemos dado a la marca Tuta un aspecto moderno, cálido y enérgico.

Tuta new website building process following the new brand creative direction Tras lanzar el nuevo logotipo, empezamos con Yohei (desarrollador web) dibujando wireframes para el nuevo sitio web.

Paso a paso, pudimos ver la transición de Tuta en una nueva dirección creativa. Primero lanzamos el logotipo -el cambio- en la aplicación y en nuestro antiguo sitio web. Más recientemente, lanzamos nuestro nuevo sitio web con el nuevo eslogan: “Enciende la privacidad”. De este modo, nuestra narrativa visual conectará con la función básica de este dispositivo: encender algo fácilmente. Con las últimas actualizaciones, hemos completado una parte importante de nuestro cambio de marca. Los próximos pasos serán desarrollar la nueva marca directamente en el producto.

Siga leyendo para saber más sobre nuestro proceso creativo, los conceptos que guiaron cada decisión y, lo más importante, cómo esto aportará valor a la UX y la UI de nuestros productos Tuta Mail y Tuta Calendar.

Nueva marca, nuevas analogías

El diseño es un proceso, lo que significa muchas iteraciones y cambios de ruta. Así que tomamos un camino sinuoso -tan sinuoso como el antiguo logotipo- para llegar al nuevo símbolo. En este camino, pasamos por varios conceptos, desde los clichés visuales de la criptografía (llaves, candado, escudo, personajes, etc.), hasta animales como mascotas. En todas estas opciones, seguía faltando algo. De repente, ¡hicimos clic!

Part of the mood board that shaped the creation process for Tuta's new brand Referencias, borradores, estudios (izquierda) y un mood board (derecha) que envolvieron el proceso creativo de la marca Tuta.

Desde Platón -o incluso antes-, las alegorías sobre la luz y la sombra han formado parte de la filosofía y la literatura, siendo el mito de la caverna del propio Platón sólo una de ellas.

El interruptor de la luz que se utiliza a diario encierra un gran potencial. Es un símbolo rico para contar historias, que explora la transición entre espacios públicos y privados a través de la luz y la sombra. Esta relación no es nueva, y en nuestro proceso se inspiró en las ideas de Hannah Arendt, que, como Tuta, nació en Hannover. Arendt dedicó mucho tiempo a reflexionar sobre las esferas privada y pública, tratando la primera como la acogedora sombra de las paredes del hogar -necesaria para que nos recuperemos como individuos- y la segunda como la luz del día que demuestra que podemos vivir en comunidad, el espacio público donde podemos desarrollar nuestro potencial. Para ella, ambos espacios son fundamentales para una vida plena.

Una vida que transcurre enteramente en público, en presencia de los demás, se vuelve, como diríamos, superficial. Aunque conserva su visibilidad, pierde su cualidad de surgir a la vista desde un terreno más oscuro que debe permanecer oculto para no perder su profundidad en un sentido muy real y no subjetivo.

Hannah Arendt, La condición humana.

Graffiti illustrating Hannah Arent (1906-1975) on the same building where she was born in Linden (Hanover) “Nadie tiene derecho a obedecer”. Graffiti en el interior del edificio de Hannover donde nació Hannah Arendt, situado a pocas manzanas de la sede de Tuta. (Obra: Patrik Wolters / Kevin Lasner. Foto: Bernd Schwabe.)

También se detectó que la metáfora del símbolo anterior -un camino hacia una sensación de relajación a través de la codificación- se había vuelto demasiado subliminal para nuestro posicionamiento actual. Con la nueva metáfora, conservamos el credo del derecho a la intimidad, pero de una forma más objetiva/material: el usuario tiene todo el control. Tuta no sólo abre el camino a la privacidad, sino que también es un dispositivo de privacidad cotidiano, sencillo y fácil de usar.

Durante el proceso de auditoría de la antigua marca, nos dimos cuenta de que la mayoría de las empresas tecnológicas -especialmente en el negocio de la encriptación/privacidad- tratan el tema con neutralidad y frialdad, y que podíamos aportar más energía y sentimientos humanos a la nueva identidad.

Además, la nueva imagen debía ajustarse mejor a la voz de nuestra marca, que siempre ha reflejado una fuerte personalidad. Esto significa que nunca renunciamos a la máxima seguridad, ni siquiera si ello supusiera una ventaja comercial. Con esto en mente, la nueva dirección creativa buscaba humanizar y añadir calidez a la comunicación de una lucha por este derecho básico: la posibilidad de elegir la privacidad.

Signet: una poderosa (y no obvia) metáfora visual.

The animation that inverts the Tuta's new signet plays on the storytelling of the brand's tagline, “Turn on Privacy” Espacio para contar historias. Las asociaciones creativas con la criptografía abren espacio para sensibilizar a distintos públicos.

En 2023, cambiamos nuestro nombre de Tutanota a Tuta. El nombre más corto también marcaba un tono minimalista en lo visual, así que buscamos una simplicidad formal que tradujera la misión de Tuta: privacidad accesible para todos. Con esta premisa en mente, y tras una intensa investigación sobre marketing y estrategia de marca, ideamos una representación gráfica de este elemento tan presente en nuestra vida cotidiana.

Estilísticamente, el interruptor Tuta no tiene ningún compromiso de ser ilustrativo, ni mucho menos pretende ser una representación realista de este objeto, sino que es una abstracción minimalista que aísla algunas propiedades y comportamientos de este aparato.

From inspiration in a real switch to geometric abstraction based on the golden ratio grid Representación isométrica de un interruptor basculante. La retícula de construcción del nuevo sello Tuta utiliza una base de rectángulos cuadrados áureos, divididos según la secuencia de fibonacci (Φ = 1.618).

Aunque minimalista e isométrica, esta representación como logotipo pretendía preservar geométricamente el funcionamiento físico del interruptor, de forma que siguiera siendo lo bastante reconocible como para jugar a veces con la narración en animaciones de las posiciones ON / OFF, o “Activar la privacidad” / “Desactivar la vigilancia”, invirtiendo verticalmente la posición de la forma original.

Como los logotipos no pretenden ser ilustraciones realistas, siempre hay lugar para la subjetividad y la interpretación del observador. A veces incluso nos sorprendemos cuando descubrimos que un logotipo que nos gusta representa algo que nunca habíamos imaginado. Por eso a veces nos gustan los logotipos sin estar seguros de lo que representan exactamente: basta con su forma, su composición o la emoción que transmiten para ganarse nuestra simpatía.

Meetings of the rebranding team, creating at the same time the new brand and website De arriba a la izquierda, Matthias (cofundador), Daniel (diseñador), Yohei (desarrollador web), Hanna (responsable de marketing) y Arne (cofundador). Abajo a la izquierda, Brandon y Daniel hablan de las variaciones del logotipo. (Fotos: Lena Britz)

Una de las preocupaciones con el nuevo símbolo era que no se confundiera con algo negativo o con lo que no nos gustaría que se nos asociara. Durante las pruebas de percepción con el público, no se identificó ninguna asociación no deseada.

La facilidad de uso es una cualidad que siempre se busca en Tuta. ¿Qué objeto podría aportar mejor esta noción de elección de la esfera privada con tanta facilidad de uso? El objetivo de ampliar el público y dar acceso a la intimidad a todo el mundo también se tuvo en cuenta a la hora de elegir este símbolo universal. La animación que invierte el nuevo sello de Tuta juega con la narración del eslogan de la marca, “Turn on Privacy”.

Marca denominativa: minúsculas a medida

Una vez finalizado el diseño del símbolo, el reto era pensar en la mejor manera de crear letras tipográficamente armoniosas para el interruptor, completando así el diseño del nuevo logotipo. Utilizar minúsculas, así como tipos de letra inspirados en la cursiva, era una forma de transmitir informalidad, una forma más amigable de presentar esta pequeña palabra con un gran significado: seguro.

Fabio Haag studio typographically polished our first wordmark draft until we arrived at the final letter shape Asociación. A continuación, el estudio Fabio Haag se encargó de explorar nuestro borrador original de marca denominativa, iterando tipográficamente para darle más personalidad y una buena legibilidad.

Como nuestro símbolo es geométrico, lo equilibramos diseñando un tipo que aportara contraste a la composición, ofreciendo formas más orgánicas y expresivas, como la “a”, que se inspiró en la letra “a” manuscrita. Los ángulos diagonales del interruptor llevaron naturalmente el tipo al eje de la cursiva. La marca denominativa Tuta se adaptó a nuestro símbolo, por lo que las diagonales influyeron directamente no sólo en el eje de las letras, sino también en el corte de los vértices y los extremos de la letra “t”. Para esta misión, confiamos en el talento del diseñador tipográfico Fabio Haag, que hizo un trabajo excelente.

The parts that make up the new Tuta brand La anatomía de la nueva marca Tuta.

Colores y fuentes: más matices y contraste

La lucha contra los gigantes tecnológicos, la misión deGoogle, no es fría, y nuestro enfoque de este reto dista mucho de ser tibio. Para conseguir la energía necesaria para esta misión, ampliamos nuestra paleta de colores.

Warmer and more dynamic. A comparison of the brand and website before and after the rebranding, from Tutanota to Tuta De Tutanota a Tuta. Antes frío y monótono (izquierda), ahora cálido y dinámico (derecha).

El antiguo símbolo adolecía de un problema técnico: en tamaños pequeños, el final del camino desaparecía ópticamente, ya que el detalle de la última curva se hacía demasiado pequeño para ser legible. El minimalismo del nuevo símbolo y los espacios más generosos y rectos hacen que el nuevo logotipo sea fácil de leer a tamaños realmente pequeños sin sufrir distorsión de píxeles.

La lectura de la marca denominativa “tuta” ha ganado significativamente en presencia y consistencia, en comparación con la tipografía anterior, que estaba menos conectada con el símbolo y tenía una lectura más fragmentada, al mezclar dos pesos de fuente diferentes.

Nuestro antiguo esquema de colores era frío y monótono, con un solo tono de rojo, apoyado en fondos blancos y grises. Con una gama más dinámica, confiamos mejor en la energía de los colores para impulsar nuestra lucha por la privacidad.

Se ha conservado el clásico color rojo vino y se ha actualizado un nuevo negro cargado de rojo para sustituir al antiguo negro 100%. También hemos añadido más capas de intensidad al color vino original, ahora también con tonos secundarios de colores rojo, magenta y rosa. Los colores saturados, como el rojo vibrante apodado “Fighter”, se combinan con el humor soleado del naranja, el amarillo y la sensación acogedora de los tonos beige y melocotón. Con este “ambiente humano” en mente, hemos querido contrarrestar la impersonalidad que se cernía sobre el blanco y el gris como colores de fondo. Esta decisión está en consonancia con la forma en que vemos nuestra misión, de naturaleza muy humana. Porque para nosotros, la privacidad tiene que ver realmente con las personas, y con su derecho básico.

New corporate typography and colors bring the energy and contrast needed to fight for privacy La energía de los colores y las formas para impulsar nuestra lucha por la privacidad.

También hemos dado el primer paso hacia una mejor tipografía corporativa. Nuestro antiguo tipo de letra era un sistema sans serif. Para mantener la universalidad y el rendimiento, pero aportar un poco más de contraste tipográfico, optamos por Noto en las variantes Sans y Serif SC. Este es el primer paso hacia un sistema tipográfico pensado, sobre todo, para la nueva marca. Y en el nuevo sitio web es posible realizar una jerarquía tipográfica más interesante.

Imágenes: el underground monocromo se une al pop cálido

The images on our website were dark and heavy, now the images transfer warm lights between red and yellow Antes (izquierda), las imágenes eran oscuras y pesadas, trabajadas aplicando efectos monocromos en software. Ahora el color se planifica con luz, bajo la dirección creativa en colaboración con el fotógrafo Alireza Husseini.

Visualmente, nuestras decisiones creativas reflejan una cierta conservación de nuestro look punk-hackish, aportando notas pop a la “banda”, por ejemplo en los nuevos colores e ilustraciones. Nuestra marca tiene ahora una imaginería auténtica y evitaremos en lo posible las bases de datos de imágenes genéricas. Nuestro equipo es el que ilustra nuestros valores, y para ello trabajamos con fotógrafos locales, como Alireza Husseini, que hizo las fotos del equipo para la nueva web. Las ilustraciones y la iconografía seguirán la misma línea autoral, estamos trabajando con ilustradores locales, como Mel Wilken de Hannover, e internacionales, como Feu que es de Brasil.

Tuta siempre ha destacado por ser una marca más humana entre las empresas tecnológicas. Tanto en el sentido de sus valores menos comerciales como en su aspecto más amigable reflejado en ser un pequeño colectivo de personas con una misión atrevida que desafía la lógica de las grandes tecnológicas.

Fue una decisión entre Tuta y el otro chico de alrededor. Navegué por cada sitio web para hacerme una idea; preferí la amabilidad de Tuta y su cultura orientada a compartir conocimientos a la otra, que parecía más comercial. El lado humano de Tuta me hizo decantarme por esa opción: la humanidad por encima del ánimo de lucro. No me ha decepcionado”.

cdrc @cdrc@tux.social, 10 de marzo de 2024

Tuta keeps the alternative-punk-underground look mixed with pop notes La película Trainspotting y una obra del artista Banksy (izquierda), la antigua página web (arriba) y los marcos en la pared de nuestra oficina con miembros del equipo (abajo).

El aspecto de estarcido que ha estado presente desde la marca anterior aporta definitivamente un valor underground que encaja con el posicionamiento de revolución de la privacidad de Tuta.

En esta postura de protesta punk frente al mercado, hemos intentado conservar la esencia de este look underground, como las ilustraciones de plantillas del equipo, porque refleja la posición aún underground de lucha contra los gigantes corporativos. Nos encanta ser una empresa pequeña, nos encanta ser alternativos, nos encanta lo underground, pero eso no significa que queramos limitar nuestras soluciones a un nicho, sino ampliar nuestro alcance concienciando y haciendo posible la privacidad en la red”.

Tuta's new illustrations work with contrast of light and shadow and more vibrant colors A la izquierda, algunas de las ilustraciones que Mel Wilken hizo para la interfaz de comentarios de los usuarios, y a la derecha, las ilustraciones de Feu para la interfaz de bienvenida de nuestra aplicación.

Nuestras nuevas ilustraciones trabajan con el concepto de contraste entre luz y sombra / público y privado, mediante sombreados realizados con la técnica del puntillismo (concentración de puntos oscuros para crear sombras). También utilizamos nuestra nueva paleta de colores, más dinámica.

Fases de rebranding y futuros productos

El grado de branding que necesita el icono de una aplicación es relativo, y puede depender de distintos factores, desde estratégicos hasta formales. Aportar coherencia visual entre una marca y sus productos es posible de diferentes maneras, por ejemplo a través de los colores, el estilo de las ilustraciones y la tipografía. Durante nuestro proceso de cambio de marca, nos dimos cuenta de que queríamos llevar nuestra marca a los productos también a nivel de forma. Por eso, los iconos de los productos Tuta derivan de la cuadrícula del sello de la marca y tienen en parte la misma estructura. La familia de aplicaciones Tuta se distingue por su sistema de colores y sus primeros caracteres, como la “M” de correo y el “31” de calendario.

The Tuta logo and brand architecture with the new Tuta Mail and Tuta Calendar products Un logotipo diseñado para la arquitectura de la marca y sus iconos de producto.

Actualmente nos encontramos en la fase 3 de nuestro rebranding, denominada Desarrollo de Marca. Nuestro proceso se ha dividido en cuatro fases que hemos denominado de la siguiente manera:

  1. Auditoría demarca (análisis de la marca antigua)
  2. Creación de la marca (creación del nuevo logotipo: símbolo, marca denominativa y colores)
  3. Desarrollo de la marca (extensión de la nueva dirección creativa a todos los activos y productos de la marca)
  4. Implantación de la marca (adopción de un sistema de diseño coherente)

El proceso de cambio de marca contó con la participación de todo el equipo en varios talleres, en todas las fases, pero especialmente en la fase de Auditoría de Marca.

The Tuta new product ecosystem: Tuta Mail, Tuta Calendar, and more to come. La familia crece. El nuevo ecosistema de productos de Tuta acaba de empezar con Tuta Mail y Tuta Calendar.

Bajo el lema encriptación de todo y para todos, llegan muchas novedades con el nuevo ecosistema de productos de Tuta. Inaugurando la familia con Tuta Mail y Tuta Calendar.

Como siguiente paso principal del cambio de marca, empezaremos a trabajar aún más directamente en la UX/UI del producto, es decir, alineando nuestras aplicaciones con nuestra nueva dirección creativa.

En Tuta estamos entusiasmados con el crecimiento de nuestros productos de ecosistema cifrado, que satisfacen las demandas de diferentes personas y grupos, como empresas, clínicas médicas, activistas y periodistas. En los próximos posts sobre diseño, entraremos en más detalles sobre los próximos lanzamientos, mostrando cómo impactan positivamente en tu experiencia con las soluciones encriptadas de Tuta.