В совете о текстовых блоках с иллюстрациями мы рассмотрели варианты компоновки одной или нескольких равнозначных иллюстраций в одном модуле. Теперь рассмотрим вёрстку с доминирующей и вспомогательной иллюстрациями.
Для начала попробуем простой способ — поставить иллюстрации рядом в общий прямоугольный блок:
Сойдёт
|
Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки
|
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
|
Структура просветляет диалогический контекст, и это придает ему свое звучание. |
Жизнь и приключения
Комментарии и просмотры
|
Иллюстрации в ряд над текстом — спокойная, если не сказать, скучноватая конструкция. Такой дизайн требует всей ширины окна, поэтому часто встречается на главных страницах сайтов.
Гораздо реже попадается вёрстка иллюстраций друг под другом сбоку от текста:
Непривычно
|
Жизнь и удивительные приключения Робинзона Крузо
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
Структура просветляет диалогический контекст, и это придает ему свое звучание.
Жизнь и приключения
Комментарии и просмотры
|
При такой компоновке сложнее сохранить доминирующую иллюстрацию, а нижняя имеет не очень естественные пропорции.
Если довести идею до абсурда, «пирог» из узких иллюстраций превращается в интересную декорацию:
А бутерброд из двух иллюстраций над текстом — неудачная идея:
Плохо
|
Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки
|
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
|
Структура просветляет диалогический контекст, и это придает ему свое звучание. |
Жизнь и приключения
Комментарии и просмотры
|
Иллюстрации образуют массивный кирпичный блок, слишком удалённый от текста.
Обычно картинка располагается над текстом или сбоку от него — это два базовых дизайна модуля с иллюстрацией. Только что мы объединяли иллюстрации в прямоугольный блок и по очереди примеряли его сверху и сбоку, как будто это одна иллюстрация.
А теперь скомбинируем два базовых дизайна: поставим вспомогательную картинку сбоку от текста, а сверху накроем модуль доминирующей иллюстрацией:
Хорошо
|
|
Жизнь и удивительные приключения Робинзона Крузо
|
Прекрасное далёко
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
|
Не будь ко мне жестоко
Структура просветляет диалогический контекст, и это придает ему свое звучание. |
Это простой железобетонный дизайн. Верхняя фотография — «бомба» — доминирует со страшной силой, поэтому компоновка подходит для главной страницы. Вспомогательная фотография может стоять на любой стороне от текста.
А если радикально уменьшить вспомогательную фотографию в той же конструкции, получится удачный «юзерпик» в ленте какой-нибудь социальной сети:
Хорошо
|
|
Пятьдесят центов йоу
Прекрасное далёко
|
|
|
Сравните с неэкономным «висячим» положением — из-за крошечной фотографии автора пропадает целая колонка:
Хуже
Вспомогательная иллюстрация неплохо чувствует себя и «в подмышке» у заголовка, да и заголовок на всю ширину выглядит убедительно:
Хорошо
|
Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки
|
Прекрасное далёко
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
Структура просветляет диалогический контекст, и это придает ему свое звучание.
|
Не будь ко мне жестоко
Структура просветляет диалогический контекст, и это придает ему свое звучание.
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
|
|
Но помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста:
Плохо
|
Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки
|
|
Прекрасное далёко
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
Структура просветляет диалогический контекст, и это придает ему свое звучание.
|
Не будь ко мне жестоко
Структура просветляет диалогический контекст, и это придает ему свое звучание.
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
|
Вернёмся к комбинированному дизайну. Теперь поступим наоборот: поставим доминирующую иллюстрацию сбоку, а вспомогательную — над текстом:
Хорошо
|
Жизнь и приключения Робинзона Крузо
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
Жизнь и приключения
|
Это тоже простой читабельный вариант с явно доминирующей иллюстрацией. Текстовая часть должна быть очень короткой, если, конечно, не отдать главной картинке всю высоту окна:
Если в той же конструкции текст заменить на третью иллюстрацию, получится неплохой макет новостной рубрики со ссылками:
Хорошо
О спорт, ты — мир. Новости Олимпиады
|
Главная статья на злобу дня
|
Прекрасное далёко
Не будь ко мне жестоко
|
Фотографии горизонтальных пропорций естественнее для человеческого поля зрения и, безусловно, удобнее для вёрстки на горизонтальных экранах. Вертикальные фотографии требуют отдельного дизайнерского внимания и «ломают» стандартные макеты. Сайты подключены к базам данных и отображают информацию по заранее определённым шаблонам — у сайтов не бывает редакционной вёрстки номера, как у бумажных изданий, когда каждая статья компонуется отдельно.
В итоге экранные дизайнеры не любят вертикальные фотографии, избегают их, боятся как огня. Новостные сайты и интернет-газеты обрезают вертикальные фотографии до горизонтальных (или, может быть, просто выбрасывают?) А фотоприложения и социальные сети четвертуют всех поголовно — уродуя не только проблемные вертикальные, но и невинные горизонтальные фотографии:
К несчастью, единственный уцелевший вид вертикальных иллюстраций на сегодняшних сайтах — анимированный рекламный банер. Правда, эта живность нескоро переведётся.
Большая часть фотографий и видеороликов в мире снимается на телефоны. Большую часть фотографий и видеороликов на телефонах снимают вертикально. Не стоит забывать, что вертикальные фотографии хоть и менее естественны для восприятия, но часто более выразительны и динамичны. Некоторые объекты вообще нельзя показать в горизонтальном формате, например человеческую фигуру и одежду.
Пора бы отдать должное вертикальным картинкам. Адаптируем приведённые выше варианты вёрстки к вертикальным иллюстрациям.
«Блочный» вариант над текстом — очевидный и естественный:
Хорошо
|
Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки
|
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
|
Структура просветляет диалогический контекст, и это придает ему свое звучание. |
Жизнь и приключения
Комментарии и просмотры
|
Вертикальный кирпич сбоку получится слишком увесистым и потребует слишком много текста для одного модуля:
Плохо
|
Жизнь и удивительные приключения Робинзона Крузо
Мифопорождающее текстовое устройство начинает скрытый смысл. Цитата как бы придвигает к нам прошлое, при этом правило альтернанса осознаёт парафраз. Декодирование отталкивает диалектический характер. Расположение эпизодов отталкивает стих, хотя по данному примеру нельзя судить об авторских оценках. Впечатление точно нивелирует деструктивный стиль, потому что в стихах и в прозе автор рассказывает нам об одном и том же. Сумароковская школа, соприкоснувшись в чем-то со своим главным антагонистом в постструктурной поэтике, притягивает диссонансный брахикаталектический стих, именно поэтому голос автора романа не имеет никаких преимуществ перед голосами персонажей.
Вопрос о популярности произведений того или иного автора относится к сфере культурологии, однако первое полустишие осознаёт деструктивный брахикаталектический стих, заметим, каждое стихотворение объединено вокруг основного философского стержня. Познание текста, соприкоснувшись в чем-то со своим главным антагонистом в постструктурной поэтике, непосредственно иллюстрирует анжамбеман.
Жизнь и приключения
Комментарии и просмотры
|
«Комбинированный» вариант с небольшой вертикальной фотографией сбоку отлично подойдёт, например, для сопроводительного портрета:
Хорошо
|
|
Жизнь и удивительные приключения Робинзона Крузо
|
Прекрасное далёко
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
Структура просветляет диалогический контекст, и это придает ему свое звучание.
|
Не будь ко мне жестоко
Структура просветляет диалогический контекст, и это придает ему свое звучание.
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
|
В другой комбинации вертикальная фотография доминирует:
Хорошо
|
Жизнь и приключения Робинзона Крузо
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
Жизнь и приключения
|
Важно помнить о соотношении размеров фотографий. Второстепенная фотография не должна спорить с главной:
Плохо
|
Жизнь и приключения Робинзона Крузо
Генеративная поэтика основывается на совмещении взаимоисключающих принципов.
Жизнь и приключения
|
Хорошая вертикальная фотография — редкая птица, заслуживающая внимания. Поэтому особенно удачна адаптация варианта «новостной рубрики»: вертикальная фотография занимает высоту двух горизонтальных и выделяется размером:
Хорошо
О спорт, ты — мир. Новости Олимпиады
|
Главная статья на злобу дня
|
Прекрасное далёко
Не будь ко мне жестоко
|
Назад к вертикалям:
Лента «Майспейса»
Мы рассмотрели компоновку доминирующих и вспомогательных иллюстраций вертикальных и горизонтальных пропорций. Все примеры подходят и для квадратных картинок. Кроме того, на месте вспомогательных иллюстраций может находиться любой прямоугольный объект: форма ввода, цветная плашка с кнопкой покупки, схема, график или географическая карта.
|