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

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

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

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

Сойдёт

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

Гораздо реже попадается вёрстка иллюстраций друг под другом сбоку от текста:

Непривычно

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

Если довести идею до абсурда, «пирог» из узких иллюстраций превращается в интересную декорацию:

А бутерброд из двух иллюстраций над текстом — неудачная идея:

Плохо

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

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

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

Хорошо

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

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

Хорошо

Пятьдесят центов йоу Прекрасное далёко

Майспейс

Сравните с неэкономным «висячим» положением — из-за крошечной фотографии автора пропадает целая колонка:

Хуже

Пятьдесят центов йоу

Старый дизайн ленты Фейсбука

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

Хорошо

Но помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста:

Плохо

Вернёмся к комбинированному дизайну. Теперь поступим наоборот: поставим доминирующую иллюстрацию сбоку, а вспомогательную — над текстом:

Хорошо

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

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

Хорошо

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

В итоге экранные дизайнеры не любят вертикальные фотографии, избегают их, боятся как огня. Новостные сайты и интернет-газеты обрезают вертикальные фотографии до горизонтальных (или, может быть, просто выбрасывают?) А фотоприложения и социальные сети четвертуют всех поголовно — уродуя не только проблемные вертикальные, но и невинные горизонтальные фотографии:

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

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

Пора бы отдать должное вертикальным картинкам. Адаптируем приведённые выше варианты вёрстки к вертикальным иллюстрациям.

«Блочный» вариант над текстом — очевидный и естественный:

Хорошо

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

Плохо

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

Хорошо

В другой комбинации вертикальная фотография доминирует:

Хорошо

Важно помнить о соотношении размеров фотографий. Второстепенная фотография не должна спорить с главной:

Плохо

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

Хорошо

Назад к вертикалям:

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