Оформление статей и текстов на сайте

Доброго дня, уважаемые гости моего ресурса! Я рад, что мой сайт привлек ваше внимание. Льщу себе, что это произошло не только благодаря высоким позициям моего ресурса в ПС, но и высокому качеству контента, а также приятному оформлению статей. Впрочем, все эти моменты взаимосвязаны: эффективность продвижения определяется, прежде всего, поведенческими факторами (поисковые роботы анализируют и их). Это значит, что я должен не только презентовать вам интересные экспертные статьи, но и сделать их прочтение максимально комфортным. Сегодня я раскрою перед вами тайны типографики и нюансы оформления разнообразного контента. Надеюсь, это поможет вам при создании и продвижении собственных веб-ресурсов.

Виды контента

Всю массу контента (то есть, содержимого веб-сайтов) можно условно разделить на три обширных группы:

  • Текст. Это король контента, главенствующий над другими его типами. На большинстве информационных сайтов и блогов он играет роль примы. Собственно, все танцы с бубнами (визуальное оформление, включение иллюстративного материала, анимация и прочие фишки) направлены на то, чтобы оживить текст. В конечном итоге преследуется единая цель: нам нужно, чтобы посетитель дочитал статью до конца, пробыв на ресурсе как можно больше времени. В идеале должна включиться и обратная связь, предполагающая ответное действие пользователя (заказать, оставить комментарий, поделиться и так далее).
  • Иллюстрации. Это фото, инфографика, скриншоты, рисунки и прочая статичная графика (векторная, растровая – приемлемы оба варианта). Впрочем, в последнее время активно используются и анимированные изображения (гифки, эмодзи и так далее). В некоторых случаях они вполне уместны, но при неразумном использовании раздражают и отвлекают внимание от Его Величества Текста.
  • Видео. Использование видео существенно повышает вес страницы при ранжировании. Особенно, если оно уникально. Однако создание профессионального видеоролика стоит денег, а своими силами снять хорошее видео не всегда возможно. В отличие от текстового и графического контента, требования по уникальности к видео не предъявляются, поэтому вполне допустимо использовать ролики с YouTube.

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

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

Понятие о типографике

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

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


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

Шрифты

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

Однако нужно учитывать, что тренд «чем замысловатее, тем круче» давно канул в Лету. Сейчас такая сборная солянка является безупречным маркером непрофессионализма дизайнера. Разнообразие шрифтов утомляет глаза, рассредоточивает внимание, попросту раздражает. Разумно использовать 2-3 шрифта, причем сочетающихся друг с другом.

Если вы не являетесь профессионалом, универсальным вариантом станет простейшее стандартное сочетание Arial+Calibri. А вот все шрифты в очевидно разных стилях, да еще и с визуально различимой разницей в ширине символов, воспринимаются как безвкусица. И лучше воздержаться от использования шрифтов с засечками – они тяжелы и громоздки. Например, Times New Roman, который используется в официальных документах по умолчанию, на веб-странице выглядит не лучшим образом.

Еще несколько лет назад некоторые гуру рекомендовали наиболее значимые по смыслу слова выделять КАПСОМ. Да, после этого они прямо-таки лезли в глаза, но затрудняли восприятие текста в целом – читатель только эти слова и видел.

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

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

Оптимальный для восприятия размер шрифта основного текста – 12-16 px, для заголовков – на 4-8 px больше (в зависимости от уровня). Статьи лучше оформлять при помощи адаптивных шрифтов. Тогда они нормально читаются и воспринимаются с любых устройств, и пользователю не обязательно прибегать к дополнительным действиям (например, увеличивать страницу).

Цвета

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

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

Форматирование

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

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

При размещении текстового контента нужно учитывать, что в строчку десктопной версии страницы должно вмещаться порядка 60 символов, мобильной – 30-40.

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

Общие требования к статье

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

  • информативность (желательно, экспертного уровня);
  • уникальность (к 100% стремиться не обязательно, достаточно 85-95%, а в некоторых случаях – и 70-75%);
  • отсутствие ошибок (как грамматических, так и фактических);
  • адекватные показатели по SEO-параметрам (водность, тошнота или заспамленность, плотность ключа и так далее);
  • доступные целевой аудитории манера изложения и стиль;
  • отсутствие излишне громоздких и сложных для понимания синтаксических конструкций;
  • структурирование (абзацы, смысловые блоки с подзаголовками, списки и так далее).

Структурирование текста

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

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

Заголовки

Заголовок текста H1 (не путать с метатегом title – именем страницы) может быть провокационным, интригующим или спокойным и информативным – все зависит от формата и стиля статьи. Главное, чтобы он привлекал внимание и мотивировал пользователя к прочтению статьи. Искусству создания заголовков я посвятил обширную публикацию. Повторять описанное там не имеет смысла, ведь на данный момент мы говорим не о содержании, а о визуализации.


Как я уже говорил, размер заголовка должен быть на 4-8 px больше, нежели параметры основного текста. Шрифт не должен быть слишком вычурным или сложным для восприятия. Важна хорошая сочетаемость со шрифтом основного текста.

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

Анонс

Анонс (или превью) – это своеобразная презентация статьи. Я как-то работал на сайте, посвященном микрокредитованию. Очень здорово продуманный ресурс, отличное юзабилити и (льщу себя надеждой, ибо работал копирайтером) креативные экспертные тексты.

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

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

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

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

Абзацы

Все чаще в технических заданиях я встречаю тенденцию к сокращению количества строк в абзаце. Видел как-то, как в ТЗ заказчик прописал требование – абзацы не более 2-3 строк. Мы пишем тезисный план или статью? Я еще могу понять 4-6 строк – это действительно оптимальный размер. Правда, не всегда даже в 4-6 строчек можно упаковать относительно законченную мысль, поэтому иногда приходится пренебрегать этим правилом.

И да, к каждому абзацу (как настоятельно рекомендуют некоторые заказчики) заголовки точно не нужны. Это уже избыточность, граничащая с примитивизмом. Подзаголовки в идеале должны располагаться через 1000-1500 символов, но не после каждых 3-6 строк!

Списки

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

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

Врезки и цитаты

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

Такие врезки можно выделить иным шрифтом, взять в рамку, расположить на цветном фоне и так далее. Помимо визуального, уместно и смысловое выделение. Например, словами «Важно», «Это интересно знать», «А вы в курсе?» и так далее. Такие врезки – настоящее спасение в случаях, когда смысловые блоки велики, а разбавлять их иллюстрациями неразумно.

Ссылки

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

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

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

Оптимальное количество линков на статью в 10 килосимволов – ориентировочно 8-10 штук. Необходимо равномерно разбросать их по тексту: так выше шанс, что на них кликнут.

Иллюстрации

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

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

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

Инфографика

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

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

Изображения

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

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

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

Анимация, гифки, эмодзи

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

Как-то при создании туристического сайта, посвященного Доминикане, мы использовали новаторское на тот момент решение: создавали основные страницы в виде комикса. Идеи для картинок, равно как и текст – мои. До сих пор помню муки творчества и стоны заказчика на тему «а ты знаешь, сколько стоит такой дизайн???». Да, все это высокобюджетная забава, но она того стоила и быстро окупилась.

К чему я это говорю? Там мы раздевали нарисованную девушку. Конечно, не догола, а до купальника, в рамках цензуры. Была в зимней одежде, проводишь курсором – девушка раздевается, проводишь еще раз, в другом направлении – она «загорает» до шоколадного цвета. Пользователи зависали на этой странице надолго!

Видео и аудио

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

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

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

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

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

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

Статистика

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

Эта возможность в полной мере реализована на канале «Яндекс.Дзен», в журнале «Тинькофф» и на других авторитетных ресурсах. Для старт-апа я бы такую опцию не рекомендовал: она может сработать с точностью до наоборот. Лучше прикрутить ее потом, когда ресурс получит достаточное развитие.

Оформление статей в зависимости от стиля

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

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

Советы начинающим

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

  • Крупная типографика. Сейчас в тренде крупная типографика, лишенная мелких, отвлекающих внимание элементов. Я думаю, что эта тенденция сохранится в ближайшее время, ибо она действительно улучшает восприятие.
  • Правило трех цветов и шрифтов. При оформлении текста используется не более трех цветов и шрифтов. Это универсальное правило типографики, которого придерживается большинство современных дизайнеров. Отступления возможны только при наличии опыта и понимания, зачем это нужно.
  • Единство стиля для всех страниц. Настоятельно рекомендуется оформлять все страницы сайта в едином стиле (шрифтах и цветовой гамме). Этот момент особенно критичен, если над страницами работает несколько независимых специалистов – нужно прийти к единому мнению.
  • Проще – лучше. Не усложняйте: в тренде лаконичные стильные дизайны без вычурности и китча. И, что самое приятное, подобная классика никогда не выйдет из моды.
  • Забудьте про бумажные документы. То, что классно выглядит на бумаге, может отвратительно смотреться на экране. Например, шрифт Times New Roman, обязательный для бумажной документации, на сайте смотрится тяжело и неудобочитаемо. Не нужны и отступы («красная строка») в начале абзацев.
  • Побольше хороших текстов. Никакое супер-пупер оформление не спасет откровенно провальную (непрофессиональную, водянистую, сумбурную, изобилующую ошибками) статью. Поэтому во главе угла всегда качество текста.
  • Поменьше рекламы. Начинающие владельцы сайтов стремятся использовать все возможные способы монетизации, желая побыстрее сделать ресурсы доходными. Основную прибыль инфоресурсам и блогам приносит реклама. Но нужно учитывать, что обилие тизеров и баннеров раздражает и не лучшим образом сказывается на восприятии контента.

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

Анатолий Волошин/ автор статьи

Более 5 лет являюсь интернет-предпринимателем. За все время работы в интернете перепробовал различные способы заработка. Основные специализации моей деятельности: блогерство и копирайтинг.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

*

code

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: