Прочитай меня, сломай и собери заново: как сверстать выразительный лонгрид с помощью шаблонов

В Readymag появились два новых шаблона лонгридов. Первый подойдет для новичков, которые пока учатся чувствовать пластику текстовой верстки. Второй придется по душе более опытным пользователям — это скорее конструктор, состоящий из нескольких типографически насыщенных блоков.

В основе обоих шаблонов лежит одно и то же эссе об истории удобочитаемости в печати и в вебе — его написали редакторы Readymag Цветелина Митева и Виталий Волк. Макеты спроектировал графический дизайнер и амбассадор Readymag Павел Кедич. Получился гибридный проект, где текст и верстка дополняют друг друга: каждый шаблон использует различные дизайн-приемы, которые помогают улучшить восприятие текста.

В этой статье Павел рассказывает, как настроить каждый шаблон под себя и сверстать запоминающуюся публикацию.

Утилитарный шаблон

Он подойдет для онлайн-публикаций, в которых оформление не должно перетягивать внимание на себя. Основное достоинство этого шаблона — структурная простота. С его помощью даже начинающий пользователь Readymag сможет быстро организовать почти любой текст.

Обратите внимание, что заголовки и наборный текст находятся в общих текстовых контейнерах. Так быстрее и проще вносить текст и адаптировать проект под мобильные устройства.

Вот несколько общих рекомендаций перед началом работы:

Изучите структуру шаблона. Посмотрите, как разные текстовые стили, картинки и подписи соотносятся с горизонтальными направляющими сетки:
аккуратность и последовательность в выборе расстояний между элементами дизайна помогут поддерживать ритм и общий порядок в макете.

Стили, стили, стили. Обязательно загляните в текстовые стили. Используйте шаблонные или экспериментируйте, меняя размер, шрифт, начертание и другие параметры. Но помните, что стили глобальные — изменения в настройках отразятся на тексте во всем проекте.

Выделяйте ключевые части текста. Этопривносит в дизайн разнообразие. Обратите внимание, что в шаблоне цитаты оформлены шрифтом Graphik (без засечек) и выделены оранжевым цветом. При этом размер шрифта и плотность его начертания близки к шрифту набора — IBM Plex Serif.

Serif over sans. Я не случайно выбрал антикву на роль наборного шрифта. Качественная типографика во многом определяет удобочитаемость текста и вовлеченность читателя. Текст, набранный шрифтом с засечками, выглядит выразительнее, чем формальный пересказ содержания геометрическим гротеском, который, как правило, не обладает ни вкусом, ни запахом. Используйте шрифт, который предложен в шаблоне, или попробуйте найти свой голос среди других антикв (Georgia, Plantin, Garamond, Skolar), доступных в Readymag.

Асимметрия как инструмент. Блок основного текста занимает восемь правых колонок стандартной 12-колоночной сетки. Используйте две–три левые колонки для контекстных иллюстраций, фотографий или дополнительных подписей. Оставьте центральное выравнивание и стремление к идеальной симметрии блог-платформам.

Шаблон — графический манифест

Этот шаблон, скорее, конструктор, который состоит из шести самостоятельных блоков. Он подойдет смелым и пытливым пользователям. Каждый из блоков обладает своим характером и внутренней логикой. К ним стоит относиться как набору возможностей или наброскам, которые помогут вашему повествованию приобрести современную и выразительную форму.

В этих блоках текстовые стили не размечены. Но вы можете задать их самостоятельно после выбора подходящего блока в палитре Styles.

Блок 1: Крупный кегль и фиксированное меню

Крупный заголовок привлечет внимание, а фиксированное оглавление в левом нижнем углу всегда будет под рукой. Такое решение подойдет для объемных публикаций, где навигация должна быть легкодоступной.

Укрупнение кегля для наборного шрифта — сложившийся тренд, а относительно узкая ширина текстового блока помогает строке не выглядеть пугающе длинной. Читатели легче воспринимают компактные и ритмичные предложения. Легкое смещение строк по горизонтали поможет отделить абзацы друг от друга.

Блок 2: Разные начертания в заголовке

Используйте различные начертания шрифта Druk, чтобы придать заголовку эффектность. Не скромничайте с размером! В конце концов, это акцидентный шрифт, и он заслуживает смелого обращения и экспериментов.

Абзацные отступы в этом макете заданы табуляцией: поставьте каретку в начале строки и нажмите кнопку Tab в левой части клавиатуры.

Долой скучные ссылки! Обратите внимание, как расстояние между линией подчеркивания и текстом (в панели этот параметр называется padding) и ширина подчеркивания превращает ссылку в любопытный и небанальный элемент дизайна.

Шаблон включает примеры анимации по скроллу для иллюстраций.

Блок 3: абзацы, смещенные по вертикали

Используйте смещения абзацев по вертикали для наборного текста. Это помогает держать внимание читателя в тонусе и придает макету графическую динамичность.

Применяйте анимацию, когда это уместно и обыгрывает содержание. Пример анимации с триггером по клику поможет разобраться с этой механикой.

Кстати, загляните в список использованных виджетов. Во всех шаблонах слои упорядочены сверху вниз, в порядке их появления в шаблоне . Давать слоям понятные названия и поддерживать иерархию — полезная практика.

Блок 4: Кегль текста крупнее, чем кегль заголовка

Порой можно добиться любопытного эффекта, поменяв роли элементов. Заголовок в этом шаблоне набран меньшим кеглем, чем текст первого абзаца. А для того, чтобы сбалансировать их соотношение, заголовок окружен достаточным объемом белого пространства.

Анимация по скроллу для фиксированных виджетов и иллюстраций придает странице выразительность даже когда элементов на ней не так много.

Блок 5: Сверхжирные заголовки и иллюстрации на полях

Найдите свой способ сделать заголовок запоминающимся. Сверхжирное начертание и смещение одной из строк превращают заголовок в графическое высказывание. Сделайте контрастный фон чуть сложнее: прямоугольник со скруглениями поверх черного фона страницы создает эффект рамки. Используйте маргиналии слева и справа от наборного текста для иллюстраций и пояснений. Такой ход оживляет чтение и создает дополнительный информационный слой. Разберите пример с анимацией по загрузке и ховеру в блоке с вариативным шрифтом.

Блок 6: Эффектные цифры

Следуя советам, которые есть в эссе, в этом блоке я предлагаю использовать леттеринг с цифрами — они вставлены в проект как SVG.

Цифра в заголовке, движущаяся по скроллу, наглядный пример того, какие возможности для управления вниманием читателя открывает недавно появившаяся в Readymag возможность включать до четырех типов анимации на одном виджете.

Смелее устанавливайте крупный кегль в наборе. Это придает значимость текстовому блоку, а в макете с цветовой инверсией смотрится особенно интересно.

В основе предложенных макетов нет революционных идей — они, скорее, призваны привлечь ваше внимание к многообразию техник работы с лонгридами. Не бойтесь экспериментировать по ходу работы, ведь шаблон — это просто набор виджетов, и вы можете использовать их как считаете нужным. Кстати, если что-то пойдет не так и в процессе вы «сломаете» шаблон, всегда можно добавить его в свой аккаунт ещё раз и начать сначала.

Посмотреть все шаблоны, которые есть в Readymag, можно здесь.

Создать свой первый проект на Readymag бесплатно — здесь.