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

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

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

01.

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

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

02.

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

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

03.

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

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

04.

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

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

05.

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

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

06.

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

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

07.

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

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

08.

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

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

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

09.

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

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

10.

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

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

11.

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

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

12.

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

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

Попробуйте Setka Editor в деле

Получите демо от нашей команды сопровождения или попробуйте Setka Editor в течение двух недель бесплатно.

Попробовать