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