Что и как проверять дизайнеру в своей работе перед отправкой клиенту, разработчику, арт-директору, дизайн лиду или любому тому, перед кем не хочется обосраться.
Название
Название макета должно отражать что в нем содержится. Так же оно должно быть консистентный (построенным по тем же правилам) с остальными макетами.
Это поможет понять по одному только названию файла (если экспортировали) или названию слоя что там внутри.
Например:
super company / business card / personal - back side
В макете представлена оборотная сторона персональной визитной карточки компании Super company.
Макеты интерфейсов
Что нужно проверять:
- Соответствие дизайн системе и ранее сделанным макетам.
- Функциональность: должно быть понятно что и как работает.
- Иконки: метафоры и построение (смотри ниже).
- Всё в макете должно быть согласовано: графики соответствовать таблицам, тексты соответствовать выбранным опциям и т.д.
Чеклист
В помощь для работ над макетами (не над компонентами и дизайн системой):
☑ Данные верны и соответствуют реальности
☑ Измененные тексты отмечены в задаче с пояснением почему их надо поменять
☑ Текстовые поля имеют верную ширину
☑ Отступы соответствуют ранее сделанным макетам и дизайн системе
☑ Цвета из дизайн системы и указаны верно
☑ Скрытые и лишние слои удалены
☑ Использованы правильные состояния курсоров
Полезные приемы
Если есть несколько похожих макетов, то хорошей проверкой будет переключаться между ними. Такое переключение туда и обратно поможет увидеть какие-то съехавшие элементы.
Бывает, что полезно начинать проверку макетов не с начала, а с конца.
Так же полезной бывает проверка на другом устройстве или в другой обстановке, если есть такая возможность. Дело в том, что при смене обстановки (даже если программа просмотра другая) изменяется и восприятие макета.
Проверять бывает лучше не сразу, а спустя некоторое время, чтобы замыленный глаза размылился. Так, если работа была готова в конце рабочего дня, то лучше подождать до утра и проверить ее в самом начале рабочего дня.
Консистентность
Если есть похожий по функционалу или набором элементов макет, то стоит свериться с ним. Нередко бывает, что какие-то решения уже там применяются и их можно переиспользовать. Это касается и паттернов, и отступов между элементами.
Ресурсы
Если макет содержит ресурсы, которые будут экспортировать разработчики, то они должны быть доступны для экспорта. Такими ресурсами могут быть иконки и изображения. В большинстве случаев, экспортируемые элементы следует добавить на соответствующую сборку (иконки к иконкам, картинки к картинкам). Бывает, что нужно только одну картинку экспортировать. Для этого достаточно сделать ее экспортируемой прямо из макета.
Иконки
Каждая иконка должна соответствовать следующим критериям:
- Соответствие глифа брендбуку или гайдлайнам построения иконки.
- Если иконка новая для уже существующего набора:соответствие ранее выполненным иконкам (радиусы скруглений, толщина линий, внутренние отступы, заливки);размер соответствует ранее сделанным иконкам;визуальный вес иконки на том же уровне, что и остальных иконок в наборе.
- Вертикальные и горизонтальные линии не размыты при Pixel Preview.
- Круги в верхнем, нижнем, правом и левом краях не размыты при Pixel Preview.
- Иконка хорошо смотрится как на ретине, так и на обычном экране.
- Все обводки (сплайны) переведены в шейпы.