logo

Дизайн–ревью

Как провести дизайн–ревью
Критичные замечания
После того как разработчик реализовал ваши макеты, для всех задач существует этап дизайн–ревью. На этом этапе мы смотрим насколько точно реализован интерфейс, есть ли расхождения во флоу и тестируем на разных устройствах.

Как провести дизайн–ревью

1. Получение материалов

Для начала нужно получить от разработчика скриншоты или готовую сборку с фичей.
  1. Нужны экраны в темной и светлой темах интерфейса
  1. Для устройств Android используем ширину как в макетах, чаще всего 360 dp
  1. Для iOS смотрим экраны на ширине 375 dp
  1. Если фича крупная и полностью новая нужно проверить ее на iPad
  1. Мобильный web можно проверять в браузере используя настройки инспектора
  1. В скриншотах или скринкастах должны использоваться понятные названия, фото и другие элементы. Лучше стараться заполнять тестовые сборки данными приближенными к реальным.

2. Проверка функционала

  1. Пройти весь основной разрабатываемый сценарий
  1. Интерфейс работает плавно, без скачков и подтормаживаний
  1. Интерактивные элементы для веб имеют эффект наведения и нажатия
  1. Ошибки ввода данных отображаются корректно
  1. Проверить пустые состояния экранов и экраны загрузки

3. Тест скриншотов

Сделать скриншоты для тестов и разместить на отдельной странице Figma файле с макетом.
Сравнить наложением макеты и подготовленные скриншоты. Если размеры не совпадают, можно запросить у разработчика снимки экрана под разные стандартные разрешения.

4. Проверка отступов, размеров и стилей

  1. Размеры должны быть кратны 4, в частных случаях 2
  1. Отступы в базовых компонентах на токенах
  1. Стили типографики соответствуют общей библиотеке продукта

5. Выписать критичные замечания

Рекомендуем использовать шаблон фигма для написания комментариев

6. Передать замечания разработчику

  1. Дать ссылку на страницу в Figma
  1. Написать комментарий в задаче Jira
  1. Проверить повторно после исправления

Критичные замечания

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