Как улучшить верстку статьи: 9 советов

На что обратить внимание при верстке блога, сайта, презентации.

Отправить

Большáя часть моих проектов связаны с дизайном онлайн-медиа. Я работал арт-директором международных изданий The Village и Hopes&Fears, отвечая в них за внешний вид и подачу материалов. Вот уже три года вместе с командой Setka, я консультирую и занимаюсь дизайном онлайн-журналов, в том числе корпоративных. Среди них Bushwick Daily, Alley Watch, Realtime Blog, Accent, Skillbox и другие.

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

 Расставьте вертикальные отступы так, чтобы они подчеркивали структуру.

Как правило, мы выделяем заголовки более крупным кеглем, а также часто жирным начертанием. Но этого недостаточно, чтобы расставить акценты. Нужно следить, чтобы отступы между несвязанными элементами верстки были больше, чем между связанными. Самый яркий пример – это отступы между главами или разделами, которые обычно в 2 или 3 раза больше обычного отступа между абзацами.

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

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

 Повторяйте приемы оформления – стиль цитат, цифр, подписей к фотографиям

Разнообразие стилей, цветов, шрифтов – это лишний визуальный шум, отвлекающий от истории. 

 Не используйте много шрифтовых стилей одновременно

Хорошая типографика остается незаметной, она позволяет сконцентрироваться не на дизайне, а на материале.

 Заверстывайте статистику, блоки сравнения, нумерованные списки в несколько колонок

Многоколоночную верстку стоит использовать в тех случаях, когда важно поместить важную информацию в один экран, и избежать дискомфортного скролла «туда-сюда». Также это отличная возможность расставить акценты.

 Сделайте оглавление с якорными ссылками, если материал длинный

Навигацию по длинному материалу можно упростить, разместив ссылки на главы в начале материала.

 Следите, чтобы единица смысла помещалась в один экран

Это правило особенно важно для больших портретных фотографий. Читатель на экране должен видеть все лицо, а не только его часть. Размещать длинные вытянутые иллюстрации есть смысл, только если нужно сфокусироваться на деталях. Учитывайте, что самые популярные десктоп-экраны по прежнему имеют разрешения 1366×768 или 1280х800. 

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

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

 Используйте одни и те же размеры фотографий и иллюстраций

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

Читайте также