В смете на дизайн сайта часто стоят две строки: UX и UI. Заказчик видит два ценника за то, что со стороны кажется одной работой "нарисовать красиво". Разбираем, чем эти строки отличаются и почему первая обычно дороже второй.
Путаница держится на том, что обе строки в договоре называются словом "дизайн". Но за ними стоят разные вопросы. UX отвечает на вопрос "что где стоит и почему именно так", UI - на вопрос "как это выглядит". Первое можно проверить цифрами, второе почти нельзя.
Бытовой пример, который снимает половину вопросов
Входная дверь в подъезд. UX решает, в какую сторону она открывается, на какой высоте ручка, нужен ли доводчик и пролезет ли в проём коляска. UI решает, какого дверь цвета, какой формы ручка и каким шрифтом набран номер дома.
Красивая дверь, которая открывается внутрь и упирается в лестницу, - это отличный UI при провальном UX. Жильцы будут её ненавидеть, хотя выглядит она дорого.
На сайте то же самое. Страница бывает собрана в приятной палитре и при этом прячет цену на третьем экране и требует девять полей в форме. Люди уходят, а владелец винит рекламу.
Что входит в UX-часть
Сценарии клиента. Кто приходит на страницу, с какого источника, что уже знает и чего боится. Клиент из поиска по запросу "цена" и клиент из рассылки, который вас знает год, ведут себя по-разному.
Структура и порядок блоков. Что показать первым, что вторым, где поставить цены, куда убрать историю компании. Разбор структуры через путь клиента мы описывали в статье про прототип сайта.
Логика форм. Сколько полей, какие обязательные, что происходит при ошибке, что человек видит после отправки. Каждое лишнее поле в форме заявки стоит части обращений: по нашим проектам сокращение формы с шести полей до трёх давало прирост заявок в пределах 15-30%.
Состояния. Что видно, когда товаров в категории нет, когда фильтр ничего не нашёл, когда файл ещё грузится, когда оплата не прошла. Это самая часто забываемая часть: на макетах всё всегда полное и успешное, а в жизни половина экранов пустые.
Тексты интерфейса. Надписи на кнопках, подписи к полям, заголовки блоков. "Отправить" и "Получить расчёт за 2 часа" - это одна и та же кнопка с разной конверсией.
Что входит в UI-часть
Сетка и отступы. Единая система колонок и вертикальных интервалов, из-за которой страницы выглядят частью одного сайта, а не набором случайных экранов.
Типографика. Пара шрифтов, размеры заголовков, межстрочный интервал, длина строки. Длинная строка в 130 знаков читается заметно хуже строки в 70-80.
Цвет. Основной, акцентный, нейтральные. Акцентным цветом красится действие, ради которого страница существует, и больше почти ничего.
Иконки и графика. Один стиль на весь сайт. Смесь плоских иконок, объёмных и фотографий с фотостока сразу читается как самодел.
Состояния элементов. Как выглядит кнопка при наведении, при нажатии, когда она заблокирована, как подсвечивается поле с ошибкой.
Адаптив. Как всё перестраивается на планшете и телефоне. Это не "сожмём в одну колонку": на мобильном меняется порядок блоков, размер шрифтов и способ показа таблиц.
Когда страниц много, набор этих решений оформляют отдельно, чтобы новые разделы собирались без дизайнера. Подробнее об этом - в материале про дизайн-систему сайта.
Одна страница услуги под двумя углами
Возьмём страницу "Ремонт квартир под ключ". UX-решения по ней: цена диапазоном на первом экране, потому что это первый вопрос; калькулятор до блока отзывов, а не после; фотографии объектов с подписью района и метража; форма из трёх полей рядом с калькулятором, а не только внизу страницы.
UI-решения по той же странице: акцентный оранжевый только на кнопке расчёта, заголовки в 40 пикселей на десктопе и 28 на мобильном, карточки объектов одного размера с одинаковым кадрированием фото.
Поменяйте местами калькулятор и отзывы - изменится количество заявок. Поменяйте оттенок оранжевого - не изменится ничего. В этом вся разница между двумя строками сметы.
Из чего складывается смета дизайнера
Порядок цифр для 2026 года, студийные ставки. У фрилансеров ниже, у крупных агентств выше в 2-3 раза.
| Этап | Что на выходе | Лендинг | Сайт на 8-15 страниц |
|---|---|---|---|
| Сценарии и структура | Карта страниц, порядок блоков | 5 000-12 000 руб. | 15 000-35 000 руб. |
| Прототип | Схематичные экраны без цвета | 10 000-25 000 руб. | 30 000-70 000 руб. |
| Дизайн главной | Готовый макет | 15 000-35 000 руб. | 25 000-50 000 руб. |
| Дизайн внутренних | Типовые шаблоны страниц | - | 40 000-120 000 руб. |
| Адаптив | Мобильная и планшетная версии | 8 000-20 000 руб. | 20 000-45 000 руб. |
Внутренние страницы считаются по типам, а не по количеству. Двадцать карточек услуг - это один макет, а не двадцать.
Почему прототип экономит деньги на вёрстке
Стоимость правки растёт по мере готовности. Переставить блок в прототипе - 20 минут. В отрисованном макете - пара часов вместе с адаптивом. В свёрстанной странице - от четырёх часов плюс повторная проверка на всех разрешениях. В работающем сайте с подключённой аналитикой добавьте ещё правку целей и разметки.
Отсюда правило: споры о структуре надо закрывать на прототипе. Заказчику это непривычно, серые схематичные экраны трудно принимать. Зато именно на них видно логику.
То же касается передачи макетов в вёрстку: чем аккуратнее собран файл, тем меньше вопросов у верстальщика. Про правила передачи писали в статье Figma для сайта.
Кто прав, если дизайнер и заказчик спорят
Критерий один: задача пользователя и измеримый результат, а не вкус участников спора. Работающая формулировка звучит так: "какое действие человек должен совершить на этом экране и что мешает ему это сделать".
Типичный спор из практики. Заказчик просит убрать цену с первого экрана: "пусть сначала заинтересуются". Дизайнер возражает: люди из поиска по коммерческому запросу ищут цену и уходят, если не находят. Решается это не голосованием, а проверкой: оставили диапазон "от 15 000 рублей" на первом экране, через месяц сравнили показатель отказов и заявки. Такие проверки мы разбирали в материале про способы поднять конверсию.
Если аргумент дизайнера сводится к "сейчас так делают", решение можно менять: у трендов срок жизни короче, чем у сайта.
Как принимать макеты, если вы не дизайнер
Не спрашивайте себя "нравится ли мне". Проверяйте другое:
- Откройте макет на пять секунд и закройте. Что вы поняли о компании? Если ничего, первый экран не работает.
- Найдите на каждой странице главное действие. Оно должно быть одно и заметное.
- Пройдите путь от входа до отправленной заявки. Сколько экранов и кликов, где вы задумались.
- Покажите двум людям не из вашей отрасли и попросите сказать, куда они нажмут. Молча, без подсказок.
- Спросите, как выглядит страница, если товаров нет, а форма отправлена с ошибкой.
- Посмотрите мобильную версию на своём телефоне, а не на большом экране.
Отдельно проверьте страницу на типовые промахи, которые видны без специальных знаний, - собрали их в разборе ошибок посадочной страницы.
Требования, которые ломают удобство
"Сделайте как у конкурента". У конкурента другая аудитория, другой прайс и, возможно, неудачный сайт, который просто дольше живёт. Копируется не решение, а видимость решения.
"Уберите пустое место". Пустое место - инструмент, а не пробел по недосмотру. Плотно набитая страница читается хуже, и первым страдает главное действие.
"Поднимите всё выше первого экрана". Туда физически не влезет всё. Попытка кончается мелким шрифтом и тремя кнопками рядом, из которых не выбрать.
"Логотип побольше". Логотип не продаёт. Место, отданное ему, отнимается у заголовка, который объясняет, чем вы полезны.
Что дать дизайнеру, чтобы потом не переделывать
- Готовые тексты или хотя бы смысловые заготовки блоков. Дизайн по "рыбе" переделывается почти всегда: реальные заголовки длиннее.
- Фотографии объектов, товаров, команды. Сток выдаёт сайт с головой.
- Список того, что должно работать: формы, калькулятор, онлайн-запись, выгрузка в CRM.
- Два-три примера сайтов с объяснением, что именно вам в них нравится. Не "вот этот красивый", а "здесь понятно, что дальше".
- Одного человека с правом финального решения. Правки от четырёх сотрудников противоречат друг другу и оплачиваются вами.
- Метрику, по которой через три месяца будет ясно, получилось или нет: заявки, звонки, заказы.
Что из этого стоит запомнить перед сметой
UX - это решения о содержании и порядке, UI - о внешнем виде. Первое влияет на заявки, второе на доверие, и обе части нужны. Экономия на UX выглядит выгодной ровно до момента, когда красивый сайт приносит меньше обращений, чем старый.
Оценивать работу проще по проверяемым вещам: понятно ли, куда нажимать, и доходит ли человек до заявки. Вкус в этом списке последний.
Если хотите прикинуть, во что обойдётся дизайн вашего проекта до разговора с подрядчиком, соберите конфигурацию в нашем калькуляторе стоимости: он показывает вилку по типу сайта и объёму страниц, а дальше уже есть о чём говорить предметно.
