Когда клиент пишет «хочу заказать дизайн сайта», для меня это сигнал сначала выяснить, что именно под этим понимается: полный макет с адаптивом под три устройства, только главный экран для утверждения стиля или готовая вёрстка на Tilda. От этого зависит и бюджет, и то, что вы получите на выходе. За несколько лет работы с проектами на Tilda, WordPress и на кастомной разработке я собрал для себя чёткий список того, что обязано быть в техническом задании и в результате, и по нему же теперь принимаю макеты у своих дизайнеров.
Из чего состоит дизайн сайта: обязательный набор макетов
Полный пакет дизайна для сайта средней сложности включает не только красивую картинку главной страницы. В него входят:
- вайрфрейм, то есть схема расположения блоков без стилизации, по которой согласуется структура страниц
- концепция на 2-3 ключевых экрана (главная, каталог или список услуг, карточка товара или услуги, контакты)
- адаптивные версии под десктоп, планшет и мобильный, а не просто «резиновая» растяжка одного макета
- UI-kit: цвета, типографика, кнопки во всех состояниях, поля форм, иконки
- кликабельный прототип в Figma, где переходы между экранами уже настроены
- исходники с правом редактирования, а не PNG-скриншоты
Для интернет-магазина в этот список добавляются экраны, которые часто забывают заложить в бюджет: пустая корзина, товар закончился, промокод применён или не подошёл, страница оплаты с логотипами способов оплаты (например, эквайринга Т‑Банка, если магазин на WooCommerce принимает карты через него). Без этих состояний макет выглядит завершённым на скриншоте, но разработчику приходится дорисовывать половину интерфейса на глаз.
Если сайт собирается на Tilda, объём отрисовки меньше: платформа даёт готовые блоки конструктора, и дизайнер в основном стилизует их под бренд, а не рисует каждый пиксель с нуля. Отдельно с нуля обычно рисуются 1-2 нетиповых блока, для которых нет готового аналога в библиотеке блоков.
Конструктор, WordPress или кастомная разработка: где и как рисуют дизайн
Платформа определяет и объём работы дизайнера, и то, что вообще можно передать верстальщику.
| Платформа | Что рисует дизайнер | Срок на макеты по моей практике | Сайт под ключ у меня |
|---|---|---|---|
| Tilda | Стилизация готовых блоков под бренд, 1-2 уникальных блока с нуля | 5-7 дней на лендинг | от 30 000 ₽ |
| WordPress | Макеты под тему или Elementor, адаптив под три брейкпоинта | 7-10 дней | от 60 000 ₽ |
| Кастомная разработка (Next.js, React) | Полный UI-kit, все состояния интерфейса, прототип с переходами | 10-14 дней на лендинг, 3-4 недели на портал | от 80 000 ₽ |
Цены указаны за проект под ключ, то есть дизайн плюс сборка сайта. Стоимость домена зависит от зоны (.ru обычно дешевле .com), а не от платформы, поэтому в таблице её нет, закладывайте отдельной строкой в бюджет вне зависимости от того, что выбрали.
Для передачи макетов разработчику удобен Figma с её открытым API: верстальщик может забрать точные отступы, цвета и размеры прямо из файла, а не мерить линейкой по скриншоту.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Что подготовить перед тем, как заказать дизайн сайта
Чем меньше готово на старте, тем больше в макет попадает предположений дизайнера, которые потом придётся переделывать. Минимум, с которым я прошу приходить на бриф:
- цели сайта и портрет аудитории: кто покупает, с какого устройства заходит чаще
- 3-5 референсов с пометками, что конкретно нравится, а не просто ссылки без комментариев
- структура каталога или список услуг с ценами, если это магазин или прайс-лист
- реальные тексты хотя бы для главной страницы, а не «рыба» для заполнения макета
- логотип и брендбук, если они уже существуют
Без реального контента дизайнер верстает под условный текст, а когда приходят настоящие заголовки в два раза длиннее, сетка начинает разъезжаться прямо на этапе вёрстки.
Как проходит процесс: 5 этапов от брифа до передачи в разработку
- Бриф и сбор референсов, обычно 1-2 дня на созвон и переписку
- Вайрфрейм по структуре страниц, чтобы согласовать логику до того, как в дело пойдёт стиль
- Концепция: 2-3 варианта стиля на ключевую страницу, из которых заказчик выбирает направление
- Детальная прорисовка всех страниц и адаптив под три устройства
- Сборка UI-kit, подготовка исходников и передача в разработку
На этапе концепции обычно закладываю два круга правок, дальше это уже не мелкая доработка, а смена направления, и её разумнее считать отдельно от исходной сметы. Если сайт после отрисовки собирается на Tilda и готовых блоков конструктора для задуманного решения не хватает, кастомную стилизацию под такой дизайн беру отдельной услугой, кастомной вёрсткой макета в Тильде.
Как принимать макеты: чек-лист по этапам
Перед тем как подписывать акт по дизайну, прохожусь по списку:
- макет отвечает брифу, а не просто красиво выглядит сам по себе
- адаптив сделан отдельными макетами под брейкпоинты, а не автоматическим сжатием одного экрана
- прорисованы состояния интерфейса: наведение на кнопку, заблокированная кнопка, ошибка в поле формы, пустой список результатов
- контраст текста и фона читается, а не только смотрится стильно на ярком мониторе дизайнера
- стиль единообразен на всех страницах, а не только на той, что показывали на защите концепции
- переданы исходники с доступом на редактирование, а не ссылка «только просмотр»
Частые ошибки при заказе дизайна
Заказывают дизайн без брифа и референсов, а потом получают макет, который дизайнеру нравится больше, чем целевой аудитории. Утверждают только десктопную версию, а мобильную смотрят уже после оплаты и удивляются, что кнопки съехали. Просят сложную анимацию или нестандартную сетку, не уточнив заранее, на какой платформе это будет собираться, хотя ограничения у Tilda и у кастомной разработки на JavaScript разные: в конструкторе сценарий укладывается в возможности блоков и кастомного кода, в разработке с нуля свободы больше, но и стоит она дороже. И отдают исходники в PNG вместо ссылки на Figma, из-за чего верстальщик восстанавливает отступы и шрифты на глаз, а потом это всплывает в виде мелких расхождений с макетом уже на готовом сайте.
Частые вопросы
Сколько стоит заказать дизайн сайта?
У меня дизайн идёт в комплексе со сборкой сайта: сайт на Tilda от 30 000 ₽, сайт на WordPress от 60 000 ₽, кастомный лендинг на Next.js от 80 000 ₽, интернет-магазин под ключ от 80 000 ₽. У студий и фрилансеров на рынке цены на отдельный дизайн без разработки сильно различаются в зависимости от опыта команды и объёма макетов.
Сколько правок макета входит в работу?
На этапе согласования концепции обычно закладываю два круга правок. Дальше это уже не доработка деталей, а смена направления дизайна, и логичнее оценивать её отдельно, чем бесконечно тянуть один макет в разные стороны.
Можно ли заказать только дизайн без разработки?
Да, отдаю исходники в Figma с доступом на редактирование, и дальше вёрстку может взять любая другая команда или штатный разработчик заказчика.
Что делать, если дизайн не нравится после нескольких правок?
Обычно причина в том, что решили пропустить этап вайрфрейма и референсов и сразу перешли к финальному стилю. Возвращаемся на шаг назад: заново собираем референсы с пометками, что именно не устраивает, и пересобираем концепцию, а не правим один и тот же макет по кругу.