К нам обратилось агентство 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-вселенной мы реализовали, но лишь частично. Ощущение перехода в другую реальность создаётся с помощью крутящейся фигуры, которая заполняет собой весь экран и меняет светлую тему на темную.

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

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

Арт-директор — Мария Ищенко
Креативный директор — Елена Бобина
Руководитель проекта — Стас Гринин
Брендшеф — Егор Митькин
Лид-редактор — Анастасия Бобровская
Веб-дизайнер — Алёна Ильина, Полина Кондратьева
Лид-верстальщик — Илья Потапенко