Самостоятельная проверка макетов

Что и как проверять дизайнеру в своей работе перед отправкой клиенту, разработчику, арт-директору, дизайн лиду или любому тому, перед кем не хочется обосраться.НазваниеНазвание макета должно отражать что в нем содержится. Так же оно должно быть консистентным (построенным по тем же правилам) с остальными макетами.Это поможет понять по одному только названию файла (если экспортировали) или названию слоя что там внутри.Например:super company / business card / personal - back sideВ макете представлена оборотная сторона персональной визитной карточки компании Super company.Макеты интерфейсовЧто нужно проверять:Соответствие дизайн системе и ранее сделанным макетам.Функциональность: должно быть понятно что и как работает.Иконки: метафоры и построение (смотри ниже).Всё в макете должно быть согласовано: графики соответствовать таблицам, тексты соответствовать выбранным опциям и т.д.ЧеклистВ помощь для работ над макетами (не над компонентами и дизайн системой):☑️ Данные верны и соответствуют реальности☑️ Измененные тексты отмечены в задаче с пояснением почему их надо поменять☑️ Текстовые поля имеют верную ширину☑️ Отступы соответствуют ранее сделанным макетам и дизайн системе☑️ Цвета из дизайн системы и указаны верно☑️ Скрытые и лишние слои удалены☑️ Использованы правильные состояния курсоровПолезные приемыЕсли есть несколько похожих макетов, то хорошей проверкой будет переключаться между ними. Такое переключение туда и обратно поможет увидеть какие-то съехавшие элементы.Бывает, что полезно начинать проверку макетов не с начала, а с конца.Так же полезной бывает проверка на другом устройстве или в другой обстановке, если есть такая возможность. Дело в том, что при смене обстановки (даже если программа просмотра другая) изменяется и восприятие макета.Проверять бывает лучше не сразу, а спустя некоторое время, чтобы замыленный глаза размылился. Так, если работа была готова в конце рабочего дня, то лучше подождать до утра и проверить ее в самом начале рабочего дня.КонсистентностьЕсли есть похожий по функционалу или набором элементов макет, то стоит свериться с ним. Нередко бывает, что какие-то решения уже там применяются и их можно переиспользовать. Это касается и паттернов, и отступов между элементами.РесурсыЕсли макет содержит ресурсы, которые будут экспортировать разработчики, то они должны быть доступны для экспорта. Такими ресурсами могут быть иконки и изображения. В большинстве случаев, экспортируемые элементы следует добавить на соответствующую сборку (иконки к иконкам, картинки к картинкам). Бывает, что нужно только одну картинку экспортировать. Для этого достаточно сделать ее экспортируемой прямо из макета.ИконкиКаждая иконка должна соответствовать следующим критериям:Соответствие глифа брендбуку или гайдлайнам построения иконки.Если иконка новая для уже существующего набора:соответствие ранее выполненным иконкам (радиусы скруглений, толщина линий, внутренние отступы, заливки);размер соответствует ранее сделанным иконкам;визуальный вес иконки на том же уровне, что и остальных иконок в наборе.Вертикальные и горизонтальные линии не размыты при Pixel Preview.Круги в верхнем, нижнем, правом и левом краях не размыты при Pixel Preview.Иконка хорошо смотрится как на ретине, так и на обычном экране.Все обводки (сплайны) переведены в шейпы.Количество шейпов в иконке равно количеству используемых цветовЯ Саша Тихонов: дизайнер, арт-директор и сооснователь студии Flyphant.sashatikhonov.com · twitter · facebook · instagram · vkСамостоятельная проверка макетов was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Мар 10, 2025 - 10:28

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

Название

Название макета должно отражать что в нем содержится. Так же оно должно быть консистентным (построенным по тем же правилам) с остальными макетами.

Это поможет понять по одному только названию файла (если экспортировали) или названию слоя что там внутри.

Например:

super company / business card / personal - back side

В макете представлена оборотная сторона персональной визитной карточки компании Super company.

Макеты интерфейсов

Что нужно проверять:

Соответствие дизайн системе и ранее сделанным макетам.
Функциональность: должно быть понятно что и как работает.
Иконки: метафоры и построение (смотри ниже).
Всё в макете должно быть согласовано: графики соответствовать таблицам, тексты соответствовать выбранным опциям и т.д.

Чеклист

В помощь для работ над макетами (не над компонентами и дизайн системой):

☑️ Данные верны и соответствуют реальности

☑️ Измененные тексты отмечены в задаче с пояснением почему их надо поменять

☑️ Текстовые поля имеют верную ширину

☑️ Отступы соответствуют ранее сделанным макетам и дизайн системе

☑️ Цвета из дизайн системы и указаны верно

☑️ Скрытые и лишние слои удалены

☑️ Использованы правильные состояния курсоров

Полезные приемы

Если есть несколько похожих макетов, то хорошей проверкой будет переключаться между ними. Такое переключение туда и обратно поможет увидеть какие-то съехавшие элементы.

Бывает, что полезно начинать проверку макетов не с начала, а с конца.

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

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

Консистентность

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

Ресурсы

Если макет содержит ресурсы, которые будут экспортировать разработчики, то они должны быть доступны для экспорта. Такими ресурсами могут быть иконки и изображения. В большинстве случаев, экспортируемые элементы следует добавить на соответствующую сборку (иконки к иконкам, картинки к картинкам). Бывает, что нужно только одну картинку экспортировать. Для этого достаточно сделать ее экспортируемой прямо из макета.

Иконки

Каждая иконка должна соответствовать следующим критериям:

Соответствие глифа брендбуку или гайдлайнам построения иконки.
Если иконка новая для уже существующего набора:
соответствие ранее выполненным иконкам (радиусы скруглений, толщина линий, внутренние отступы, заливки);
размер соответствует ранее сделанным иконкам;
визуальный вес иконки на том же уровне, что и остальных иконок в наборе.
Вертикальные и горизонтальные линии не размыты при Pixel Preview.
Круги в верхнем, нижнем, правом и левом краях не размыты при Pixel Preview.
Иконка хорошо смотрится как на ретине, так и на обычном экране.
Все обводки (сплайны) переведены в шейпы.
Количество шейпов в иконке равно количеству используемых цветов

Я Саша Тихонов: дизайнер, арт-директор и сооснователь студии Flyphant.

sashatikhonov.com · twitter · facebook · instagram · vk

Самостоятельная проверка макетов was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.