На гребне креативной волны. Как мы делали сайт для агентства Trendsurfers

К нам обратилось агентство Trend Surfers с запросом обновить текущий сайт. Ребята занимаются интерактивным маркетингом: работают с нейросетями и web-AR, разрабатывают игры в мессенджерах и отдельные приложения, делают запоминающиеся спецпроекты и промо.

Компания очень сильно выросла: команда стала больше, проекты амбициознее, а заказчики масштабнее. Сейчас агентство работает с топами рынка, такими как Яндекс, Авито, Сбер и VK. А по старому сайту казалось, что Trend Surfers — всё-ещё маленькая студия креатива.

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

Что сделали?

— Проанализировали конкурентов и потребности заказчиков, а также погрузились в ДНК и процессы компании

— Сформулировали три креативные концепции

— Написали тексты в новой тональности с акцентом на прорывных решениях и экспертности

— Отразили идеи выбранной концепции в дизайне

— Сделали адаптивную вёрстку на Тильде

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

Вот и на созвоне с ключевыми лицами агентства Trend Surfers мы нащупали важные опорные точки: создать образ «биггейм»-агентства, создать и транслировать самобытное позиционирование, наглядно показать релевантный опыт и подкрепить идеи выгодами и гарантиями для клиента.

«Сейчас нас знают как разработчиков, создателей ботов в Телеге и так далее. Нам важно создать впечатление, что мы крутые и у нас качественные кейсы, чтобы клиент подумал: «Я и не знал, что так можно сделать», а мы такое сделать можем». Богдан Ломакин-Мороз, партнёр и CEO Trend Surfers

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

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

Trend Surfers первые придумывают новые механики в области интерактивного маркетинга и внедряют их на рынок, задавая планку для конкурентов в нише. К тому же, весь процесс генерируется исключительно силами инхаус-команды. Собственно, каждая концепция нацелена отражать индивидуальность и инновационность агентства.

1. Большая игра

Компания выросла, и те смыслы, которые она транслировала ранее, уже стали неактуальны.

В концепции «Большая игра» мы позиционируем агентство как лидера в индустрии. Теперь компания выглядит внушительно, превосходит своих конкурентов благодаря прорывным решениям и технологиям. Это даёт им право громко говорить о себе.

В этой концепции мы показываем серьёзность за счёт отсылок к реализованным кейсам — это маркер опыта. Мы демонстрируем, как компания решает нестандартные задачи бизнеса, подчеркивая, что основная специализация — сложные проекты.

Со стороны текстов мы не закладываем большое количество информации: всё сбалансировано, как в коммуникации, так и в UX-дизайне. Оформление минималистичное и светлое, внимание привлекают только необычные ховеры и анимации. 

2. Трендсерферы

Изюминка этой концепции в том, что тексты и визуал становятся ярче и сложнее с погружением в сайт.

В ней мы представляем агентство как трендсеттера в своей нише — команда всегда первыми чувствуют тренды и задаёт их. Развитие сайта теперь напоминает саундтрек: начинается с интро, уходит в кульминацию и ведёт к развязке.

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

К тому моменту, как аудитория спускается к презентации кейсов, сайт «разогревается» и меняет тональность и цвета на более смелые и дерзкие. Эта концепция является золотой серединой и балансом приёмов. Она подходит как под более консервативных, так и требовательных к креативу заказчиков.

3. Великие комбинаторы

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

В дизайне у нас появляется «живой» персонаж, который ведёт аудиторию через весь сайт и рассказывает что-то интересное. Цветовую палитру решили выдержать в цветах брендбука, а анимации — настроить под фирменные элементы. А ещё подумали добавить всяких отсылок к игральным костям, кубику Рубика, крестикам-ноликам, консолям и другим игровым атрибутам.

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

«Мне особенно нравятся концепции, в которые удается зашить не только сеттинг и вайб, но и полноценную механику взаимодействия с аудиторией. Вдвойне приятно, что подобные геймификации мы смогли реализовать в концепции для геймификаторов». Егор Митькин, бренд-шеф «е—б эдженси»

Основная задача при работе с текстами для сайта заключалась в поиске баланса между ультра-профессионализмом, технической подкованностью и мощной креативностью Трендсёрферов.

Клиенты у ребят самые разные: онлайн-площадки, розничные сети, банки и даже промышленные компании. Угодить нужно всем. Уйдём в неформальность — потеряем важную для крупных игроков рынка серьёзность, а дадим излишнюю экспертность — заскучают последователи инноваций и идейности.

В текстах мы комбинировали метафоры будущего, дерзкую тональность и рациональные преимущества. Получилось трендовое и яркое звучание сайта, которое вобрало в себя все ключевые смыслы и идеи прогрессивной компании. А в само процессе генерации текстов слоган нового позиционирования агентства: «В будущее — играючи».

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

Концепция «Трендсерферы», которую выбрал заказчик, подразумевала развитие от спокойной презентации к кульминации. Это означало, что мы могли себе позволить немного провокации.

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

Идея 1: «Путешествие по 3D-мирам»

Пользователи перемещаются по 3D-пространству: движущиеся «стены», проваливание из одного блока в другой, объём. Словом, это должно быть путешествие по сайту в стиле приключенческих игр, где нужно пройти сюжет до конца.

Идея 2: «Проводник по сайту»

В дизайне пользователя ведёт «проводник» — элемент, который взаимодействует с блоками сайта, прыгает по плашкам и иллюстрирует путь.

Идея 3: «Преимущества компании как игра»

Блок преимуществ компании мы решили представить в виде четырёх суперсил, которые, как в популярной игре «крестики-нолики», с помощью анимации выстраиваются в одну линию и образуют мощное победное комбо.

Идея 4: «Комната с проектами»

Блок с кейсами мы тоже решили подать нестандартно — в виде 3D-комнаты, в которой пол и стены выложены лучшими проектами агентства. Проваливаясь в эту комнату, пользователи получают возможность подробнее изучить кейсы и заказчиков, с которыми компания работала.

Идея 5: «Прячем игровые пасхалки по сайту»

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

Мы хотели, чтобы агентство Trend Surfers точно заметили, поэтому буквально каждый блок сайта кричит об этом.

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

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

«Вау, круто! Но как мы это реализуем на Тильде?»

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

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

Наш «проводник» по сайту появляется в разных местах сайта через анимированные подсказки. Так, движение курсора пользователя на главном экране сопровождается шоурилом агентства.

Импровизированная комната с кейсами всё же осталась, но перешла в 2D-реальность.

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

Путешествие по 3D-вселенной мы реализовали, но лишь частично. Ощущение перехода в другую реальность создаётся с помощью крутящейся фигуры, которая заполняет собой весь экран и меняет светлую тему на темную.

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

Мы получили крутой фидбек от заказчика — ребятам из агентства сайт очень понравился. Уже приевшийся и устаревший сайт сменился эффективным инструментом для демонстрации и продажи услуг компании. Хотя это больше чем просто сайт, это полноценный вербальный и визуальный манифест компании.

После запуска проект попал в подборку лучших проектов на Тильде.