Доминирующие и вспомогательные иллюстрации

Поговорим о модулях, в которых есть больше одной иллюстрации.

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

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

В качестве примера плохого дизайна предлагаю посмотреть на сайт «Совотека». Не знаю, в чём полезное действие этого сайта, но его автор решил показать как можно больше разнообразных сов с помощью одинаковых квадратных картинок:

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

Сайт компании, которая занимается строительством:

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

А вот сайт магазина нижнего белья, где все модели каталога показаны одинаковыми превьюшками:

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

Приходится ориентироваться в этом, внимательно вглядываясь в каждую картинку, читая каждую подпись и пользуясь фильтрами.

Перед нами одна из версий сайта «Блумберг»:

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

В результате, когда мы заходим сюда, мы первым делом обращаем внимание на более важные новости просто потому, что они крупнее, а потом переходим к более мелким, после чего смотрим другие анонсы.

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

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

Ещё лучше сделать вот так:

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

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

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

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

Гораздо реже встречается такая конструкция:

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

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

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

Мы попробовали разместить иллюстрации сверху или сбоку от текста. А теперь попробуем это скомбинировать и поставить одну иллюстрацию сверху, а другую — сбоку. Получим такую конструкцию:

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

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

Например, перед нами скриншот ныне умершего сайта «Май спейс»:

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

Здесь образуются пустоты, и пропадает куча места. Такой дизайн был в старой ленте Фейсбука:

Если мы ставим вспомогательную иллюстрацию справа, она может прекрасно встать и в подмышку к заголовку:

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

Теперь попробуем перевернуть наш модуль и поставить доминирующую иллюстрацию сбоку от текста. Снова получится хороший вариант вёрстки:

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

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

Один из таких вы видели в лекции про текстовые модули с иллюстрациями. Там я показывал скриншот с сайта «Нью‑Йорк Таймс».