/ Короткий ответ
Дизайн сайта для B2B повышает конверсию, когда за несколько секунд объясняет, чем занята компания, и подтверждает это проверяемыми фактами: реальными кейсами, фото команды, реквизитами. Читаемая типографика, контраст не ниже 4,5:1, короткая форма и один акцентный цвет кнопок снижают трение на пути к заявке.
/ Коротко
- Первый экран должен за несколько секунд объяснить, чем занимается компания, для кого и какое действие предлагается.
- Доверие в B2B дают проверяемые элементы: реальные фото, кейсы, отзывы с названием компании и реквизиты, а не стоковые картинки.
- Для основного текста нужен контраст не ниже 4,5:1 (проверка в WebAIM Contrast Checker) и размер шрифта от 16 px.
- Цены на дизайн сравнивают только по составу работ: числу шаблонов, адаптиву, кругам правок и передаче исходников.
- Если проблема в трафике, а не во внешнем виде, редизайн не даст заявок, сначала смотрите данные в Яндекс.Метрике.
Дизайн сайта для B2B решает другую задачу, чем в рознице. Покупатель не выбирает за минуту, он сравнивает подрядчиков неделями, показывает сайт коллегам и руководителю. Поэтому визуал должен быстро сообщить: компания настоящая, работает давно, с ней безопасно. Красота здесь вторична.
Что считывается за первые секунды
Посетитель оценивает сайт раньше, чем читает текст. Первый экран должен ответить на три вопроса: чем вы занимаетесь, для кого и что делать дальше. Если для ответа нужно прокручивать страницу, часть людей уйдёт к конкуренту.
Проверьте так: покажите первый экран незнакомому человеку на пять секунд и попросите пересказать, чем занята компания. Не получилось пересказать, значит, оффер размыт или перегружен картинками.
Частая ошибка в B2B: огромный слайдер с абстрактными лозунгами. Он занимает место, а доверия не добавляет. Лучше одна чёткая формулировка, понятная кнопка и один элемент доказательства рядом, например логотипы клиентов.
Элементы, которые создают доверие
В B2B доверие строится на проверяемых вещах. Декоративные блоки его не дают.
- Реальные фотографии команды, офиса или производства. Стоковые улыбающиеся люди считываются мгновенно и работают против вас.
- Логотипы клиентов с разрешением на публикацию и кейсы с описанием задачи и результата.
- Реквизиты, адрес и юридическое лицо в подвале и на странице контактов.
- Отзывы с названием компании и должностью автора, а лучше со ссылкой на оригинал.
- Сертификаты и статусы партнёров, если они подтверждаются документом или публичным реестром.
Если чего-то из этого нет, не изображайте. Выдуманная цифра «500 довольных клиентов» вскрывается первым же звонком в одну из компаний. Лучше показать три настоящих кейса, чем десять расплывчатых.
Типографика, цвет и сетка
Здесь меньше всего места для эксперимента. Читаемость важнее оригинальности.
- Основной текст от 16 px, межстрочный интервал около 1,5, длина строки 60–80 символов.
- Контраст текста и фона проверьте в WebAIM Contrast Checker: для основного текста нужен коэффициент не ниже 4,5:1 по требованиям WCAG.
- Один акцентный цвет для кнопок действия. Если красных, зелёных и оранжевых кнопок пять, глаз не знает, куда идти.
- Не больше двух шрифтов, оба с поддержкой кириллицы во всех начертаниях.
Мобильная версия в B2B тоже нужна. Закупщик часто открывает ссылку из мессенджера на телефоне, и громоздкая таблица цен там превращается в нечитаемую полосу. Проверьте макеты на ширине 360 px.
Дизайн и конверсия
Конверсию в заявку повышают не украшения, а снижение трения. Форма из трёх полей (имя, телефон или почта, задача) заполняется охотнее, чем анкета из десяти. Если вам нужны данные для квалификации, запросите их позже, уже в разговоре.
Кнопка должна говорить о результате: «Получить расчёт» понятнее, чем «Отправить». Рядом с формой уместна короткая фраза о том, что будет дальше и когда ответят. Но обещать срок ответа можно только тот, который вы реально выдерживаете.
Любые гипотезы проверяйте данными: настройте цели в Яндекс.Метрике и посмотрите карты кликов и вебвизор. Так видно, что реально мешает человеку. О том, как собрать такую картину, мы писали в материале про юзабилити-аудит сайта.
Как выбирать исполнителя
Стоимость дизайна сильно зависит от числа шаблонов страниц, объёма анимации и того, делается ли дизайн-система для дальнейшего развития. Поэтому сравнивать цены без сравнения состава работ бессмысленно. Просите у каждого подрядчика расписать, что входит в сумму.
| Критерий | Что просить показать | Тревожный сигнал |
|---|---|---|
| Исследование | Анализ аудитории и конкурентов, прототип | Сразу «рисуем главную» |
| Состав макетов | Список страниц и адаптивные версии | Только десктопная главная |
| Правки | Число кругов согласования в договоре | «Правим, пока не понравится» без условий |
| Передача | Исходники в Figma и доступы | Макеты только картинками |
| Связка с разработкой | Верстальщик видит макеты до сдачи | Дизайн и код у разных людей без общения |
Отдельный дизайнер подходит, если разработчик у вас уже есть. Если нет, удобнее команда, где дизайн сразу учитывает ограничения CMS и требования поиска. Иначе красивый макет приходится переделывать при вёрстке, а это лишние деньги и время.
Мы делаем дизайн в связке с разработкой и SEO: в одной команде работают дизайнеры, разработчики и аналитики, поэтому макет сразу проектируется с учётом структуры, скорости и будущего продвижения. Подойдёт тем, кому нужен корпоративный сайт под ключ или обновление устаревшего. Для интерфейсов с авторизацией есть отдельное направление: проектирование веб-сервисов и личных кабинетов.
Когда редизайн не нужен
Не всегда проблема в картинке. Если заявок нет из-за слабого трафика или неверных запросов, новый дизайн ничего не изменит. Сначала посмотрите в Метрике, откуда приходят посетители и где они уходят. Высокий процент отказов на одной странице говорит о проблеме на ней, а не о том, что весь сайт устарел.
Редизайн оправдан, когда сайт не открывается нормально на телефоне, выглядит как десять лет назад на фоне клиентов, с которыми вы работаете, или не позволяет добавлять блоки без программиста. Во всех остальных случаях точечные правки дешевле и быстрее.
Частые вопросы
С чего начать, если сайт не приносит заявок?
Посмотрите в Яндекс.Метрике, откуда идёт трафик и на каких страницах люди уходят. Только после этого решайте, нужен ли редизайн или достаточно правок первого экрана и формы.
Сколько полей должно быть в форме заявки на B2B-сайте?
Обычно хватает трёх: имя, контакт и краткая задача. Остальное уточняют в разговоре, иначе часть посетителей бросает форму.
Можно ли использовать стоковые фото на корпоративном сайте?
Можно для второстепенных иллюстраций. Но команду, офис и производство лучше показывать настоящими, иначе пропадает доверие.
Как сравнить предложения двух студий по дизайну?
Попросите расписать состав работ: прототип, число страниц-шаблонов, адаптивные версии, количество кругов правок и передачу исходников. Без этого цены несопоставимы.