Далее 20 лет: вспомнили, что мы делали, когда появился YouTube, первый фитнес-браслет и Disney в России
Как мы пришли к концепции «Ранее», «Далее» и «Более»
Готовя юбилейный лендинг, мы ставили перед собой цель не просто перечислить наши достижения за 20 лет, а сделать сайт рассказом о том, как менялось агентство, как события внутри Далее были вписаны в глобальный контекст, к чему мы пришли в результате. Нам также было важно, чтобы лендинг был интересен не только нам самим, но и клиентам, партнерам, комьюнити.
Сначала мы решили вспомнить, что интересного происходило на протяжении этих 20 лет в мире и в нашей компании, и найти связь между этими событиями.
В процессе пришли к идее разделить историю и сам сайт на три блока: «Ранее», «Далее» и «Более» и показать жизнь агентства через призму прошлого, настоящего и будущего.
Родилась эта идея из нашей внутренней кухни. Наша команда часто ходит на квизы в Москве, обычно мы там участвуем под названием «Далее», но когда набирается побольше людей, появляется вторая команда — «Ранее». Эти слова, как и сочетание «Далее/Более или Больше» часто слышатся в нашем кругу в значении «дальше только лучше», поэтому их использование было очень естественным и имело самое прямое отношение к нашей агентской жизни.
«Ранее» — это наше прошлое, самые истоки и то, с чего все начиналось. «Далее» — это настоящее, то, чем мы живем и дышим прямо сейчас. А «Более» — это запрос в космос, наш взгляд в будущее и размышления о том, что ждет нас впереди.
После того как мы обсудили эту идею с основателями и PR-командой, концепция обрела конкретную фактуру и наполнение: родилась идея сторителлинга, который ведет от 2005 года к текущему моменту и немного заглядывает в будущее.
Дизайн-решение и концепт лендинга и каждого блока
Мы сразу заложили идею, что каждый раздел должен визуально иметь свое уникальное настроение, обладать запоминающимся характером и отражать актуальные тренды, которые люди встречают в повседневной жизни в соцсетях.
Ранее — история Далее в контексте мира
Здесь у нас был простор для креатива — мы ушли в ретро-эстетику: подобрали соответствующие цвета, пиксельную графику, специально состаривали картинки, чтобы они смотрелись менее современно. Сделали окошки в стиле старых окошек Windows, подобрали шрифты, которые отсылали к той эпохе.
Контент для блока собирали из событий, начиная с 2005 года по сегодняшний день. В результате получился объемный список по разным направлениям: медиакультура, тренды в соцсетях, спорт, политика.
Затем фильтровали события вручную. Искали те, которые помогли бы подчеркнуть, что Далее развивалось вместе с миром. Например, в олимпиадном 2014 году мы разрабатывали сайты для Samsung и Ростелекома, приуроченные к Олимпийским играм.
При выборе событий мы руководствовались и собственными ощущениями — оценивали, что будет интересно аудитории и вызовет отклик. Так пользователи лендинга могут вспомнить, в каком году появились Angry Birds, был выпущен первый фитнес-браслет, или когда Tik Tok завоевал мир.
Собирали истории и фотографии внутри компании.
Устраивали встречи с руководством, лидами юнитов и сотрудниками, которые работали в компании с самого началам (или почти с самого начала). Узнавали у них про важные вехи развития компании, знаковые проекты.
С фото тоже пришлось потрудиться. С 2019 года корпоративные фотографии собирают и хранят HR, а все, что было до, нужно было искать у сотрудников. Нашлись даже бумажные фото! У Андрея Лебедева, СЕО Скотча, мы взяли и отсканировали целый фотоальбом.
Далее — то, что важно для нас сегодня
Для «Далее» мы старались быть ближе к нашему основному сайту, чтобы воспроизвести узнаваемый стиль.
В этом разделе рассказали о том, как живет компания. Хотелось сделать это интересно и с юмором. Например, на странице есть интерактив «Что было далее», основанный на концепте шоу ЧБД: пользователи знакомятся с реальными историями из жизни агентства, могут придумать свой финал или узнать как все сложилось в реальной жизни.
Еще до публикации лендинга мы размещали эти истории в своем ТГ-канале и просили подписчиков придумывать альтернативные концовки. Сами истории тоже появились в результате интервью с сотрудниками. Конечно, не все что мы узнали в процессе бесед, прошло цензуру и вышло в паблик.
На этой странице мы также собрали основные факты и цифры о компании, куда вошли не только «серьезные» показатели вроде количества клиентов, проектов, городов, в которых живут и работают наши сотрудники, но и такие занимательные факты как количество романтических парочек, которое образовались в компании, или соотношение домашних животных на созвонах (кошки, конечно, победили).
Более — взгляд в будущее
Для «Более» мы позволили себе заглянуть в будущее и представить, как мог бы выглядеть наш стиль лет через двадцать — более емко, футуристично и смело.
Сам раздел получился полностью интерактивным. Пользователи лендинга могут получить ответы на волнующие их вопросы от нашего маскота — осьминога, который стал живым существом с возможностями ИИ и может максимально точно предсказывать будущие события.
Маскот Октик
В этом году у Далее появился маскот — осьминог Октик. Он победил в конкурсе маскотов, которые рисовали сотрудники компании. Щупальца осьминога — это метафора Далее: за последние два года продакшен вырос в группу компаний, внутри которой несколько самостоятельных агентств с разной специализацией в диджитале. Маскота нарисовал и представил Павел Крыловской, дизайнер Далее. Новому герою пришлось пройти несколько этапов отбора и народное голосование.
Октик стал связующим звеном и проводником между всеми разделами. Мы хотели, чтобы он был консистентным элементом, который присутствует везде, объединяя три разных мира — прошлое, настоящее и будущее — в одну целостную историю.
Техническая реализация
Для реализации мы выбрали Webflow, и на то было несколько важных причин. Во-первых, мы не хотели задействовать ресурсы разработки, чтобы не отвлекать их от основных проектов. Задача была решена исключительно силами дизайнеров, что оказалось и быстрее, и эффективнее. Во-вторых, это дало нам огромную гибкость: мы могли сразу тестировать дизайн-гипотезы прямо на месте, не гоняя бесконечные циклы между дизайнерами и разработчиками.
Для внутренних историй и спецпроектов, где не требуется сложная архитектура или сбор данных, no-code решения подобные Webflow — оптимальный выбор. Они позволяют укладываться в бюджет и сильно ускоряют time-to-market. Не нужно готовить детальные прототипы и описывать каждую мелочь — мы работали сразу на лендинге, что сделало процесс куда более целостным и результативным.
Что касается анимаций, то здесь вся работа была сделана вручную. Яркие примеры — это интерактивный Майк из «Офиса» — кумир миллениалов, который вращает глазами вслед за курсором, или взрывающиеся Angry Birds.
Чтобы анимации были интерактивными и с ними было интересно взаимодействовать, мы использовали рантайм Rive. Дополнительный плюс этого инструмента — крайне малый вес итоговых анимаций. Как альтернативу можно было бы рассмотреть генерацию с помощью ИИ, но там и результат непредсказуемый, и вес видео был бы неподъемным для смартфонов.
Что говорят и как используют лендинг сотрудники Далее
Лендинг мы запустили в конце июля, анонсировали его на летнем корпоративе, на котором собираются сотрудники из 60 городов, потом поделились им с комьюнити и клиентами в нашем телеграмм-канале.
На проекте была очень сплоченная командная работа. Ребята много времени уделили контентной части, что, пожалуй, было самым главным. В процессе столкнулись со сложностями. Например, сбор фотоматериалов, которые должны были быть интересны всем ЦА: текущим и потенциальным клиентам, сотрудникам и просто пользователям, которые увидели наш сайт. Думаю, что нам все же удалось это сделать.
Креативная идея и исполнение нашли живой отклик как среди сотрудников, так и среди партнеров и клиентов.
Когда я увидела лендинг, была в восхищении, продолжаю его пересматривать до сих пор. Мой любимый раздел — Ранее. Идея с отсылкой к разным событиям — супер! Сразу вспоминаешь, что ты делал в этот момент. Долго сидела игралась с анимацией, ребята подошли к делу с нужной долей юмора. И наконец-то дизайнерам дали разгуляться! Перечитала все полностью, все истории, потыкала все кнопки, поискала пасхалки, в общем — получила максимальное удовольствие.
Для меня сайт к 20-летию Далее — это больше чем история какой-то компании — это и моя личная история. Раздел «Ранее» — это всё что происходило со мной все эти годы. Было приятно вспомнить, каким был интернет раньше, и там даже есть истории, в которых я лично участвовал. Было круто почитать старые рассказы которые сформировали Далее и людей в нём. Конечно, всего не расскажешь, но что-то же должно остаться в секрете. Дальше больше. Всегда так было и будет.
Благодаря этому лендингу мы показали, какие мы и чем мы живем, продемонстрировали собственные компетенции. Дополнительно этот сайт стал хорошим помощником для HR-департамента.
Юбилейный лендинг отлично отражает нашу корпоративную культуру: «Далее» — это не только про проекты и диджитал, но в первую очередь про людей. Сейчас мы отправляем ссылку на этот сайт новым кандидатам после того, как делаем им офер. Будущие сотрудники отмечают, что лендинг получился эмоциональным, красочным, наполненным и далеевским!
Вот такой получилась упаковка 20-летней истории Далее. Посмотреть наш юбилейный лендинг и вспомнить, где вы были, когда появился Youtube или FaceApp, вы можете по ссылке.
Где нас найти
Больше о проектах мы рассказываем в телеграм-канале Далее. А еще там бывают новости, вакансии в ИТ и полезные материалы для разработчиков.
А еще больше о нас — на сайте dalee.ru.