Дизайн часто воспринимают как «сделать красиво» в конце проекта. На деле самая ценная его часть происходит до того, как написана первая строка кода: дизайнер решает, какие экраны нужны, в каком порядке человек по ним идёт и где он может запутаться. Исправить это в прототипе стоит часы, в готовом продукте — недели. Ниже — что входит в UX и UI, как проходит работа и что вы должны получить на выходе.
UX и UI — в чём разница
| UX | UI | |
|---|---|---|
| Вопрос | Сможет ли человек сделать то, зачем пришёл | Понятно и приятно ли это выглядит |
| Результат | Сценарии, структура экранов, прототип | Макеты, цвета, шрифты, компоненты |
| Ошибка стоит | Продукт, которым не пользуются | Продукт, которому не доверяют |
Одно без другого не работает: красивый интерфейс с запутанной логикой теряет клиентов так же, как понятный, но неряшливый. Поэтому обычно их делает одна команда в одном проекте.
Как проходит работа
- Задачи пользователей. Кто пользуется продуктом и что ему нужно сделать — оформить заказ, найти документ, записаться на приём.
- Сценарии. Путь человека по шагам, включая ошибки: нет товара, не прошла оплата, забыл пароль.
- Структура и прототип. Схемы экранов без цвета и картинок — чтобы обсуждать логику, а не оттенки.
- Проверка. Прототип дают попробовать нескольким реальным пользователям и смотрят, где они застревают.
- Визуальный дизайн. Макеты всех экранов и состояний в фирменном стиле.
- UI-кит и передача. Компоненты, отступы и правила — всё, что нужно разработчикам.
Мелочи, которые решают на телефоне
- Кнопки и ссылки такого размера, чтобы в них попадал палец, а не только курсор.
- Главное действие — внизу экрана, в зоне большого пальца.
- Поля ввода с правильной клавиатурой: цифры для телефона, почта для email.
- Понятные сообщения об ошибках рядом с полем, а не общий красный текст наверху.
Для приложений правила платформ строже, чем для сайтов, — этим занимается отдельное направление, дизайн мобильных приложений. Как проверить сайт на телефоне самостоятельно, мы описали в гайде о мобильной версии сайта.
Что вы должны получить
| Что | Зачем |
|---|---|
| Карта экранов и сценарии | Видно весь продукт целиком и что в нём не забыто |
| Кликабельный прототип | Можно показать инвестору, команде или пользователям до разработки |
| Макеты всех экранов и состояний | Пустой список, загрузка, ошибка — разработчик не придумывает их сам |
| UI-кит | Кнопки, поля, карточки — новые экраны собираются из готовых деталей |
| Исходные файлы и доступ | Дизайн остаётся у вас, а не у подрядчика |
Сколько стоит и от чего зависит
- Количество экранов и ролей пользователей.
- Нужна ли проверка прототипа на людях.
- Есть ли фирменный стиль или его тоже нужно создать.
- Одна платформа или сайт плюс приложения.
UX/UI-дизайн у нас стоит от 20 млн сум, срок — от 7 дней. Если продукт новый и неясно, какие функции нужны в первую очередь, начинают с продуктового дизайна: исследования задач и приоритетов, до экранов.