Вайрфреймы (Wireframes)

Вайрфреймы/Wireframes/Каркас – это базовое двухмерное визуальное представление веб-страницы, интерфейса приложения или макета продукта. Вы можете думать об этом как о функциональном скетче низкой точности.

 

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

Каркасы обычно отображают только функциональность, а не настоящий стиль и визуальные элементы конечного продукта. Вот почему большинство каркасов выглядят просто: оттенки серого вместо цветов, заполнители для изображений и Lorem Ipsum для текста.

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

Каковы преимущества каркасов?

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

Вот несколько примеров того, как можно применить каркасы:

• Сообщите команде о том, какие функции и контент сделать приоритетными в продукте или на сайте.
• Изобразите, как команда представляет пользователей, взаимодействующих с продуктом или сайтом.
• Документируйте и сообщайте, как будут связаны различные аспекты приложения или веб-сайта.
• Установите согласованные способы отображения определенного контента на сайте.

Разъясните заинтересованным сторонам в компании планы в отношении продукта и взаимодействия с пользователем. Вот почему макеты могут служить полезным дополнением к дорожной карте продукта на встречах с руководителями заинтересованных сторон.

Кто отвечает за создание каркасов?

Во многих организациях дизайнеры продуктов, такие как дизайнеры UX и UI, несут ответственность за создание каркасов. Они делают это на ранних этапах планирования продукта в координации с командой управления.

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

Компания, у которой нет специального продукта или команды UX-дизайнеров, может разрабатывать полезные каркасы самостоятельно  помощь. онлайн-сервисов. Поскольку такие приложения, как «Balsamiq», упрощают создание каркасов даже для тех, у кого нет навыков проектирования, мы считаем, что менеджеры по продуктам также должны создавать каркасы.

Как создать каркас?

Леонард Барнард, возглавляющий группу по обучению производителя программного обеспечения для создания каркасов «Balsamiq», предлагает пятиступенчатую стратегию создания каркаса:

Шаг 1: Формулируйте

Убедитесь, что ваша команда понимает проблему, которую вы пытаетесь решить. Для начала лучше всего ответить на такие вопросы, как:

1. Кто будет этим пользоваться?
2. Каковы их цели?
3. Как они, вероятно, будут пытаться достичь этих целей?

Шаг 2: Создавайте

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

Шаг 3: Итерация

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

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