Иллюстрация лучше всего чувствует себя наверху вертикального текстового блока:

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

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

Я предлагаю дизайнерам запомнить каноническую конструкцию вертикального текстового модуля:

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

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

Идеально, если ширина иллюстрации равна ширине текста. Это возможно при дизайне с фиксированной шириной модулей или если иллюстрация «тянется» вместе с его текстовой частью.

Если иллюстрация не прямоугольная, а «обтравленная» на фоне страницы, то её размеры зависят от формы «обтравленного» предмета. Картинка в обтравке может выравниваться по левой границе или по центру блока. При выравнивании желательно на глаз компенсировать форму объекта и рваный правый край текста:

В горизонтальном текстовом блоке иллюстрация может располагаться слева или справа от основного модуля:

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

Горизонтальные модули в экранном дизайне связаны с целым набором опасностей.

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

Кроме того, заголовки имеют «вступительную» курсивную часть, которая для экономии места накрывает модули по всей ширине. Иллюстрации оказываются как бы «в подмышке» слева у модуля. Из‑за этого заголовки оторваны от начала основного текста, что вызывает замешательство и затрудняет чтение.

С первой проблемой изобретательно справились дизайнеры «Вконтакте». Опубликованная в ленте ссылка аккуратнее и в два раза компактнее аналогичной ссылки в «Фейсбуке»:

Хитрость в том, что миниатюрная фотография идеально подрезается по высоте текстовой части. Вопрос о том, правильно ли подрезать авторские фотографии, не стоит — Фейсбук тоже подрезает, но по форме случайного квадрата.

А проблемная иллюстрация «в подмышке» не отделяет заголовок от начала текста, если стоит справа:

Как на сайте газеты «Нью‑Йорк Таймс»:

Если несколько модулей с боковой иллюстрацией располагаются друг под другом, иллюстрации объединяются друг с другом в неделимую колонку лучше, чем с собственными модулями:

Текстовая колонка тоже работает независимо от иллюстраций и порядок чтения становится случайным.

Как и в случае с висячими бирками в лентах, могут потребоваться дополнительные линейки и отступы:

Ничто не выглядит так уродливо и нечитаемо, как обтекание иллюстрации текстом справа:

Текст неожиданно меняет левый край в случайном месте. С первого взгляда глаз выхватывает и воспринимает это место как начало текста. А при последовательном чтении сверху вниз — спотыкается в попытке найти начало съехавшей строки.

Как и в случае с «подмышкой», достаточно переставить картинку вправо.

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

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

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

Первый способ — поставить иллюстрации в горизонтальный ряд, согласовав их высоту. Это сработает при расположении иллюстраций и текста друг под другом:

И ничуть не хуже — в горизонтальном дизайне:

Другой способ — систематизировать размеры «превьюшек» и расположить прямоугольной матрицей:

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

Модульный подход: нарезать общий прямоугольник на иллюстрации разнообразных размеров и пропорций:

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

Модуль с «фоторамой» может быть не только вертикальным, но и горизонтальным: