Створення wireframe-прототипів сторінок сайту
Wireframe — це чорно-біла структурна схема сторінки без візуального дизайну: лише блоки, їх розташування, типографічна ієрархія й основні інтерактивні елементи. Термін «прототип» у контексті wireframe означає кликабельну зв'язку таких схем, а не окремий статичний макет.
Wireframe — це інструмент комунікації й перевірки логіки, а не художній артефакт. Його задача — зафіксувати рішення по структурі до того, як дизайнер витратить час на колір, шрифти й іллюстрації.
Рівні деталізації
Прийнято розрізняти три рівня:
Low-fidelity (lo-fi) — грубі наброски, прямокутники з підписами, іноді від руки. Роблять за години, міняють без сумніву. Підходять для первинного затвердження структури з клієнтом і командою.
Mid-fidelity — структуровані схеми у Figma або Balsamiq. Правильні пропорції блоків, реальні мітки кнопок і заголовків, типографічні рівні позначені розміром. Золотий стандарт для більшості проектів.
High-fidelity wireframe — детальна схема з реальним контентом, точними розмірами, іноді з умовною кольоровою схемою (відтінки сірого). Розмиває границю з UI-дизайном, тому використовується рідше — коли клієнт не може «читати» lo-fi або для складних інтерфейсів типу дашбордів.
Що детально прорабляється у wireframe
Wireframe закриває рішення, які потім дуже дорого менять у дизайні або коді:
Контентна ієрархія — що йде першим, що другорядне, що приховано за аккордеоном або табом. Приклад: блок соціальних доказів — відзивів або логотипів клієнтів — на першому екрані або після опису послуги? Це вирішується у wireframe, а не у дизайні.
Компонування форм — скільки полів, у якій послідовності, що в один рядок, що розбивається на кроки (wizard/stepper). Для довгих форм (реєстрація, оформлення замовлення) wireframe показує всю послідовність кроків.
Пусті стани й edge cases — що показується, якщо даних немає (новий користувач, пуста кошик, немає результатів пошуку). Це часто забувають й потім роблять на ходу.
Адаптація — wireframe для desktop і wireframe для mobile можуть сильно відрізнятися. Не «зменшити й перенести», а перебудувати пріоритети контенту.
Кликабельний wireframe-прототип
Коли wireframe-схеми зв'язуються переходами, виходить прототип — його можна кликати й перевіряти сценарії користувача. У Figma це робиться через Prototype-режим: з'єднуємо кнопки зі сторінками, додаємо оверлеї для модальних вікон, задаємо анімації переходів (опційно).
На цьому етапі зручно проводити швидке користувацьке тестування: дати 5–7 реальним користувачам конкретну задачу й посмотреть, справляються ли вони без підказок. Помилки у навігації й незрозумілі мітки обнаруживаются одразу — до того, як дизайнер витратив 40 годин на повноцінний UI.
Приклад: для маркетплейсу фрилансу обнаружили на wireframe-прототипі, що 4 з 6 тестувальників не могли знайти кнопку «Откликнутися на проект» — вона була приховано за вкладкою «Деталі». Перемістили на перший екран завдання, до вкладок. У фінальному дизайні ця точка вже не переділувалася.
Інструменти
- Figma — стандарт ринку, зручна для командної роботи й передачі розробникам
- Balsamiq — спеціалізований інструмент для lo-fi, імітує «нарисований» стиль
- Axure RP — для складних інтерактивних прототипів з умовною логікою (показати/приховати, змінні)
Терміни
Wireframe типової корпоративної сторінки (головна, послуги, контакти) — 2–4 робочих дні. Повний wireframe-прототип сайту з 10–15 сторінок — 7–14 робочих днів. Складні продуктові інтерфейси (дашборди, кабінети) — 3–5 тижнів.