Школа
Вёрстка

Как собрать страницу из модулей: с иллюстрациями

Артём
27 окт 2014
👁 11662   🗩4
Вёрстка

Как собрать страницу из модулей: с иллюстрациями

Артём
27 окт 2014
👁 11662   🗩4
А. Г.
Арт‑директор и автор учебных программ бюро
Полезно
 25
25
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Вернёмся к нашей текстовой странице из совета о вёрстке без иллюстраций. Чтобы сделать её интереснее и привлечь внимание читателя, добавим к модулям иллюстрации:

Страница выросла в размерах, но не зря — с иллюстрациями на неё приходит жизнь.

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

Плохо
Плохо
Хорошо

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

Плохо

Веб‑страница не ограничена в длине. На одной странице легко поместится содержание бумажного каталога или рекламного буклета. Чтобы читатель не утомлялся от однообразия, дизайнеры чередуют на экранной странице спокойные текстовые слои, насыщенные иллюстрации, вдумчивые таблицы и цитаты из отзывов. Это напоминает работу с динамикой многостраничного бумажного издания, как если бы страницы не перелистывались в книжке, а располагались прямо друг под другом:

Хорошо

Чем проще содержание страницы, тем меньше слоёв и тем они однообразнее, чем сложнее структура — тем больше слоёв и разнообразия:

Слои чередуются по визуальной яркости, динамике, эмоциональному тону, преобладанию иллюстраций или текста, размеру иллюстраций, длине текста и обязательно по ритму.

Рассмотрим отдельно особенный тип модуля с иллюстрациями — «галерею». Галерея занимает отдельный слой или всю страницу новостного фоторепортажа, каталога товаров, отчёта о путешествиях. Иллюстрации в галерее — главный герой, им отдаётся вся полезная площадь.

Мы не поддерживаем путь ленивых веб‑дизайнеров — мёртвые однообразные матрицы из фотографий. Жизнь приходит с разнообразием размеров и формы:

Плохо
Хорошо

К галереям применимо правило модульности — блоки из фотографий должны стремиться к прямоугольной форме. Но «кирпич» из иллюстраций выглядит как… кирпич:

Кирпично

Скучно, душно и монотонно. Такой модуль выглядит тяжеловесно и с трудом встраивается в страницу рядом с другими.

Небольшой поток воздуха вокруг фотографий оживляет галерею и естественно соединяет её с другими частями страницы:

Интересно

На примере справа у модуля появилось два набора полей — внешний, вокруг большой фотографии, и внутренний, вокруг вертикальной фотографии и подписи к ней.

Иллюстрация — самый плотный элемент вёрстки и сильнее всего активирует контрпространство. Если неудачно скомпоновать иллюстрации разных размеров и пропорций, пространство между ними образует навязчивые углы, тупики и ступеньки. Поэтому дополнительный воздух и подписи лучше «отжимать» к краям галереи:

Плохо
Хорошо

P. S. Это был понедельничный совет о вёрстке и типографике в вебе. «Типографика и вёрстка» — одна из дисциплин Школы стажёров. Присылайте вопросы.

Типографика в вебеМодульная вёрсткаЯкорные объектыЧередование ритма
Полезно
 25
25
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Артём, в примерах совета заголовок стоит над иллюстрацией. Я так понимаю, что это не критично для первых (главных) иллюстраций. Что думаете?

Т. е. когда модули с фото равнозначные по смыслу — это не плохо?

Я согласен, что разнообразие выглядит живо, но нет уверенности, что это эффективней. Проводились ли A/Б‑тесты, чтобы подтвердить данную практику?

Сергей, вы совершенно правы. Фактически это заголовок всей страницы, а не просто первого модуля.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы