Архитектура статьи: как сделать текст интереснее с помощью верстки

Евгения Черешкова, автор, редактор, SEO-копирайтер

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

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

В этой статье рассказываем:

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

Блоки: сохраняйте порядок на странице

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

Представьте, будто вы строите аккуратный домик. Если какой-то блок «выпирает» или рядом стоит слишком много акцентов — архитектура развалится.

Чтобы страница сайта в целом выглядела приятно, нужно соблюдать общие принципы.

Модульность

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

Главная страница сайта дизайн-студии RoyDavid Architecture разделена на четкие блоки. Внутри каждого блока заложен свой ритм — где-то три колонки, где две. Страница смотрится аккуратно и динамично одновременно

Модули необязательно должны быть горизонтальными. Узкие колонки со ссылками характерны для новостных сайтов. На скриншоте пример главной страницы журнала Dezeen

Модули смотрятся аккуратно, если они не пересекаются друг с другом.

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

Принцип близости

Элементы в блоке должны стоять ближе друг к другу, чем к другим блокам. То есть:

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

В обоих примерах заголовки стоят на одинаковом расстоянии от предыдущего и следующего блока с текстом. Смотрится монотонно

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

Контраст

В композиции картины, интерьера, книжной страницы отлично работает контраст. Используйте контраст и на web-странице:

• чередуйте «плотный» текст абзацев с выноской на полях. Окружите выноску белым полем, и она станет акцентом;

• разделите страницу на «этажи»: текст чередуйте с иллюстрацией. «Этаж» можно также создать за счет цветных блоков.

  Простое, но четкое деление на «этажи» на сайте студии BOOONT. Блоки четко читаются, не мешают друг другу. За счет единой цветовой палитры не спорят и гармонично смотрятся как единое целое

«Этаж» также создается за счет смены ритма.

Здесь этажи четко читаются за счет смены ритма: одинаковые по ширине блоки делятся то на три, то на две равные, то на две неодинаковые по ширине колонки

• создавайте иерархию. Заголовок должен явно отличаться от основного текста по насыщенности. Подзаголовки должны быть менее значимыми чем заголовок, но более насыщенными, чем основной текст.

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

Акценты со смыслом

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

Порядок в блоках создает общий порядок страницы

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

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

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

Иллюстрации

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

Выноска на полях привлекает внимание, но сама по себе малоинформативна и плохо сочетается по смыслу с заголовком

Выноска на полях сочетается по смыслу с заголовком: она отвечает на вопрос «Как можно больше — это сколько?». Читатель быстро получает полезную информацию

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

Альтернатива – качественные иллюстрации, схемы.

Пример иллюстрации из статьи о выборе строительной бригады: как оценить качество ремонта на объекте

Так как иллюстрации привлекают внимание, не надо ставить рекламные баннеры в середину статьи. Большинство читателей подумает, что статья закончилась и не станут листать дальше.

Заголовки

Заголовок — самый значимый текстовый элемент, на который пользователи обращают внимание в первую очередь.

Редакция «Ревдинского рабочего» знает толк в заголовках. Их не убивает даже визуально массивный блок с рекламой

Чтобы заголовок стал акцентом:

— он должен быть контрастным по отношению к основному тексту и другим элементам на странице;

— все подзаголовки должны подчиняться теме. Беглый взгляд по заголовкам статьи дает информацию о содержании текста в целом. Возможно, читателю интересна не вся статья, а конкретная информация по теме. Помогите ему быстро найти ее — он будет вам благодарен;

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

Следите, чтобы заголовок «накрывал» все колонки. Иначе создается впечатление, что озаглавлена только первая колонка, а вторая остается не у дел;

Выравнивайте заголовок по левому краю. Заголовок по центру нарушает спокойный ритм левого края. Модуль распадается.

Абзац

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

Чтобы статью было приятно читать, следуйте правилам:

• Делите текст на абзацы: не делайте их слишком длинными или слишком короткими. Золотое правило: 1 абзац = 1 мысль.

  Легко читаются абзацы не больше 5-6 строк.

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

  Сравните:

  Также шрифт должен соответствовать настроению статьи. Знаменитый Comic Sans читается легко. Но если его выбрать для серьезной статьи, смысл текста потеряется.

• Выделения внутри абзаца полужирным и курсивом должны быть по делу. Использовать выделения нужно в крайних случаях.
• Выравнивание по центру должно быть оправдано. Помните о ровном левом крае. Длинный блок текста, выровненный по центру, смотрится неаккуратно и нарушает модульность.
• Строки не должны быть слишком длинными или короткими. Тяжело читать строки свыше 90 символов: нельзя быстро найти начало следующей строки. Также сложно воспринимать смысл в длинных узких колонках.

  Cтроки состоят из 98-105 символов. Легко потеряться

  Строки слишком короткие. Глазам приходится быстро перемещаться от строки к строке, от колонки к колонке. Ничего кроме невроза такая верстка не вызывает

  65-75 символов в строке — читать легко

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

Расстояние между строк слишком маленькое. Все слиплось, читать невозможно

Межстрочное расстояние слишком большое. При переходе на другую строку глаз теряет начало

Оптимально

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

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

Гиперссылки

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

При наведении курсора на гиперссылку, она должна менять цвет, а сам курсор меняться со стрелки на «руку». Так пользователь поймет, что ссылка активна и что-то произойдет, если на нее нажать.

Гиперссылка — это то же выделение текста, как курсив и полужирное начертание. Поэтому нужно следить за местом нахождения ссылки. Если ссылок много, лучше собрать их вместе под текстовым блоком или на полях.

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

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

Формы

На сайтах дизайн-студий пользователей часто просят заполнить формы обратной связи или брифы. Форма — это тоже модульный блок. И в дизайне формы должны соблюдаться те же принципы, что и в любом блоке:

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

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

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

Дополнительные элементы, привлекающие внимание

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

Выноски на полях

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

Ссылки на полезные сайты в статье о выборе строительной бригады вынесены на поля

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

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

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

Так цитаты оформляет AD Magazine

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

Случайные блоки

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

Не ставьте на страницу больше одного такого элемента.

На сайте Карима Рашида заголовки нарушают принцип модульности. Но только заголовки

Проверяйте элементы перед выпуском статьи

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

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

Если вы самостоятельно разрабатываете сайт, например, с помощью конструктора, следите за принципами верстки:

1. Блоки смотрятся как прямоугольники, не наезжающие друг на друга.
2. Элементы одного блока стоят ближе друг к другу, чем к элементам других блоков.
3. Динамика статьи создается за счет контрастов.
4. Заголовок, иллюстрация, цитата, выноски на полях, гиперссылки — это акценты. Они контрастируют с основным текстом.
5. Акцент подчиняется теме статьи. Пробежав взглядом по акцентам, становится понятно, о чем идет речь.
6. Иллюстрации хорошего качества. Исключения, но не оправдания — статьи-репортажи с проекта.
7. Каждая картинка несет информацию. Нет «мертвым» фотографиям Shutterstock.
8. Если нет подходящего фото, его заменяет схема, картинка.
9. Левый край ровный. Заголовки, иллюстрации не выровнены по центру.
10. Текст разбит на абзацы.
11. 1 абзац = 1 мысль.
12. Длина абзаца — не больше 5 строк.
13. Длина строки 55—75 символов.
14. Чем короче строка, тем меньше межстрочный интервал.
15. Строки не слипаются и не отрываются друг от друга. Абзац смотрится как красивый монолит.
16. Шрифт легко читается.
17. Шрифт соответствует настроению статьи.
18. Статья не перегружена разнообразием шрифтов и начертаний. Есть основной шрифт и акцентный.
19. Заголовки подчиняются иерархии. Заголовок более высокого уровня смотрится массивнее, чем подзаголовки. Подзаголовки смотрятся значимее, чем основной текст.
20. Колонки отделены друг от друга так, что не возникает сомнений, в какой очередности их читать.
21. Гиперссылки выделены синим.
22. При наведении на гиперссылку курсор превращается в «руку».
23. Множество гиперссылок объединены в блок. Они не разбросаны по абзацу.
24. Форма — это блок. Она смотрится единым целым.
25. Пользователь понимает, зачем он отвечает на вопросы формы.

----------------------

Смотрите также по теме:

Как создать и чем наполнить сайт для дизайнера интерьера

Как сделать сайт на Tilda. Подборка обучающих материалов

Как сделать сайт удобным: элементы навигации

Тексты на сайте дизайн-студии: как писать, чтобы читали

Как зарегистрировать адрес своего сайта

------------------------------------------------------------------------

Евгения Черешкова,

редактор, автор, SEO-копирайтер

Помогаю сделать контент интереснее и понятнее для читателя.

Сайт textforbusiness.ru

Telegram, WhatsApp: +7(903)000-47-04

Skype, email: homanova@yandex.ru