Що таке вайрфрейм і як його зробити: покроково

Крок 1

Розберіться, що таке вайрфрейм

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

• •низька деталізація (low-fidelity): структура, навігація, порядок блоків — навіть від руки;
• •середня (mid-fidelity): анотації й реальний зміст, основні взаємодії;
• •висока (high-fidelity): схожа на ранній макет, уже з шрифтами, кольорами й логотипом, щоб передати відчуття продукту під час тестування з людьми.

💡 Не плутайте терміни: вайрфрейм показує структуру, макет (mockup) — фінальний вигляд із кольорами й шрифтами, прототип — клікабельну версію, якою можна «користуватися».

Крок 2

Підготуйте зміст до того, як малювати

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

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

Крок 3

Перший вайрфрейм — на папері

Папір і ручка — найшвидший інструмент: ви не відволікаєтеся на вирівнювання й шрифти. Намалюйте прямокутник розміром із телефон або вікно браузера і розставте в ньому зміст зі свого списку. Головне правило — кілька варіантів, а не один «правильний»:

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

💡 NN/g пояснює, чому це вигідно: паперовий прототип можна протестувати з людьми дуже дешево і виправити проблеми ще до того, як хтось витратив час на реалізацію.

Крок 4

Перенесіть вайрфрейм у Figma

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

• •створіть фрейм потрібного розміру й додайте колонкову сітку — у Figma вона тепер називається layout guide (раніше layout grid) — і вирівнюйте блоки по ній;
• •робіть повторювані елементи компонентами: кнопку, картку, поле. Пізніше їх легко «одягнути» у фінальний дизайн;
• •додайте анотації збоку: що відбувається після натискання, звідки беруться дані, що буде, якщо список порожній;
• •для застосунку з кількома екранами з'єднайте їх стрілками: NN/g називає такий формат вайрфлоу (wireflow) — поєднання вайрфреймів зі схемою переходів. Звичайний вайрфрейм добре показує розташування, але погано — взаємодію.

Крок 5

Перевірте вайрфрейм і рухайтеся далі

Вайрфрейм уже можна тестувати. Не обов'язково робити його клікабельним: NN/g описує статичні прототипи, де людина «натискає» на роздруківку, а ви, граючи роль «комп'ютера», підкладаєте наступний екран. Дайте задачу двом-трьом людям і подивіться, де вони вагаються.

• •задача має бути конкретною: «запишіться на заняття в четвер о 19:00», а не «подивіться, як вам»;
• •не пояснюйте екран, поки людина не спробувала сама;
• •запишіть, де вона зупинилася, що шукала й що зрозуміла не так;
• •виправте структуру й лише потім переходьте до кольорів, шрифтів і фінального макета.

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