«Сделайте красиво», частый запрос к дизайну сайта. Но красивый и продающий не одно и то же. Бывает эффектный сайт, с которого не оставляют заявок, и простой, но понятный, который отлично конвертирует. Дальше о том, что делает дизайн продающим, как создать дизайн сайта по этапам и сколько это стоит.
Красивый ≠ продающий
Задача дизайна на коммерческом сайте: не произвести впечатление, а провести клиента к цели: понять предложение и оставить заявку. Если ради красоты жертвуют ясностью (модный, но непонятный интерфейс; текст поверх пёстрой картинки; спрятанные кнопки), дизайн работает против продаж.
По исследованию Стэнфордской лаборатории веб-доверия 2002 года с 2 684 участниками, 46,1% людей оценивали, можно ли доверять сайту, в первую очередь по его визуальному дизайну: вёрстке, шрифтам, цветам. Работа Гитте Линдгаард 2006 года показала, что мнение о привлекательности страницы складывается за 50 миллисекунд, раньше, чем человек прочитает первое слово. А по данным Google 2017 года 53% посетителей с телефона уходят, если страница грузится дольше трёх секунд: тяжёлый «красивый» дизайн проигрывает быстрому.
Что такое веб-дизайн сайта и из чего он состоит
Веб-дизайн сайта это проектирование того, как страницы выглядят и как ими пользуются: не только картинка, но и логика. В него входят структура и прототип страниц, визуальная концепция (цветовая схема, шрифты, стиль иллюстраций и фотографий, набор иконок), макет каждой страницы, иконки и графика для блоков, адаптивная версия для телефона. Веб-дизайнер отвечает за то, чтобы всё это складывалось в понятный путь к заявке, а вёрстка потом переносит макет в код без потерь.
Разница между «дизайном сайта» и «веб-дизайном» условная: первым словом чаще называют результат, вторым профессию и процесс. Для заказчика важно другое: дизайн без прототипа и без брифа это оформление ради оформления, и переделывать его придётся вместе с логикой продаж.
Приёмы продающего дизайна
- Визуальная иерархия: взгляд сразу ведётся к главному: сути, выгоде, кнопке
- Заметные кнопки: призыв к действию выделен, его невозможно не увидеть
- Воздух и читаемость: текст не сливается, между блоками есть пространство, контраст текста и фона не ниже 4,5:1 по стандарту WCAG 2.2
- Доверие: аккуратность, реальные фотографии продукции и производства, а не стоки
- Единый стиль: сайт выглядит как у серьёзной компании, а не собран из кусков
- Дизайн не мешает: эффекты не отвлекают от сути и не тормозят сайт
Дизайн страниц сайта: что должно быть на главной, в каталоге, в карточке и в контактах
Дизайн страниц сайта различается по задаче страницы, а не по вкусу. Одинаковый шаблон для главной и для карточки товара это ошибка: у них разные вопросы посетителя.
| Страница | Задача посетителя | Что должно быть в дизайне |
|---|---|---|
| Главная | Понять за пять секунд, что производите и для кого | Первый экран с продуктом и выгодой, путь в каталог, доказательства, одна заметная кнопка |
| Каталог и категория | Найти нужную группу продукции | Понятная навигация, фильтры, карточки с ключевыми параметрами, без декоративных баннеров |
| Карточка товара | Сверить характеристики и заказать | Таблица параметров, реальные фото и чертёж, документы, цена или расчёт, кнопка запроса рядом |
| О компании | Убедиться, что производство реальное | Фотографии цехов и команды, цифры, сертификаты, реквизиты |
| Контакты и форма | Связаться без усилий | Телефон, мессенджеры, короткая форма, карта, реквизиты на одном экране |
Как собрать первый экран, чтобы он отвечал на главный вопрос, разобрано в статье про первый экран сайта, а как проверить удобство всего пути, в материале про юзабилити.
Что важно для производства
B2B-клиенту нужны не анимации, а ясность: что Вы производите, на каких условиях, как заказать. Хороший дизайн производственного сайта это чистота, читаемые характеристики и таблицы, реальные фото, понятный путь к заявке. Солидность через аккуратность, а не через спецэффекты. Так мы и работаем: дизайн и редизайн сайта начинаем с вопроса, где Вы теряете заявки, а не с выбора модной палитры.
Примеры дизайна сайтов: как выглядит продающий и как нет
Примеры дизайна сайтов проще показать парами. Непродающий: первый экран с абстрактной фотографией и слоганом «Качество и надёжность», каталог в виде списка названий, карточка с одной картинкой и кнопкой «Узнать цену», контакты на отдельной странице в подвале. Продающий: первый экран с фотографией продукта, одной фразой о том, что и для кого, и кнопкой расчёта; каталог с параметрами прямо в плитке; карточка с таблицей, документами и формой; телефон и мессенджеры в шапке на каждой странице.
Центр сертификации ФортЭксперт пришёл с устаревшим шаблонным сайтом, минимальным трафиком и нулевыми конверсиями. Мы сделали полный редизайн под вопросы клиента и перенесли сайт на новую платформу: органический трафик вырос примерно вдвое, а конверсии появились с нуля примерно через два месяца после запуска нового дизайна. Подробности в кейсе ФортЭксперт. Оформление сайта компании поменялось, но заявки принёс не стиль, а то, что ответы на вопросы клиента оказались на нужных страницах.
Как создать дизайн сайта: этапы
Создать дизайн сайта, который потом не переделывают, получается только в одном порядке: от задачи к картинке, а не наоборот.
- БрифКто клиент, что он ищет, какие потребности и возражения закрывает сайт, какие пожелания у заказчика по стилю. Без брифа дизайнер рисует своё представление о компании.
- Структура и прототипСхема разделов и черновые макеты страниц без цвета: где заголовок, где кнопка, где таблица. На этом этапе спорят о логике, а не о картинках.
- КонцепцияГлавная страница в цвете: цветовая схема, шрифты, стиль фотографий и иконок. Одна концепция с правками, а не пять вариантов «на выбор».
- Макеты остальных страницКаталог, категория, карточка, о компании, контакты, служебные. Плюс адаптивная версия каждой для телефона.
- Вёрстка и проверкаМакет превращается в живые страницы. Проверяют скорость, контраст, поведение на телефоне и то, что кнопки ведут туда, куда нужно.
Где заказать дизайн сайта и сколько это стоит
Заказать дизайн сайта можно у компании, у фрилансера или собрать на шаблоне конструктора, и выбор зависит от того, что сайт должен делать. Компания дизайн сайтов делает в связке с маркетингом и разработкой: бриф, прототип, макеты, вёрстка, потом продвижение; это дороже, но дизайн не живёт отдельно от заявок. Фрилансер дешевле и быстрее для лендинга или визитки, но структуру и тексты придётся готовить самим. Шаблон конструктора подходит для теста ниши: как это устроено, разобрали в статье про сайт на Тильде, а когда шаблон уместнее уникального дизайна, в материале шаблон или уникальный дизайн сайта.
Стоимость у нас считается по этапам: индивидуальный дизайн сайта производственной компании идёт третьим этапом поэтапной разработки после аудита, структуры и ТЗ, и обходится в 115 000 ₽ вместе с предыдущими этапами, а лендинг под рекламную кампанию с дизайном и вёрсткой стоит от 60 000 ₽. Из чего складывается цена всего сайта и на чём можно сэкономить без потери для заявок, разобрали в статье сколько стоит сайт для производственной компании. Услуги разработки дизайна сайта у нас всегда начинаются с бесплатной консультации: смотрим текущий сайт и говорим, нужен ли редизайн вообще.
Дизайн это часть системы
Продающий дизайн работает в связке с сильным первым экраном, удобным юзабилити и понятной структурой. По отдельности красивая картинка заявок не приносит, важна вся цепочка от захода до формы. Внешнее оформление сайта это последний слой этой цепочки, и он держится на предыдущих.
Хотите, чтобы сайт не просто нравился, а приносил заявки? Разберём Ваш дизайн с точки зрения продаж, бесплатно, и покажем, что даст разработка дизайна сайта под задачи Вашего клиента.
