Для чего нужно дизайн-ревью

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

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

Для чего нужно проводить дизайн-ревью:

1. Повышение качества продукта

   Дизайнер проверяет верстку и выявляет ошибки, чтобы верстка на проде имела минимальные различия с макетом.

2. Понимание задачи разработчиком

   В коммуникации с дизайнером разработчику легче понять, зачем они делают определенную задачу и какую ценность она несет для пользователя.

3. Командное взаимодействие

   Разработчик может влиять на дизайн, предлагать и согласовывать с дизайнером другие варианты, так как не всегда первоначальные решения дизайнера могут быть реализованы в рамках определенного проекта или бюджета.

4. Оперативность

   Прямое общение дизайнера с разработчиком позволяет быстро вносить изменения.

5. Выявление проблем, которые дизайнер мог упустить в процессе разработки дизайна

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

6. Анализ удобства использования

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

Отсутствие дизайн-ревью приводит к некоторым проблемам:

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

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

У каждой команды процесс проведения ревью налажен по-разному, но можно выделить последовательность проведения:

1. Разработчик завершил спринт/итерацию и передает готовую верстку на проверку.
2. Дизайнер проводит ревью. У некоторых дизайнеров есть шаблоны в фигме для удобства разработчика, другие заполняют гугл-док, добавляя ссылки на скрины и расписывая баги.
3. Приоритет ошибок может варьироваться от проекта к проекту, от очень низкого до высокого. Дизайнер должен помнить об этом в процессе ревью и, например, в проекте с низким приоритетом ошибок, в первую очередь указывать на критические ошибки, чтобы исправить сначала их. Тут дизайнеру нужно уметь идти на компромисс, не всегда есть достаточно времени и ресурсов.
4. При поиске ошибок дизайнер может использовать расширениями для браузера. Плагин PerfectPixel позволяет наложить изображение макета на страницу, чтобы проверить верстку пиксель в пиксель. Плагины WhatFont и Fonts Ninja помогут проверить шрифты. Pagerule определит размеры элементов и отступов. CSS Peeper покажет, какие цвета есть на странице.
5. Разработчик получает фидбек от дизайнера и корректирует верстку. Если есть ошибка, которую не может поправить разработчик, следует сообщить об этом руководителю проекта, чтобы он был в курсе ситуации.

Чек-лист для проверки верстки

Они варьируются в зависимости от проекта, чек-листы для корпоративного сайта и интернет-магазина будут отличатся. Чек-лист ниже содержит базовые пункты, встречающиеся во всех проектах.

Критические пункты:

• Работоспособность сценария
• Наполнение страницы в соответствии с контентом
• Корректность отображения на разных разрешениях и в разных браузерах
• Соблюдение сетки
• Тексты
• Состояние элементов и их смена

Важные пункты:

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

Выводы:

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

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

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