Ребренд Tuta: Открываем источник нашей новой визуальной вселенной

Включите конфиденциальность. Это то, что мы предлагаем с первого дня существования Tuta(nota). Теперь архитектура нашего бренда отражает это в новой экосистеме приложений.

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

Вы просыпаетесь, глаза открываются и закрываются - и снова засыпаете. Будильник взвизгивает, вы встаете и, пошатываясь, выходите из комнаты. На улице еще темно, щелк! Вы включаете свет в коридоре, ваши зрачки сужаются. С закрытыми глазами вы щелкаете выключателем в ванной и умываете лицо. Щелк! Вы проходите на кухню, готовите себе кофе и читаете электронную почту. Солнечный свет заливает дом, пора уходить. Вы открываете дверь на улицу, и внезапно ваше личное пространство сменяется общественным. Как только вы ступаете на тротуар, загораются фонари. Щелк!


Метафора и ее сюжетный потенциал

New Tuta logo, its grid and the brand architecture in a new product ecosystem. Сколько раз вы сегодня щелкали выключателем?

В компании Tuta мы стремимся не только предлагать приложения, но и повышать осведомленность о безопасности и конфиденциальности в Интернете. Для этого рассказывание историй с образными ассоциациями - мощный инструмент, позволяющий пробудить в людях не только технические и рациональные объяснения.

Вы, наверное, щелкаете переключателями столько раз в день, что даже не можете точно сказать, сколько раз, верно? Мы делаем это настолько автоматически, что уже даже не осознаем этого. Веб - похожее место. Мы просто не задумываемся об этом, но ожидаем, что цифровые компании будут хранить наши данные в безопасности, например, с помощью шифрования. Это то, что мы в Tuta делаем и что мы обещаем всем нашим пользователям: Полный контроль, в ваших руках.

Наш полностью обновленный фирменный стиль отражает именно это. С минималистичным символом, полным потенциала для повествования, с использованием более ярких вспомогательных цветов мы придали бренду Tuta современный, теплый и энергичный вид.

Tuta new website building process following the new brand creative direction После запуска нового логотипа мы вместе с Йохеем (веб-разработчиком) начали рисовать эскизы нового сайта.

Шаг за шагом вы могли видеть переход Tuta в новое творческое русло. Сначала мы запустили логотип - переключатель - в приложении и на нашем старом сайте. Совсем недавно мы запустили наш новый сайт с новым теглайном: “Включи приватность”. Таким образом, наше визуальное повествование будет связано с основной функцией этого устройства: легко включать что-либо. С последними обновлениями мы завершили важную часть нашего ребрендинга. Следующими шагами будет разработка нового бренда непосредственно в продукте.

Читайте далее, чтобы узнать больше о нашем творческом процессе, концепциях, которыми руководствовались при принятии каждого решения, и, самое главное, о том, как это повлияет на UX и UI наших продуктов Tuta Mail и Tuta Calendar.

Новый бренд, новые аналогии

Дизайн - это процесс, а значит, множество итераций и изменений маршрута. Поэтому мы выбрали извилистый путь - такой же извилистый, как и старый логотип, - чтобы прийти к новому символу. На этом пути мы перебирали различные концепции, начиная с визуальных клише криптографии (ключи, замок, щит, символы и т. д.) и заканчивая животными в качестве талисманов. Во всех этих вариантах все равно чего-то не хватало. И вдруг раздался “щелчок!“.

Part of the mood board that shaped the creation process for Tuta's new brand Референсы, черновики, исследования (слева) и доска настроений (справа), на которой отразился творческий процесс создания бренда Tuta.

Со времен Платона - или даже раньше - аллегории о свете и тени были частью философии и литературы, платоновский миф о пещере - лишь одна из них.

Выключатель света, которым мы пользуемся каждый день, таит в себе огромный потенциал. Это богатый сюжетный символ, исследующий переход между общественным и частным пространством через свет и тень. Эта взаимосвязь не нова, и в нашем процессе она была вдохновлена идеями Ханны Арендт, которая, как и Тута, родилась в Ганновере. Арендт долго размышляла о частной и общественной сферах, рассматривая первую как уютную тень стен дома - необходимую нам, чтобы встать на ноги как личности, - а вторую как дневной свет, доказывающий, что мы можем жить в обществе, общественное пространство, где мы можем раскрыть свой потенциал. По ее мнению, оба пространства являются основополагающими для полноценной жизни.

Жизнь, проведенная исключительно на публике, в присутствии других людей, становится, как мы бы сказали, поверхностной. Сохраняя видимость, она теряет свойство подниматься из некоего темного пространства, которое должно оставаться скрытым, чтобы не потерять глубину в очень реальном, не субъективном смысле.

Ханна Арендт, “Человеческое состояние”.

Graffiti illustrating Hannah Arent (1906-1975) on the same building where she was born in Linden (Hanover) “Никто не имеет права подчиняться”. Граффити на здании в Ганновере, где родилась Ханна Арендт, расположенном в нескольких кварталах от штаб-квартиры Tuta. (Художественное оформление: Patrik Wolters / Kevin Lasner. Фото: Bernd Schwabe).

Также было выявлено, что метафора предыдущего символа - путь к расслаблению через шифрование - стала слишком подсознательной для нашего нынешнего позиционирования. С новой метафорой мы сохраняем кредо права на частную жизнь, но в более объективной/материальной форме: пользователь полностью контролирует ситуацию. Tuta не только открывает путь к приватности, но и является повседневным устройством приватности, простым и удобным в использовании.

В процессе ревизии старого бренда мы поняли, что большинство технологических компаний, особенно в сфере шифрования/приватности, относятся к этой теме нейтрально и холодно, и что мы могли бы привнести в новый образ больше энергии и человеческих чувств.

Новый образ также должен лучше соответствовать голосу нашего бренда, который всегда отражал сильную индивидуальность. Это означает, что мы никогда не откажемся от максимальной безопасности, даже если это будет иметь коммерческое преимущество. Исходя из этого, новое креативное направление стремилось очеловечить и добавить теплоты в сообщение о борьбе за это основное право: возможность выбора приватности.

Знак: мощная (и не очевидная) визуальная метафора

The animation that inverts the Tuta's new signet plays on the storytelling of the brand's tagline, “Turn on Privacy” Пространство для повествования. Творческие ассоциации с криптографией открывают пространство для повышения осведомленности различных аудиторий.

В 2023 году мы изменили наше название с Tutanota на Tuta. Более короткое название также задавало минималистский тон в визуальном оформлении, поэтому мы стремились к формальной простоте, которая бы отражала миссию Tuta: доступная конфиденциальность для всех. Именно исходя из этого, после интенсивного исследования маркетинговой и брендинговой стратегии, мы придумали графическое изображение этого предмета, который так часто встречается в нашей повседневной жизни.

Стилистически переключатель Tuta не стремится быть иллюстративным, и тем более не стремится быть реалистичным изображением этого объекта, а скорее является минималистской абстракцией, которая выделяет некоторые свойства и поведение этого устройства.

From inspiration in a real switch to geometric abstraction based on the golden ratio grid Изометрическое изображение кулисного переключателя. Строительная сетка новой печатки Tuta использует основу из золотых квадратных прямоугольников, разделенных в соответствии с последовательностью Фибоначчи (Φ = 1,618).

Несмотря на минимализм и изометричность, это представление в виде логотипа стремилось геометрически сохранить физическое функционирование выключателя - в достаточно узнаваемом виде, чтобы иногда играть с сюжетом в анимации положений ON / OFF, или “Turn ON Privacy” / “Turn OFF Surveillance”, вертикально инвертируя исходное положение формы.

Поскольку логотипы не претендуют на звание реалистичных иллюстраций, в них всегда есть место субъективности и интерпретации зрителя. Иногда мы даже удивляемся, когда обнаруживаем, что понравившийся нам логотип представляет собой нечто, чего мы никогда не представляли. Именно поэтому мы иногда любим логотипы, не будучи уверенными в том, что именно они представляют, - одной их формы, композиции или эмоций, которые они передают, может быть достаточно, чтобы завоевать нашу симпатию.

Meetings of the rebranding team, creating at the same time the new brand and website Сверху слева направо: Маттиас (соучредитель), Даниэль (дизайнер), Йохей (веб-разработчик), Ханна (руководитель отдела маркетинга) и Арне (соучредитель). Внизу слева Брэндон и Дэниел обсуждают варианты логотипа. (Фото: Лена Бритц)

При создании нового символа мы стремились к тому, чтобы его не путали с чем-то негативным или тем, с чем мы не хотели бы ассоциироваться. В ходе тестов на восприятие с аудиторией никаких нежелательных ассоциаций выявлено не было.

Простота использования - это качество, которое всегда ценится в компании Tuta. Какой предмет может лучше воплотить идею выбора частной сферы с таким удобством использования? При выборе этого универсального символа учитывалась также цель расширить аудиторию и предоставить доступ к частной жизни каждому. Анимация, инвертирующая новую печатку Tuta, обыгрывает сюжет теглайна бренда “Включи приватность”.

Словесный знак: набранный на заказ строчный шрифт

После того как мы закончили работу над дизайном символа, нам предстояло придумать, как лучше всего создать типографски гармоничные буквы для переключателя, тем самым завершив дизайн нового логотипа. Использование строчных букв, а также шрифтов, вдохновленных скорописью, позволило передать неформальность, более дружелюбно представить это маленькое слово с большим значением: secure.

Fabio Haag studio typographically polished our first wordmark draft until we arrived at the final letter shape Партнерство. Студии Fabio Haag было поручено проработать наш первоначальный проект словесного знака и провести типографические итерации, чтобы придать ему больше индивидуальности и сделать его хорошо читаемым.

Поскольку наш символ геометричен, мы уравновесили его, разработав шрифт, чтобы привнести контраст в композицию, предлагая более органичные и выразительные формы, такие как “a”, которая была вдохновлена рукописной буквой “a”. Диагональные углы переключателя естественным образом привели шрифт к курсивной оси. Словесный знак Tuta был адаптирован для нашего символа, поэтому диагонали напрямую повлияли не только на оси букв, но и на срез вершин и концов буквы “t”. В этой задаче мы положились на талант шрифтового дизайнера Фабио Хаага, который отлично справился с задачей.

The parts that make up the new Tuta brand Анатомия нового бренда Tuta.

Цвета и шрифты: больше оттенков и контраста

Борьба с технологическими гигантами, миссия deGoogle, не является холодной, и наш подход к этой задаче далеко не теплый. Чтобы получить энергию, необходимую для выполнения этой миссии, мы расширили нашу цветовую палитру.

Warmer and more dynamic. A comparison of the brand and website before and after the rebranding, from Tutanota to Tuta От “Тутанота” до “Тута”. Ранее холодный и однотонный (слева), теперь теплый и динамичный (справа).

Старый символ страдал от технической проблемы: при малых размерах конец пути оптически исчезал, так как детали последней кривой становились слишком мелкими, чтобы быть разборчивыми. Минимализм нового символа и более щедрые, прямые промежутки делают новый логотип легко читаемым при очень маленьких размерах, не страдая от пиксельных искажений.

Прочтение словесного знака “tuta” стало более выразительным и последовательным, по сравнению с типографикой, которая ранее была менее связана с символом и имела более фрагментарное прочтение, поскольку в ней смешивались два шрифта разного веса.

Наша старая цветовая схема была холодной и однотонной, в ней использовался только один оттенок красного, поддерживаемый белым и серым фоном. Благодаря более динамичному диапазону мы можем лучше использовать энергию цветов в борьбе за конфиденциальность.

Классический винно-красный цвет был сохранен, а на смену старому 100-процентному черному пришел новый черный с добавлением красного. Мы также добавили больше слоев интенсивности к оригинальному винному цвету, теперь также с вторичными оттенками красного, пурпурного и розового цветов. Насыщенные цвета, такие как яркий красный, получивший название “Истребитель”, сочетаются с солнечным настроением оранжевого, желтого и ощущением уюта бежевых и персиковых тонов. Именно с таким “человеколюбивым настроением” мы стремились противостоять безликости, которая витала над белым и серым цветами фона. Это решение соответствует тому, как мы видим нашу миссию - очень человечной. Ведь для нас частная жизнь - это люди и их основные права.

New corporate typography and colors bring the energy and contrast needed to fight for privacy Энергия цветов и форм помогает нам бороться за приватность.

Мы также сделали первый шаг к улучшению корпоративной типографики. Наш старый шрифт был системным без засечек. Чтобы сохранить универсальность и производительность, но при этом привнести немного больше типографического контраста, мы выбрали Noto в вариантах Sans и Serif SC. Это первый шаг к продумыванию типографической системы, особенно для нового бренда. А на новом сайте, возможно, будет реализована более интересная типографическая иерархия.

Изображения: монохромный андеграунд и теплый поп

The images on our website were dark and heavy, now the images transfer warm lights between red and yellow Раньше (слева) изображения были темными и тяжелыми, над ними работали, применяя монохромные эффекты в программном обеспечении. Теперь цвет планируется с помощью света, под творческим руководством в партнерстве с фотографом Алирезой Хуссейни.

Визуально наши творческие решения отражают определенное сохранение нашего панк-хакерского образа, привнося в “группу” поп-ноты, например, в новых цветах и иллюстрациях. Наш бренд теперь имеет аутентичные образы, и мы будем избегать базы типовых изображений, насколько это возможно. Наша команда - это тот, кто иллюстрирует наши ценности, и для этого мы работаем с местными фотографами, например с Алирезой Хуссейни, который сделал фотографии команды для нового сайта. Иллюстрации и иконография будут следовать той же авторской линии, мы работаем с местными иллюстраторами, такими как Мел Вилкен из Ганновера, и международными, например, с Феу из Бразилии.

Tuta всегда выделялась тем, что была более человечным брендом среди технологических компаний. И в смысле меньшей коммерческой ценности, и в смысле более дружелюбного взгляда, отражающего принадлежность к небольшому коллективу людей с дерзкой миссией, которая бросает вызов логике больших технологий.

Это было решение между Tuta и другими ребятами. Я просмотрел каждый сайт, чтобы прочувствовать ситуацию; я предпочел дружелюбие Tuta и культуру, ориентированную на обмен знаниями, другой компании, которая казалась более коммерческой. Человеческая сторона Tuta заставила меня пойти этим путем - человечность, а не выгода, и я не разочаровался”.

cdrc @cdrc@tux.social, Mar 10, 2024

Tuta keeps the alternative-punk-underground look mixed with pop notes Фильм “Трейнспоттинг” и работа художника Бэнкси (слева), старый веб-сайт (вверху) и рамки на стене нашего офиса с членами команды (внизу).

Трафаретный стиль, присутствовавший у предыдущего бренда, определенно привносит андеграундную ценность, которая соответствует позиционированию Tuta как революции в области приватности.

В этом панковском протесте против рынка мы постарались сохранить суть этого андеграундного стиля, например, трафаретные иллюстрации команды, потому что они отражают все еще подпольную позицию борьбы с корпоративными гигантами. Нам нравится быть маленькой компанией, нам нравится быть альтернативными, нам нравится андеграунд, но это не значит, что мы хотим ограничить наши решения одной нишей, а скорее расширить сферу своего влияния, повышая осведомленность и обеспечивая конфиденциальность в Интернете”.

Tuta's new illustrations work with contrast of light and shadow and more vibrant colors Слева иллюстрации Мела Вилкена для интерфейса обратной связи с пользователем, а справа - иллюстрации Феу для интерфейса приветствия нашего приложения.

Наши новые иллюстрации работают с концепцией контраста между светом и тенью / публичным и частным, с помощью затенения, выполненного в технике пуантилизма (концентрация темных точек для создания теней). Также мы используем новую, более динамичную цветовую палитру.

Этапы ребрендинга и будущие продукты

Необходимость брендирования иконки приложения относительна и может зависеть от различных факторов, от стратегических до формальных. Обеспечить визуальную согласованность между брендом и его продуктами можно разными способами, например, с помощью цветов, стиля иллюстраций и типографики. В процессе ребрендинга мы поняли, что хотим донести наш бренд до продуктов и на уровне формы. По этой причине иконки продуктов Tuta заимствованы из сетки фирменного знака и частично имеют ту же структуру. Семейство приложений Tuta отличают цветовая система и первые символы, такие как “M” для почты и “31” для календаря.

The Tuta logo and brand architecture with the new Tuta Mail and Tuta Calendar products Логотип разработан для архитектуры бренда и его продуктовых иконок.

В настоящее время мы находимся на третьем этапе ребрендинга, который называется “Развитие бренда”. Наш процесс разделен на четыре этапа, которые мы назвали следующим образом:

  1. Аудит бренда (анализ старого бренда)
  2. Создание бренда (создание нового логотипа: символа, словесного знака и цветов)
  3. Развитие бренда (распространение нового творческого направления на все активы и продукты бренда)
  4. Внедрение бренда (внедрение последовательной системы дизайна).

Процесс ребрендинга предполагал участие всей команды в нескольких семинарах, на всех этапах, но особенно на этапе аудита бренда.

The Tuta new product ecosystem: Tuta Mail, Tuta Calendar, and more to come. Семья растет. Новая экосистема продуктов Tuta только началась с Tuta Mail и Tuta Calendar.

Под девизом “Шифрование всего и для всех” в новой экосистеме продуктов Tuta появится множество новых функций. Открытие семьи с помощью Tuta Mail и Tuta Calendar.

В качестве следующего основного шага ребрендинга мы начнем еще больше работать непосредственно над UX/UI продуктов, то есть приводить наши приложения в соответствие с нашим новым творческим направлением.

В Tuta мы все рады росту наших продуктов для шифрованной экосистемы, удовлетворяющих запросы различных людей и групп, таких как бизнес, медицинские клиники, активисты и журналисты. В следующих постах мы более подробно расскажем о предстоящих релизах и покажем, как они влияют на ваш опыт работы с зашифрованными решениями Tuta.