Дизайн (UX/UI) — это фаза, на которой утвержденные концепции и прототипы трансформируются в финализированные, готовые к реализации дизайн-макеты и спецификации.

Примечание

В этапности работ дизайн может идти как часть процесса Discovery, так и Delivery. Все зависит от конкретных работ их предназначения.

  • Discovery : дизайн используется как инструмент исследования и валидации. Например, сформулировать верхнеуровневое понимание функционала через визуализацию пользовательского пути.
  • Delivery : дизайн используется как инструмент производства. Цель — создать детальную “визуальную инструкцию” реализации задачи для разработчиков.

Входные данные этапа:

  • Утвержденные продуктовые требования: Документация, описывающая функциональность, бизнес-логику и критерии приемки.

  • Результаты фазы Discovery: CJM (карта пользовательского пути), концепции или прототипы, подтверждающие базовую структуру и навигацию.

  • Существующая дизайн-система: Если продукт не создается с нуля.

Выходные данные этапа :

  • Дизайн-макеты: Полностью готовый визуальный дизайн всех экранов и состояний.

  • Дизайн-спецификации: Технические инструкции для разработчиков (размеры, отступы, шрифты, цвета, поведение).

  • Интерактивные прототипы: Демонстрация переходов и микровзаимодействий.

  • Ассеты: Выгруженные графические ресурсы (иконки, иллюстрации).

Цель этапа: Обеспечить команду фронтенд-разработки (разработчики которые создают интерфейсы по макеты) исчерпывающей и однозначной визуальной и технической информацией для точной реализации интерфейса в коде.

Ключевые Процессы Дизайнера

Детализация UI и Создание Макетов

Дизайнер берет за основу утвержденную структуру и накладывает на неё финальный визуальный слой.

  • Применение стилей: Использование утвержденной цветовой палитры, типографики, иконографики согласно дизайн-системе.

  • Проработка всех состояний: Это критически важная часть. Дизайнер должен нарисовать не только “идеальный” экран, но и все возможные вариации:

    • Состояния интерактивных элементов: Default (обычное), Hover (при наведении), Active/Pressed (при нажатии), Disabled (неактивное), Focused (в фокусе ввода).

    • Состояния контента: Пустые экраны, состояния загрузки (скелетоны, спиннеры), экраны ошибок (404, потеря соединения), состояния с максимальным количеством контента (длинные имена, переполненные списки).

  • Адаптивный дизайн: Создание макетов для различных разрешений экранов (десктоп, планшет, мобильные устройства) с демонстрацией правил перестроения сетки и поведения элементов (растягивание, скрытие, перенос).

Определение Сетки в UI

Сетка в UI-дизайне — это система направляющих (колонки, строки и отступы), которая помогает ровно выравнивать элементы интерфейса и делать макет визуально аккуратным и единообразным.

Проработка Микровзаимодействий и Анимации

  • Проектирование переходов: Определение того, как экраны сменяют друг друга (слайд, затемнение, модальное окно).

  • Анимация обратной связи: Визуализация реакции системы на действия пользователя (анимация нажатия кнопки, появление галочки при успешном сохранении, “дрожание” поля при ошибке).

  • Создание спецификаций анимации: Описание параметров анимации для разработчиков (длительность, триггеры запуска), часто с использованием примеров в инструментах типа Principle, After Effects или встроенных возможностей Figma.

Использование Дизайн-системы

Если в компании есть дизайн-система, работа дизайнера строится на её основе.

  • Использование компонентов: Сборка макетов из готовых переиспользуемых компонентов (кнопки, поля ввода, карточки), что гарантирует единообразие и ускоряет как дизайн, так и разработку.

  • Вклад в дизайн-систему: Если новая задача требует элемента, которого нет в библиотеке, дизайнер проектирует новый компонент, описывает правила его использования и добавляет его в систему для будущего переиспользования.

Подготовка к Передаче в разработку

Подготовка макетов так, чтобы разработчику не приходилось задавать дополнительных вопросов.

  • Структурирование макетов в инструменте (например, Figma):

    • Четкое именование фреймов и слоев.

    • Логическая группировка экранов по сценариям.

    • Удаление черновых вариантов и неиспользуемых элементов.

Фреймы и слои

Фрейм — это контейнер (область экрана) для интерфейса, внутри которого размещаются элементы и задаются размеры и адаптивное поведение.

Слой — это отдельный элемент или группа элементов в макете, который можно независимо перемещать, скрывать, редактировать и упорядочивать по “высоте” (что перекрывает что).

  • Создание аннотаций: Добавление текстовых пояснений прямо поверх макетов, описывающих логику поведения, которую сложно показать статичной картинкой (например, “Этот блок фиксируется при прокручивании страницы (скролле)”, “Эта подсказка появляется через 2 секунды”).

  • Подготовка ассетов: Экспорт иконок, иллюстраций и фотографий в нужных форматах (SVG, PNG, WebP) и разрешениях.

Дизайн-ревью и Согласование (Design Review)

Перед передачей в разработку макеты должны пройти финальную проверку.

  • Внутреннее ревью (с другими дизайнерами/арт-директором): Проверка на соответствие дизайн-системе, визуальную целостность и качество исполнения.

  • Техническое ревью (с фронтенд-разработчиками): Дизайнер презентует макеты разработчикам для оценки технической реализуемости. Разработчики могут указать на решения, которые слишком сложны или дороги в реализации, и предложить альтернативы. Макеты корректируются по итогам этого обсуждения.

  • Продуктовое ревью (с продакт-менеджером): Финальное подтверждение, что дизайн соответствует исходным требованиям и бизнес-целям.

Завершение этапа и переход к следующему

Этап Design Delivery формально завершается мероприятием по передаче макетов , где дизайнер презентует команде разработки финальные артефакты.

Макеты утверждены продактом, покрывают все необходимые состояния и разрешения, спецификации и ассеты готовы и доступны команде.

Заключение

Что дальше?

➡️ Погрузимся в бэкенд разработку

НазадДалее