10 элементов дизайна, общих для всех больших блогов

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

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

10 больших блогов

Чтобы дать вам некоторые достоверные данные, я решил использовать Mashable, TechCrunch, The Next Web, GigaOM, блог Сета, Copyblogger, Problogger, блог KISSmetrics, Freelance Switch и The Oatmeal в качестве примеров для этого поста.

Заголовок

Заголовки на девяти из десяти этих сайтов имели высоту 100 пикселей или меньше. Большинство из них включали логотип и строку поиска.

Логотип (10/10)

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

Логотип GigaOM.com находится в левом верхнем углу и ведет на домашнюю страницу.

Как реализовать логотип с гиперссылкой: Большинство тем WordPress (например, WooThemes, Thesis, Genesis и т. д.) позволяют загружать логотип через настройки дизайна темы, и он автоматически связывается с домом.

Поле поиска (6/10)

Шесть из десяти крупных блогов имели окно поиска в правой части заголовка. Блог Сета и Copyblogger располагают панель поиска в верхней части боковой панели. В блоге KISSmetrics и The Oatmeal нет механизма поиска.

Окно поиска TheNextWeb.com находится в правой части заголовка.

Как реализовать окно поиска: вы можете разместить панель поиска в виде виджета в области «Внешний вид» > «Виджеты» вашей темы. Если у вас нет заголовка виджета, это php для окна поиска:

<?php get_search_form(); ?>

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

Область содержимого

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

Социальные кнопки (слайдер) (10/10)

Все крупные блоги имеют кнопки социальных сетей, наиболее популярными из которых являются Facebook Like/Share и Twitter Tweet. Также популярны кнопки Google +1 и LinkedIn Share. Кнопки Digg, StumbleUpon и Reddit отображаются не так часто, как раньше.

И у Mashable, и у TechCrunch есть социальные ползунки в левой части контента, которые скользят вниз по мере прокрутки страницы. В IncomeDiary это тоже есть.

Значки обмена TechCrunch.com находятся на левом поле и прокручивают страницу вниз.

Как реализовать социальные кнопки: если вы предпочитаете не запрограммировать кнопки в своей теме, я рекомендую плагины Like, Easy Twitter Button и WordPress Google +1 Button. Используйте плагин Sharebar, чтобы поместить прокручиваемый социальный ползунок в левой части вашего контента.

Похожие сообщения (7/10)

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

FreelanceSwitch.com содержит три связанных сообщения в нижней части каждого сообщения.

Как реализовать похожие посты: я полностью поддерживаю плагин «Похожие посты» Роба Марша. Вам также понадобится плагин Post-Plugin Library, чтобы его серия плагинов работала на вашем сайте.

Призыв к действию в нижнем колонтитуле публикации (5/10)

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

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

Обычно TheOatmeal.com призывает к действию купить книгу The Oatmeal.

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

Боковая панель

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

Включение боковой панели (8/10)

Восемь из десяти этих сайтов имеют подписку на боковых панелях, а пять из них находятся вверху. Слова « Бесплатные обновления » и « Подписаться » — самые распространенные заголовки и призывы к действию.

Подписка на Copyblogger.com находится в верхней части боковой панели с заголовком БЕСПЛАТНЫЕ ОБНОВЛЕНИЯ и призывом к действию: ПРИСОЕДИНЯЙТЕСЬ К НАМ.

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

Популярные посты (7/10)

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

Блог KISSmetrics показывает их популярные посты на боковой панели.

Как внедрить популярные посты: используйте плагин Popular Post Роба Марша, чтобы продемонстрировать свои самые просматриваемые посты. Установите плагин, и вы найдете виджет «Популярные записи +», который можно просто перетащить на боковую панель.

Ссылки на социальные сети (9/10)

Девять из десяти блогов содержат ссылки на свои профили в социальных сетях, наиболее популярными из которых являются Twitter и Facebook. Другими известными пользователями являются YouTube, LinkedIn, StumbleUpon, Flickr и Tumblr.

На боковой панели Mashable.com есть кнопки «Мне нравится», «+1», «Подписаться», LinkedIn, YouTube, Stumble и RSS.

Как разместить ссылки на социальные сети: Здесь вы можете создать Facebook Like Box. Или вы можете получить бесплатные значки социальных сетей, чтобы сделать свои собственные кнопки здесь.

Товары/объявления (9/10)

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

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

Как добавить продукты и рекламу: разместить свои продукты на боковой панели так же просто, как написать HTML-код и поместить его в произвольный текстовый виджет. Чтобы показывать вращающиеся объявления на боковой панели, я рекомендую плагин OIOpublisher.

Нижний колонтитул

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

Категории или другие ссылки (5/10)

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

Problogger.net перечисляет все свои категории в нижнем колонтитуле, чтобы помочь посетителям ориентироваться в контенте.

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

Больше вопросов?

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

Подробнее: «13 советов по дизайну блога на уровне экспертов для начинающих»