Что такое Wireframe
Wireframe (вайрфрейм, проволочный каркас) - схематичное изображение страницы сайта без дизайна, цветов, шрифтов. Только блоки и их расположение. Самая базовая стадия проектирования - первый шаг к будущей странице.
Wireframe простыми словами
Если прототип - это чертёж дома с указанием комнат и переходов, то wireframe - это первоначальный набросок на бумаге. Очень упрощённо, чтобы быстро согласовать общее направление, прежде чем углубляться в детали.
Чем wireframe отличается от прототипа
В разных компаниях термины используются по-разному. Чаще всего:
- Wireframe - самый базовый набросок: серые прямоугольники, минимум деталей.
- Прототип - проработанный wireframe с примерным контентом, ближе к будущей странице.
- Макет / Дизайн - готовый визуал с цветами, шрифтами, изображениями.
Многие используют wireframe и прототип как синонимы. Главное - понимать, что речь идёт о структуре без дизайна.
Когда делается
В самом начале проекта, после брифинга и составления карты сайта. Wireframe согласовывается до начала прорисовки дизайна.
Из чего состоит wireframe
- Серые прямоугольники вместо изображений
- Текст-рыба или короткие подписи ("Заголовок", "Описание", "Кнопка")
- Простые линии и блоки
- Иногда - указание размеров и пропорций
Зачем нужен
- Быстро согласовать структуру (можно нарисовать за час)
- Не отвлекаться на цвета и шрифты раньше времени
- Найти проблемы в структуре до больших затрат на дизайн
- Сэкономить бюджет на правках
В каких инструментах делают
- Figma (с готовыми кит-наборами для wireframe)
- Balsamiq (специализированный инструмент)
- Бумага и карандаш (для самых ранних набросков)