Создание вайрфреймов наиболее эффективно на начальном этапе процесса проектирования, когда основной задачей является формирование структуры продукта. Думайте о вайрфреймах как о чертежах, которые необходимо создать, прежде чем приступить к возведению здания. Вайрфреймы позволяют быстро спланировать и проверить функциональную ценность страницы или экрана. Выполнение этой работы до того, как будет вложено много сил в разработку дизайна, сэкономит вам время и деньги.
Вайрфреймы различаются по уровню детализации — от низкой до высокой степени проработки (Low-fidelity и High-fidelity). Под детализацией (fidelity) в контексте дизайна понимается уровень детализации элементов и функциональности. Низкодетализированные вайрфреймы очень простые, и их даже можно нарисовать от руки. На противоположном конце спектра — высокодетализированные вайрфреймы, которые почти неотличимы от конечного продукта.
Каждый вид вайрфреймов полезен для различных команд, занимающихся проектированием и разработкой программного обеспечения. Выбор типа зависит от потребностей конкретного проекта и этапа вашего дизайн-процесса.
Низкодетализированные вайрфреймы (Low-fidelity wireframes)
Низкодетализированные вайрфреймы — это быстрые наброски, часто создаваемые от руки, которые делают ваши идеи более осязаемыми. Их задача — сосредоточиться на базовой структуре интерфейса, не погружаясь в детали, что отражается и в их внешнем виде. Такие вайрфреймы обычно чёрно-белые и отображают элементы интерфейса в виде простых блоков и линий без подробных пояснений.
Представляйте низкодетализированные вайрфреймы как черновик — это не конечный продукт, а лишь отправная точка. Их назначение — помочь сформировать продукт на ранних этапах разработки и убедиться в его удобстве использования ещё до начала детальной проработки и разработки. Такие вайрфреймы не требуют много усилий, но избавят вас от лишней работы в будущем.
Среднедетализированные вайрфреймы (Medium-fidelity wireframes)
Среднедетализированные вайрфреймы — это, по сути, более детализированные версии низкодетализированных вайрфреймов. Например, в них может использоваться реальный текст вместо заполнителей, оттенки серого или даже некоторые цвета вместо монохромной палитры для более ясного отображения визуальной иерархии. Цель среднедетализированных вайрфреймов — помочь командам понять, как эстетические особенности могут поддерживать основные функции продукта.
Высокодетализированные вайрфреймы (High-fidelity wireframes)
Высокодетализированные вайрфреймы показывают, как будет выглядеть продукт после завершения разработки. Такой тип вайрфреймов создаётся с помощью цифровых инструментов и обычно требует больше времени и усилий для разработки. Обычно в них включена финальная цветовая палитра и иногда изображения.
Внешний вид высокодетализированных вайрфреймов похож на прототипы, но не стоит их путать. Вайрфреймы и прототипы используются на разных стадиях дизайн-процесса и для разных целей. Вайрфреймы статичны, и их цель — передать структуру страницы. Прототипы же интерактивны, и их задача — продемонстрировать взаимодействия элементов интерфейса, стиль и расположение. Прототипы отлично подходят для проверки юзабилити и общей ценности дизайнерских решений.
Контент-заполнитель (Dummy content)
Контент-заполнитель (Dummy content) — это текст и изображения, которые используются временно и обладают некоторыми характеристиками реального контента. Заполнители изображений, например, изображение с горой и солнцем или картинка с двумя диагональными линиями, часто применяются в низко- и среднедетализированных вайрфреймах. При этом использование текстовых заполнителей вроде «Lorem ipsum» вызывает некоторые дискуссии.
С одной стороны, использование «Lorem ipsum» ускоряет процесс дизайна, поскольку позволяет двигаться дальше в разработке, пока создаётся реальный контент. С другой стороны, текст-заполнитель ведёт себя не так, как настоящий текст. Например, становится трудно выбрать оптимальное выравнивание, и невозможно точно определить, как будет восприниматься финальное расположение текста.
Используйте реальный текст на ранних этапах процесса
Компания Balsamiq рекомендует использовать реальный текст, который будет в финальном дизайне, уже на ранних этапах проектирования по двум причинам. Во-первых, это позволяет увидеть, как настоящий контент будет выглядеть в композиции. Во-вторых, релевантный текст в вайрфрейме способствует получению более осмысленной обратной связи во время обсуждений. Если окончательный текст пока не готов, лучше быстро набросать текст, похожий по длине и стилю на финальный, чтобы люди могли высказать мнение о его смысле и восприятии.
Когда использовать низкодетализированные вайрфреймы
Когда следует использовать низкодетализированные вайрфреймы? Этот тип вайрфреймов описывает базовую функциональность и включает простые пояснения основных шагов, этапов, требований и композиции (layout).
Использовать низкодетализированные вайрфреймы стоит в следующих случаях:
- Вы находитесь в самом начале процесса проектирования. Используйте низкодетализированные вайрфреймы в качестве первых черновиков и добавляйте детали в последующих итерациях.
- Вам нужно создать большое количество вайрфреймов. Если вы работаете над крупным проектом, может быть целесообразно начинать с низкодетализированных вайрфреймов для большинства страниц и добавлять детализацию только тем из них, где требуется дополнительная ясность.
- Вам необходимо быстро завершить проект. Чем меньше деталей в вайрфрейме, тем быстрее его можно подготовить.
Когда использовать среднедетализированные вайрфреймы
Использовать простые, но уже детализированные среднедетализированные вайрфреймы целесообразно в следующих случаях:
- Вы собираете карту вайрфреймов (Wireframe map) — визуальную карту сайта, содержащую вайрфреймы для каждой страницы. В таких случаях низкодетализированные вайрфреймы могут быть недостаточно информативными, особенно если вы планируете собирать обратную связь от пользователей.
- Это следующий шаг в продуманном дизайн-процессе. Если в вашем проекте есть время и бюджет, среднедетализированные вайрфреймы — это следующая итерация после того, как утверждены низкодетализированные вайрфреймы. Добавление немного большей детализации поможет проработать ваши дизайнерские идеи.
Когда использовать высокодетализированные вайрфреймы
Часто высокодетализированные вайрфреймы (High-fidelity wireframes) появляются в результате проверки и естественной эволюции низко- и среднедетализированных вайрфреймов.
В каких случаях стоит использовать высокодетализированные вайрфреймы?
- В конце процесса проектирования, когда уже определено, как должен выглядеть дизайн, и на первый план выходит функциональность.
- Когда необходимо протестировать сложные пользовательские взаимодействия. Повышенная детализация позволяет точнее оценивать элементы интерфейса.
- Если у вас есть достаточно времени и бюджета. Высокодетализированные вайрфреймы требуют значительных затрат времени дизайнера и стоят дороже в производстве.
- Вы работаете с партнёром, на которого хотите произвести впечатление. Высокодетализированные вайрфреймы дают внешним сторонам более ясное представление о конечном продукте и подчеркивают ваш профессионализм.
- Вы работаете над личным проектом. Когда вы сами контролируете сроки, вы можете решать, сколько времени и усилий готовы вложить. Высокодетализированные вайрфреймы отлично подходят, чтобы показать потенциал продукта инвесторам.