Как с помощью визуала продемонстрировать экспертность видеопродакшена — кейс Лидмашины

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

В кейсе расскажу, как визуал помог передать профессионализм видеопродакшена и привлечь клиентов. 

Заказчик и задачи 

Первый раз владельцы московского видеопродакшена VIDEOSET обратились в Лидмашину в конце 2021 года. Клиентов студия находила в основном по рекомендации, но хотелось получать больше лидов из контекстной рекламы. Для этого нужно было не только перезапустить рекламные кампании, но и обновить сайт. Что мы и сделали. Результатами ROI-маркетолог Руслан Голованов поделился в кейсе «Как получить в 15 раз больше лидов с рекламы видеопродакшена».

В 2024 году видеопродакшену потребовался новый сайт: старый уже не отвечал потребностям аудитории, да и философии бренда. VIDEOSET специализируется на контенте для бизнеса, экспертов и онлайн-школ. В числе предложений сложные съемки. Это не только видео для хостингов и соцсетей, но и корпоративные, документальные фильмы, презентационные ролики, вебинары, видеоуроки и интервью. Студия работает более 20 лет, а проекты команды VIDEOSET отличаются креативностью и качеством исполнения. Но все эти преимущества видеопродакшена прежний сайт не отражал в полной мере, а значит, не помогал привлекать новых клиентов. 

За маркетинговую составляющую сайта отвечал ведущий аналитик Лидмашины Тимур Азизов. Мне предстояло реализовать идеи и предложить визуал. Дизайн должен был быть современным, навигация — простой, а портфолио — демонстрировать возможности агентства. 

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

Тимур Азизовведущий аналитик

Вместе с заказчиком и маркетологом сформулировали следующие задачи в проекте: 

1. Создать стильный и лаконичный дизайн сайта, передающий характер студии.
2. Разработать простую и понятную структуру сайта, чтобы потенциальный клиент легко находил нужную информацию.
3. Визуально подчеркнуть индивидуальный подход и профессионализм команды.
4. Реализовать динамичную подачу портфолио с помощью анимированных GIF с фрагментами работ.

Создание дизайна сайта для видеопродакшена

Последовательность работ

Анализ референсов и бренда. Я изучила задачи, пожелания заказчика и сайты конкурентов (креативных агентств и видеопродакшенов). Несколько приемов взяла на заметку. 

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

Дизайнерские концепты. Дизайн-концепт — идея, общее видение будущего проекта. Я создала несколько дизайн-концептов. Заказчику понравился третий вариант. 

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

Тестирование. Чтобы убедиться, что пользователь легко ориентируется на сайте и быстро находит кнопку «Связаться», провела несколько быстрых тестов на фокус-группе.

Запуск. После финальных правок сверстали сайт на Tilda, адаптировали под мобильные устройства и запустили.

Визуальные решения 

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

Для главной страницы мы отобрали самые яркие кейсы студии, конвертировали видеофайлы в формат GIF и зациклили. 

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

Минимализм с акцентом на контент. Прием позволяет сфокусировать внимание пользователя на главном: белый фон и простая структура заставляют изучать видео (GIF) на главной странице. Никакие декоративные элементы не отвлекают от портфолио студии.

Уникальный шрифт. Чтобы бренд легче запоминался, мы сделали крупную надпись посередине главного экрана. Она выполнена шрифтом, который неслучайно напоминает о расцвете «Формулы — 1» в 70-е годы прошлого века. 

Работать быстро, не затягивать — принципы VIDEOSET. Скорость мы передали с помощью шрифта, который ассоциируется с теми, что использовались в «Формуле — 1». Мы не делали на этом сильного акцента, но ощущение быстрого результата все-таки появилось. 

Тимур Азизовведущий аналитик

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

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

Фильтр для блока «Портфолио». Портфолио разделено на категории: кейсы, бэкстейджи и шоурилы. Пользователь может отфильтровать работы, чтобы выбрать нужный формат. Демонстрация проектов становится более интерактивной и улучшает восприятие продукта.

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

Страницы услуг. Все страницы оформлены в едином стиле: 

• главная GIF-анимация на странице услуги демонстрирует лучший кейс конкретного направления и делает сильный визуальный акцент;
• блок с форматами конкретной услуги (также с GIF-анимациями) показывает разнообразие возможностей студии;
• блок с планом работ дает представление о процессе сотрудничества со студией и структурирует информацию для клиента.

Акценты через цвет. Важные ссылки и кнопки выделены на сайте контрастным тоном, что повышает кликабельность.

Мобильная адаптивность. Контент и анимации корректно подстраиваются под экран смартфона, сохраняя видимость и удобство.

Современные шрифты и ритм верстки. Четкий грид (базовая сетка, структура в дизайне сайта) и одинаковые отступы создают аккуратный, «дорогой» вид сайта.

Результат

Команда Лидмашины стремилась сделать не просто красивый сайт. Нам было важно отразить опыт, профессионализм и экспертность студии VIDEOSET, а также донести это максимально быстро. Как известно: чтобы привлечь внимание пользователя, есть всего несколько секунд. 

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

Анна Хлебниковазаказчик

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

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

К слову, заказчик выносил новый сайт на разборы профессионалов, и они высоко оценили нашу работу. 

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