Wireframe — скелетное изображение layout сайта. Prototype — интерактивный wireframe. Без них переходить к визуальному дизайну — большая ошибка.
Зачем нужно
1. Фокус на структуре. 2. Быстрая итерация. 3. Понятно всем участникам.
Уровни fidelity
Low — бумага, простые линии. Mid — Figma, реальные пропорции. High — близко к дизайну.
Этапы создания
1. Цели и flow. 2. Список секций. 3. Sketching. 4. Итерация.
Инструменты wireframe
Бумага и карандаш. Balsamiq. Figma. Sketch. Adobe XD. Whimsical.
Prototype
Wireframe статичен. Prototype интерактивен.
Уровни prototype
Click-through, Interactive, Coded.
Инструменты prototype
Figma, Principle, Framer, InVision, ProtoPie.
User testing
5-7 пользователей находят 85%+ проблем.
Итерации
3-5 раундов. Создать → тест → правки → тест.
Ошибки
Рано переход к визуалу. Lorem ipsum. Только desktop wireframe.
Сайт.uz
Бумажные wireframe → Figma → прототип → тестирование 5 сотрудниками → итерации → дизайн.