Дизайн вайрфрейма маркетингового сайта

Маркетинговый лендинг Acme

Артефакт представляет «Acme · Marketing Landing» как низкодетализированный десктопный вайрфрейм со слоем редлайна. Его главная ценность — прослеживаемость: левый холст показывает предлагаемую композицию страницы, а правая панель объясняет, какую роль должна играть каждая пронумерованная область. Это удобно для обсуждения структуры до того, как определены бренд-ассеты, итоговые тексты и поведение в продакшене.

Видимая шапка задаёт рабочий контекст: «WIREFRAME · REDLINE», «DEVICE DESKTOP 1280», «FIDELITY LOW» и «REV A». Эти подписи определяют снимок как дизайн-спецификацию, а не готовую маркетинговую страницу. Адресная строка в стиле браузера содержит «acme.example / home», что придаёт странице конкретный маршрут, но не подтверждает наличие реального сервиса.

01

Холст

Большая левая область показывает порядок страницы: навигация, hero, социальные доказательства, сетка преимуществ и футер.

02

Спецификация

Правая панель превращает эти области в конкретные заметки: размеры, брейкпоинты, выравнивание.

Чем полезен этот вайрфрейм

Дизайн подходит для раннего планирования маркетинговой страницы, критики и передачи в работу. Он даёт команде общий объект, чтобы решить, какие разделы нужны на странице и какие адаптивные изменения требуют явного согласования. Поскольку содержимое в основном состоит из нейтральных блоков, рецензенты могут сосредоточиться на композиции и правилах, а не принимать плейсхолдеры текста или изображений за проверенные сообщения.

Планирование лендинга

Пять меток резервируют области навигации, hero, полосы логотипов, сетки преимуществ и футера. В футере четыре колонки плейсхолдерных полос, без рабочих ссылок и юридической строки. Такая абстракция проясняет порядок разделов и их относительный вес, но не может подтвердить будущие тексты, то, кто будет указан в качестве партнёров или конверсию.

Проверка адаптивного замысла

Боковая панель предлагает скрывать логотипы на мобильных, правило 960px для сетки преимуществ и двухколоночный футер при ширине менее 1000px. Фактический CSS использует один брейкпоинт — 1000px и меньше: он выстраивает оболочку, hero и блок преимуществ в стопку, делает панель аннотаций статичной и переводит футер на две колонки. Полоса логотипов остаётся видимой. Эти расхождения делают страницу примером ревью спецификации, а не доказательством того, что все заметки реализованы.

От верхней навигации до футера

Спецификация использует нумерацию один к одному. Метка ① обозначает нейтральную строку навигации; её поведение — высота 64px, прилипание и сжатие при прокрутке — это заметка, а не реализованная навигация. Метка ② обозначает текст и перечёркнутый медиа-плейсхолдер. Реальная hero-сетка имеет пропорции 1fr/0.85fr, поэтому тексту отведено чуть больше ширины, но у плейсхолдера минимальная высота 188px, а не принудительное соотношение 16:9.

Композиция hero

Заметки задают H1 48/56, подзаголовок 18/28 и пару действий: основной и «призрачный» CTA. На снимке видны соответствующие выровненные по левому краю текстовые полосы и два блока действий рядом с крупным перечёркнутым плейсхолдером изображения. Такая компоновка делает задуманный акцент читаемым, но низкодетализированное изображение не определяет, какими будут итоговый визуал, кадрирование или взаимодействие.

Доказательства, преимущества и завершение

Метка ③ резервирует пять нейтральных слотов логотипов равной ширины, а не названных или проверенных партнёров. Метка ④ размещает три карточки преимуществ в одну десктопную строку с блоками иконок по 38px; фактический flex-зазор составляет 10px, несмотря на аннотацию 8px. Метка ⑤ резервирует четыре колонки футера, но без юридической строки. Повторяющиеся блоки делают области сопоставимыми, оставляя итоговое содержимое и поведение нерешёнными.

Видимый дизайн и границы возможностей

Серые формы навигации, кнопок и ссылок — это div без поведения при клике или отправке. Реально прилипающий элемент — правая панель спецификации, которая становится статичной при 1000px и меньше; навигация не прилипает и не сжимается. Адрес acme.example — текст в рамке браузера, а не пункт назначения. Размеры в аннотациях — дизайнерские требования, которые нужно согласовать с реализацией, а не гарантии для продакшена.

Название образца, маршрут и значения в спецификации остаются иллюстративными. Манифест в комплекте указывает авторство OpenDesign и лицензию MIT, но не лицензирует независимо каждый изображённый материал. Снимок показывает вайрфрейм и его заметки, а не одобрение партнёров, подключённые сервисы или результаты конверсии.