Мы все знаем, насколько важен контент для любой маркетинговой кампании.
Блог, например, стал краеугольным камнем любого успешного веб-сайта; направляя пользователей целевым, релевантным и интересным контентом и, в конечном итоге, доставляя им такое удовольствие, что они конвертируются и подписываются, чтобы получать больше.
Но что, если дизайн вашего блога не соответствует требованиям?
Дело в том, что больше пользователей зайдут на ваш сайт (и найдут ваш бренд) через статьи в вашем блоге, чем когда-либо через вашу домашнюю страницу, поэтому дизайн вашего блога должен быть «лучшим шагом вперед».
Это одна из основных причин, по которой мы создали наш пакет оптимизации блога, чтобы дать вам возможность быстро обновить свой блог и оптимизировать взаимодействие с пользователем.
Когда дело доходит до дизайна блога, необходимо учитывать множество различных факторов, включая, среди прочего, размеры шрифтов, иерархию, призывы к действию и ширину текста.
При таком большом количестве вещей, которые нужно учитывать, может быть нервно браться за новый дизайн блога (но, конечно, мы можем вам в этом помочь).
Именно поэтому я хотел собрать несколько отличных примеров дизайна блогов, ориентированных на пользователей, которые помогут лучше донести ваш контент и заставить ваших читателей возвращаться за новыми!
Примечание автора: все эти блоги просматриваются на 13-дюймовом Macbook Pro. То, что вы просматриваете, может меняться в зависимости от размера вашего экрана. Но! Это должен быть единообразный пользовательский опыт от экрана к экрану.
1. Вистия
Самый главный совет, который я могу дать при разработке вашего блога для пользователей, - сделайте его читабельным.
Что я имею в виду? Проще говоря, разборчивость и усвояемость. Используйте чистые шрифты, заголовки и сосредоточьтесь на содержании.
Wistia отлично справляется с этой задачей в своем блоге.
Нам представлен краткий обзор новых и избранных произведений, а также краткий список конкретных тем.
Обратите внимание, что здесь 4 темы, а не 25. Это упрощает работу пользователей, позволяет им легко получать тот контент, который им больше всего интересен, и избавляет от необходимости догадываться при навигации.
Я не могу сказать вам, сколько раз я заходил в блог только для того, чтобы встретить массу категорий с одной записью в блоге. Почему? Должен быть лучший способ!
через GIPHY
Wistia также предоставляет вам всю информацию, необходимую для оценки публикации перед тем, как нажать на нее: категория, четкий заголовок, а также отличный отрывок, который вызывает желание прочитать больше.
Также указывается автор и дата публикации, что может показаться мелочью, но на самом деле очень важно. Пользователи хотят знать, что то, что они читают, не устарело и написано экспертом.
Последняя деталь, которая делает страницу листинга Wistia великолепной в моей книге, - это ее контекстные изображения. Эти визуальные эффекты действительно оживляют отрывки и привлекают ваше внимание.
Спасибо Крису Лавину за отличное изображение и статью (на самом деле это очень полезно, посмотрите!)
У Wistia также очень чистый и разборчивый дизайн статей, в котором основное внимание уделяется содержанию и только содержанию.
Использование иерархии шрифтов для разделения разделов облегчает просмотр, а отсутствие боковой панели действительно помогает посетителю сосредоточиться на контенте и не отвлекаться.
2. Дрифт
Дизайн блога Drift - еще один вариант, который определенно поражает своей читабельностью.
Его страница со списком представляет собой минимальную страницу с одной колонкой и большими красивыми изображениями, которые действительно вызывают интерес пользователя и заставляют его читать.
Добавление примерного времени чтения – это то, о чем забыли, но оно может иметь решающее значение для ваших пользователей.
Вы когда-нибудь натыкались на статью, которую очень хотели прочитать, но не думали, что у вас достаточно времени, и так и не сделали этого? Предоставление некоторых указаний относительно объема усилий, которые должен будет приложить ваш пользователь, - отличный способ улучшить читательскую аудиторию. Это позволяет пользователям узнать, когда им следует добавить статью в закладки, вместо того, чтобы читать четверть и сразу переходить к чему-то другому, не закончив.
Дизайн статей Drift также впечатляет.
Опять же, следование по маршруту с одной колонкой и устранение отвлекающих факторов - отличный способ побудить читателя закончить весь пост в блоге и в конечном итоге достичь точки конверсии, которую вы стратегически разместили в конце - или должны были разместить.
Команда хорошо разбивает свои сообщения изображениями на целые колонки, чтобы пользователь не столкнулся с ужасной «стеной текста».
Нет более быстрого способа удержать кого-то от чтения вашего контента, чем представить его как пугающее занятие. Разбивка длинных постов правильными заголовками и отличными визуальными эффектами - верный способ увеличить читательскую аудиторию и читабельность.
Именно поэтому мне нужен был Drift как пример отличного вдохновения для дизайна блога, ориентированного на пользователя.
3. Сигстр
Еще один замечательный макет списка блогов можно увидеть на Sigstr.
Компания, занимающаяся подписью электронной почты, использует макет в стиле «карточки», который может быть сделан очень хорошо (в данном случае) или очень плохо.
Обычно вы увидите страницы со списками в виде карточек с тремя столбцами, что может затруднить восприятие контента. Однако команда Sigstr выбрала макет из двух столбцов, что ограничивает количество доступных опций и позволяет избежать одновременной отправки слишком большого количества сообщений.
Использование избранных изображений помогает выделить каждую отдельную карточку и вызывает у пользователя желание пролистать весь контент, чтобы узнать, о чем еще он может узнать.
Единственное обновление, которое я бы вам порекомендовал, - это расширить отрывок сообщения, чтобы дать пользователю немного больше информации о том, о чем будет статья. С этой настройкой вы станете настоящим победителем!
Глядя на дизайн внутренней статьи, можно сказать, что она очень хорошо составлена и ориентирована на удобство чтения пользователем.
Выбор семейства и размера шрифтов на странице чрезвычайно удобен для глаз и помогает вам перемещаться по странице.
Одна из основных причин, по которой я хотел включить Sigstr в список вдохновения для дизайна моего блога, связана с широким использованием правильной высоты строк в их шрифте. Использование неправильной высоты строки, большой или слишком маленькой, может серьезно повлиять на читаемость. Слишком большой размер, и содержание кажется затянутым и трудным для чтения; Слишком маленький, и это беспорядок, который превращается в сплошной блок текста.
Применяя визуально привлекательную высоту строки, вы помогаете дать контенту передышку, необходимую для его восприятия и удержания.
4. ИнВижн
Блог InVision действительно хорошо справляется со многими задачами.
Самый большой плюс для меня - это использование описательных названий. Внутренне это устраняет необходимость в полных выдержках сообщений, что очень хорошо работает с избранным слайдером сообщений.
Обычно я против слайдеров и каруселей, но в этом случае они хорошо работают с заголовками блогов и крупными изображениями на заднем плане.
Под слайдером избранных сообщений inVision также использует макет из трех столбцов с короткими и интересными выдержками, которые представляют собой почти однострочные описания.
Стратегическое использование пустого пространства позволяет каждому сообщению «дышать» и помогает пользователю сосредоточиться на поиске интересующего его контента, а не на бомбардировке слишком большим количеством опций одновременно, что характерно для трехколоночного поста. смотри.
Дизайн статьи, как и в случае с другими нашими сайтами, вдохновляющими на дизайн блогов, прост и состоит из одной колонки.
Моя любимая вещь, которую делает InVision, - это размещает кнопки социальных сетей и основной призыв к действию (CTA) на панели навигации, которая прилипает к нижней части экрана при прокрутке пользователем.
Это отличный способ держать их в центре внимания и обеспечить легкий доступ, не отвлекая внимания.
5. DigitalMarketer
Больше идей для дизайна блога можно найти на DigitalMarketer.
Обучающая организация выбрала макет, аналогичный InVision, но без слайдера/карусели. Поскольку верхняя часть макета не является типичной страницей со списком блогов, она определенно вызывает интерес пользователя и заставляет его читать.
DigitalMarketer также выделяет свой избранный пост в первом разделе, который, как и другие в этом списке, использует описательный заголовок, чтобы увлечь пользователя и побудить его прочитать больше.
Моя любимая часть этого макета - то, как четыре последних сообщения отображаются под героем с номерами, упорядочивающими их. Он притягивает взгляд, дает ощущение направления и заставляет почти сразу прочитать названия.
Под этим «избранным разделом» вы увидите более традиционный макет блога с лентой сообщений слева и боковой панелью справа. В ленте сообщений используются выдержки, чтобы дать пользователю больше информации о том, о чем будет статья, и есть заметная кнопка «Читать дальше», которую нельзя пропустить.
В целом, DigitalMarketer отлично справляется с задачей не загромождать боковую панель рекламой или призывами к действию.
Команда решила включить простой поиск по блогам, самые популярные публикации и один ценный призыв к действию, который следует за вами вниз по странице.
6. Росток Социальный
Следующий - Sprout Social. Я назову это макетом карты «во всю ширину»; он заблокирован, но каждая отдельная запись в блоге не борется за внимание в глазах пользователя.
Большие изображения в блоге создают большой визуальный интерес и направляют взгляд читателя на заголовок. Этот макет вызывает желание прокручивать или пролистывать многочисленные статьи, чтобы увидеть, что еще вы можете узнать.
Типографика и иерархия шрифтов макета также очень понятны и, как и в других примерах, помогают поддерживать интерес читателя, позволяя легко просматривать и усваивать контент.
Одна важная вещь, которую следует подчеркнуть, что Sprout Social и другие компании преуспевают, - это не использование полностью черного цвета в качестве цвета шрифта.
Я обнаружил, что сплошной черный цвет на белом фоне может утомлять ваши глаза при чтении, поэтому изменение цвета на темно-серый или угольный значительно улучшает читабельность.
Что мне действительно нравится, так это то, как Sprout Social затемняет значки социальных сетей, которые следуют за вами, пока вы читаете.
Это убирает элемент отвлечения из уравнения, но все же дает пользователю возможность поделиться, если он захочет.
7. Помогите разведчику
И последнее, но не менее важное: в блоге Help Scout используется еще один стиль «карточки», но на этот раз с жирным шрифтом в три столбца.
Все начинается с большого красивого раздела избранных публикаций, который сразу же привлекает пользователя иллюстрациями, прежде чем отображать основную часть контента в колонках.
Как упоминалось ранее, макеты в три столбца могут легко отвлекать, но Help Scout работает. На карточках нет больших описаний, а используются более крупные и яркие изображения, чтобы привлечь внимание и привлечь внимание.
Help Scout также умело включает «рекламу» в свои статьи с реальным содержанием.
Под рекламой я подразумеваю не платные баннеры, а соответствующие внутренние рекламные материалы, такие как исследование зарплат в службе поддержки клиентов за 2017 год.
Это умный способ привлечь внимание к вашим предложениям премиум-контента, не проявляя при этом агрессии и спама.
В дизайне внутренней статьи используются большие высоты строк и отступы, чтобы контент мог дышать и его не было слишком сложно читать.
Я также большой поклонник раздела «Дополнительное чтение». Это простой способ продолжить путь пользователя к другим публикациям и увеличить время пребывания на странице.
Вывод
Всегда думайте в первую очередь о пользователе. Используйте это вдохновение для дизайна блога, чтобы помочь им разобраться в вашем контенте и устранить любые отвлекающие факторы, которые могут отвлечь их от поставленной цели.
Самая важная часть любого дизайна - это тестирование его на конкретных пользователях, чтобы убедиться, что это тот опыт, который им нужен, и тот опыт, который нужен вашей компании.
Нужна отправная точка? Расскажите нам о нашем пакете оптимизации блога, который может (и уже!) обеспечил нашим клиентам в три раза больше конверсий и трафика.