Веб-дизайн: что это и за что на самом деле платит бизнес

Веб-дизайн: что это простыми словами

Сравнение, которое мы чаще всего используем на встречах с клиентами: веб-дизайнер — это архитектор, а не декоратор. Декоратор выбирает обои и шторы. Архитектор решает, где будут входы, сколько комнат, куда ведут коридоры и где окна. Можно идеально подобрать шторы в доме, где вход через кладовку, но жить там будет неудобно.

Так и с сайтом. Дизайнер отвечает на вопросы:

• кто придёт на сайт и с каким вопросом;
• что он должен увидеть в первые секунды, чтобы остаться;
• в каком порядке рассказать об услуге, чтобы снять сомнения;
• где кнопка, что на ней написано и что произойдёт после нажатия;
• как всё это уместится на экране телефона.

И только после этого — шрифты, цвета, фото, иконки.

Из чего состоит работа веб-дизайнера

Каждый этап можно пропустить, и каждый пропуск видно в результате. Без исследования получается сайт «как у всех». Без прототипа — красивые экраны, в которых непонятно, что предлагают. Без адаптива — сайт, который разваливается на телефоне.

Прототип: самый недооценённый этап

Прототип — это схема страницы серыми прямоугольниками с реальными заголовками. Он выглядит скучно, поэтому заказчики часто просят его пропустить. Зря: на прототипе дешевле всего менять структуру. Переставить блоки на схеме — пять минут. Переставить их в готовом дизайне — часы работы. Подробнее — в статье прототип сайта.

Адаптив: сайт на телефоне

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

Чем веб-дизайн отличается от графического дизайна

Графический дизайнер делает то, что смотрят: логотип, упаковку, баннер, презентацию. Веб-дизайнер делает то, чем пользуются.

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

Есть ещё смежные понятия: UX и UI. UX — это опыт пользователя: насколько легко ему добиться цели на сайте. UI — это сам интерфейс: кнопки, поля, меню. Разницу на примере формы заявки мы разобрали в статье UX/UI-дизайн простыми словами.

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

Основы веб-дизайна, которые полезно знать заказчику

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

Иерархия. На экране должно быть одно главное: заголовок или кнопка. Если всё крупное и яркое, ничего не выделяется.

Сетка и выравнивание. Блоки стоят по общим линиям. Когда элементы гуляют на пару пикселей, сайт выглядит неряшливо, даже если человек не может объяснить почему.

Воздух. Пустое пространство вокруг текста и блоков облегчает чтение. Это сознательное решение дизайнера, его не нужно «заполнять».

Контраст. Серый текст на светло-сером фоне выглядит стильно в макете и не читается на телефоне на солнце.

Единообразие. Одинаковые элементы выглядят одинаково по всему сайту: все кнопки одного стиля, все заголовки одного размера.

Типографика. Два шрифта максимум, основной текст крупный.

Футер в веб-дизайне: зачем нужен подвал сайта

Футер — это нижняя часть страницы: контакты, адрес, реквизиты, ссылки на документы и разделы. Его часто делают по остаточному принципу, а зря. До футера доходят те, кто дочитал страницу и ищет, как связаться, или проверяет, существует ли компания. Что стоит в нём разместить:

• телефон, мессенджеры, адрес и часы работы;
• реквизиты: название юрлица или ИП, ИНН;
• ссылки на политику конфиденциальности и другие обязательные документы;
• короткое меню по основным разделам.

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

За что на самом деле платит бизнес

Владельцу бизнеса не нужен «дизайн». Ему нужны заявки. Дизайн — инструмент, который превращает посетителя в обращение. Поэтому платить имеет смысл за:

1. Понятное предложение на первом экране. Человек за несколько секунд понимает, что вы делаете, для кого и почему вам можно доверять.
2. Логичный порядок блоков. Ответы на вопросы идут в той последовательности, в которой они возникают у покупателя.
3. Удобство на телефоне. Кнопка видна, текст читается, форма заполняется большим пальцем.
4. Доверие. Реальные фото, отзывы, цены или хотя бы «от», реквизиты.
5. Скорость. Страница открывается быстро, а не через пять секунд загрузки анимаций.

Мы делаем сайты больше 10 лет и видим одну закономерность. Красота сама по себе почти не коррелирует с заявками. Сайт с дорогими эффектами и без цен продаёт хуже простого сайта с понятным первым экраном и кнопкой мессенджера. Сколько стоит дизайн и из чего складывается цена — в статье сколько стоит дизайн сайта.

Как оценить работу веб-дизайнера

Оценка «нравится» — плохой критерий, потому что сайт делают не для владельца, а для его клиентов. Вот что можно проверить.

До запуска:

1. Покажите первый экран человеку, который ничего не знает о вашем бизнесе, на пять секунд. Спросите, что вы предлагаете и что ему делать дальше. Не может ответить — экран не работает.
2. Откройте макет или сайт на своём телефоне. Прочитайте текст на расстоянии вытянутой руки.
3. Попробуйте оставить заявку с телефона одной рукой.
4. Проверьте, есть ли на сайте ответы на три самых частых вопроса, которые задают менеджеру.

После запуска:

1. В Метрике посмотрите карту кликов: нажимают ли люди на кнопки или на то, что кнопкой не является. Как это сделать, описано в справке Метрики.
2. Посмотрите карту скроллинга: до какого блока доходит большинство.
3. Сравните конверсию до и после редизайна на сопоставимом трафике.

Если хочется опереться на внешнюю методику, есть классические принципы юзабилити от Nielsen Norman Group: исследовательская компания, которая с 1990-х изучает, как люди пользуются интерфейсами.

Условный пример: дизайн, который окупается

Пример условный, не кейс студии. Компания по монтажу кондиционеров, реклама в Директе, 1 500 переходов в месяц, клик 70 ₽, бюджет 105 000 ₽.

Было: красивый сайт с видеофоном, слоганом «Комфорт в каждый дом» и формой внизу страницы. Конверсия — 1%, 15 заявок, заявка стоит 7 000 ₽.

Стало после работы над структурой: заголовок «Установка кондиционера за 1 день, цена под ключ от 18 000 ₽», фото реального монтажа, кнопка расчёта на первом экране, блок с ценами, отзывы со ссылками на карты.

Если конверсия выросла бы до 2,5%, заявок стало бы около 37, а стоимость заявки снизилась бы до 2 800 ₽. Дизайн при этом мог стать даже проще. Деньги принесла не красота, а то, что посетитель сразу увидел цену, срок и способ связаться.

Веб-дизайн на конструкторе и под заказ: есть ли разница

Частый вопрос: если сайт собирают на Тильде из готовых блоков, это вообще веб-дизайн? Да, если перед сборкой кто-то подумал над структурой, текстами и порядком блоков. Нет, если взяли шаблон и поменяли фото.

На практике для малого бизнеса чаще всего хватает второго варианта: продуманная структура, свои тексты и собранный дизайнером сайт на конструкторе. Разработку под заказ имеет смысл заказывать, когда нужна сложная логика: личные кабинеты, расчёты, интеграции. Что выбрать, мы разобрали в статье Тильда или сайт под заказ.

Ещё один честный момент: дизайн — не разовая покупка. Через полгода после запуска почти всегда хочется что-то поменять по данным Метрики: переставить блоки, переписать заголовок, добавить ответы на вопросы. Закладывайте на это время и бюджет сразу.

Как выбрать веб-дизайнера: короткая проверка

1. В портфолио есть сайты, а не только логотипы и баннеры.
2. Дизайнер может показать мобильную версию своих работ.
3. На первой встрече он спрашивает про клиентов, конкурентов и рекламу, а не только про любимые цвета.
4. В смете есть этапы структуры и прототипа.
5. Понятно, кто пишет тексты. Если «тексты ваши» — дизайн будет оформлением ваших текстов.
6. Понятно, кто соберёт сайт после дизайна и сколько это стоит.

Если хотите обсудить свой сайт и понять, какой объём дизайна действительно нужен, оставьте контакты.