Logo
  • Бренд
  • Визуальный язык
    • Основы визуального языка
    • Палитра
    • Типографика
    • Иконографика
    • Структура и сетка
    • Эффекты
    • Анимации
  • Компоненты
    • Токены
    • Компоненты
  • Редполитика
    • О редполитике
    • Пишем чисто
    • Пишем просто
    • Пишем компетентно
    • Пишем для человека
    • Интерфейсные тексты
    • Глоссарий
  • Документация
    • Доступность
  • Figma
    • Принципы
    • Начало работы
    • Команды и проекты
    • Инструменты
    • Процесс
    • Дизайн-ревью
  • Благодарности
Дизайн–ревью
После того как разработчик реализовал ваши макеты, для всех задач существует этап дизайн–ревью. На этом этапе мы смотрим насколько точно реализован интерфейс, есть ли расхождения во флоу и тестируем на разных устройствах.
Как провести дизайн–ревью
Получение материалов
Для начала нужно получить от разработчика скриншоты или готовую сборку с фичей.

  1. Нужны экраны в темной и светлой темах интерфейса
  2. Для устройств Android используем ширину как в макетах, чаще всего 360 dp
  3. Для iOS смотрим экраны на ширине 375 dp
  4. Если фича крупная и полностью новая нужно проверить ее на iPad
  5. Мобильный web можно проверять в браузере используя настройки инспектора
  6. В скриншотах или скринкастах должны использоваться понятные названия, фото и другие элементы. Лучше стараться заполнять тестовые сборки данными приближенными к реальным. 
Проверка функционала
  1. Пройти весь основной разрабатываемый сценарий
  2. Интерфейс работает плавно, без скачков и подтормаживаний
  3. Интерактивные элементы для веб имеют эффект наведенияи нажатия
  4. Ошибки ввода данных отображаются корректно
  5. Проверить пустые состояния экранов и экраны загрузки
Тест скриншотов
Сделать скриншоты для тестов и разместить на отдельной странице Figma файле с макетом.

Сравнить наложением макеты и подготовленные скриншоты. Если размеры не совпадают, можно запросить у разработчика снимки экрана под разные стандартные разрешения.
Проверка отступов, размеров и стилей
  1. Размеры должны быть кратны 4, в частных случаях 2
  2. Отступы в базовых компонентах на токенах
  3. Стили типографики соответствуют общей библиотеке продукта
Выписать критичные замечания
Рекомендуем использовать шаблон фигма для написания комментариев 
Передать замечания разработчику
  1. Дать ссылку на страницу в Figma
  2. Написать комментарий в задаче Jira
  3. Проверить повторно после исправления
Критичные замечания
  • При наложении скриншотов видно поехавшие отступы или разхождения в типографике
  • Наличие элементов которые не предусмотрены макетом, логикой
  • Поехавшие базовые линии в интерфейсах
  • Использование кастомных цветов не соответствующих дизайн-системе
  • Анимация не плавная и подтормаживает
  • Отсутствуют скелетоны при загрузке экрана
  • Краевые кейсы не отрабатываются интерфейсом. Например отсутствует индикатор ошибки или большое количество символов в поле ломает интерфейс. 
Важно
Если при наложении макета на экран есть небольшие разногласия, но они никак не влияют на качество интерфейса и не нарушают задумки дизайнера, разрешается не сообщать о таких ошибках.