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

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

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

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

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

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

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

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

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

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

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

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

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

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