Как усилить ваш дизайн-макет?

Грамотные макеты — это один из показателей профессионализма продуктового дизайнера. Макеты соединяют работу дизайнера с работой остальных специалистов: разработчиков, продактов, аналитиков, стейкхолдеров и т. д. Что делает макет эффективным?

Что здесь важно?

👉 Распределите ваши наработки по вкладкам, подпишите их, например: основной макет, исследования, прототип, мудборд и другие артефакты – каждый в своей вкладке;

👉 Используйте Section для распредения материалов внутри вкладок. К примеру основной флоу поместите в одну секцию, а кейсы в другую, адаптив в третью;

👉 Не допускайте дефолтные названия слоев, например, frame. Все слои должны называться должны образом: header, content, container, button, button group и т. д.

👉 Следите за тем, чтобы там, где должен быть Auto layout, он был и работал, адаптировался при изменении ширины.

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

— Опишите проблему, которую необходимо решить с помощью дизайна;

— Цели бизнеса и основные задачи предполагаемого пользователя;

— Основная гипотеза примерно в таком формате «если мы сделаем "Описать изменение", то это улучшит пользовательский опыт "Сегмент пользователей" и "Метрика" увеличится на х% за период y»;

— Метрики, на которые хотим повлиять;

— Ограничения (если есть). Например юридические барьеры или ограничения разработки;

— Кратко сформулируйте предполагаемое решение, например: отрисовать функционал отслеживания статуса последующих платежей, добавить историю покупок, график платежей...;

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

Главная сила макета дизайнера заключается в его артефактах. Как минимум стоит провести внутреннее исследование (как работает сейчас) и внешнее исследование (как работает у других).

Что ещё украсит макет:

— Юзерфлоу – схема того, как юзер пользуется сервисом, чтобы выполнить свои задачи;

— Вайрфрейм – примерный чертеж структуры фичи или экрана;

— CJM – можно краткий, иногда это очень помогает в аргументации, когда доходит до ревью макета бизнесом;

— Доступность. Макет для слабовидящих – есть плагины, которые позволяют перевести макет в ситуацию, когда юзер поставил в системных настройках большой или очень большой размер текста;

— Кликабельный прототип – функционал в динамике может дать абсолютно иную картину удобства и логичности интерфейса;

— Jobs to be done – это метод понимания конечных потребностей пользователя через формулу «такой-то пользователь хочет что-то, чтобы получить что именно». Очень рабочий инструмент, который помогает найти компромисс между целями бизнеса и удобством для пользователя;

— Спецификации для новых компонентов, например, если вы делаете новый блок, можно перечислить его состояния – это поможет разработке;

— Мудборд - накинуть подборку того, что не является прямыми референсами, но вдохновляет.

Этот список не является исчерпывающим или обязательным, все макеты разные и применять артефакты можно выборочно.

Создайте для себя чеклист готовности макета.

Пример чеклиста:

✅ Есть Error состояния;Проверен текст;

✅ UX логичный и последовательный;

✅ Нет новых стилей (всё по ДС или брендбуку);

✅ Новые компоненты оформлены должным образом;

✅ Есть адаптив;

✅ Изображения экспортированы в нужных форматах. Хотя в некоторых компаниях разработчики выгружают изображения самостоятельно

Хорошим признаком будет проработанный шаблон для комментариев, которые дизайнер оставляет для разработки или бизнеса. Системные комментарии в Фигме существуют для обсуждений или правок.

Хороший макет — это история, которую понимают все: от менеджера до разработчика. Он экономит часы на правки, снижает риски ошибок и помогает создать продукт, который нравится людям. Чем качественнее ваше рабочее пространство — тем ближе результат к идеалу. 🚀

Подписывайтесь на ТГ канал «Дизайнеры — тоже люди»