Дизайн блогов — рекомендации, примеры, техники

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

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

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

• 1. Структура блогов (примеры, способы реализации, обзор главных функциональных частей)
• 2. То, что поможет сделать ваш блог узнаваемым и живым (интересные трюки и технологии, а также примеры)
• 3. Примеры лучших блогов
• 4. Разбор полетов или обзор некоторых топовых блогов рунета
• 5. Выводы.

Итак, начнем.

Структура блогов

Любой блог должен иметь функциональные части. Я выделяю такие: фон, хедер, контентная часть (обычно с лентой постов), сайдбар, футер. Конечно же, иногда некоторые части игнорируются, но все же большая часть блогов имеет их все. Но перед тем как все их рассмотреть, мне бы хотелось рассказать о ещё одной важной теме — структуре верстки блога (layout). Основной вопрос состоит в том делать ли верстку для блогов резиновой или же выравнивать по центру с шириной 900-1000, как принято на большинстве сайтов.

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

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

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

Вернемся к теме и перейдем к функциональным частям блога.

1. Хедер

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

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

Как примеры

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

Такое решение отлично подходит для сайтов ИТ-тематики.

Также главные ссылки можно не отделять от хедера, а сделать тоже графическими.

Также стоит сразу позаботится об местах для баннеров. Баннеры часто отлично смотрятся именно в хедере. Вот вам пример

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

2. Фон

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

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

3. Контентная часть

Обычно содержит ленту постов.

Здесь я бы обратил внимание прежде всего на шрифты. Заголовки делайте крупными и интересными, можно на нестандартных шрифтах. Шрифт самого контента делайте всегда стандартными легкочитаемыми шрифтами, вроде Arial, tahoma, verdana. Обратите внимание на оформление даты, а также ссылок на теги, рубрику, автора.

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

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

4. Сайдбар

Обычно на блогах ставят 1 или 2 сайдбара. Все схемы рассматривать не буду, опишу 2 наиболее удачные по моему мнению.

первая это 2 сайдбара: левый и правый + контент посередине. Пример такого сайдбара можно увидеть на сайте

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

Второй тип расположения сайдбара — один сайдбар в правой (реже левой) части сайта. Пример ниже

Такой тип наиболее универсальный и практичный. Помогает экономить много пространства, так как вывод разделов, популярных записей и т.д. осуществляется обычно через вкладки на jquery. Я рекомендую такую схему расположения элементов в правом сайдбаре начиная сверху: подписка на RSS или же другие ссылки наиболее важные для вас; баннеры или реклама; вкладки с рубриками, популярными записями, последними комментариями; теги и дополнительные блоки.

5. Футер

Сюда помещаем ещё раз название сайта, можно контактные данные + к примеру ссылки на ваши другие сайты или сайты друзей.

Вообще футер можно оформить стильно в соответствии с шапкой.

Если же ищите вдохновение для оригинального футера, то советую глянуть

Со структурой закончили. В конце хотелось бы сказать, что взгляд пользователя обычно перемещается в виде буквы Z, а значит самым значимым местом является левый верхний угол куда стоит поместить лого, а также графику, которая создает бренд вашего сайта + в первый экран должен входить хотя бы первый пост. Далее верхний правый угол, куда следует поместить call-to-action ссылки или кнопки (например подписку на РСС или же кнопку на покупку вашей книги).

Идем дальше

Техники, которые сделают ваш блог мегазвездой

1. Цвет

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

также можете глянуть о том, что каждый цвет означает.

2. Текстуры, векторные элементы

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

2. Размер

Можете попробовать поэкспериментировать с контрастом размеров разных элементов, например, с персонажами.

3. Логотип

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

4. Проработанные мелкие элементы сайта

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

4.1 Пагинация

Красиво прорисованная пагинация всегда говорит о том, что в дизайна сайта вложили немало усилий и делает его более дорогим

4.2 Виджеты с вкладками

Виджеты с вкладками очень хорошо экономят пространство и выглядят весьма симпатично

4.3 Оформление блока об авторе или контактных данных

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

4.4 Ссылки на похожие или популярные записи в конце поста с миниатюрами

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

4.5. Оформление комментариев

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

также можете глянуть подборку из более чем

4.6. Оформление кнопки rss

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

Можно даже аннимацией

Советую глянуть ещё , а также вот такую огромную

4.7 Оформление элементов статьи

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

Если не хотите сильно заморачиваться, то можете попробовать этот

4.8 Фавиконка

Не забываем и об этом важном элементе. Если не умеете делать, то расскажу простой способ. Готовите небольшую картинку, идете на сайт favicon.ru — заливаете картинку, получаете фавиконку, которую нужно вставить в корень сайта.

Переходим к следующему пункту.

3. Примеры лучших блогов

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

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

4. Потрошилка блогов рунета

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

1.

Создавался в студии блогоарт, поэтому имеет множество элементов дизайна присущие этой студии. В целом производит хорошее впечатление, все светлое и симпатичное. Если бы не одно большое НО — обилие рекламы. Ну фиг с ней с той растяжкой и баннерами 468*60, но вот этот огромный небоскреб справа убивает напрочь диз и создается впечатление, что в первом экране больше рекламы, чем текста. Нехорошо Димка как-то.

Но необычно и интересно смотрится футер

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

2.

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

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

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

3.

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

Понравилось также оформление сайдбара. Хорошо оформлены вкладочки. Понравился также шрифт текста и расстояние между строчками.

А теперь о нехорошем. Зеленый ядовитый цвет фона — но на это ещё можно закрыть глаза, так как цвет приглушенный и имеет текстуру травы. Но вот поставить комментарии от вконтакте — ужос.

Паша, верни человеческие комменты людям.

4.

Симпатичный стильный дизайн на основе темы glow от elegantthemes.com. Хорошо подобраны цвета, логотип. Большие и яркие кнопки подписки в сайдбаре. Хорошо используется пустое пространство между блоками и строками текста, что создает впечатление воздушности и легкости.

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

5.

Чем мне нравятся все сайты Маула — это то, что все они имеют единный стержень в стиле, но при этом не копируют друг друга на 100%. Очень стильно и хорошо поддерживает бренд.

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

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

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

И все бы отлично на сайте — но эта огромная шапка с Одри. Я понимаю, Маул, что ты от неё без ума (а может, это просто твой маркетинговый ход), но зачем же так навязывать свою любовь читателям. Уменьшить шапку по высоте где-то в 2 раза — было бы отлично. А то даже на широкоформатном мониторе я вижу в первом экране только промо-иллюстрацию с Одри, баннеры и кусочек поста.

6.

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

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

Что не нравится — комменты. Что сама форма, что сами комменты.

7.

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

А какой отпадный футер!!!!!!!!!

Сразу видно, что работал профи-дизайнер.

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

Ну и ещё увеличил бы line-height (пространство между строками текста), а то сильно сливается.

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

5. Выводы и ссылки

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

Какой идеальный дизайн для блогов? Каждый видит что-то свое, на 100% всем не угодишь. Но основные признаки можно выделить:

• Бренд. Это может быть и красивый логотип, интересная графика с персонажем или иллюстрации
• Хорошо подобранные текстуры фона. Чтобы и не мешали читать, при этом подчеркивали дизайн и контент
• Функциональность. Сюда бы я отнес информативность и оформление сайдбара, ссылки на похожие записи, и т.д.
• Типографика. Легкие, хорошо читаемые шрифты и красивые заголовки.
• Хорошо проработанные мелкие элементы дизайна, а также комментарии и формы.
• Ну и не забывать, что content is a king

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

P.S. Наверное вы спросите — а чего ж ты не сделал себя кайфовый дизайн, раз такой спец. Ответ прост и банален — не хватает времени. Решил, что пока лучше тратить время на качество наполнения, а не дизайн, но развивать текущий буду, пока не надоест он совсем.

Ну и напоследок, немного литературы

http://www.incomediary.com/make-your-blog-stand-out-from-the-crowd/
http://www.problogdesign.com/design/7-elements-to-make-your-blog-look-great/
http://www.1stwebdesigner.com/inspiration/blog-designs-design-functionality/
http://www.instantshift.com/2009/09/13/70-fresh-and-inspirational-blog-designs/
http://www.blogdesignblog.com/blog-design/5-simple-ways-to-make-your-blog-design-pop/
http://www.blogdesignblog.com/blog-design/how-to-blog-design-style-guide/

 

Похожие статьи:

• 90 лучших photoshop layout и tutorials
• Блог клиенты для Вордпресс: Post2Blog
• В поисках идеального каркаса для сайта — гибридная ширина макета