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