Вайрфрейминг
Что это такое
Вайрфрейм — это макет из серых блоков: прямоугольники там, где будут изображения и элементы управления, настоящий текст для важных подписей и никакого визуального дизайна вообще. Он фиксирует структуру, иерархию и порядок, в котором читается страница, чтобы обсуждение оставалось на этих вещах, пока их ещё дёшево менять.
Почему это важно
Отделка приходит слишком рано в большинстве проектов и решает споры, которых не должна решать: цветной макет приглашает к отзыву об оттенке синего, пока страница всё ещё ставит главное действие ниже трёх конкурирующих. Серые блоки делают иерархию видимой — самый крупный блок на странице выигрывает взгляд, заслуживает он этого или нет. Поэтому вайрфрейминг стоит между информационной архитектурой и визуальным дизайном: он проверяет структуру, пока никто ещё не вложился в поверхность.
Ключевые идеи
Серые блоки, настоящая иерархия
Заполняйте фигуры серым и берите настоящие подписи. Визуальный вес блока должен примерно соответствовать его важности: если вайрфрейму нужна стрелка, которая объясняет, что важнее всего, — макет неправильный.
+--------------------------------------+
| Ваши заказы [поиск] |
+--------------------------------------+
| #4021 Бристоль £240 Отправлен [смотр]|
| #4018 Лидс £90 Доставлен [смотр]|
| ... |
+--------------------------------------+
| <- Назад в аккаунт |Настоящие слова, а не lorem ipsum
Подписи решают, работает ли макет: заголовок вдвое длиннее заглушки ломает строку и заставляет менять структуру.
Верстайте по одной колонке за раз
Сначала разложите главное содержимое, как если бы у страницы была одна колонка, а потом добавьте вокруг боковую панель, навигацию и подвал. Страницы, спроектированные от рамки внутрь, обычно имеют рамку и не имеют содержимого.
Рисуйте состояния, а не только заполненную страницу
Рисуйте не только заполненную страницу, но и пустое состояние, один элемент, много элементов, загрузку и ошибку. Пустое состояние заслуживает такой же тщательности, как полное: именно его новый пользователь видит первым.
Оставляйте его одноразовым
Набросочные блоки приглашают перерисовать — в этом и смысл. Однако вайрфрейм, на который ушёл день, станут защищать, а не переделывать.
Практика
Сверстайте одну страницу из контракта страницы
Возьмите контракт страницы из своей информационной архитектуры и сверстайте страницу серыми блоками с настоящими подписями, а пустое состояние добавьте на втором листе.
Готово, когда: кто-то может без объяснений сказать, для чего страница и что делать первым.
Проверьте иерархию прищуром
Покажите вайрфрейм трём людям на пять секунд, затем уберите и спросите, что они запомнили первым.
Готово, когда: они первым называют главное действие, или вы подняли его выше на странице.
Частые ошибки
- Пропуск вайрфреймов и старт с отделки — визуальный дизайн случайно отвечает на структурные вопросы; исправить: сначала сверстайте макет серыми блоками и согласуйте его.
- Lorem ipsum — настоящие подписи ломают макет, который одобрил мокап; исправить: пишите реальные строки реальной длины.
- Вайрфрейм, где блоки не соответствуют важности — макет ранжирует вещи по размеру, и побеждает не то; исправить: подгоняйте блоки, пока взгляд не падает в нужное место.
- Только полное состояние — пустые и ошибочные страницы импровизируют позже; исправить: сверстайте состояния на отдельных листах.
- Слишком детальные вайрфреймы — дни рисования превращают макет в позицию, которую защищают; исправить: держите блоки грубыми и поощряйте перерисовку.
Что читать дальше
- Информационная архитектура (03-design-ux/09-information-architecture) — прочитайте это первым; вайрфрейм раскладывает структуру, которая уже прошла проверку.
- Передача в макет (03-design-ux/09-information-architecture/04-the-hand-off-to-layout) — контракты страниц, из которых берутся эти вайрфреймы.
- Прототипирование (03-design-ux/40-prototyping) — соединение вайрфреймов во что-то тестируемое.
- Визуальный дизайн (03-design-ux/10-visual-design) — слой, который накладывают, когда структура устоялась.