Короткий ответ: не с количества страниц
Объём UX-дизайна определяется уникальными шаблонами, пользовательскими сценариями, ролями, состояниями интерфейса и адаптивными вариантами. Поэтому два проекта с десятью экранами могут заметно различаться по трудоёмкости.
Десять информационных страниц корпоративного сайта иногда собираются из трёх повторяемых шаблонов. А десять экранов личного кабинета могут включать таблицы, фильтры, права доступа, массовые операции, ошибки и разные действия для сотрудников и администраторов.
Чтобы получить реалистичную оценку, запрос «нужен дизайн сайта» нужно превратить в перечень шаблонов, сценариев, состояний, устройств и результатов, которые подрядчик передаст команде разработки.
Практическая модель оценки: уникальные шаблоны × сценарии × состояния × роли × адаптивные варианты.
Это не формула автоматического калькулятора, а способ обнаружить скрытый объём до согласования сметы.
Что входит в UI/UX-дизайн
UX отвечает за структуру и логику взаимодействия: как пользователь найдёт нужный раздел, заполнит форму, оформит заказ или выполнит рабочую операцию. UI определяет визуальное представление этой логики: сетку, типографику, цвета, компоненты и иерархию элементов.
В типовом проекте UI/UX-дизайн интерфейсов может включать:
- разбор бизнес-задачи, аудитории и технических ограничений;
- карту страниц, ролей или пользовательских маршрутов;
- информационную архитектуру;
- wireframes и прототип ключевых сценариев;
- визуальную концепцию и финальные макеты;
- предусмотренные адаптивные версии;
- состояния компонентов, форм и данных;
- UI kit или дизайн-систему;
- подготовку материалов для разработчиков;
- согласованное количество итераций правок.
Этот состав не является единым стандартом рынка. В одном предложении «дизайн лендинга» означает только макет для компьютера, в другом — структуру, прототип, мобильную версию, компоненты и сопровождение во время вёрстки. Сравнивать такие предложения только по итоговой сумме некорректно.
Что может рассчитываться отдельно
До заключения договора стоит проверить, включены ли в смету тексты, брендинг, логотип, иллюстрации, 3D-графика, анимация и исследования с респондентами. Отдельными работами также могут быть рекрутинг участников для тестирования, design QA после реализации и развитие интерфейса после запуска.
Если подрядчик не фиксирует результат каждого этапа, состав и бюджет проекта могут измениться уже в процессе работы.
Какие факторы сильнее всего влияют на оценку
| Фактор | Что увеличивает объём |
|---|---|
| Сценарии | Несколько способов выполнить задачу, многошаговые процессы и зависимые действия |
| Роли | Разные данные и права для клиента, сотрудника, партнёра и администратора |
| Логика | Фильтры, таблицы, расчёты, конструкторы, загрузка файлов и массовые операции |
| Состояния | Загрузка, отсутствие данных, ошибки, ограничения, успех и недоступные действия |
| Исследования | Интервью, изучение аналитики, тестирование прототипов и проверка гипотез |
| Адаптив | Разное поведение навигации, таблиц, фильтров и форм на устройствах |
| Визуальный стиль | Поиск концепции, авторская графика, сложные диаграммы и анимация |
| Компоненты | Большая библиотека элементов, токены, варианты и правила использования |
| Передача | Документация, консультации разработчиков и проверка реализации |
На оценку также влияют готовность контента и фирменного стиля. Если тексты отсутствуют, структура может измениться после появления реальных материалов. Если нет визуальной идентичности, дизайнеру сначала потребуется определить базовый стиль.
Редизайн действующего продукта не обязательно проще проектирования с нуля. Команде нужно изучить работающие функции, сохранить привычные маршруты, учесть ограничения старого кода и продумать переход на новый интерфейс.
Почему цена за экран часто искажает оценку
Цена за экран может быть полезной технической единицей, когда проект уже декомпозирован. На первой встрече она создаёт ложную точность: стороны ещё не договорились, что считать экраном и что в него входит.
Одинаковое количество экранов — разная сложность
Страница с текстом, изображением и формой обратной связи не равна рабочему модулю SaaS. В модуле могут быть фильтры, сортировка, редактирование, подтверждение действий, экспорт, разные права и обработка ошибок. Формально оба объекта можно назвать одним экраном, хотя они требуют разного объёма проектирования.
Один экран может иметь много состояний
Форма заявки существует не только в исходном виде. Нужно показать фокус в поле, подсказку, ошибку валидации, отправку, серверную ошибку и успешный результат. Если действие временно недоступно, пользователю требуется понятное объяснение причины.
Такие состояния влияют на поведение интерфейса, доступность и качество итогового продукта, поэтому их следует зафиксировать до передачи макетов в разработку.
Шаблон и экземпляр — не одно и то же
Сто статей или карточек товаров на одном шаблоне не означают сто уникальных дизайнов. При этом одна карточка товара с вариантами, совместимостью, отсутствием на складе, подпиской на поступление и несколькими способами доставки может потребовать проработки каждого условия.
При сравнении смет полезно уточнять тип каждого экрана: новый шаблон, повторяемый экземпляр, вариант для роли или состояние существующего компонента.
Сколько работы требует лендинг
Относительно простой лендинг создаётся быстрее, если у бизнеса есть сформулированный оффер, готовый фирменный стиль, контент и один основной сценарий — например, отправка заявки. В таком проекте используются стандартные блоки, простая форма и две основные версии: desktop и mobile.
Одна URL-страница становится сложным дизайн-проектом, если требуется найти визуальную концепцию, подготовить варианты первого экрана, нарисовать иллюстрации, спроектировать квиз или калькулятор, предусмотреть анимацию и развести предложения для разных аудиторий.
Например, типовые преимущества и отзывы можно собрать из повторяемых компонентов, а интерактивный калькулятор потребует логики, нескольких шагов, проверки данных и итогового состояния.
Корпоративный сайт: оценивайте шаблоны
У корпоративного сайта может быть 50 страниц услуг, но только несколько уникальных шаблонов: главная, список услуг, детальная услуга, список кейсов, карточка кейса, блог, статья и контакты. После утверждения шаблона однотипные страницы наполняются через CMS.
Дополнительная проработка требуется при многоязычности, сложных формах, калькуляторах и разных типах контента. Макеты также должны учитывать заголовки разной длины, необязательные блоки, таблицы и реальные варианты изображений.
SEO-требования желательно определить до дизайна. Структура заголовков, перелинковка, хлебные крошки и место для содержательных текстов влияют на шаблоны. Если добавить их после утверждения макетов, часть страниц придётся пересобирать.
Интернет-магазин: проектируйте весь покупательский путь
Магазин рассматривают как связанный путь от поиска товара до получения заказа. Обычно он охватывает каталог, поиск, фильтры, карточку товара, варианты, корзину, оформление, оплату, доставку, личный кабинет и историю заказов.
На объём влияют варианты товара, совместимость, наличие в нескольких точках, минимальная партия, разные цены, промокоды, возвраты и способы получения.
Особого внимания требует checkout. По данным бенчмарка Baymard Institute (обновление от 25 ноября 2025 года), 64% desktop-чекаутов и 63% mobile-чекаутов получают оценку «mediocre» или ниже. Это многошаговый сценарий с адресом, доставкой, оплатой, авторизацией и обработкой ошибок, а не обычная информационная страница.
Например, интернет-магазин GONKA Shop из портфолио WebSolux включает каталог более чем из 15 000 позиций, поиск, подбор по автомобилю и калькулятор чиптюнинга. Здесь интерфейс должен поддерживать процесс подбора и покупки, а не только представление каталога. Другие факторы бюджета разобраны в материале про стоимость разработки интернет-магазина.
Личный кабинет или SaaS: учитывайте роли и данные
Веб-сервис обычно сложнее информационного сайта из-за плотности функций. В нём могут потребоваться таблицы, фильтры, графики, уведомления, настройки, подписки, оплаты, onboarding и массовые операции.
Экран списка проектов для владельца, сотрудника и администратора может выглядеть похоже, но показывать разные данные и действия. Владелец управляет оплатой и участниками, сотрудник работает только с назначенными объектами, администратор видит системные настройки.
В платформе для beauty-чемпионатов предусмотрены разные маршруты для участников, судей, спонсоров и организаторов. Система охватывает регистрацию, заявки, загрузку работ, судейство, оценки, сводные результаты и сертификаты.
Другой пример — редизайн действующей SaaS-платформы с большим личным кабинетом. Команда переработала интерфейс и выполнила миграцию со старых TPL-шаблонов на Vue, сохранив работающую бизнес-логику. В таких проектах legacy-ограничения и необходимость поэтапного перехода становятся отдельной частью оценки.
Почему состояния требуют отдельной проработки
Основной макет обычно показывает идеальную ситуацию: данные загрузились, текст поместился, у пользователя есть доступ. Реальный продукт должен работать и при других условиях.
- Loading: данные загружаются или действие выполняется.
- Empty: список пока пуст либо поиск не дал результатов.
- Error: возникла ошибка поля, сервера или соединения.
- Success: действие завершено, пользователю понятен следующий шаг.
- Disabled: действие недоступно при текущих условиях.
- No permission: у роли нет необходимых прав.
- Partial data: часть сведений отсутствует или ещё обновляется.
- Long content: названия, числа и тексты выходят за рамки идеального примера.
Не каждый проект требует отдельного макета для каждой комбинации. Но критические состояния нужно перечислить и определить правила их отображения. Иначе скрытый объём проявится во время разработки.
Почему адаптив — не уменьшенная копия desktop
Адаптив следует учитывать как отдельный объём. Оценка зависит не столько от количества разрешений, сколько от изменений во взаимодействии.
На небольшом сайте мобильная версия может ограничиться перестройкой сетки, меню и размеров элементов. В магазине или SaaS приходится отдельно продумывать фильтры, широкие таблицы, массовые операции, выбор даты, загрузку файлов и закреплённые кнопки.
В большинстве чисто сенсорных сценариев нельзя рассчитывать на hover. Экранная клавиатура сокращает рабочую область, таблицу иногда нужно заменить карточками, а длинный процесс — разделить на шаги. Поэтому формулировка «mobile включён» ещё не раскрывает состав работы.
Отдельный комплект планшетных макетов нужен не всегда. Иногда достаточно правил поведения между контрольными точками. Решение принимают по аудитории, особенностям интерфейса и устройствам, на которых пользователи будут выполнять задачи.
Когда достаточно UI kit, а когда нужна дизайн-система
UI kit — это библиотека визуальных элементов: кнопок, полей, карточек, таблиц и других компонентов. Для небольшого сайта или продукта с ограниченным количеством шаблонов этого часто достаточно.
Дизайн-система дополнительно описывает токены, состояния, варианты компонентов, правила применения и повторяемые паттерны. В расширенном варианте она синхронизируется с компонентами в коде.
Дизайн-система оправдана, если продукт развивается релизами, состоит из нескольких модулей, поддерживает много ролей или реализуется несколькими командами. Для разового лендинга полноценная система может быть избыточной.
Что должно быть передано в разработку
Фраза «передадим Figma» не описывает готовность проекта к реализации. Handoff обычно включает:
- утверждённые макеты и понятную структуру файла;
- компоненты, варианты и необходимые состояния;
- стили или дизайн-токены;
- правила адаптивного поведения;
- иконки, изображения и экспортируемые материалы;
- описание переходов и нестандартной логики;
- поведение форм и сообщений об ошибках;
- примеры реалистичного контента;
- доступ к интерактивному прототипу;
- порядок консультаций и согласования спорных деталей.
При сложной разработке сайтов и веб-приложений полезно предусмотреть design QA — проверку реализованного интерфейса дизайнером. Эта работа может входить в проект или оцениваться отдельно, поэтому условие лучше зафиксировать заранее.
О месте дизайна в полном производственном цикле читайте в материале про этапы разработки сайта.
Как самостоятельно оценить объём проекта
Для первичной декомпозиции не требуется полноценное техническое задание. Подготовьте ответы на следующие вопросы:
- Какой продукт нужно создать: лендинг, корпоративный сайт, магазин или сервис?
- Кто будет им пользоваться и какие роли предусмотрены?
- Какие основные задачи выполняет каждая роль?
- Какие уникальные страницы, шаблоны и рабочие модули нужны?
- Какие ошибки, ограничения и пустые состояния критичны?
- Нужны ли версии для desktop, tablet и mobile?
- Готовы ли фирменный стиль, тексты и изображения?
- Требуются ли интервью, анализ данных или тестирование прототипа?
- Достаточно ли UI kit или нужна развиваемая дизайн-система?
- Кто будет реализовывать интерфейс?
- Нужны ли консультации и design QA после передачи?
- Сколько раундов согласования входит в предложение?
Хорошая смета связывает стоимость с понятными этапами и результатами. Из неё должно быть видно, какие сценарии проектируются, сколько адаптивных вариантов готовится, какие состояния учитываются и что получает команда разработки.
Если дизайн является частью всего проекта, сопоставляйте его бюджет с функциональностью, интеграциями и технической реализацией. Эти факторы подробнее разобраны в статье о стоимости разработки сайта.
UI/UX-проекты WebSolux
WebSolux проектирует интерфейсы для сайтов, интернет-магазинов, личных кабинетов и веб-платформ. В состав работ в зависимости от задачи могут входить прототипирование, адаптивные макеты, UI kit, дизайн-система и подготовка материалов для разработки.
Для предварительной оценки достаточно описать продукт, пользователей, основные сценарии и нужные устройства. После декомпозиции можно определить состав работ и подготовить обоснованную смету.
FAQ
Цена за экран — хороший ориентир?
Да, но только после декомпозиции. Должно быть определено, что считается экраном, какие состояния и адаптивы входят и насколько макет повторяет существующий шаблон.
Что входит в UI/UX-дизайн?
Обычно — анализ задачи, структура, сценарии, прототип, визуальные макеты, предусмотренные адаптивы, состояния и подготовка материалов для разработки. Исследования с респондентами, тексты, брендинг, сложная графика и design QA могут рассчитываться отдельно.
Как оценивается адаптив?
По различиям в поведении, а не только по количеству разрешений. Если мобильная версия требует другой навигации, переработки таблиц, фильтров и порядка действий, она становится самостоятельной проектной задачей.
Нужен ли прототип?
Для простого лендинга иногда достаточно схемы блоков. Для магазина, кабинета или SaaS прототип помогает проверить структуру и переходы до визуального дизайна и разработки. Интерактивная версия особенно полезна для многошаговых сценариев и тестирования гипотез.
Источники и методология
При подготовке материала использованы рекомендации W3C по обработке ошибок и адаптивному отображению, материалы U.S. Web Design System о дизайн-токенах, а также исследование Baymard Institute об UX оформления заказа. Материал не содержит универсальных рыночных тарифов: состав услуг и методика оценки у подрядчиков различаются.
