Как сверстать статью: чек-лист для редактора

Стили, отступы, изображения — проверьте, всё ли на своих местах

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

01.

Оптимальная ширина главной колонки

Слишком широкая колонка на сайте затрудняет чтение и попросту отпугивает. Проверьте, насколько легко взгляд скользит от строчки к строчке. Размер колонки должен оставлять пространство для параллельного повествования: выносов в боковых колонках справа или слева. Выбирая ширину колонки, прежде всего стоит отталкиваться от кегля основного шрифта.

👎

👍

02.

Вертикальные отступы подчеркивают структуру

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

👎

👍

03.

Стили используются разумно и системно

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

👎

👍

04.

Приемы оформления повторяются

В рамках одного материала повторяйте приемы оформления — цитаты, подписи к фотографиям, выноски, сравнения и т. д. Используйте для них единый стиль. По ходу интервью с арт-директором Стефаном Эльбазом мы используем одинаковые галереи со скриншотами и фотографии с цитатами на них:

05.

В верстке нет пустых пространств (дыр)

Лишние пространства образуются, когда элементы верстки неправильно расположены относительно друг друга. В этом случае страница визуально «распадается» на части. Чтобы избежать этого, старайтесь выравнивать элементы по одному краю и не использовать замысловатой верстки.

👎

👍

06.

Объемный материал содержит оглавление

Сделайте оглавление с якорными ссылками, если материал длинный. Такое меню дает минимальное понятие о содержимом, а также позволяет читателю сразу перейти к тому, что интересно. Например, в материал об SMM-стратегии мы добавили интерактивное меню. Более простое решение — оглавление в виде списка ссылок.

07.

Каждая единица смысла помещается в один экран

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

08.

Многоколоночная верстка уместна

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

Нумерованный список с небольшим количеством текста лучше сверстать в несколько колонок

09.

Иллюстрации распределены по материалу равномерно

Старайтесь использовать изображения и другие визуальные акценты через каждые 75-100 слов — есть исследование, согласно которому это увеличивает количество лайков и «расшаров» в соцсетях. В статье про управление удаленными командами в качестве визуальных акцентов мы используем иллюстрации и фактоиды:

10.

Границы изображений не сливаются с фоном

Если части изображения или скриншота совпадают с цветом фона, это выглядит неаккуратно. Сделайте рамку или подчеркните края фотографий там, где они сливаются с фоном и образуют «дырки» в композиции.

👎

👍

11.

Все изображения одного размера

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

👎

👍

12.

Текст не прилипает к границам плашек

Цветная плашка — способ ввести элемент параллельного повествования или выделить важное, например, выводы в конце статьи. Основные правила: использовать контрастные цвета для плашки и шрифта, а также выдерживать достаточное расстояние между текстом и границами плашки.

👎

👍