x
 
Артём
6 октября 2014

Расскажите о вёрстке доминирующих и вспомогательных иллюстраций.



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

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

О модульной сетке

Так себе

Какая из иллюстраций важнее и интереснее? С чего начать? К сожалению, большинство сайтов похожи на интерфейс к безликой базе данных

Лучше

Доминирующая иллюстрация однозначно указывает: «Здесь начало осмотра». Но остальные иллюстрации по-прежнему безуспешно спорят друг с другом

Хорошо

Взгляд свободно и уверенно скользит по странице с явной визуальной иерархией

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

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

Сойдёт

Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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

Комментарии и просмотры



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

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

Непривычно

Жизнь и удивительные приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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

Комментарии и просмотры



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

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

Сайт компании «Реатон»

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

Плохо

Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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

Комментарии и просмотры




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

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

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

Хорошо

Жизнь и удивительные приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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



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

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

Хорошо

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

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

Хуже

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

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


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

Хорошо

Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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

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

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.



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

Плохо

Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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

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

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.



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

Хорошо

Жизнь и приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.



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

Макет страницы «Магазина горящих путёвок»

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

Хорошо

О спорт, ты — мир. Новости Олимпиады




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

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

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

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

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

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

Хорошо

Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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

Комментарии и просмотры



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

Плохо

Жизнь и удивительные приключения Робинзона Крузо

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

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

Комментарии и просмотры



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

Хорошо

Жизнь и удивительные приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

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

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

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.



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

Хорошо

Жизнь и приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.



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

Плохо

Жизнь и приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов.



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

Хорошо

О спорт, ты — мир. Новости Олимпиады




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

Лента «Майспейса»

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


P. S.
Это был понедельничный совет о вёрстке и типографике в вебе. «Типографика и вёрстка» — одна из дисциплин Школы стажёров. Присылайте вопросы.

Поделиться
Отправить

Комментарии

Вячеслав Игоревич
6 октября 2014

Артём, а что скажете о компоновке фоток на сайтах artfile.ru и devianart.com?

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

Дима Гинтофт
7 октября 2014

Александр Ревяко сделал интересный концепт выдачи фоток соцсети. И показал, насколько диктат однообразия в выдаче может быть вреден.


9 октября 2014

Дима, всё это очень правильно и достойно поощрения.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Экран ожидания в поликлинике 4 1 Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне?




Недавно всплыло

Это какие‑то другие пиксели? Как они соотносятся? 2 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 2 В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2