Що таке вайрфрейм (wireframe)?
Вайрфрейм — схематичне креслення екрана без кольору, шрифтів і картинок: сірі прямокутники на місці блоків і підписи, що там буде. Він показує структуру та пріоритети, а не зовнішній вигляд.
Сенс у швидкості та у фокусі обговорення. Поки екран виглядає як начерк, розмова йде про правильний порядок блоків і склад інформації. Щойно зʼявляються реальні кольори й фотографії, обговорення неминуче йде у відтінки кнопки.
Зазвичай послідовність така: вайрфрейм → прототип із клікабельними переходами → фінальний макет у кольорі. Помилку в логіці на першому кроці виправити коштує хвилини, на останньому — дні.
Де застосовується
Вайрфрейми малюють на самому початку роботи над екраном — коли вирішують, що взагалі на ньому буде і в якому порядку. Їх показують замовнику й команді, щоб домовитися про структуру до того, як витрачено час на колір, ілюстрації та анімацію.
В агенціях і продуктових командах це ще й інструмент узгодження: за вайрфреймом видно обсяг роботи, можна оцінити терміни й обговорити склад блоків лендингу з маркетологом. Малюють їх у Figma, а іноді просто від руки на папері — для обговорення цього достатньо.
Приклад
Головний екран магазину на вайрфреймі — це пʼять сірих прямокутників з підписами: шапка, банер, категорії, хіти продажів, підвал. Обговорення одразу йде про те, чи потрібні категорії вище банера, а не про те, який відтінок у кнопки.
Часті запитання
Чим вайрфрейм відрізняється від прототипу й макета?
Вайрфрейм — це структура без оформлення. Прототип додає до нього клікабельні переходи, щоб сценарій можна було пройти. Макет — фінальний вигляд з кольором, шрифтами та зображеннями, за яким уже роблять верстку. Зазвичай проходять усі три стадії по черзі.
Чи можна пропустити етап вайрфрейма?
На простій задачі з одного екрана — так. Але що складніший сценарій, то дорожче обходиться пропуск: помилку в структурі на вайрфреймі виправляють за хвилини, у готовому макеті — за години, а у зверстаному продукті — за дні роботи розробника.
У чому роблять вайрфрейми?
Найчастіше у Figma, бо далі в ній же виростає макет. Підійдуть і прості інструменти на кшталт Balsamiq, і звичайний папір з олівцем. Інструмент тут вторинний: цінність дає швидкість, з якою можна перебрати кілька варіантів структури.