Дизайн сайта: из чего складывается и сколько стоит

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

Что входит в дизайн сайта

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

1. Аналитика и исследование

Дизайнер изучает бизнес, целевую аудиторию и конкурентов. Какие вопросы задают клиенты, что их останавливает от покупки, какие сайты в нише выглядят убедительно и почему. Для SEO-проектов сюда добавляется анализ запросов: какие страницы нужны сайту, чтобы собирать трафик из Яндекса. Результат этапа — понимание, какие задачи должна решить каждая страница.

2. Прототип

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

3. Визуальный стиль и UI

Когда структура согласована, дизайнер создаёт визуальную часть: типографику, цвета, стиль иконок и фото, кнопки и формы. Обычно сначала делают дизайн одной-двух ключевых страниц, согласовывают стиль, а затем распространяют его на остальные шаблоны.

4. Адаптив

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

5. UI-кит и передача в разработку

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

Сколько стоит дизайн сайта

Точная цена зависит от задачи, но ориентиры у нас такие. Дизайн как отдельная услуга:

Что делаем	Что входит	Стоимость
Оформление соцсетей	аватар, обложка, шаблоны постов, обложки разделов	от 30 000 ₽
Дизайн лендинга	прототип, дизайн десктопа, мобильная версия	от 60 000 ₽
Дизайн магазина или приложения	глубокая аналитика, дизайн всех шаблонов страниц, UI-кит	от 120 000 ₽

Если нужен сайт целиком, дизайн входит в стоимость разработки: сайт-визитка у нас — от 70 000 ₽, лендинг — от 90 000 ₽, корпоративный сайт — от 250 000 ₽, интернет-магазин — от 400 000 ₽. В эту сумму включены и прототип, и дизайн, и вёрстка, и базовая SEO-настройка. Подробнее о пакетах — на странице веб-дизайна и UI/UX.

От чего зависит цена дизайна сайта

Два сайта «на десять страниц» могут отличаться по стоимости дизайна в несколько раз. Главные факторы:

Количество уникальных шаблонов, а не страниц. Сто карточек услуг, сделанных по одному шаблону, — это один макет. А пять страниц с совершенно разной структурой — пять.
Глубина исследования. Анализ конкурентов на пару часов и полноценное UX-исследование с интервью клиентов — разные объёмы работы.
Сложность интерфейсов. Калькуляторы, конфигураторы, фильтры каталога, личные кабинеты требуют проработки всех состояний и сценариев.
Иллюстрации, 3D и анимация. Уникальная графика — отдельная работа, которую нельзя заменить стоковыми картинками.
Наличие фирменного стиля. Если есть логотип, цвета и шрифты, дизайнер опирается на них. Если нет — часть работы уходит на создание визуальной основы.
Количество итераций. Чем больше людей со стороны заказчика согласовывают макеты, тем дольше и дороже процесс.

Шаблонный или уникальный дизайн: что выбрать

Готовые шаблоны есть у всех конструкторов и CMS. Они быстрые и дешёвые, но у них есть ограничения. Сравним честно:

Критерий	Шаблон	Уникальный дизайн
Срок	дни	недели
Бюджет на старте	минимальный	выше
Структура под ваш бизнес	подгоняете контент под шаблон	шаблон проектируется под контент и запросы
Узнаваемость	такой же сайт может быть у конкурента	отражает бренд
Готовность к SEO	зависит от шаблона, часто нужны доработки	структура закладывается под семантику сразу
Масштабирование	сложно добавлять нестандартные блоки	UI-кит позволяет расширять сайт

Шаблон разумен, когда нужно быстро проверить идею или запустить временную страницу. Если сайт — основной источник заявок и вы планируете продвижение, уникальный дизайн окупается за счёт более высокой конверсии и отсутствия переделок. Не обязательно выбирать крайности: можно взять проверенную структуру и сделать под неё собственный визуальный стиль.

Как оценить дизайн сайта по конверсии, а не по вкусу

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

Понятно ли с первого экрана, что вы предлагаете, кому и в каком городе?
Видна ли главная кнопка действия без прокрутки, в том числе на смартфоне?
Есть ли ответы на ключевые вопросы клиента: цена или принцип расчёта, сроки, гарантии, примеры работ?
Легко ли прочитать текст: достаточный размер шрифта, контраст, короткие абзацы?
Есть ли элементы доверия: отзывы, лицензии, реквизиты, фото команды и объектов?
Не отвлекают ли анимации и слайдеры от главного действия?
Одинаково ли выглядят однотипные элементы на всех страницах?

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

Кто делает дизайн: фрилансер, студия или агентство

Дизайн можно заказать у фрилансера, в дизайн-студии или у команды, которая делает сайт целиком. Фрилансер обычно дешевле и быстрее, но результат сильно зависит от опыта конкретного человека: хороший визуальный вкус не гарантирует понимания конверсии и SEO. Дизайн-студия даёт сильный визуал, но может не учитывать ограничения разработки и продвижения. Команда полного цикла проектирует дизайн сразу с учётом структуры под запросы, скорости и будущей поддержки. При выборе смотрите не только на красоту портфолио, но и на то, работают ли эти сайты: есть ли у них заявки, трафик, живые клиенты.

Сколько времени занимает дизайн сайта

Сроки зависят от объёма и скорости согласований. Ориентиры для наших пакетов: оформление соцсетей — 3–5 дней, дизайн лендинга с прототипом и адаптивом — 7–10 дней, дизайн магазина или приложения — от 14 дней. На практике сроки чаще растягивает не работа дизайнера, а ожидание материалов и согласований: текстов, фото, обратной связи от нескольких людей. Чтобы не затягивать проект, заранее назначьте одного ответственного за согласование.

Как дизайн влияет на SEO

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

Структура заголовков. Один H1 на странице, логичная иерархия H2 и H3, текст в заголовках, а не на картинках.
Место под текст. У страниц услуг должно быть пространство для описания, цен, ответов на вопросы — без этого страница не соберёт запросы.
Скорость загрузки. Тяжёлые видео на первом экране, десятки шрифтов и огромные изображения замедляют сайт, особенно на смартфонах.
Коммерческие элементы. Цены, контакты, отзывы, реквизиты — их наличие и заметность важны и для людей, и для Яндекса.
Навигация и перелинковка. Меню, хлебные крошки и блоки связанных услуг помогают роботу обходить сайт, а посетителю — находить нужное.

Ошибки при заказе дизайна сайта

Начинать с визуала без структуры. Сначала красивые картинки, потом выясняется, что для важных услуг нет страниц.
Согласовывать дизайн без реальных текстов. Заглушки «Lorem ipsum» скрывают проблемы: настоящий текст оказывается длиннее и ломает макет.
Просить «как у конкурента, но лучше». Копирование чужого решения не учитывает ваши преимущества и аудиторию.
Забывать про мобильную версию. Смотреть макеты только на большом мониторе — значит не видеть сайт глазами большинства посетителей.
Экономить на UI-ките для большого сайта. Через год новые страницы выглядят по-разному, а каждое изменение требует дизайнера.

Что подготовить перед заказом дизайна

логотип, фирменные цвета и шрифты, если они есть;
2–3 сайта, которые нравятся, с объяснением почему, и 2–3, которые не нравятся;
список услуг или категорий товаров и основные преимущества;
реальные фотографии: команда, офис, объекты, продукция;
тексты или хотя бы тезисы, если копирайтинг не заказываете;
понимание, откуда будут приходить посетители: реклама, поиск, соцсети.

Чем полнее исходные данные, тем точнее смета и тем меньше итераций правок.

Сколько правок входит в стоимость дизайна

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

Дизайн отдельно или вместе с разработкой

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

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