Дизайн блогов - практические рекомендации, примеры лучших блогов, правила оформления
Отборные материалы о дизайне, seo, wordpress

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

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

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

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

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

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

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

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

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

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

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

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

1. Хедер


9643e5d7

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

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

Как примеры

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

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

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

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

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

2. Фон

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

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

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

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

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

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

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

N.B. Очень нежелательно расположение ленты анонсов на главной не в один столбик, а в 2 или 3. такая структура непривычна пользователю, да и как-то неудобно.

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/

 

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



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

  1. пишет:

    Хорошая подборка. Все грамотно и …красиво=)

  2. пишет:

    “Правда Терехов очень хорошо продумал.” Это дизайнер хорошо продумал. :-) А Алексей платил.

    • ETNO пишет:

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

  3. пишет:

    если вас не затруднит оцените дизайн моего блога, ваше мнение невероятно интересно.

    • ETNO пишет:

      в целом, дизайн уникальный и не похожий на другие – это плюс. Все элементы крупные и много пространства – это тоже хорошо. А теперь о плохом. Фон – синий тон норм, но сама текстура немного уже устаревшая. Помню один мой знакомый называл подобные текстуры – как дешевые обои в комуналке. Шапка – высота хорошая, не напрягающая, но сама графика шапки – не интересная, похожа на скаченный векторный клипарт с варезников. Логотип – такое впечатление, что вы увеличили растровую картинку и немного расплывчатым стал. Далее, сайдбар – как-то мало у вас рубрик, не знаю даже хорошо это или плохо. Как-то малоинформативный сайдбар вышел. Шрифты – вот не люблю я verdana 14px – когда вердану делаешь 12 пикселей, то ещё норм, а когда 14 – как-то великоват он мне кажется, но это мое личное мнение, можете не прислушиваться. Далее – комменты, сами комменты ещё норм, но форму стоит как-то улучшить, особенно отсутствие пространства между полями. Ну и фавиконку обязательно поставить свои, а не друпаловскую.

      Из 10 баллов, я бы поставил за дизайн где-то 4-5 баллов. Ну а чтобы вы не говорили, что критиковать проще простого, я немного помогу. Если вам нравится 3д элементы в вебдизайне, посмотрите эти сборки –

      Может что-то додумаете

  4. пишет:

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

  5. пишет:

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

  6. пишет:

    Здравстуйте. Вы не могли бы откритиковать мой блог.

  7. пишет:

    Потрясающие сайты, блин так хочется тоже такое красивое сделать.

  8. пишет:

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

    • ETNO пишет:

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

      • пишет:

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

  9. пишет:

    Можете посмотреть мой блог?

  10. пишет:

    А что если поменять дизайн на такой? Как вам?

    • ETNO пишет:

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

  11. пишет:

    В смысле, что не до оформлено по вашему? Какой у вас браузер вроде на всех проверил кроме SAFARI?

    • ETNO пишет:

      лиса. посмотрите на форму подписки, она наехала на шапку и многие разделители как-то близко к тексту.

  12. пишет:

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

    • ETNO пишет:

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

  13. пишет:

    Да, не срослось у меня что-то путное сделать с тем вариантом дизайна. Сделал новый диз, как вам?

    • ETNO пишет:

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

  14. пишет:

    Спасибо, за советы. наверное забью на эти дела, есть оформления и по хуже. А там будет видно…

  15. пишет:

    Слепил еще один дизайн. Думаю остаться на нем, а то что-т меня понесло кривые шаблоны делать)

  16. пишет:

    Спасибо за совет!

  17. пишет:

    Кстати у тебя классный хедер с менюшкой, может расскажешь, как можно сделать подобный?

    • ETNO пишет:

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

  18. пишет:

    Очень хороший обзор – понравился!
    Позволю себе дать вам совет, по дизайну вашего блога.
    Уменьшите контраст между контентной частью и фоном.
    Глаза режет пока прочитаешь.
    Я бы осветлил фон.

  19. happybolt пишет:

    На вашем сайте графические файлы темы больше 170 КБ
    На sizam-design.com больше 200 КБ
    Изображение сказочного водоема конечно прекрасно, но не много ли КБ?
    Какой максимум для размера графических файлов существует?
    То есть без учета изображений в статьях, в слайдере…
    В тех сайтах, что вы делаете на заказ – что важнее клиентам: крррасота или быстрота загрузки?

    • ETNO пишет:

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

  20. happybolt пишет:

    Светлячки, которые летают вокруг фонаря – просто восхитительны!
    Я их сразу не заметил

Смотреть все
ВНИМАНИЕ