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