UX/UI-дизайн: что входит в услугу, этапы, цены и как принять
работу

UX/UI-дизайн как услуга — это проектирование интерфейса: логики, сценариев и внешнего вида страниц и экранов. Заказчик покупает не «красивые картинки», а продуманный путь пользователя к целевому действию и файлы, по которым разработчик собирает сайт или приложение без догадок и лишних вопросов. Цена этой работы в Украине в 2026 году различается в десятки раз: фрилансер отдаёт дизайн лендинга за несколько тысяч гривен, студийный прайс на дизайн лендинга доходит до 81 000–135 000 грн, а дизайн кабинета SaaS или CRM начинается от 450 000 грн. Разница не в «вкусе», а в объёме исследования, числе уникальных состояний интерфейса и наличии дизайн-системы.

Коротко: UX отвечает на вопрос «как человек пройдёт путь до цели», UI — «как этот путь выглядит и ощущается». Разделить их можно только в отчёте: красивая кнопка, стоящая там, где её никто не ищет, не приносит заявок, а идеально выстроенный сценарий с нечитаемым текстом теряет пользователя на том же шаге. Ниже — что входит в услугу, из чего складывается бюджет, сколько занимает работа, как её принимать и какие проверки отделяют дизайн от «просто макета».

Что входит в услугу UX/UI-дизайна

Услуга — это последовательность работ, в которой рисование макетов занимает далеко не первую по времени часть. Если подрядчик начинает с картинок в графическом редакторе, он рисует догадки: структуру и приоритеты на этом этапе ещё никто не проверял.

• Исследование: интервью с клиентами и менеджерами продаж, разбор текущей аналитики, изучение возражений из переписок и звонков, анализ трёх–пяти конкурентов по нише.
• Информационная архитектура: карта страниц и разделов, иерархия меню, приоритеты блоков на первом экране, логика переходов между разделами.
• Пользовательские сценарии: карта пути клиента (CJM) и схемы user flow — откуда человек приходит, что ищет и на каком шаге чаще всего уходит.
• Прототип: «серые» схемы без визуального оформления, на которых дёшево проверяется структура и последовательность блоков до того, как появится дизайн.
• Дизайн-концепция: два–три варианта визуального направления (палитра, типографика, характер иллюстраций) с обоснованием, а не один вариант «на согласование вкусом».
• UI-макеты всех экранов и состояний: активные и неактивные кнопки, ошибки полей, пустые списки, состояния загрузки, длинные и короткие тексты.
• Дизайн-система или UI-kit: библиотека компонентов с правилами отступов, сеток и цветов, чтобы новые страницы собирались без участия дизайнера.
• Адаптивы: отдельная проработка мобильной, планшетной и десктопной раскладки, а не автоматическое сжатие десктопного макета.
• Передача в разработку: спецификации размеров, состояния элементов, комментарии по анимации и поведению, исходные файлы и доступ команде разработки.

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

Чем UX отличается от UI и почему их нельзя разделить

UX-дизайн (user experience) проектирует опыт: что человек видит первым, какие шаги проходит до заявки, что происходит при ошибке, где он теряет мотивацию. UI-дизайн (user interface) отвечает за поверхность: сетку, типографику, цвет, иконки, состояния кнопок и полей. Разделение полезно в больших продуктовых командах, где над одним продуктом работают несколько специалистов, но на проекте сайта или мобильного приложения разделять их вредно.

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

Практический вывод для заказчика простой: один подрядчик должен отвечать и за логику, и за визуал, иначе на стыке появляются потери. Если вы заказываете веб-дизайн сайтов отдельно от проектирования структуры, требуйте как минимум прототип до начала отрисовки — иначе весь конфликт «удобно или красиво» будет решаться на готовых макетах, когда переделка стоит дороже всего.

Этапы работы: от брифа до передачи макетов

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

1. Бриф и цели: какие метрики улучшаем, кто аудитория, какие ограничения по срокам, бюджету и существующим системам.
2. Исследование: интервью, аналитика текущего сайта, разбор конкурентов, инвентаризация контента, который уже есть у компании.
3. Информационная архитектура и сценарии: карта страниц, user flow, приоритеты блоков.
4. Прототип и его проверка: структура до визуала, при возможности — на 5–10 пользователях или хотя бы на сотрудниках, которые не работают над проектом.
5. Дизайн-концепция: визуальное направление и его защита аргументами, а не вкусовщиной.
6. UI-макеты и адаптивы: все экраны, все состояния, мобильная версия как отдельный макет.
7. Дизайн-система и передача: компоненты, спецификации, исходники, ответы на вопросы команды разработки после старта вёрстки.

Отдельно стоит договориться о числе итераций. В нормальном процессе их две-три на этапе концепции и одна-две после тестирования прототипа; «бесконечные правки до полного удовлетворения» в договоре без описания критериев почти всегда заканчиваются или доплатой, или срывом срока. Такой же ориентир по объёму: лендинг — это один сценарий и один полный макет, корпоративный сайт — 5–10 уникальных типов страниц, интернет-магазин — более 20 экранов с состояниями каталога, фильтров, корзины и оформления заказа.

Что заказчик получает на выходе

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

Из чего складывается цена на UX/UI-дизайн

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

• Тип проекта: лендинг с одним сценарием, корпоративный сайт с меню второго уровня, магазин с каталогом и оформлением заказа, личный кабинет или SaaS с ролями доступа.
• Число уникальных макетов и состояний: каждое состояние фильтра, пустой список, ошибка оплаты и письмо-уведомление — это отдельная работа, а не «ещё один экран».
• Глубина UX-части: интервью, тестирование прототипа и карта пути клиента добавляют время на старте, но экономят переделки на этапе разработки.
• Дизайн-система: создание библиотеки компонентов удорожает первый проект и заметно удешевляет каждый следующий экран и последующие доработки.
• Доступность и производительность: контраст, размеры кликабельных зон, поведение на медленной сети и старых устройствах.
• Формат передачи: файлы «как нарисовано» без спецификаций перекладывают разбор макета на разработчика, и это почти всегда выходит дороже.

По открытым прайсам украинских студий и фриланс-платформ на 01.10.2026 рынок делится на три полосы. Первая — фриланс: счёт идёт в тысячах гривен (лендинг от 4 000 грн, дизайн мобильного приложения от 10 000 грн, разовые предложения исполнителей — от 6 000 грн), здесь нет исследования и часто нет адаптивов. Вторая — студии: лендинг 81 000–135 000 грн со сроком 1–2 недели, корпоративный сайт 157 500–270 000 грн за 3–6 недель, интернет-магазин 225 000–360 000 грн и больше за 6–10 недель. Третья — продуктовые команды: кабинеты, CRM и SaaS с дизайн-системой стартуют от 450 000 грн и занимают 8–16 недель.

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

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

Сроки в открытых описаниях процессов украинских команд на 01.10.2026 выглядят так: лендинг — 1–2 недели, корпоративный сайт — 3–6 недель, интернет-магазин — 6–10 недель, кабинеты и SaaS — 8–16 недель. Это время именно на дизайн, без учёта разработки сайта и вёрстки и без времени на ваши согласования.

Срок растягивают четыре вещи: сбор контента (тексты, фото, документы, описания товаров); долгие согласования внутри компании, когда решение принимает коллегия; доработки объёма после старта, когда «добавим ещё раздел» появляется на середине работы; отсутствие ответственного с вашей стороны, который принимает решение в один шаг. Поэтому фиксировать нужно не только срок исполнителя, но и срок своей обратной связи — обычно 1–2 рабочих дня на круг согласования.

Почему UX влияет на деньги, а не только на удобство

Дизайн интерфейса связан с измеримыми вещами. Google в документации по page experience прямо пишет, что единого сигнала «качество страницы» не существует, но Core Web Vitals его системы ранжирования используют. Пороги на 01.10.2026 такие: LCP — не более 2,5 секунды, INP — не более 200 миллисекунд, CLS — не более 0,1. Хорошие оценки сами по себе не гарантируют позиций, но плохие метрики означают реальный дискомфорт пользователя.

• LCP (Largest Contentful Paint) — скорость отрисовки главного элемента: обычно это заголовок, картинка первого экрана или видео. Норма — до 2,5 секунды.
• INP (Interaction to Next Paint) — отзывчивость интерфейса на действия: норма до 200 миллисекунд на нажатие и ввод.
• CLS (Cumulative Layout Shift) — визуальная стабильность: норма до 0,1, иначе кнопки уезжают из-под курсора в момент клика.

На интерфейсах, где что-то покупают или оформляют заявку, UX виден в деньгах напрямую. По сводке исследований Baymard Institute (обновление от 22.09.2025) средний показатель брошенных корзин — 70,22 %. При этом 17 % покупателей уходили из-за слишком длинного или сложного оформления заказа, а идеальный поток оформления укладывается в 12–14 элементов формы против 23,48 элемента в среднем по базе бенчмарков этих исследований. Это аргумент в пользу того, чтобы проектировать E-commerce разработку вместе с дизайном, а не после него: убрать лишние поля в форме дешевле, чем потом докупать трафик.

Проверенный инструмент ревизии макетов — 10 эвристик юзабилити Якоба Нильсена (Nielsen Norman Group): видимость состояния системы, соответствие реальному миру, свобода действий и отмены, единообразие, предотвращение ошибок, узнавание вместо припоминания, гибкость, эстетичный минимализм, помощь в диагностике ошибок и справка. Это не догма, а чек-лист: пройдите по нему макет до вёрстки, и половина спорных решений отпадёт сама.

Доступность как часть UX, а не отдельная галочка

Стандарт WCAG 2.2 опубликован W3C как рекомендация 12 декабря 2024 года, и часть его требований напрямую касается дизайна. Контраст текста по критерию 1.4.3 (уровень AA) — не ниже 4,5:1, для крупного текста — 3:1; размер кликабельной зоны по критерию 2.5.8 — минимум 24 на 24 CSS-пикселя (в новом стандарте это требование уровня AA). Практический смысл простой: контрастные подписи и крупные кнопки помогают не только людям со слабым зрением, но и всем, кто открывает сайт с телефона на улице.

Дизайн-система: зачем она бизнесу, а не дизайнеру

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

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

Типичные ошибки заказчика и подрядчика

• Начинать с макетов, не описав цели и аудиторию: в результате дизайн нравится руководству, но не отвечает на вопросы клиента.
• Согласовывать «по вкусу», без критериев: спорят о цвете кнопки вместо того, чтобы проверить, находит ли пользователь путь к заявке.
• Проектировать только «идеальный» сценарий: без пустых состояний, ошибок, длинных текстов и медленной сети интерфейс разваливается в реальной эксплуатации.
• Рисовать только десктоп и «сжимать» его под мобильные: на телефоне теряются приоритеты и кнопки уезжают за край экрана.
• Отдавать макеты без спецификаций: разработчик трактует отступы на глаз, и результат отличается от согласованного.
• Заказывать редизайн ради редизайна: сначала стоит проверить аналитику и найти, на каком шаге теряются пользователи, иначе дорогая переделка улучшит только внешний вид.
• Забывать про посадочные страницы под рекламу: если трафик идёт с платных кампаний, логичнее сначала спроектировать разработку landing page под конкретный запрос, а не вести оплаченные клики на общую главную.

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

Как выбрать подрядчика и принять работу

Проверять подрядчика стоит по процессу, а не по портфолио. Портфолио говорит о вкусе, а о результате — только процесс и аргументы.

• Задаёт ли подрядчик вопросы о целях, аудитории и метриках до расчёта стоимости.
• Показывает ли прототипы и объясняет ли решения: «так красивее» — не объяснение.
• Говорит ли о состояниях, адаптивах и передаче в разработку без напоминаний.
• Может ли назвать, что именно будет считать результатом своей работы.
• Есть ли в договоре состав работ, число итераций и порядок приёмки.
• Есть ли у команды разработка — или дизайн придётся «продавать» программистам, которые его не рисовали.

Приёмка проходит по формальным критериям, а не по настроению. Убедитесь, что макеты содержат все состояния: обычное, наведение, нажатие, отключённое, ошибка, загрузка. Мобильная версия должна быть спроектирована отдельно, а не получена сжатием десктопа. В библиотеке компонентов нужны правила использования, а не только картинки. Отступы и размеры — заданы числами. Исходные файлы — переданы вам, а не оставлены «в облаке подрядчика».

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

Что считать результатом работы

Дизайн измеряется не количеством нарисованных экранов, а изменениями в поведении пользователей. Базовый набор метрик, который стоит зафиксировать до старта: конверсия целевого действия на ключевых страницах, доля отказов и глубина просмотра, время до первого значимого действия, обращения в поддержку по непонятным местам интерфейса, скорость прохождения формы. Чтобы это было видно, нужна корректная аналитика — без неё сравнение «до и после» превращается в спор о впечатлениях: настройка веб-аналитики и Google Analytics 4 обычно делается параллельно с проектированием, чтобы к релизу уже была база для сравнения. Если проект касается приложения, а не сайта, логика та же — см. разработку мобильных приложений в Украине с этапами и порядком работ.

Редизайн или точечные правки

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

Итог

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

Обсудить UX/UI-дизайн под ваш проект