Пользователь
Клиент, оформляющий запрос
UX/UI-дизайн для сайтов и цифровых продуктов.
Исследуем задачи пользователей, проектируем структуру и проверяем сценарии. Создаём визуальную систему и передаём макеты и правила команде разработки.
Обсудить задачи интерфейса
Кейсы IMPACT
Проекты по этой задаче.
Начинаем с людей.
Понимаем их задачи.
Учитываем контекст использования, условия и целевое действие.
Контекст
Телефон и короткое время на действие
Задача
Найти услугу и оставить данные
Ограничения
Понятные поля и объяснение результата
Подход IMPACT
Находим, где интерфейс мешает людям.
Наблюдение становится конкретным изменением.
Наблюдение
Два похожих раздела
Условия сервиса
Состав, порядок работы и следующий шаг.
УсловияУсловия компании
Человек открывает похожие пункты, чтобы найти условия.
Решение
Один понятный маршрут
Условия сервиса
Состав, порядок работы и следующий шаг.
Условия сервиса
Один понятный пункт приводит к нужной информации.
Проекты IMPACT
Дизайн в работающих проектах.
Каталог и сервис
Смотреть кейс Le Locle Крупная предметная фотография передаёт характер продукта. На телефоне меню и действия собраны в компактные панели.
Каталог и сервис
Смотреть кейс Питер Онлайн Адрес, выбор и результат образуют последовательный маршрут. Поля остаются заметными на обоих экранах.
Подход IMPACT
Путь понятен на каждом шаге
Проектируем весь путь — от поиска до завершения действия.
Найти
Быстрый поиск по решениям и возможностям.
Нужное решение
Автоматизация процессов
Развитие команды
Аналитика и отчётность
Сравнить
Оцените, какой состав подходит под вашу задачу.
Содержание
Интеграции—
Поддержка—
Выбрать
Выбранный состав соответствует вашим приоритетам.
Расширенный состав
СодержаниеНеобходимые возможности
ИнтеграцииПодключение к вашим системам
ПоддержкаПомощь на следующих этапах
Почему этот состав?
Нужны интеграции и поддержка.
Продолжить
Сохраняем выбор, чтобы двигаться дальше.
Выбранный состав сохранён
К нему можно вернуться в любой момент.
Расширенный состав · выбор сохранён.
Подход IMPACT
Компоненты и правила для цельного интерфейса.
Повторяющиеся элементы имеют общие состояния и поведение. Команда разработки получает компоненты и описание применения, чтобы новые экраны сохраняли логику и визуальный язык продукта.
ПолеПоискОшибкаГотово
9:41▂▄▆
Корзина
Поиск
Товар 01
1 шт.4 800 ₽Итого4 800 ₽
ГлавнаяПоискКорзинаПрофиль
Одно правило — два экрана
Оформление заказа
1Доставка2Оплата3
Поиск товара
Поиск
Товар 01
1 шт.4 800 ₽Итого4 800 ₽
Одно состояние — на обоих экранах.
Инструменты для дизайна, который можно разработать.
Проектируем интерфейс, проверяем сценарии и передаём команде систему компонентов. Технологии реализации учитываем уже на этапе дизайна.
Макеты и прототип
- Figma
Структура экранов, макеты и интерактивный прототип.
- UX-сценарии
Проверяем последовательность действий до разработки.
Проверяете идею интерфейса до разработки.
Система интерфейса
- Компоненты и состояния
Кнопки, формы и повторяющиеся элементы по единым правилам.
- Адаптивные макеты
Поведение интерфейса на компьютере и телефоне.
Экраны работают по единым правилам на разных устройствах.
Передача в разработку
- HTML · CSS
Учитываем ограничения вёрстки и доступность.
- React · TypeScript
Согласуем компоненты со стеком продуктовой команды.
Разработчики понимают устройство интерфейса и его состояния.
Материалы и контроль
- SVG · изображения
Готовим графику и экспорт для реализации.
- Проверка реализации
Сопоставляем готовые экраны с макетами и сценариями.
Команда получает материалы и критерии качества реализации.
Подход IMPACT
Проверили. Исправили. Проверили снова.
Доводим не только детали, но и весь сценарий.
Обнаружили затруднение
Оформление заказа
Товар 01
1 шт.4 800 ₽Итого4 800 ₽
!
Неочевидно, что нужно сделать для продолжения.
Уточнили действие
Оформление заказа
Товар 01
1 шт.4 800 ₽Итого4 800 ₽
Нажимая «Оформить заказ», вы соглашаетесь с условиями покупки.
Сценарий завершён
Заказ оформлен
Подтверждение получено. Следующий шаг понятен.
Товар 01
1 шт.4 800 ₽Итого4 800 ₽
Номер заказа#001
Условия и выбранный товар сохранены.
Материалы для команды.
Правила для продукта.
Передаём согласованный состав для реализации интерфейса.
Карта и сценарии
Путь пользователяЗнакомство → выбор → заявкаЗнакомствоВыбор услугиОформление заявкиПодтверждениеПрототип
Сначала — логикаСодержание и сценарийМакеты
Образ в деталяхКомпьютер + телефонКомпоненты
Одна системаКнопки · поля · состоянияСпецификация
Действие → ответОшибка ввода / успехОставить заявкуИмя
Алексей
E-mailalexey@
Проверьте адрес e-mailОтправить заявку ↗Заявка отправлена!Следующий шаг —
обсуждение проекта.
обсуждение проекта.
Сопровождение
Доводим до реализацииМакеты · комментарии · файлыОт вводных.
К системе интерфейса.
Показываем результаты до перехода к следующему этапу.
Вводные
Пользователи и требования
Исследование
Наблюдения и задачи
Архитектура
Разделы и маршруты
Прототип
Рабочий сценарий
Визуальная система
Компоненты и экраны
Проверка и передача
Материалы для разработки
UX/UI-дизайн
Этапы и контрольные точки
6 этапов · от вводных до результата
Условные периоды
12345678
01Вводные
Работа команды
Пользователи и требования
Результат и согласованиеБриф и требования
02Исследование
Работа команды
Наблюдения и задачи
Результат и согласованиеНаблюдения и задачи пользователей
03Архитектура
Работа команды
Разделы и маршруты
Результат и согласованиеРазделы и маршруты
Контрольная точка — показ и согласование.
Пример последовательности. Длительность этапов и даты согласуем под проект.
Оценка UX/UI-дизайна
Стоимость следует
вашей задаче.
Разбираем сценарии, существующие материалы и глубину проработки. До начала работ показываем состав, сроки и стоимость проекта.
ВИЗУАЛИЗАЦИЯ ПОДХОДА IMPACT / 01
IMPACTСАЙТЫ · БРЕНДЫ · ПРОДУКТЫ
Стоимость следует
вашей задаче.
Сначала определяем объём. Затем показываем состав и оценку работы.
01 / РАБОЧИЙ МАТЕРИАЛ
Страницы
Структура и содержание
02 / РАБОЧИЙ МАТЕРИАЛ
Сценарии
Пути пользователей
03 / РАБОЧИЙ МАТЕРИАЛ
Прототипы
Логика экранов
04 / РАБОЧИЙ МАТЕРИАЛ
Макеты
Вид для разработки
Идеи,
которые
работают.
которые
работают.
ДЛЯ ОЦЕНКИ
Что подготовить?
Задачу и аудиторию
Текущие материалы
Сроки и приоритеты
Получить оценку ↗
На объём влияют сценарии, число экранов, состав устройств и материалов IMPACT
01 / СТРАНИЦЫ
Страницы
Структура и состав
02 / СЦЕНАРИИ
Сценарии
Путь человека
03 / ПРОТОТИПЫ
Прототипы
Проверка решений
04 / МАКЕТЫ
Макеты
Вид для разработки
ДЛЯ ОЦЕНКИ
Что подготовить?
Задачу и аудиторию
Текущие материалы
Сроки и приоритеты
Получить оценку ↗Расскажите о задаче
Что нужно создать или улучшить, для кого и к какому сроку. Готовое техническое задание для первого разговора не обязательно.
Покажите материалы
Текущий продукт, исследования, стиль и примеры. Определим, что можно использовать и что предстоит подготовить.
Получите состав и оценку
Предложим последовательность работ и объясним стоимость. Разработку, лицензии и стороннее производство обозначим отдельно.
Всё, что важно
знать до старта.
Можно работать с текущим брендом?
Да. Изучаем визуальные правила и определяем, что необходимо уточнить для интерфейса.
Как участвуют разработчики?
Обсуждаем ограничения, состояния и правила компонентов. Передаём спецификацию и согласованный объём сопровождения.
Что получит команда?
Карту, сценарии, прототипы, макеты, компоненты, состояния и правила использования. Состав фиксируем в проекте.
Входит ли разработка?
UX/UI — самостоятельный состав. Разработку можно подключить следующим этапом с отдельной оценкой.