Разработать продающий лендинг для компании, которая работает сразу с двумя аудиториями:
B2B: закупщики, директора и системные администраторы. Для них важны работа по договору, безналичная оплата, НДС, наличие оборудования, гарантия и техническая поддержка.
B2C: геймеры, студенты и школьники. Здесь важны готовые сборки, понятные характеристики, консультация и быстрый заказ.
Основная задача сайта - получать заявки от юридических лиц на оптовые и корпоративные закупки. Дополнительная - привлекать розничных клиентов.
Также нужно было сделать интерфейс современным и технологичным, но не перегруженным визуальными эффектами.
Сначала спроектировал структуру лендинга и разделил пользовательские сценарии уже на первом экране.
В Hero разместил два основных CTA:
«Оптовым клиентам» — для B2B;
«Собрать ПК» — для частных клиентов.
При нажатии открывается соответствующая форма заявки. Пользователь сразу попадает в нужный сценарий, а отдел продаж получает информацию о типе обращения.
Дальше выстроил страницу по логике воронки:
• Hero с основным предложением и двумя сценариями.
• Блок доверия с ключевыми цифрами.
• Готовые конфигурации ПК.
• Преимущества для корпоративных клиентов.
• Процесс заказа в 4 шага.
• Кейсы и отзывы.
• FAQ.
• Форма консультации и контакты.
Отдельно проработал B2B-часть: наличие оборудования, договор, безналичный расчёт, НДС, гарантию, поддержку и другие условия, которые важны при корпоративных закупках.
В основу дизайна заложил тёмный технологичный минимализм. Тёмный фон позволил сделать акцент на фотографиях комплектующих, сборках и подсветке корпусов. Неоновый цвет использовал точечно — для CTA, ссылок, активных состояний и других элементов, с которыми пользователь взаимодействует.
Чтобы интерфейс выглядел цельным, выстроил единую систему:
• модульная сетка;
• одинаковые принципы построения карточек;
• единые радиусы и отступы;
• повторяющиеся световые эффекты;
• чёткая типографическая иерархия.
В результате большое количество информации не превращается в визуальный шум: пользователь сначала считывает основной смысл, затем получает детали.
Анимации использовал функционально, а не только как декоративный эффект.
Добавил:
• плавное появление секций при скролле;
• hover-эффекты для интерактивных элементов;
• лёгкое увеличение и подсветку карточек;
• медленную градиентную анимацию фона Hero;
• анимированные счётчики в блоке доверия.
Эффекты помогают обозначить интерактивные элементы и поддерживают технологичный характер сайта, при этом не мешая основному сценарию - выбору решения и отправке заявки.
Получился полноценный лендинг, который уже запущен и используется клиентом для привлечения заявок.
Ключевым решением стало разделение B2B и B2C прямо на первом экране. Пользователь сразу выбирает подходящий сценарий, а заявка поступает в соответствующем формате.
Для корпоративной аудитории последовательно собрал информацию, необходимую для принятия решения: условия работы, наличие, гарантия, безналичная оплата, НДС, поддержка, кейсы и ответы на частые вопросы.
С технической стороны сайт реализован на WordPress. Дизайн и интерактивные элементы перенесены в рабочую версию, настроена адаптация под мобильные устройства и разделение заявок на оптовые и розничные.
Контент и характеристики сборок клиент может самостоятельно редактировать через CMS.
Итог: современный лендинг с понятной структурой, двумя пользовательскими сценариями и быстрым путём от первого экрана до заявки.
