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

Суть и предназначение вайрфрейма

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

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

Демонстрация позволяет получить ответы на вопросы:

•    какие элементы размещены на странице;
•    их целесообразность;
•    место размещения элементов;
•    принцип их работы.

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

Как усложнить визуальную понятность с помощью стилей вайрфреймов

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

Различают следующие стили, оказывающие негативное влияние на визуальную понятность:

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

Отсюда понятно, что стили вайрфрейма — пустая трата времени, оказывающая негативное влияние на его восприятие зрителями.

Отсутствие стиля — монохромное исполнение

Результатом отказа от стиля является монохромное выполнение — размещение элементов на белом фоне, выполненных одним цветом. В этом случае форма и предназначение будут соответствовать друг другу. Зритель получает возможность сконцентрироваться на главном — структуре, не увлекаясь анализом цветов. Глядя на элементы одного цвета, зритель будет говорить об их размещении, а не их оформлении.

Монохромное исполнение экономит время дизайнера — ему не нужно думать о сочетаемости цветов и оттенков друг с другом. Единственное правило для успешного монохромного исполнения — основной цвет должен создавать хороший контраст с белым фоном. Плохие варианты — черный (напрягает глаза), и серый (выглядит слишком бледно). Хороший вариант — темный серо-синий цвет, который создает хороший контраст с белым. Он хорошо виден издалека и вблизи. Если дизайнер новичок хочет создавать вайрфрейм без стиля, ему следует попробовать работать с  Wireframe Patterns, где есть много готовых UI шаблонов.

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