Разработка дизайна веб-приложений почти всегда идёт в связке с самой разработкой: макет без вёрстки и логики - просто картинка в Figma, а код без продуманного интерфейса разваливается на удобство использования уже на втором экране. Заказчики регулярно путают эти два процесса и потом удивляются, почему подрядчик выставил отдельный счёт за UX-исследование или прототип. Я делаю и дизайн, и разработку веб-приложений, и на практике вижу, где проходит граница между тем, что включено в базовую цену, и тем, что оплачивается сверху.
Дизайн и разработка веб-приложения: где проходит граница
Дизайн веб-приложения - это экраны, сценарии переходов между ними и логика поведения интерфейса: что происходит при клике, как ведёт себя форма при ошибке, куда пользователь попадает после оплаты. Разработка - это код, который всё это реализует: фронтенд на React, Vue или Next.js, бэкенд, база данных, интеграции с внешними сервисами.
Для сайта на Tilda граница почти незаметна: я адаптирую готовые блоки конструктора под задачу клиента, и это уже входит в стоимость сайта от 30 000 ₽. Отдельного этапа проектирования интерфейса там обычно нет, структура блоков задана самим конструктором. Если нужно точечно докрутить визуал готового Tilda-сайта - поменять баннер, добавить нестандартный блок, это ближе к правке, чем к дизайн-этапу, и стоит от 3 000 ₽ за скрипт.
Для полноценного веб-сервиса или SaaS ситуация другая. Прежде чем писать код, нужно понять, сколько экранов у продукта, как пользователь проходит путь от регистрации до оплаты, какие данные показывать на дашборде. Это отдельная работа, и в проектах от 300 000 ₽ она занимает от 1 до 3 недель до того, как фронтенд-разработчик открывает редактор кода.
Входит ли UI/UX в стоимость разработки или это отдельная статья расходов
На типовых проектах с понятной структурой - лендинг на Next.js от 80 000 ₽, интернет-магазин под ключ от 80 000 ₽, дизайн уже заложен в цену, сценарии предсказуемы: каталог, карточка товара, корзина, оформление заказа. Отдельный счёт за прототип я не выставляю, если состав экранов стандартный.
С кастомными продуктами так не работает. CRM или админ-панель на React от 100 000 ₽, дашборд на Vue.js от 90 000 ₽, бэкенд на Laravel со сложной логикой от 100 000 ₽ - в таких проектах количество экранов и связей между ними заранее неизвестно, и без прототипа оценка превращается в гадание. Поэтому дизайн-этап выделяется отдельно: сначала утверждаем макет, потом считаем часы на разработку.
Правило, которого я придерживаюсь на практике: не начинаю писать код, пока макет не согласован. Переделка вёрстки после того, как фронтенд уже собран на компонентах, обходится дороже, чем лишняя неделя на прототип и правки в Figma.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Из чего складывается цена дизайна веб-приложения
Цена зависит не от категории проекта, а от объёма и сложности экранов, которые нужно спроектировать. Я ориентируюсь на такие пункты: количество уникальных экранов и их состояний - пустой, с ошибкой, с данными, нужна ли адаптивная версия под мобильные, требуется ли отдельная дизайн-система с переиспользуемыми компонентами, сколько итераций правок заложено в смету.
| Тип проекта | Что входит в дизайн-этап | Цена, от ₽ |
|---|---|---|
| Сайт на Tilda | Адаптация готовых блоков под задачу | 30 000 |
| Лендинг на Next.js | Прототип и UI-кит под структуру продукта | 80 000 |
| Интернет-магазин под ключ | UX каталога, карточки товара, оформления заказа | 80 000 |
| CRM/админ-панель на React | Проектирование экранов, дизайн-система | 100 000 |
| Дашборд/BI на Vue.js | Визуализация данных, UX виджетов и фильтров | 90 000 |
| Веб-сервис/SaaS/SPA | Полное UX-исследование и дизайн-система | 300 000 |
В эту вилку не входят расходы, не связанные с самим дизайном: подключение эквайринга через Т‑Банк или WooCommerce я оцениваю отдельно, там считается логика интеграции и комиссия по вашему тарифу банка, а не макет. То же с доставкой - если в интерфейсе нужно показать зоны СДЭК и расчёт стоимости, это расширяет количество экранов, но саму интеграцию я закладываю в разработку, а не в дизайн.
Когда дизайн заказывают отдельно от разработки
Есть три ситуации, где имеет смысл разделить дизайн и разработку на разные заказы.
Первая - у вас уже есть штатный дизайнер или агентство, которое сделало макет в Figma, а нужен подрядчик только на верстку и бэкенд. В этом случае я работаю по готовым файлам - если макет собран аккуратно, с состояниями и адаптивом, это ускоряет работу и снижает цену разработки.
Вторая - нужен кликабельный прототип для питча инвесторам или проверки гипотезы, а разработку планируете начинать позже, когда появится финансирование. Дизайн в этом случае идёт отдельным этапом с фиксированной ценой.
Третья - у компании несколько будущих продуктов, и нужна единая дизайн-система, которую потом переиспользуют разные команды разработки. Тут дизайн-этап осознанно выносится вперёд конкретного приложения.
Если у вас уже есть готовый макет и нужна только реализация в коде, я оцениваю разработку веб-приложений отдельно от дизайна - присылайте макет, и я скажу, сколько займёт вёрстка и бэкенд.
Как я строю процесс: от прототипа до готового интерфейса
Последовательность одна и та же независимо от того, лендинг это или SaaS, отличается только глубина проработки каждого шага.
- Бриф и анализ задачи - кто пользователь, какие действия должен совершить, какие данные показывать.
- Вайрфреймы - схематичная структура экранов без цвета и шрифтов, чтобы согласовать логику раньше визуала.
- UI-кит - цвета, типографика, компоненты кнопок и форм для единого стиля.
- Хай-фай макеты в Figma - готовые экраны с реальным контентом.
- Кликабельный прототип - переходы между экранами для проверки сценариев до старта разработки.
- Передача во фронтенд - я же верстаю компоненты на React, Vue или Next.js, поэтому потери на стыке дизайна и кода не происходит.
На практике это экономит время именно на стыке: когда дизайнер и разработчик - разные люди, часть решений в макете невозможно реализовать один в один, и начинаются правки на лету. Когда дизайн и разработку веду сам, в макет попадает только то, что реально собрать в разумный срок.
Сроки: сколько занимает проектирование интерфейса
Для лендинга на Next.js дизайн занимает 3-5 дней вместе с правками. Для интернет-магазина - 1-2 недели, нужно проработать каталог, карточку товара и чекаут с учётом оплаты и доставки. Для CRM, дашборда или SaaS дизайн-этап растягивается на 2-4 недели и входит в общий срок разработки веб-сервиса от 8 недель.
Быстрее не получается по одной причине: макет, собранный за два дня без проверки сценариев, потом переделывается уже после старта разработки, а это дороже и дольше, чем обычный цикл вайрфрейм, прототип, утверждение.
Частые вопросы
Дизайн веб-приложения входит в стоимость разработки?
Для типовых проектов - лендинга на Next.js от 80 000 ₽ или интернет-магазина от 80 000 ₽, да, дизайн уже включён в смету. Для кастомных продуктов вроде CRM от 100 000 ₽ или SaaS от 300 000 ₽ дизайн-этап выделяется отдельной строкой, потому что объём экранов заранее неизвестен.
Сколько стоит дизайн отдельно от разработки?
Если нужен только прототип или UI-кит без последующей разработки, я оцениваю его на консультации от 3 000 ₽ - там смотрю задачу и называю точную вилку под ваш продукт. Итоговая цена зависит от количества экранов и того, нужна ли отдельная дизайн-система.
Можно ли начать разработку без готового дизайна?
Технически можно, но я так не работаю на проектах сложнее лендинга: без согласованного макета фронтенд-разработчик додумывает интерфейс по ходу, а потом всё переделывается под утверждённый вариант. Дешевле сначала закрыть дизайн, потом переходить к коду.
Кто делает дизайн - вы сами или привлечённый дизайнер?
Дизайн и разработку я веду сам, от вайрфрейма до вёрстки на React, Vue или Next.js. Это убирает потери на передаче макета между дизайнером и разработчиком - в интерфейс сразу закладывается то, что реально собрать в срок проекта.