Центр наблюдения за китами Мокап веб-сайта

Длинный заголовок, широкие изображения и плотные блоки карточек для проверки

Главный визуальный блок (hero) — первая область, на которую стоит обратить внимание при оценке этого дизайна в качестве макета сайта. Его заголовок достаточно длинный, а расположенные рядом подзаголовок, авторство и крупная фотография кита должны сохранять визуальную связь при уменьшении доступной ширины. Проверка должна показать, сохраняет ли белая типографика четкую иерархию на сизо-синем фоне и продолжает ли фотография дополнять заголовок, не смещая ключевой контекст слишком далеко вниз.

Разделенные колонки создают второй комплекс вопросов, связанных с адаптивным поведением. Переход между узкой вводной колонкой и более широкой пояснительной должен происходить плавно, чтобы обсуждение вопросов питания, миграции, запутывания в сетях и спасения оставалось удобным для беглого чтения. Широкая фотографическая вставка также заслуживает пристального внимания, поскольку два расположенных рядом изображения имеют разный визуальный вес по горизонтали. На небольших экранах перестроение изображений в колонку, их кадрирование и расстояние между визуальной паузой и следующим фрагментом текста могут существенно изменить ритм страницы.

Завершающая сетка из трех карточек похожих материалов — еще одна важная контрольная точка. Одинаковые карточки аккуратно выстраиваются в широкий ряд, однако их миниатюрам, подписям и названиям требуется достаточная ширина и вертикальный отступ при сужении макета. Оценка этих конкретных зон при различных разрешениях экрана помогает сохранить задуманную последовательность: от вводной части к пояснению, визуальной паузе, исследованию и материалам по теме. Ценность макета заключается в том, чтобы увидеть, как ведет себя вся композиция при разной ширине экрана, а не рассматривать ее как схематичный wireframe.