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