Макеты продукта:
что это и как сделать
что это и как сделать
Как отобразить пользовательский путь так чтобы и команде и стейкхолдерам и пользователям было все понятно
Содержание:
Что такое макеты продукта
Переход от Wireframes к Макетам (Источник)
Предположим вы ведёте новый мобильный сервис, и у вас уже готовы прототипы (wireframes), где просто обозначены блоки и основные кнопки. Если нет то смотрите предыдущий раздел про Wireframes
Но у стейкхолдеров возникает миллион вопросов: «А каким будет наш фирменный цвет?», «Какие иконки планируем использовать?», «Как выглядит наша айдентика внутри приложения?».
Именно здесь в дело вступают макеты дизайна.
На их основе вы можете показать реальную «картинку» продукта, не дожидаясь полной разработки. Обычно это происходит так:
Wireframes. Продакт вместе с дизайнером смотрит на логику экрана, расставляет всё по местам. Вместо дизайна обычные серые прямоугольники и круги без лишних деталей.
Макеты. После согласования структуры дизайнер «наряжает» эти схемы в цветовую палитру, шрифты, стили и иконки. Продакт смотрит на эти макеты вместе с маркетингом или командой бренда, чтобы всё соответствовало фирменным стандартам и задаче продукта.
А затем уже эти макеты будут тестироваться на пользователях, но это уже прототипы.
Предположим мы делаем платёжное приложение и, когда сделали макеты, выяснилось, что нужно больше акцентировать внимание на балансе пользователя.
Можно быстро поменять цвета и расположение блока с балансом, чтобы он был максимально заметным.
Без макетов это было бы сложнее объяснить команде – где и что нужно поправить.
Также эти макеты очень помогают при общении с разработчиками. Часто они спрашивают: «Какой именно у нас отступ от края экрана?», «Какого размера будет иконка?» или «У кнопки будет скругление или нет?».
В макетах всё прописано.
Это экономит кучу времени и убирает двусмысленность.
Макеты дизайна – это следующий шаг после wireframes, которые помогают быстро показать реальный внешний вид продукта и согласовать все визуальные детали с командой и стейкхолдерами.
Но у стейкхолдеров возникает миллион вопросов: «А каким будет наш фирменный цвет?», «Какие иконки планируем использовать?», «Как выглядит наша айдентика внутри приложения?».
Именно здесь в дело вступают макеты дизайна.
На их основе вы можете показать реальную «картинку» продукта, не дожидаясь полной разработки. Обычно это происходит так:
Wireframes. Продакт вместе с дизайнером смотрит на логику экрана, расставляет всё по местам. Вместо дизайна обычные серые прямоугольники и круги без лишних деталей.
Макеты. После согласования структуры дизайнер «наряжает» эти схемы в цветовую палитру, шрифты, стили и иконки. Продакт смотрит на эти макеты вместе с маркетингом или командой бренда, чтобы всё соответствовало фирменным стандартам и задаче продукта.
А затем уже эти макеты будут тестироваться на пользователях, но это уже прототипы.
Предположим мы делаем платёжное приложение и, когда сделали макеты, выяснилось, что нужно больше акцентировать внимание на балансе пользователя.
Можно быстро поменять цвета и расположение блока с балансом, чтобы он был максимально заметным.
Без макетов это было бы сложнее объяснить команде – где и что нужно поправить.
Также эти макеты очень помогают при общении с разработчиками. Часто они спрашивают: «Какой именно у нас отступ от края экрана?», «Какого размера будет иконка?» или «У кнопки будет скругление или нет?».
В макетах всё прописано.
Это экономит кучу времени и убирает двусмысленность.
Макеты дизайна – это следующий шаг после wireframes, которые помогают быстро показать реальный внешний вид продукта и согласовать все визуальные детали с командой и стейкхолдерами.
Чем макеты отличаются от прототипов
Макеты дизайна и прототипы часто путают, хотя у них задачи разные и используются они в разных этапах.
Разберем по процессу:
Сначала создаются wireframes
Это простые схемы, где отмечено:
Здесь будет заголовок, тут кнопка с ключевым действием, а там - следующий экран на который будет переход.
На этом шаге надо определить логику и структуру интерфейса без детализации внешнего вида.
Следующим шагом делают макеты дизайна.
Макеты - это всё ещё статичные изображения.
По ним нельзя пройтись кликами, но они помогают:
Далее создаётся прототип.
Он берёт макеты за основу, но делает их интерактивными.
В прототипе уже можно нажать на кнопку, перейти на другой экран и посмотреть, как пользователь будет взаимодействовать с продуктом.
Прототип используют чтобы:
Собрать обратную связь от пользователей
Проверки всё ли понятно, где искать нужные функции
Демонстрации не только визуала, но и логики поведения интерфейса.
На практике обычно происходит так:
Разберем по процессу:
Сначала создаются wireframes
Это простые схемы, где отмечено:
Здесь будет заголовок, тут кнопка с ключевым действием, а там - следующий экран на который будет переход.
На этом шаге надо определить логику и структуру интерфейса без детализации внешнего вида.
Следующим шагом делают макеты дизайна.
Макеты - это всё ещё статичные изображения.
По ним нельзя пройтись кликами, но они помогают:
- Понять, как интерфейс будет выглядеть приближенно к реальности;
- Согласовать визуальную часть с командой, стейкхолдерами и маркетингом;
- Утвердить окончательный вид, прежде чем прототипировать дизайн.
Далее создаётся прототип.
Он берёт макеты за основу, но делает их интерактивными.
В прототипе уже можно нажать на кнопку, перейти на другой экран и посмотреть, как пользователь будет взаимодействовать с продуктом.
Прототип используют чтобы:
Собрать обратную связь от пользователей
Проверки всё ли понятно, где искать нужные функции
Демонстрации не только визуала, но и логики поведения интерфейса.
На практике обычно происходит так:
- Сначала появляются wireframes, чтобы определить логику и структуру.
- Затем создаются макеты, чтобы утвердить внешний вид.
- И в конце делается прототип, который позволяет прокликать приложение и выявить возможные проблемы до разработки.
Как создать макеты
Собирать макеты дизайна обычно начинают, когда структура и логика экранов (wireframes) уже утверждены.
Смысл в том, чтобы перевести эти каркасные схемы в цвета, шрифты и фирменный стиль или применить все элементы из дизайн системы (если она есть).
Дизайнер сначала смотрит на брендбук (если он есть) или договаривается с продактом и маркетингом о базовом наборе цветов и шрифтов.
Потом берёт wireframes и заменяет все серые блоки и кружочки на настоящие кнопки, поля для ввода, иконки и так далее.
Теперь интерфейс начинает выглядеть более реалистично.
Обычно удобнее сначала сделать пару ключевых экранов (например, главный экран и страницу входа), чтобы команда поняла общий стиль.
Если всё нравится, дизайнер по той же схеме собирает остальные экраны.
Важно следить за тем, чтобы везде соблюдался единый стиль: одинаковые шрифты, иконки, отступы и цвета. Хотя бы из одного UI-kit если нет дизайн системы.
Иначе у вас будет с десяток вариаций желтой кнопки, или на каждой странице будут применяться свои отступы и шрифты, и поддерживать это будет очень сложно.
Параллельно продакт и разработчики смотрят, насколько это всё потом будет удобным в разработке и понятным пользователям.
Если, к примеру, кнопка Купить теряется среди других элементов, на макетах проще всё скорректировать: изменить цвет, размер или расположение.
Вносить правки на этом этапе дешевле, чем переделывать уже сверстанный интерфейс.
Когда все экраны готовы, их снова просматривают вместе с командой.
Если всё устраивает, макеты считают финальными.
Их можно использовать для презентаций, тестов с пользователями или сразу отправить в разработку - в зависимости от того, что именно нужно на данном этапе.
Смысл в том, чтобы перевести эти каркасные схемы в цвета, шрифты и фирменный стиль или применить все элементы из дизайн системы (если она есть).
Дизайнер сначала смотрит на брендбук (если он есть) или договаривается с продактом и маркетингом о базовом наборе цветов и шрифтов.
Потом берёт wireframes и заменяет все серые блоки и кружочки на настоящие кнопки, поля для ввода, иконки и так далее.
Теперь интерфейс начинает выглядеть более реалистично.
Обычно удобнее сначала сделать пару ключевых экранов (например, главный экран и страницу входа), чтобы команда поняла общий стиль.
Если всё нравится, дизайнер по той же схеме собирает остальные экраны.
Важно следить за тем, чтобы везде соблюдался единый стиль: одинаковые шрифты, иконки, отступы и цвета. Хотя бы из одного UI-kit если нет дизайн системы.
Иначе у вас будет с десяток вариаций желтой кнопки, или на каждой странице будут применяться свои отступы и шрифты, и поддерживать это будет очень сложно.
Параллельно продакт и разработчики смотрят, насколько это всё потом будет удобным в разработке и понятным пользователям.
Если, к примеру, кнопка Купить теряется среди других элементов, на макетах проще всё скорректировать: изменить цвет, размер или расположение.
Вносить правки на этом этапе дешевле, чем переделывать уже сверстанный интерфейс.
Когда все экраны готовы, их снова просматривают вместе с командой.
Если всё устраивает, макеты считают финальными.
Их можно использовать для презентаций, тестов с пользователями или сразу отправить в разработку - в зависимости от того, что именно нужно на данном этапе.
Примеры макетов
Существуют библиотеки, и площадки где дизайнеры выкладывают свои макеты. Это делается чтобы сформировать портфолио или просто для развития личного бренда.
Когда вы формируете дизайн макет можно воспользоваться примерами как похожие пользовательские пути реализовывали другие.
Но нужно подходить к этому вопросу критически.
Часто дизайны, которые выкладывают на таких площадках сделаны чисто ради портфолио и в реальности такой дизайн сделать или невозможно, или он будет крайне неудобен и непродуманным.
Когда вы формируете дизайн макет можно воспользоваться примерами как похожие пользовательские пути реализовывали другие.
Но нужно подходить к этому вопросу критически.
Часто дизайны, которые выкладывают на таких площадках сделаны чисто ради портфолио и в реальности такой дизайн сделать или невозможно, или он будет крайне неудобен и непродуманным.
AI генераторы макетов
Теперь дизайнеры могут действовать в паре с AI.
Есть разные плагины и даже отдельные продукты, которые позволяют по текстовому запросу или по картинке сгенерировать полноценный макет.
Или построить flow со всеми стрелками между экранами.
Или вместо квадратов и шаблонных текстов поставить нормальные картинки и осмысленные текста.
Несколько таких инструментов ниже:
Есть разные плагины и даже отдельные продукты, которые позволяют по текстовому запросу или по картинке сгенерировать полноценный макет.
Или построить flow со всеми стрелками между экранами.
Или вместо квадратов и шаблонных текстов поставить нормальные картинки и осмысленные текста.
Несколько таких инструментов ниже:
Как вам материалы?
Об авторе:
Еще материалы по теме продакт менеджмента: