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

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

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

Название

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

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

Например:

super company / business card / personal - back side

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

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

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

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

Чеклист

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ресурсы

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

Иконки

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

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