Раздел блог на сайте: Основные принципы дизайна блога на сайте

Основные принципы дизайна блога на сайте

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

Зачем и кому нужен блог на сайте

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

Для этого компании на своих сайтах создают блоги, в которых размещают статьи по схожей тематике, и предлагают пользователям приобрести товар или услугу, подписаться на еженедельную рассылку, рассказывают о действующий акциях и товарах. Студия дизайна IDBI также ведет блог о веб-дизайне:

Почему блог — хороший инструмент для повышения конверсии?

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

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

Принципы создания дизайна блога

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

Отличие от остальных страниц сайта

У блога, в отличие от других страниц сайта, есть своеобразная специфика:

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

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

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

На странице расположена простая форма, ресурс оформлен в синем и голубом цвете.

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

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

Темы для пользователей и поисковых систем

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

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

Оформление отдельных превью

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

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

Как лучше всего оформить превью, чтобы заинтересовать читателя?

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

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

2. В превью нужно указывать, о чем конкретно будет статья или размещать ее начало, чтобы пользователь понимал, о чем будет идти речь. Иногда одного названия темы недостаточно, особенно, если в статье употребляются тематические термины.

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

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

Элементы навигации

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

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

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

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

Типографика

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

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

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

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

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

В нашем блоге мы придерживаемся этого принципа.

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

Призыв к действию

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

• баннеры-изображения с ссылкой на акционные товары;
• формы для заявки;
• формы для подписки на рассылку;
• призыв оформить заказ в самом тексте статьи;
• всплывающие окна и прочее.

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

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

Фишки

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

Это можно назвать фишкой Т-Ж, поэтому по картинкам и уникальному шрифту сразу можно определить издание. Такой прием повышает узнаваемость бренда и запоминается пользователям.

Также некоторые блоги создают собственные рекомендательные системы на основе прочитанных пользователем материалах:

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

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

Кроме того, на всех статьях указано, сколько времени занимает чтение материала.

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

Уникальность

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

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

Как оформлять статьи в блоге

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

1. Главная страница блога
2. Заголовок статьи
3. Структура текста
4. Акценты
5. Изображения
6. Привязка к другим элементам на сайте
7. Социальные сети, форма подписки, комментарии
8. Шрифты

Главная страница блога

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

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

Желательно делать несколько форматов вывода материалов на главной странице блога, добавлять дополнительные блоки, например, «Популярные статьи», «Новости». Можно добавить блок «Последние комментарии».

На примере на главной странице блога кроме анонсов статей в порядке их добавления на сайт выводятся блоки с новостями и самые популярные темы.

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

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

Для того, чтобы получить email адреса для рассылки писем разместите среди анонсов форму подписки на рассылку.

Заголовок статьи

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

Пример оформления шапки статьи с использованием изображения.

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

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

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

<p>Текст абзаца</p>

Подзаголовки в тексте должны располагаться в соответствии с иерархией: заголовок — h2 (может быть только один на странице), затем по уровням — h3, h4, … h6. Подзаголовки в тексте также должны отбиваться отступами: снизу — такой же как между абзацами или в 1,5 раза больше; сверху — в два раза больше.

<h2>Заголовок</h2>

    <h3>Подзаголовок 1 уровня</h3>

        <h4>Подзаголовок 2 уровня</h4>

        <h4>Подзаголовок 2 уровня</h4>

        <h4>Подзаголовок 2 уровня</h4>

    <h3>Подзаголовок 2 уровня</h3>

Если статья объемная, то для удобства навигации стоит дополнить ее содержанием. Удобно, когда оно выводиться в сайдбаре на основе разметки статьи, то есть в боковом меню выводятся все заголовки h3.

Для разметки списков следует использовать теги: для неупорядоченного списка ul-li, для упорядоченного — ol-li.

Пример html-разметки маркированного списка

<ul>
    <li>веерные;</li>
    <li>тростниковые;</li>
    <li>перистые;</li>
    <li>саговые;</li>
    <li>«рыбий хвост».</li>
</ul>

Пример html-разметки списка с нумерацией пунктов

<ol>
    <li>Гидроизоляция</li>
    <li>Демпферная лента</li>
    <li>Утеплитель</li>
    <li>Арматурная сетка</li>
    <li>Трубопровод</li>
    <li>Стяжка</li>
</ol>

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

Блоки внимания

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

Особым образом следует оформить следующие элементы:

• цитаты;
  
• термины;
  
• прямую речь;
  
• лид;
  
• мнение эксперта;
  
• факт со ссылкой на источник.
  

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

Изображения

Чтобы разбавить текст, обязательно нужно дополнять его изображениями (фотографиями, иллюстрациями, gif-анимацией). Каждая картинка должна сопровождаться подписью. В html-коде должна быть возможность прописать для каждой картинки title и alt.

<img src="/images/begoniya. jpg" alt="Бегония Рекс" title="Бегония Рекс">

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

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

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

Привязка к другим элементам на сайте

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

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

При сложностях с разработкой можно добавить блоки с помощью сервиса relap.io.

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

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

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

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">