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

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

Оглавление:

• Breakpoint'ы и размеры

• Эвристики usability и дизайн-принципы

• Чистка макетов

• Проверка доступности (Accessibility)

• Подготовка к передаче разработчикам

• Проверка состояний элементов/компонентов

• Анимации

• UX-сценарии

• Подсказки и Error Page

• Рубрикатор макетов

• Карточка дизайнера

Breakpoint'ы и размеры

Проверьте размеры экранов и элементов, систему отступов, подчинение сетке, а также соблюдение нескольких правил:

1. Использовано минимальное количество разных отступов в рамках одного экрана.

2. Не нарушено правило внутреннего и внешнего, согласно которому внутренние отступы и скругления всегда меньше внешних.

3. Использованы только целые значения рх/dp, нет дробных пикселей.

4. Проверьте, как будут вести себя элементы интерфейса — кнопки, карточки, колонки текста, картинки — на разных экранах: телефонах, планшетах, ноутбуках и 4К-мониторах.

Эвристики usability и дизайн-принципы

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

Чистка макетов

• Проверьте, нет ли в файле лишних элементов и скрытых слоёв.

• Переименуйте названия слоёв и компонентов. Используйте техническое (утверждённое) или семантическое (смысловое) наименование. Придавайте всем элементам дизайна значимые и описательные названия в зависимости от функций.

  

• Проверьте привязку цветовых стилей через кнопку «See all library colors». Если у вас есть тёмная тема, сразу тестируем и её.

  

• Через бесплатный плагин Select by Font проверьте все шрифтовые стили, используемые в макете.

  

• Тени и скругления: проверьте привязку к токенам и стилям и сверьтесь с руководствами дизайн-системы.

  

Проверка доступности (Accessibility)

1. Проверьте контрастность цветов на странице с помощью любого плагина или сервиса.

2. Проверьте читаемость шрифтов: семейство, кегль, жирность, наклон, трекинг, интерлиньяж.

   

Подготовка к передаче разработчикам

1. Проверьте, что все иконки отрисованы.

2. Растр переведён в вектор, так как .svg весит килобайты — значительно меньше растра, а значит вёрстка будет легче.

3. Все фото и видео залиты в один архив с тем же названием, что и в макетах.

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

5. Заранее оставьте комментарии там, где у разработчиков могут возникнуть вопросы. Я, например, собрал локальный компонент «help» под свои требования, который везде за собой таскаю.

   

• Избавьтесь от кастома, чем его меньше — тем легче вёрстка, а значит дешевле разработка.

• Опишите сложные компоненты и визуализируйте их. Например, элементы с динамическим изменением формы.

• Подготовьте описание основных сценариев фич. Например: «Сценарий удаления запускается при клике на кнопку „Удалить“», «Появление тени и ресайз фото на +10% происходит только по ховеру».

Проверка состояний элементов/компонентов

Проверьте состояния всех компонентов/элементов интерфейса (активные/неактивные, развёрнутые, вид всех вкладок и т. д.)

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

   

2. Проверьте соответствие компонентов дизайн-системе или подготовьте спецификации в UI-kit’е с описанием работы компонентов и их состояний.

Анимации

Визуализируйте анимации с помощью Figma или сторонних программ там, где это возможно. Если нет опыта работы с анимацией — приложите референсы.

UX-сценарии

Проверьте, учли ли вы разные варианты завершения UX-сценария. Отобразите сценарии в Figma, или на крайний случай в Miro (будет хорошо накидать прототип в Figma для наглядности и будущих тестов).

Подсказки и Error Page

Наличие иллюстраций и подсказок на экранах с пустыми состояниями или на страницах ошибок (Error Page). Они будут сообщать пользователю, что сейчас происходит на странице или какая ошибка прилетела.

Рубрикатор макетов

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

Карточка дизайнера

Добавьте стикер/карточку дизайнера. Что там можно указать:

1. ФИО дизайнера;

2. контакты (ссылку на Telegram);

3. описание задачи;

4. версия макетов;

5. ссылка на задачу в Jira.

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

Расскажите о своём опыте сдачи проектов в комментариях. Буду рад обратной связи! ??

Связать со мной и задать вопросы можно так же в tg.
Наш телеграм-канал дизайнеров Домклик.