bunker media education: articles

Как выглядит хороший макет

О чем эта статья

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

Эта статья описывает как хорошо передать макет в разработку.


Хранение и состав макетов

Список самих экранов

Уровень «Минимально достаточный»

Всем членам команды продукта понятно где и как искать макеты:

  • где найти макеты по нужной фиче,
  • где найти старый макет,
  • как понять актуальная версия или нет.

Договоренности команды о процессе выкладывания макетов записаны.

При обновлении макетов уведомляется проектная команда (аналитик, фронтенд, тех. писатель, QA).


Состав экранов

Уровень «Минимально достаточный»

Для фичи понятен набор экранов, на которые вносятся изменения: какие экраны новые, какие экраны дорабатываются.

Если экранов несколько, то понятны переходы между экранами.

Уровень «Хорошо»

Доступна актуальная схема экранов продукта (карта сайта).

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


Экраны Структура экранов

Уровень «Минимально достаточный»

Понятна структура экрана: из каких блоков состоит экран, какие между ними соотношения по размерам и отступам.

Как ведут себя блоки экрана при прокрутке и ресайзе.

Уровень «Хорошо»

У продукта есть понятная сетка, описаны типовые лейауты страниц: список, дашборд, форма редактирования, страница просмотра и т. д.

Элементы на странице

Уровень «Минимально достаточный»

По каждому визуальному элементу на макете понятно, что это такое: текст, компонент, иконка, паттерн.

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

Понятны размеры элемента, его взаимоотношения с соседними элементами.

Понятно как элемент тянется, что будет, если в элементе будет меньше или больше контента.

Уровень «Хорошо»

Все элементы описаны, разработчик знает где искать документацию на каждый используемый тип элемента: текст, компонент, иконку, паттерн.

Размеры элементов и отступы между элементами логичны, ожидаемы и понятны.

Примеры:



Плохо: Случайные размеры блоков, фронтендерам сложно понять отступы



Плохо: Случайные размеры блоков, фронтендерам сложно понять отступ



Хорошо: Размеры блоков понятны



Хорошо: Размеры блоков понятны, блоки расположены предсказуемо по сетке

Кегли

Уровень «Минимально достаточный»

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

Эти mixin’ы не противоречат компонентам, паттернам или аналогичным элементам других экранов продуктов.

Уровень «Хорошо»

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

Примеры:



Плохо: Кегль не замапплен, неясно какой типографический миксин взять



Хорошо: Кегль и цвет замапплен, понятно что указать

Цвета

Речь идет про цвет любого интерфейсного элемента: текста, иконки, рамки, фона, блока, линии.

Уровень «Минимально достаточный»

Не используются цвета не из палитры проекта.

Переменные цветов подписаны, разработчику легко понять, какую переменную использовать (копировать hex-код не норм).

Уровень «Хорошо»

Составлена таблица цветовых токенов: default text, disabled text, error icon для всех используемых в проекте тем.

В макетах прилинкованы цвета из этой таблицы (не error-500, а validation-text-color).

Примеры:



Плохо: Цвета не замаплены, неясно какой цвет выбирать



Хорошо: Цвета замаплены, понятно что указать

Отступы

Уровень «Минимально достаточный»

Понятны сами отступы между всеми блоками на странице и их внутренняя логика.

Отступы на макете не противоречат компонентам (например, в компоненте «кнопка» отступы 6 16, а на макете 6 12).

Уровень «Хорошо»

Описана интерфейсная микросетка и описание модулей.

Логика отступов описана, есть типовые отступы и их завязка на сетку.

Пиктограммы

Уровень «Минимально достаточный»

Разработчик знает, как вообще подключаются пиктограммы в проект.

Понятно, что это за конкретная пиктограмма, как ее подключить и вставить.

Уровень «Хорошо»

Есть общий список пиктограмм, их коды, параметры вставки в код продукта и документацию.

UI
Made on
Tilda