Дизайн блога

Что такое дизайн блога?

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

Почему так важен дизайн блога?

Согласно последним данным WordPress, каждый месяц публикуется 70 миллионов сообщений в блогах.

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

Но этот контент также должен ВЫГЛЯДИТЬ действительно хорошо.

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

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

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

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

Я также много инвестировал в визуальный контент, например, в инфографику.

И это внимание к дизайну помогло моему блогу стать заметным в первые дни.

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

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

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

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

Единственное предостережение: страницы с индивидуальным дизайном могут быть дорогими. По сути, вам нужно, чтобы кто-то разработал веб-страницу с нуля. Затем закодируйте страницу и интегрируйте ее в WordPress.

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

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

Лучшие практики

Сосредоточьтесь на высокой удобочитаемости

Когда большинство людей слышат «дизайн блога», они думают о таких вещах, как цвета, иллюстрации, брендинг и UX.

И да, эти вещи важны для дизайна блога.

Но они не так важны, как ваша типографика .

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

(Неважно, насколько удивительным окажется этот контент).

К счастью, облегчение чтения вашего блога — это не ракетостроение.

Самое главное, чтобы вы использовали шрифт от 15 до 18 пикселей .

Фактически, исследование Университета Карнеги-Меллона показало, что более крупный шрифт легче читать и понимать .

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

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

Medium.com — король читаемых шрифтов.

Они используют шрифт 21px. И он большой, смелый и безумно простой в употреблении.

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

Например, вот блог, в котором весь текст сплющен.

Это очень сложно читать.

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

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

Это означает использование широких полей.

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

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

Как и любой дизайн веб-сайта, последовательность в дизайне вашего блога ОГРОМНА.

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

Например, в Backlinko мы используем «Backlinko Green» на главной странице нашего блога, о странице и в каждом сообщении.

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

В блоге NerdWallet вверху каждого поста используются неаккуратные стоковые фотографии.

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

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

В этом сила последовательного дизайна.

Дизайн, чтобы выделиться

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

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

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

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

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

  • Лента вашего блога
  • Ваши изображения баннеров
  • Ваша тема WordPress
  • Шрифт и типографика
  • Иллюстрации
  • Раздел комментариев
  • Навигация по сайту
  • Нижний колонтитул

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

У Intercom действительно уникальный макет для своей ленты блога.

Большинство каналов блогов вертикальные с одной колонкой. Но Intercom показывает их последний пост в верхней части ленты …

… И имеет список их старого контента в сетке 3 × 3.

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

Блог Drift — еще один отличный пример выдающегося дизайна блога.

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

А если вы являетесь личным брендом, я настоятельно рекомендую заглянуть в блог Мари Форлео .

Макет, типографика и стиль Мари на 100% уникальны для нее.

Показывайте свой лучший контент

У вас их последний пост вверху. И их старые посты внизу.

В этом макете нет ничего НЕПРАВИЛЬНОГО.

(Фактически, это то, что мы используем здесь, в Backlinko).

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

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

Вот почему все больше и больше блогов используют «библиотечный подход» к своей ленте блогов.

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

Например, лента блога Lattice на самом деле вовсе не является лентой. Это тщательно подобранный список их самого популярного контента.

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

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

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

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

Добавить визуальные эффекты и изображения

Дизайн блога — это не только дизайн вашей страницы.

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

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

Например, взгляните на это сообщение в блоге, состоящее на 100% из текста.

С другой стороны, посмотрите этот раздел в одном из наших постов.

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

Это не значит, что вы должны добавлять изображения только для добавления изображений. Но когда вы МОЖЕТЕ использовать изображение, вам СЛЕДУЕТ использовать изображение.

Создавайте собственные страницы для «большого содержания»

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

Но как насчет того, чтобы опубликовать что-то ОГРОМНОЕ?

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

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

Но время от времени мы публикуем «большой контент», например отраслевое исследование или отчет.

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

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

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

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

Фактически, это то, что FYI сделал со своим постом « Почему все любят удаленную работу ».

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

Создайте «Домашнюю страницу» блога

Для большинства людей «домашняя страница» блога — это их канал блога.

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

Но для конверсий это УЖАСНО.

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

Затем поместите канал своего блога на URL-адрес / blog.

Например, домашняя страница нашего блога была обычной лентой.

Но несколько лет назад мы переместили ленту в / blog. И запустил домашнюю страницу, оптимизированную для построения списков .

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

Использовать авторскую строку

Вы когда-нибудь заходили в блог и задавались вопросом: «Кто, черт возьми, это написал?».

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

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

Например, в Buffer Blog автор сообщения в блоге отображается прямо под заголовком сообщения в блоге.

И хотя Backlinko является блогом с одним автором, у нас по-прежнему есть авторские имена для каждого сообщения.

Добавить кнопки обмена в соцсетях

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

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

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

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

Совет от профессионала: выберите 2-3 сайта социальных сетей, на которых ваша аудитория проводит больше всего времени. И включите ТОЛЬКО эти сети там.

Мало того, что длинный список кнопок выглядит ужасно некрасиво …

… Но это снижает вероятность того, что они будут использовать ЛЮБУЮ из ваших кнопок.

(Перегрузка опции)

Например, большая часть нашей аудитории делится контентом в Facebook и Twitter. Поэтому мы используем только кнопки Facebook и Twitter.

Но если ваша аудитория — это Pinterest, вам стоит это использовать.