Статьи читаются нелинейно: сначала мы пробегаем глазами материал целиком и только потом углубляемся в подробности. Когда у пользователя на экране вырастает сплошная стена из слов, то с большой вероятностью он закрывает страницу. Правильное оформление помогает превратить текст в карту с проложенным маршрутом.
Рассказываем об инструментах верстки и делимся лайфхаками, как сделать этот маршрут понятным и удобным. Этот материал мы написали вместе с экспертом — дизайнером Андреем Федорченко.
1️⃣ Разбейте статью на блоки с подзаголовками
Помочь читателю бегло оценить материал и быстро найти в нем нужную информацию поможет структура. Первое, что нужно сделать, — разбить текст на смысловые разделы-блоки с информативными подзаголовками.
Советуем делать короткие блоки в 5–10 строк, так как в мобильной версии Дзена отображение текста сильно меняется и объемные разделы кажутся огромной простыней, которую не хочется дочитывать до конца.
Важную информацию выделяйте жирным или курсивом. Визуально организовать структуру важно не только по всей статье подзаголовками, но и внутри разделов-блоков. Для этого можно использовать заголовки в подбор — выделение жирным подзаголовка в начале абзаца (как в этих абзацах, которые вы читаете).
Добавляйте к подзаголовкам эмодзи. Они помогают привлечь внимание и отобразить содержание каждого блока. Не обязательно использовать эмодзи-смайлики, которые покажутся неуместными, — среди символов много нейтральных.
2️⃣ Уделяйте внимание изображениям
При выборе иллюстраций обратите внимание на их размеры и качество. Слишком маленькая картинка займет не всю ширину экрана, а слишком большая будет долго загружаться (особенно если скорость подключения плохая). Оптимальная ширина изображения — от 1200 до 3000 пикселей.
Для обложки выбирайте горизонтальное фото. Вертикальные или квадратные изображения алгоритм Дзена может неудачно кадрировать — в итоге на превью отобразится обрезанное изображение. Помните, что обложка должна соответствовать заголовку и привлекать внимание.
В теле статьи лучше тоже использовать только горизонтальные изображения, так как в мобильной версии вертикальные растянутся на всю длину экрана. Из-за этого картинку не получится увидеть целиком и придется ее скроллить.
Если у вас много схожих иллюстраций, объедините их в галерею. К каждому фото можно добавить описание объемом до 150 символов.
Также иллюстрации можно использовать для форматирования текста. Например, оформить заголовок, статистику или другую важную информацию как изображение — набрать текст на контрастном фоне. Это добавит цветовых акцентов.
3️⃣ Вставляйте виджеты там, где это возможно
В некоторых случаях изображение можно заменить виджетом. Это интерактивный блок, который встраивается в статьи Дзена: например, плеер Яндекс.Музыки с треком, который можно послушать, не переходя по ссылке. Также можно вставлять виджеты с Кинопоиска, Яндекс.Карт и других сервисов. Например, можно сделать опрос или тест и вставить его как интерактивный элемент.
В статью можно вставить видео из Дзена и других платформ. Зайдите в публикации в Студии, выберите видео и скопируйте его прямую ссылку. Теперь достаточно вставить ее в редактор статьи — строчка сразу превратится в видеоролик. Примерно так же встраиваются видео с YouTube. В других соцсетях посложнее — понадобится html-код. Чтобы найти его, например, во «ВКонтакте», кликните кнопку «Поделиться» под видео, выберите вариант «Экспортировать» и скопируйте код для вставки.
4️⃣ Используйте цитатный блок не только для цитат
Цитатный блок в редакторе Дзена придуман для выделения прямой речи курсивом с вертикальной полосой по левому краю. Но этот инструмент можно использовать не только для цитат.
Андрей Федорченко, дизайнер:
«Люди очень любят фактоиды. Это врезные вставки, которые разбавляют скучное чтение. Это могут быть как цитаты, так и какие-то интересные данные»
Цитатный блок помогает выделять любую важную информацию, интересные факты или примеры из жизни. Эти врезки будут визуально отличаться от основного текста статьи.
5️⃣ Не забывайте о типографике
Некоторые правила типографики заложены в редакторе Дзена: абзацы отбиваются друг от друга автоматически, а для списков предусмотрены отдельные инструменты — нумерация или буллиты, то есть маркеры в виде кружков. Там, где важен порядок, используйте нумерацию. Если идет простое перечисление — подойдут буллиты. Это хорошо видно на примере рецептов.
Следите, чтобы знаки препинания были оформлены правильно. Иначе текст будет восприниматься небрежным. Не путайте горизонтальные черточки: тире (—), дефис (-) и знак минуса (−). Для прямой речи и названий используйте кавычки-елочки, а лапки — только если кавычками нужно выделить слово внутри текста с кавычками.
Кавычки первого уровня называются «елочки»
«Внутри кавычек „елочек“ используем кавычки второго уровня — „лапки“»
Последний совет — не используйте в заголовках и тексте капслок. ТЕКСТ, НАБРАННЫЙ ЗАГЛАВНЫМИ БУКВАМИ, ВЫГЛЯДИТ ТАК, БУДТО АВТОР НА ВАС КРИЧИТ.
Правила хорошей верстки. Чеклист
✅ Разбивайте текст на блоки с подзаголовками
✅ Важную информацию выделяйте жирным или курсивом
✅ Добавляйте эмодзи в подзаголовках для расстановки акцентов
✅ Выбирайте качественные горизонтальные фото
✅ Используйте иллюстрации для разграничения и выделения текста
✅ Вставляйте в статью виджеты
✅ Используйте цитатный блок для фактоидов
✅ Оформляйте текст в соответствии с правилами типографики
