Представление макета

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

Представлением макета можно:

  • Ускорить понимание решаемой задачи. Это важно как для разных членов команды разработки, просматривающих макет, так и для самого себя в будущем.
  • Заменить или сократить текстовые описания. «Смотреть картинки» быстрее и проще, чем вычитывать суть из текста. Также текст на полях можно просто не заметить, а изображение само обращает на себя внимание.

  • Снизить нагрузку на компьютер. «Лёгкие» макеты быстрее загружаются, в них быстрее сохраняются изменения.

Принцип DRY

Универсальное правило для представления макетов: не повторяйся.

Don't repeat yourself (DRY) — это принцип разработки, направленный на повторное использование кода.

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

Организуйте артборды

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

Фокусируйтесь на конкретных изменениях и не изображайте окружающие контекстные элементы, если они и так понятны. Если нужно подробно показать где именно на странице произойдёт изменение, достаточно показать это один раз.

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

Именуйте артборды. Их названия видны даже при зумировании. С осмысленными названиями проще найти нужный фрагмент макета.

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

Используйте компоненты

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

Организация конкретного компонента

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

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

Организация множества компонентов

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

Собирайте сложные компоненты из простых. Для этого можно использовать приватные компоненты — название которых начинается с _нижнего подчёркивания. Они не публикуются и рассчитаны на использование внутри других компонентов.

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

Разумно выбирайте степень абстрагирования. На начальных этапах используйте компоненты в одном конкретном макете. По мере роста проекта — рефакторите и собирайте компоненты в отдельные страницы и библиотеки.

Используйте стили

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

Как шутят фронтендеры — в макете неопытного дизайнера по пятьдесят оттенков серого

Называя стиль отталкивайтесь в первую очередь от его функции — как он используется в интерфейсе. Например:

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

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

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

Разумно выбирайте степень абстрагирования. На начальных этапах используйте стили в одном конкретном макете. По мере роста проекта — рефакторите и собирайте стили в отдельные страницы и библиотеки.

Используйте стили для разных ситуаций. В стили можно добавлять не только цвета и типографику. Также в стили можно добавлять изображения (например, аватарки), обводки, тени и другие эффекты, а также настроенные сетки.

Ещё почитать про макеты можно в гайде по Вёрстке макета.