UI/UX дизайн

Що таке вайрфрейм (wireframe)?

Вайрфрейм (wireframe) — це схематичне креслення екрана без кольорів, шрифтів і зображень: сірі прямокутники на місці блоків і підписи, що в них буде. Він показує структуру і пріоритети, а не зовнішній вигляд.

Головне — швидкість і фокус обговорення. Поки екран виглядає як начерк, говорять про правильний порядок блоків і склад інформації. Щойно з’являються справжні кольори і фото, обговорення неминуче переходить на відтінок кнопки.

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

Де застосовується

Вайрфрейми малюють на самому початку роботи над екраном — коли вирішують, що на ньому буде і в якому порядку. Їх показують замовнику і команді, щоб домовитися про структуру до того, як витратити час на кольори, ілюстрації та анімацію.

В агенціях і продуктових командах це ще й спосіб погодити роботу: за вайрфреймом видно обсяг, можна оцінити терміни і обговорити блоки лендингу з маркетологом. Малюють їх у Figma, а іноді просто олівцем на папері — для обговорення цього досить.

Приклад

Головна сторінка магазину на вайрфреймі — це п’ять сірих прямокутників із підписами: шапка, банер, категорії, хіти продажів, підвал. Обговорення одразу йде про те, чи не поставити категорії вище за банер, а не про колір кнопки.

Часті запитання

Чим вайрфрейм відрізняється від прототипу і макета?

Вайрфрейм — це структура без оформлення. Прототип додає клікабельні переходи, щоб сценарій можна було пройти. Макет — фінальний вигляд із кольорами, шрифтами і зображеннями, за яким уже верстають. Зазвичай ці три етапи проходять по черзі.

Чи можна пропустити етап вайрфрейма?

Для простої задачі з одним екраном — так. Але що складніший сценарій, то дорожче коштує пропуск: помилку в структурі на вайрфреймі виправляють за хвилини, у готовому макеті — за години, а в зверстаному продукті — за дні роботи розробника.

У чому роблять вайрфрейми?

Найчастіше у Figma, бо там же потім створюють макет. Підійдуть і прості інструменти на кшталт Balsamiq, і звичайний папір з олівцем. Інструмент тут не головне: цінність у швидкості, з якою можна перебрати кілька варіантів структури.

Навчання UI/UX-дизайну в OWU

Опануйте професію UI/UX-дизайнера на практичних курсах із менторами та реальними проєктами.

Обрати курс