UX/UI-дизайн простыми словами: за что вы платите

В сметах на сайт или приложение часто стоит строчка «UX/UI-дизайн», и заказчик не всегда понимает, что за неё платит. Объясню без терминов

01UX и UI это разные вещи

UX (user experience) это то, насколько человеку легко сделать то, зачем он пришёл. Найти товар, записаться, оплатить, получить ответ. UX отвечает на вопросы «что», «где» и «в каком порядке»

UI (user interface) это то, как интерфейс выглядит: цвета, шрифты, кнопки, иконки, отступы. UI отвечает на вопрос «как»

Простой пример из жизни: UX это планировка квартиры, а UI это отделка. Можно сделать дорогую отделку в квартире, где из спальни в кухню нужно идти через ванную. Красиво, но жить неудобно

02Почему без UX красивый сайт не работает

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

Хороший UX почти не заметен. Человек просто делает то, что хотел, и не задумывается, почему это было легко. Как интерфейс ведёт человека к цели, я подробнее писал в статье интерфейс это проводник в мир продукта

03Из чего состоит работа

1. Исследование. Кто пользователи, какие у них задачи, что делают конкуренты, где люди спотыкаются сейчас
2. Структура и сценарии. Какие экраны нужны и как человек проходит путь от входа до цели
3. Прототип. Чёрно-белые схемы экранов без дизайна. На них проверяют логику, пока изменения ещё дешёвые
4. Визуальный дизайн. Стиль, компоненты, макеты всех экранов для телефона и компьютера
5. UI-кит или дизайн-система. Библиотека кнопок, полей, карточек и правил, по которым собираются новые экраны. Зачем она нужна, я разбирал в статье про дизайн-систему
6. Передача в разработку. Макеты, состояния, спецификации, ответы на вопросы разработчиков

04Что вы получаете на руки

• Кликабельный прототип, который можно показать команде и инвесторам
• Макеты всех экранов в Figma с правами на редактирование
• Библиотеку компонентов для будущих доработок
• Описание поведения: что происходит при ошибке, пустом списке, долгой загрузке

05Где можно сэкономить, а где нет

Сэкономить можно на количестве экранов: сначала сделать ключевые сценарии, остальные добавить позже. А вот исследование и прототип пропускать не стоит. Ошибку в логике, найденную на прототипе, исправить намного дешевле, чем в готовом коде

06Сколько стоит

UX/UI-дизайн сервиса или приложения я делаю от 89 000 ₽. Цена зависит от количества сценариев и экранов. Подробнее о форматах и этапах на странице дизайна сайтов и интерфейсов