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

Ключевая Цель

Основная цель — найти и задокументировать любые визуальные расхождения между тем, что было задумано (макет в Figma/Sketch), и тем, что было реализовано (выполненная разработчиком задача).

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

Место в Процессе Разработки

Дизайн QA происходит после того, как:

  1. Фронтенд-разработчик завершил написание кода (“сверстал” макет).
  2. Задача (Task) прошла базовое функциональное тестирование (она работает).
  3. Задача находится в тестовой среде, но еще не выпущена для конечных пользователей.

Участники

  • Инициатор: Фронтенд-разработчик (передает задачу на проверку).
  • Исполнитель/Ревьюер: UX Дизайнер (проводит проверку).

Что конкретно проверяется

Дизайнер проводит попиксельное сравнение макета и реализации.

  • Типографика:

    • Правильный ли шрифт (font-family) используется?
    • Соответствует ли размер (font-size), начертание (font-weight) и межстрочный интервал (line-height)?

  • Отступы (Spacing):

    • Корректны ли внутренние отступы (padding) и внешние (margin) между элементами?
    • Соблюдена ли сетка (grid)?

  • Цвета:

    • Точно ли соответствуют коды цветов (HEX, RGBA) для текста, фона, иконок и границ?

  • Состояния:

    • Как выглядят интерактивные элементы (кнопки, ссылки, поля ввода) в разных состояниях: по умолчанию (default), при наведении (hover), при нажатии (active/pressed), в фокусе (focus) и в неактивном (disabled)состоянии?

  • Адаптивность:

    • Корректно ли интерфейс перестраивается на разных разрешениях экрана (пк, планешет, мобилка), как это было заложено в адаптивных макетах?

  • Анимации и Переходы:

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

  • “Корнер кейсы” :

    • Что происходит с дизайном, если текст слишком длинный (переносится ли он, обрезается)?
    • Что происходит, если список пуст ?

Заключение

Что дальше?

➡️ Разберём как организовать интеграционное тестирование

НазадДалее