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