Онлайн-курс апрель-июнь 2019 Интернет-маркетолог с нуля: как стать мастером на все руки
Записаться

10 способов оформления статей и текстов на сайте

Визуальные крючки для привлечения внимания читателя

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

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

1. Заголовки

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

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

 Пример заголовка с неправильным оформлением

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

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

Пример 1

 Заголовок статьи на сайте Aviasales

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

Пример 2

Заголовок на сайте корейской косметики

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

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

Пример правильного оформления заголовков

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

2. Анонс

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

Пример анонса в статье

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

3. Рейтинги, комментарии и количество прочтений

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

«Тинькофф-Журнал»

Пример использования рейтингов, комментариев и количества просмотров

179 077 просмотров, 197 комментариев.

Блог 1PS

Пример использования рейтингов, комментариев и количества просмотров

24 000 просмотров, 18 комментариев.

Информационный портал DTF

Пример использования рейтингов, комментариев и количества просмотров

286 комментариев, 88 добавлений в закладки, 323 положительных оценки.

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

4. Содержание/Оглавление

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

Пример оглавления на Википедии

А вот пример оглавления из нашего разбора загадочного показателя качества сайта Яндекс ИКС:

Пример оглавления в блоге 1PS

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

5. Примечания

Этот способ размещения информации взят из журнальной верстки. Суть в том, что дополнительный материал, ссылки, указание автора и другие данные размещены справа от основного текста. Примеры использования приема можно найти в «Тинькофф-Журнале». В этой статье в примечании разместили информацию об авторе:

Пример использования примечания в тексте

А здесь дали ссылку на материал по схожей теме:

Пример использования примечания в тексте

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

6. Врезки

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

Приведем несколько примеров. На информационном портале НОЖ главную мысль выделили с помощью большого полужирного шрифта:

Пример врезки на портале НОЖ

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

 Пример врезки для обозначения важных мыслей

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

Пример врезки для обозначение целевого действия

Вся статья размещена на белом фоне и только призыв к подписке расположен на цветном фоне.

7. Таблицы

Прием позволяет подать информацию в простом и понятном виде, структурировать ее в сознании пользователя. Есть четкие правила вставки таблиц в текст:

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

    Таблица-с перечислением технических характеристик в карточке товара

  • Сравнение. Позволяет наглядно сопоставить какие-либо явления, предметы, методы. Часто используется в обзорах на несколько товаров одной ценовой категории и назначения. В качестве примера приведем сравнение качества видеозаписи на iPhone 7 и iPhone 8:

    Таблица-сравнение технических характеристик iPhone

  • «ДО-ПОСЛЕ». С помощью таблицы можно наглядно проиллюстрировать пользователю эффективные-неэффективные методы, результаты каких-либо работ, услуг, методик. Максим Ильяхов, о котором мы уже говорили, часто сопоставляет в них правильные и неправильные варианты текстов, и таким образом доказывает компетентность своего подхода:

    Пример использования таблицы в тексте

8. Списки

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

Например, так оформила шоппинг-советы девушка, ведущая кулинарный блог:

Пример использования списков в тексте

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

Пример использования списков в тексте

9. Изображения

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

  • Выдерживайте единый стиль. Если ваши публикации связаны между собой, к ним стоит подобрать схожие изображения. Так недавно в нашем блоге вышла серия статей «Интернет-магазины, которые покорили Россию», автор подобрал к ним картинки с кадрами из мультсериала «Симпсоны» и связал публикации с помощью визуального оформления.

    Оформление картинок в статьях 1PS

    Оформление картинок в статьях 1PS

  • Избегайте стоковых изображений. Долгое время владельцы сайтов размещали одинаковые картинки со свободной лицензией, и теперь пользователи не воспринимают их как иллюстративный материал. Сейчас подобные картинки стали лишь поводом для шуток, наверняка многие слышали про мем «Грустный Гарольд» или видели пародийную съемку Vanity Fair с актрисой Эмилии Кларк, звездой сериала «Игра престолов».

    Стоковое фото с грустным Гарольдом

    Пример шуточного стокового фото

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

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

Баннер на сайте магазина косметики

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

А вот хороший баннер в интернет-магазине кофе:

Баннер на сайте магазина кофе

Краткое сообщение об акции и ее условиях + изображения товара, по клику открывается список подарков, и клиент может выбрать понравившийся.

10. Видео, гифки и аудио

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

Использование видео в статье

Использование видео в статье

Или пример с портала DTF. В публикации об истории известных музыкальных произведений автор добавил аудио с сервиса YouTube:

Использование аудио в статье

Использование аудио в статье

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

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

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

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

Если вам нужен совет по наполнению сайта контентом, оценка размещенных материалов и рекомендации по ним, задайте вопрос нашим копирайтерам. Объективно рассмотрим тексты на вашем сайте, дадим рекомендации или разработаем новые тексты.

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

Чек-лист «А у вашего сайта хороший текст?»

Принимаете текст у копирайтера? Проверьте, и если текст «не проходит», выдайте этот чек-лист копирайтеру в качестве руководства к действию.

Получить чек-лист

Популярные статьи

Все популярные статьи »

Комментарии (0)

Правила комментирования блога

Оставить коммент к статье

Читайте свежие статьи первыми

Дайджест новых статей по интернет-маркетингу 1 раз в неделю

Летим с нами в ТОП

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

Ваш email

Нажимая на кнопку «Подписаться», вы соглашаетесь на обработку персональных данных

Я уже с вами