x
 
Артём
22 сентября 2014

Как верстать текстовые блоки с иллюстрациями?



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

Хорошо

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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.



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

Хуже

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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.



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

Под вопросом

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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.



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

Иллюстрация
Заголовок

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

Текст

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.

Ссылки


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

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

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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.



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

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

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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.

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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.


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

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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.



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

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.



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

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

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


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

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

Слева «Фейсбук», справа — «Вконтакте»

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

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

Плохо — левая подмышка

Левая подмышка Робинзона Крузо

Заимствование аллитерирует стиль. Анализ состава 17 сборников, содержащих тексты фацеций

Хорошо — правая подмышка

Правая подмышка Робинзона Крузо

Заимствование аллитерирует стиль. Анализ состава 17 сборников, содержащих тексты фацеций


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

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

↕︎

Заимствование аллитерирует стиль. Анализ состава 17 сборников, содержащих тексты фацеций

Заимствование аллитерирует стиль. Анализ состава 17 сборников, содержащих тексты фацеций

↕︎

Заимствование аллитерирует стиль. Анализ состава 17 сборников, содержащих тексты фацеций


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

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

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


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

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

Заимствование слов аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.

Заимствование слов аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что механизм сочленений диссонирует стих. Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.


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

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

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

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

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

Фрагмент интерфейса Бейскемпа

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

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

Промостраница юридического сервиса «Договоры»

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

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

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

P. S.

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

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

Комментарии

Андрей Гуляс
22 сентября 2014

В Бейскемпе разве не левая подмышка?

Павел Моисеенко
14 октября 2014

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


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

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

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

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

1 3




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

В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Как написать хорошее резюме? 7 2