7 правил эффективного оформления заголовков на сайте

7 правил эффективного оформления заголовков на сайте

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

1. Сохраняйте иерархию заголовков

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

Читатель должен хорошо различать заголовок страницы от подзаголовка или заголовка раздела, лишь слегка зацепившись за них взглядом. Кроме того размеры шрифта заголовков должны значительно превышать размеры шрифта основного текста. Естественно все заголовки должны заключаться в теги <h1>...<h6>.

На практике это сделать достаточно просто. Сначала нужно определиться сколько будет уровней в иерархии заголовков на странице (например 3: заголовок — заголовок раздела — подзаголовок). Затем можно сверстать простенький HTML-макет, ручками или в WISYWIG-редакторе, кому как удобнее. Набрать в макете соответственно заголовок страницы в теге <h1>...</h1> (больше заголовков в этом теге на странице быть не должно), заголовок раздела (<h2>...</h2> — заголовков раздела как и подзаголовков может быть сколько угодно), подзаголовок (<h3>...</h3>), и основной текст.

Выберите размер шрифта основного текста, а затем увеличивайте размер заголовков в обратном порядке, т.е сначала подзаголовков <h3>...</h3>. Например, они могут отличаться от шрифта основного текста только жирным начертанием. Следующие по очереди — заголовки разделов <h2>...</h2>, их можно увеличить на 150%. А затем и <h1>...</h1> на 200% (относительно шрифта контента).

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

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

2. Выделяйте заголовки

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

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

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

3. Группируйте заголовки с текстом, к которому они относятся

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

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

4. Выравнивайте заголовки

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

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

5. Не ставьте точек в конце заголовков

Точка (но не многоточие) символизирует законченность мысли, а заголовок — это только её начало.

6. Экспериментируйте со шрифтом заголовка

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

Все эти эффекты легко реализуются с помощью CSS-свойств letter-spacing, word-spacing, text-transform, просто нужно немного поэкспериментировать.

7. Не пишите длинных заголовков

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

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

* * *

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

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Все пинги запрещены.

Статьи по теме:

Комментариев: 6

  1. Валера, 03.03.2010 в 22:14

    Здавствуйте, сразу скажу, я сюда не рекламировать свой сайт пришел, просто искал информацию, как правильно писать статьи. Можете вы пожалуйста посоветовать, что у меня неправильно сделано на сайте. Я имею ввиду текст.

    Здесь сайт: lavka. de (пробел уберите, когда будете вводить в адресной строке сайт).

    Если у вам мало времени, мне пару советов будет достаточно, заранее спасибо!

    Ответить

    • @ Глеб Великанов, 16.01.2012 в 9:32

      Старайтесь писать статьи по схеме  «Проблема — Решение»

      + вопрос для комментов.

      Например к данной статье можно написать проблему, типа вот у всех заголовки херовые, а на самом деле надо делать так. А в конце статьи спросить: «какие правила используете вы?», или «с чем не согласны/ не согласны?»

      Ответить

  2. Екатерина, 28.08.2010 в 5:38

    Уберите точку в конце заголовка «4. Выравнивайте заголовки.» (цитата из вашей статьи «7 правил эффективного оформления заголовков на сайте»). Не надо противоречить самим себе.

    Ответить

  3. @ Антонина, 12.05.2017 в 13:09

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

    Ответить

Есть что сказать?