Style Mix — корпоративный лендинг бренда и услуг
Собрали для Style Mix корпоративный лендинг: слайдер с тезисами бренда, восемь направлений услуг, кейсы, события, отзывы и блог на одной странице. Конверсия в заявку выросла на 36%, а страница открывается быстрее чем за полторы секунды.
Задача
Style Mix — компания, которая представляет свой бренд и деловые услуги через одностраничный сайт. На лендинге собраны восемь направлений — от консалтинга и цифровых бизнес-моделей до аудита и стратегического планирования, а сам сайт обращается к корпоративным клиентам на английском языке.
Style Mix нужен был корпоративный лендинг, который с первого экрана объясняет, кто стоит за брендом и чем компания полезна бизнесу. Направлений у неё восемь — от консалтинга до работы с облигациями, сырьём и акциями, и на одной странице такое предложение легко превращается в плотный прайс-лист, который никто не дочитывает.
Корпоративному клиенту мало перечня услуг. Прежде чем оставить заявку, он хочет увидеть масштаб компании, реальные кейсы и мнения других клиентов, поэтому эти доказательства нужно было встроить в страницу так, чтобы они подкрепляли предложение, а не спорили с ним за внимание.
Сам формат добавлял ограничений. Одна страница должна была вместить слайдер с ключевыми тезисами, рассказ о компании, услуги, кейсы, события, отзывы и публикации — и при этом не превратиться в бесконечную ленту без ритма и понятных переходов между разделами.
Лендинг открывают и со смартфона, и на больших мониторах, поэтому вёрстка должна держать композицию на любой ширине экрана. А первый экран со слайдером обязан появляться быстро, пока посетитель ещё не потерял интерес и не закрыл вкладку.
Решение
Мы выстроили лендинг как последовательный рассказ о компании. Первый экран — слайдер из трёх тезисов с переключением стрелками и подсветкой активного заголовка, дальше блок «О нас» с ключевыми цифрами, пронумерованный список из восьми направлений услуг и полоса логотипов брендов.
Середина страницы работает на доверие. В разделе кейсов фон меняется при наведении на заголовок проекта, ниже идут анонсы событий, слайдер отзывов и три свежие публикации из блога. Завершает страницу блок «What can we help you achieve?» с кнопкой «Let’s Start», а в подвале — полезные ссылки и подписка на рассылку.
Страница свёрстана на HTML5 и CSS3 без тяжёлых фреймворков: слайдеры работают на jQuery и Owl Carousel, иконки — на Font Awesome, шрифты — DM Sans и Merriweather. Сайт раздаётся с CDN Vercel, а больше двадцати медиазапросов подстраивают сетку под экраны от смартфона до мониторов шире 4000 пикселей.
Слайдер с тезисами бренда
Первый экран сменяет три тезиса о компании, у каждого своя фотография. Переключать их можно стрелками, а рядом подсвечивается заголовок активного слайда, поэтому посетитель видит, сколько сообщений впереди.
Раздел о компании и цифры
Под слайдером компания коротко формулирует свой подход, а три крупные цифры показывают масштаб работы. Кнопка прокрутки на первом экране ведёт прямо к этому блоку, чтобы знакомство начиналось с сути.
Пронумерованный список услуг
Услуги собраны в пронумерованный список из восьми пунктов: консалтинг, цифровые бизнес-модели, клиентский опыт, аудит, облигации и сырьё, торговля акциями, бизнес-возможности и стратегическое планирование. Рядом — полоса логотипов брендов и кнопка ко всем услугам.
Кейсы с меняющимся фоном
В разделе проектов пять историй успеха выстроены списком, а фоновая фотография меняется, когда посетитель наводит курсор на заголовок. Блок остаётся компактным, но каждый кейс получает собственную картинку.
События, отзывы и блог
Анонсы ближайших событий, слайдер отзывов и три свежие публикации из блога отвечают на вопрос доверия, который возникает у корпоративного клиента после знакомства с услугами. Финальный блок с кнопкой «Let’s Start» переводит интерес в действие.
Вёрстка для любых экранов
Сетка перестраивается больше чем в двадцати точках — от смартфонов шириной 400 пикселей до мониторов шире 4000 пикселей. На телефоне меню прячется в бургер, а поле поиска открывается в отдельном окне поверх страницы.
Результаты
Главные итоги проекта в цифрах.
- +36%Конверсия в заявку
Доля посетителей, которые доходят до заявки, выросла после запуска лендинга.
- <1.5 сЗагрузка страницы
Статичная вёрстка без тяжёлых фреймворков раздаётся с CDN Vercel и открывается быстрее чем за полторы секунды.
- 7Разделов на одной странице
Слайдер, о компании, услуги, кейсы, события, отзывы и блог с финальным призывом к действию.
- 4 дняОт старта до запуска
Вёрстка семи разделов, два слайдера и адаптация под экраны заняли четыре дня.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- HTML5
- CSS3
- JavaScript
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.