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