Для чего нужно дизайн-ревью
Дизайн-ревью — это анализ и оценка верстки сайта на соответствие макету до релиза в продакшен. Проведение дизайн-ревью позволяет повысить качество итогового продукта и снизить вероятность ошибок при верстке.
Грамотно организованный процесс дизайн-ревью — это не отдельный этап разработки а параллельный, таким образом ревью дизайнера не задерживает разработку.

Для чего нужно проводить дизайн-ревью:
-
Повышение качества продукта
Дизайнер проверяет верстку и выявляет ошибки, чтобы верстка на проде имела минимальные различия с макетом.
-
Понимание задачи разработчиком
В коммуникации с дизайнером разработчику легче понять, зачем они делают определенную задачу и какую ценность она несет для пользователя.
-
Командное взаимодействие
Разработчик может влиять на дизайн, предлагать и согласовывать с дизайнером другие варианты, так как не всегда первоначальные решения дизайнера могут быть реализованы в рамках определенного проекта или бюджета.
-
Оперативность
Прямое общение дизайнера с разработчиком позволяет быстро вносить изменения.
-
Выявление проблем, которые дизайнер мог упустить в процессе разработки дизайна
Дизайнер может предложить рекомендации для решения ошибок, улучшения готовых решений и устранения проблем.
-
Анализ удобства использования
Дизайнер может оценить, насколько удобно и интуитивно понятно использование разработанного им продукта и предложить изменения в процессе верстки.
Отсутствие дизайн-ревью приводит к некоторым проблемам:
- Дизайнер не видит цельной картины. В итоге ошибки и несоответствия он может увидеть только на проде.
- Минимальное общение дизайнера с разработчиком. Когда нет коммуникации между разработчиком и дизайнером, снижается эффективность работы, так как дизайнер не может повлиять на работу разработчика, или уточнить какие-то детали.
- Убытки. Некоторые расхождения с макетами могут быть критически важными и серьезно влиять на посещаемость сайта, время нахождения на странице и, в случае интернет-магазина, покупку товаров.
- Увеличение времени на разработку. Если проблемы с версткой выявятся на поздних этапах, их исправление потребует дополнительных временных затрат.
Как проводить дизайн-ревью
У каждой команды процесс проведения ревью налажен по-разному, но можно выделить последовательность проведения:
- Разработчик завершил спринт/итерацию и передает готовую верстку на проверку.
- Дизайнер проводит ревью. У некоторых дизайнеров есть шаблоны в фигме для удобства разработчика, другие заполняют гугл-док, добавляя ссылки на скрины и расписывая баги.
- Приоритет ошибок может варьироваться от проекта к проекту, от очень низкого до высокого. Дизайнер должен помнить об этом в процессе ревью и, например, в проекте с низким приоритетом ошибок, в первую очередь указывать на критические ошибки, чтобы исправить сначала их. Тут дизайнеру нужно уметь идти на компромисс, не всегда есть достаточно времени и ресурсов.
- При поиске ошибок дизайнер может использовать расширениями для браузера. Плагин PerfectPixel позволяет наложить изображение макета на страницу, чтобы проверить верстку пиксель в пиксель. Плагины WhatFont и Fonts Ninja помогут проверить шрифты. Pagerule определит размеры элементов и отступов. CSS Peeper покажет, какие цвета есть на странице.
- Разработчик получает фидбек от дизайнера и корректирует верстку. Если есть ошибка, которую не может поправить разработчик, следует сообщить об этом руководителю проекта, чтобы он был в курсе ситуации.
Чек-лист для проверки верстки
Они варьируются в зависимости от проекта, чек-листы для корпоративного сайта и интернет-магазина будут отличатся. Чек-лист ниже содержит базовые пункты, встречающиеся во всех проектах.
Критические пункты:
- Работоспособность сценария
- Наполнение страницы в соответствии с контентом
- Корректность отображения на разных разрешениях и в разных браузерах
- Соблюдение сетки
- Тексты
- Состояние элементов и их смена
Важные пункты:
- Проверка взаимодействий на правильную работу
- Проверка шрифтов, состояний элементов страницы, стилей состояний компонентов на соответствие дизайн-компонентам
- Отображение, размер и пропорции иллюстраций и иконок
- Наличие неразрывных пробелов (хотя бы в заголовках)
- Отступы
- Шрифты
- Пустые страницы
Выводы:
Дизайн-ревью — важный этап в процессе создания продукта. Этот процесс позволяет выявить ошибки и недочеты в верстке на ранних этапах, что помогает снизить затраты на исправление ошибок и ускоряет время выхода в прод.
Для дизайнера дизайн-ревью — это возможностью проверить, что его макет был правильно интерпретирован и реализован на этапе верстки, а также убедиться, что дизайн соответствует заложенным в него принципам удобства использования и целям бизнеса.
Для разработчика дизайн-ревью — это возможность получить обратную связь и советы от дизайнера и предложить свои идеи, что помогает повысить качество итоговой верстки. Правильно организованный процесс дизайн-ревью не замедляет процесс разработки, а помогает сократить время на исправление ошибок.