«Дизайн сайта под ключ» звучит понятно, но у каждой студии за этой фразой скрывается свой объём. У кого-то это семь экранов главной страницы, у кого-то — полноценная система со всеми состояниями и мобильной версией. Ниже разбираем, что должно входить в такой проект, чтобы после сдачи не пришлось доплачивать за половину сайта.
Короткий ответ: что вы получаете на выходе
| Этап | Результат |
|---|---|
| Бриф и аналитика | Понимание задачи, аудитории и конкурентов |
| Структура и прототип | Схема страниц и порядок блоков без визуала |
| Визуальная концепция | Стиль первого экрана и ключевых блоков |
| Дизайн страниц | Макеты всех типов страниц для десктопа |
| Адаптив | Мобильная и планшетная версии |
| Состояния и мелочи | Формы, ошибки, наведение, пустые состояния, 404 |
| Передача | Файлы, сетки, шрифты, отступы, экспорт изображений |
Если в предложении нет хотя бы адаптива и состояний форм — это ещё не сайт под ключ. Посмотреть стартовые цены можно на странице дизайна сайта, а посчитать свой вариант — в калькуляторе.
Этап 1. Бриф и аналитика
Проект начинается не с картинок, а с вопросов. Что вы продаёте, кому, чем отличаетесь от соседей по рынку, какое действие должен совершить посетитель. На этом же этапе смотрим 5–10 конкурентов: не чтобы копировать, а чтобы понять, как выглядит «средняя температура» в нише и где можно выделиться.
Результат этапа — короткий документ с задачей, аудиторией, ключевыми сообщениями и целевым действием. Он потом защищает обе стороны от спора «мне не нравится» без аргументов.
Этап 2. Структура и прототип
Дальше собирается скелет: какие страницы нужны и в каком порядке идут блоки на каждой. Прототип делается без цвета и без красивых шрифтов — специально, чтобы обсуждать смысл, а не оттенки.
- Список страниц и их приоритет.
- Порядок блоков на каждой странице.
- Что именно в каждом блоке: заголовок, аргумент, доказательство, действие.
- Где стоят призывы к действию и сколько их.
Это самый недооценённый этап. Именно здесь решается, будет ли сайт приносить заявки, потому что человек уходит не от «некрасивого шрифта», а от непонимания, куда он попал.
Этап 3. Визуальная концепция
На согласованный прототип накладывается стиль: типографика, цвета, ритм, фотографии, характер. Обычно показывается первый экран и 2–3 ключевых блока — этого достаточно, чтобы договориться о направлении и не переделывать потом весь сайт.
Если фирменного стиля ещё нет, он либо создаётся в рамках проекта, либо делается отдельно — подробнее в статье «Сколько стоит фирменный стиль».
Этап 4. Дизайн всех типов страниц
Считаются не страницы, а шаблоны. Двадцать однотипных карточек услуг — это один шаблон. Главная, страница услуги, блог и контакты — четыре разных. В смету должны попасть все типы, которые реально будут на сайте, включая те, о которых обычно забывают: страница благодарности после заявки, политика обработки данных, страница 404.
Этап 5. Адаптив
С телефонов приходит больше половины посетителей, поэтому мобильная версия — не бонус, а обязательная часть. Это не «то же самое, но уже»: меняются порядок блоков, размеры шрифтов, отступы, поведение меню, размер кнопок под палец.
Красный флаг. Если в предложении мобильная версия указана как отдельная опция «по желанию» — считайте, что сайт сдадут наполовину. Дошивать адаптив потом всегда дороже, чем спроектировать сразу.
Этап 6. Состояния, мелочи и передача
Разница между макетом и рабочим сайтом — в деталях, которые не видны на презентации:
- Как выглядит кнопка при наведении и нажатии.
- Что показывает форма при ошибке и после успешной отправки.
- Как выглядит блок, если в нём пока нет данных.
- Что видит человек на странице 404 и куда он оттуда идёт.
В финале разработчик получает не просто картинки, а систему: сетки, шкала отступов, размеры шрифтов, цвета переменными, экспортированные изображения в нужных форматах и весе. Без этого вёрстка «поедет», и вы будете месяц ловить расхождения.
Что обычно НЕ входит в дизайн под ключ
- Вёрстка и программирование. Это отдельный этап и отдельная смета.
- Написание всех текстов «с нуля». Дизайнер помогает со структурой и заголовками, но полноценный копирайтинг — отдельная услуга.
- Фотосъёмка. Подбор стоковых изображений — да, продакшн — нет.
- Продвижение и реклама. Базовая SEO-подготовка входит, закупка трафика — нет.
- Наполнение каталога. Если у вас 500 товаров, их занос — отдельная работа.
Это нормально, что перечисленное считается отдельно. Ненормально — когда об этом узнают в день сдачи.
Сколько это занимает
Лендинг с уникальным дизайном — от двух недель, многостраничный сайт — от четырёх, магазин — от шести. Главный источник задержек не дизайн, а контент: если тексты и фотографии собираются параллельно, сроки почти всегда сдвигаются. Поэтому лучше подготовить материалы заранее — как это сделать, разобрано в статье «Как подготовить контент для сайта».
Частые вопросы
Бриф и аналитика, структура и прототип, визуальная концепция, дизайн всех типов страниц для компьютера и телефона, состояния элементов и форм, страница 404 и передача макетов в вёрстку с описанием сеток, шрифтов и отступов.
Нет, это отдельный этап. Дизайн под ключ означает готовые макеты всех страниц с адаптивом и полной передачей разработчику. Вёрстку или сборку на платформе считаем отдельно и обсуждаем на старте.
Полностью готовые — не обязательно, но нужны смысловые опоры: что продаёте, кому, чем отличаетесь и какие есть примеры работ. Без этого дизайн превращается в красивую рамку без содержания.