5 простых способов улучшить дизайн любого блога

августа 19 10:36 2012

Здравствуйте, уважаемые читатели блога Business-vZakone.ru. Про дизайн блога и его важность сказано и написано много. Блуждая по просторам буржуйнета, я набрел на блог известного западного веб-дизайнера Рафаля Томала. Понравилась статья, в которой он дает 5 простых рекомендаций по улучшению дизайна. Я решил, что это будет полезно знать каждому блоггеру, и перевел статью для вас, уважаемые читатели. Желаю приятного чтения.

Автор статьи: Рафаль Томал

Ссылка на источник: http://rafaltomal.com/5-easy-tips-to-improve-every-blog-design/

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

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

1. Увеличьте заголовки

Большинство людей сканируют контент на сайте (да и не только на сайте, но еще и в газетах, журналах и т.п.) по статейным подзаголовкам. И этот процесс можно значительно упростить.

Убедитесь в том, что ваши заголовки и подзаголовки достаточно велики по своим размерам и ясны для понимания. Запомните правильную иерархию — Н2 больше чем Н3 и т.д.

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

Посмотрите пример на картинке ниже:

5 простых способов улучшить дизайн любого блога

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

2. Усильте контраст

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

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

Посмотрите пример на картинке ниже:

5 простых способов улучшить дизайн любого блога

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

3. Оставьте больше свободного пространства

Не пугайтесь свободного пространства! Во-первых, установите оптимальное расстояние между основным контентом и краями страницы. Оно должно составлять примерно 20 px. Недавно на своем блоге в качестве стандарта я установил это расстояние в 30-40 px.

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

Также не забудьте про свободное пространство между элементами контента:

  • вокруг изображений (по меньшей мере 20 px),
  • до и после цитат,
  • между абзацами (стиль «margin-bottom» может быть таким же как значение свойства «line-height»),
  • до подзаголовков.

Посмотрите пример на картинке ниже:

5 простых способов улучшить дизайн любого блога

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

4. Устраните отвлекающие факторы

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

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

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

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

5 простых способов улучшить дизайн любого блога

5. Сделайте удобную навигацию

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

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

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

Вывод

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

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

write a comment

17 комментариев

  1. Николае
    августа 20, 13:22 #1 Николае

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

    Reply to this comment
  2. Марина Антонова
    августа 20, 16:21 #2 Марина Антонова

    Спасибо большое за советы. Очень актуально. Проверю свой сайт в соответствии с этими советами.

    Reply to this comment
  3. Александр Приц
    августа 21, 00:05 #3 Александр Приц

    Простые и не замысловатые приемы увеличат желание читать. Все верно.

    Reply to this comment
  4. Елена
    августа 21, 02:03 #4 Елена

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

    Reply to this comment
    • Альберт Александров
      августа 21, 22:17 Альберт Александров Author

      Елена, чтобы изменить шрифт заголовка статьи, откройте файл single.php и найдите в нем вывод заголовка. Например, у меня заголовок выводится так (ключевое слово «title»)

      h1 class="entry-title">< ?php the_title(); ?>

      Теперь чтобы изменить шрифт, нужно дописать стиль, который задает стиль шрифта — font-family: Verdana, Arial, Helvetica, sans-serif

      Это нужно дописать в тег h1:

      h1 style="font-family: Verdana, Arial, Helvetica, sans-serif" class="entry-title">< ?php the_title(); ?>

      Поступайте по аналогии, Елена. Если что-то непонятно, спрашивайте

      Reply to this comment
  5. Алексей
    августа 21, 13:14 #5 Алексей

    Альберт!!!

    Огромное спасибо за полезную статью!!! *THUMBS UP*

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

    Заходите вечером в гости... 😉

    Reply to this comment
  6. Лысенко Евгений
    августа 22, 10:09 #6 Лысенко Евгений

    Согласен со всеми пунктами. Стараюсь их сам применять, я теперь еще раз убедился, что стараюсь правильно ;).

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

    Reply to this comment
  7. Анастасия
    сентября 03, 20:44 #7 Анастасия

    Отличная статья, все пункты к счастью выполнены кроме подзаголовков, будем править :-)Спасибо!

    Reply to this comment
  8. Надежда Пинчук
    сентября 19, 00:21 #8 Надежда Пинчук

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

    Reply to this comment
  9. Александр
    октября 21, 19:17 #9 Александр

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

    Reply to this comment
  10. Сергей
    июля 03, 03:50 #10 Сергей

    Интересная статья, насчет отвлекающих факторов, ошибка многих новичков в блогостроении.

    Reply to this comment

Add a Comment

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.