by Margarita Maslova

January 16, 2015

О дизайне блогов / Blog design


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

Я занялась ведением собственного блога совершенно спонтанно, пойдет - не пойдет. Пошло). Меня буквально захлестнуло это занятие, в голове постоянно мелькают полки моего гардероба, и придумываются лучки-чесночки для следующих постов, темы, которые могут быть вам интересны. После написания первого поста я пересмотрела тысячи фэшн-ресурсов, многие из которых отправились в избранное, а некоторые адреса тут же забылись. Для меня крайне важен внешний вид блога:  это последствия профильного образования и "аллергии" на плохой дизайн. 
Я сторонник минимализма в "вебе", в чем вы можете убедится на страничке моего портфолио на Behance.
Особенно важно отсутствие лишних отвлекающих деталей в блогах о моде, где очень много фотографий автора, разных подборок, картинок и даже видео. Когда я попадаю в блоги, бэкграунд которых усыпан красными цветами, летают флешовые бабочки, а шапка пестрит сердечками, мне перестает быть интересен автор, пусть даже у него интереснейший контент. Я тут же этот шедевр дизайна закрою и больше никогда не вспомню о нем. О каком стиле и вкусе может рассуждать владелец такого сайта? Зачем мне прислушиваться к его советам? 
Внешний вид блогов - это наша визитная карточка, это образ всего нашего дела в целом, оболочка,  объединяющая все фотографии и тексты под одной крышей.  Как я могу читать модные советы блоггера, ее рекомендации на тему стиля и красоты, когда на меня летят со всех углов веб-страницы розовые туфли, так еще и под музыку!?
Вообще большинство действительно хороших блогов с качественными фотографиями, самобытном стилем автора и интересной подачей информации отличаются локоничным дизайном, и, в основном, - это ресурсы иностранных авторов.
Спустя некоторое время после рождения моего блога я очень пожалела, что завела его именно на платформе Blogger, а не WordPress, потому что столкнулась с колхозными шаблонами, из которых я выжила максимум и все равно не была удовлетворена. На какие только HTML-хитрости я не шла чтобы хоть как-то "вырубить" из него эту "топорность", но, простите за выражение,  "из го.на конфетку не сделать", как ни старайся. 
Озадаченная этим вопросом, я открыла для себя нестандартные шаблоны под Blogger в стиле WordPress. Оказалось, создавая блог на платформе Blogger, совершенно не обязательно пользоваться стандартными темами, предложенными админ-панелью, можно просто скачать готовый шаблон на сторонних ресурсах и установить его через панель инструментов. Ставятся такие шаблоны легко, но придётся погрузиться в страшный, на первый взгляд, язык HTML, чтобы настроить панель навигации, вставив свои ссылки и названия разделов, при желании поменять цветовую гамму и пр. 
Сначала это покажется вам очень сложным, вы рискуйте запутаться в кодах (обязательно сохраняйте резервную копию шаблона перед тем, как вносить какие-либо изменения в код), но спустя месяц-два, вы будете свободно ориентироваться в исходном коде своего блога, с лёгкостью корректируя цветовую гамму, меняя шрифты, начертания, доробатывая какие-то мелочи. 
В процессе развития моего блога, я приобрела собственный домен, а также купила качественный шаблон, т.к. очень ревностно отношусь ко всему, что делаю, и не хочу, чтобы дизайн моего блога повторялся. Безусловно, купив шаблон, я не обезопасила себя от повторений, поэтому практически полностью переделала его под себя, сделав похожим на оригинал лишь по структуре. В дальнейшем, я планирую нарисовать свой дизайн и отдать программисту в разработку.

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

 1- Обесцвечивание  

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



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


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

 2- Долой вензеля!  

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

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

 3- Плоский дизайн 

После двух вышеперечисленных советов, многие могут задаться вопросом "А как же внести индивидуальность в свой блог?" Отвечаю: узнаваемость и индивидуальные черты вашему блогу могут придать шрифты (о них позже) и различные иконки.
Остановимся на иконках. Отдайте предпочтение модному в последнее время "плоскому" дизайну (flat design), который набрал популярность после выхода операционной системы Apple iOS 7. Он отличается отсутствием 3D - эффектов, поэтому и называется "плоским".
margarita_maslova_blog_design
Замена "пузатых" иконок соцсетей и кнопок, отбрасывающих тени больше своего веса на минималистичные плоские пиктограммы покажут читателям, что вы идете в ногу со временем, следите за трендами в сфере веб-дизайна (а вы должны это делать, если создали собственный сайт) и делайте блог более удобным для пользователей. Сайты с плоским дизайном загружаются быстрее и легко подстраиваются под экраны мобильных устройств, что в наше время крайне важно.
Для блога идеальным вариантом являются лаконичные значки соцсетей, окрашенные в основной цвет вашего дизайна, либо подсвечивающиеся в этот цвет при наведении.



 4- Текст 

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


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




Для логотипа в шапке с названием вашего блога можно использовать более затейливый шрифт:





Плагин для Google Chrome для распознавания шрифтов WhatFont. С помощью него можно узнать название понравившегося шрифта на любом сайте.
Шрифты можно скачать здесь бесплатно.

 4- Навигация 

Снова обратившись к моей любимой компании Apple, вспомним термин "интуитивный интерфейс", присущий их операционным системам. В вашем блоге пользователь должен ориентироваться на уровне рефлексов, расположение всех нужных ему элементов должно быть предсказуемо, он не должен искать каким образом можно подписаться на ваш блог, это нужно ВАМ, в первую очередь! И если он не найдет эту функцию в течении 5 секунд, он закроет ваш сайт и, есть вероятность, что забудет. 
Неважно, где у вас расположены иконки соцсетей - в боковой панели слева, справа, в шапке или на панели навигации, они должны быть на видном месте! Например, у меня они дублируются в панели навигации. Так же на видном месте должны находится "поиск" и "подписка". 
Для рассказа о себе лучше всего создать отдельную страницу, так называемый "профайл", а краткое приветствие разместить вверху всех гаджетов, если речь идет о платформе Blogger. Ниже можно разместить аккуратный виджет ротации ваших фото из Instagram:

Далее можно расположить популярные/последние посты, это даст дополнительную перелинковку и увеличит цифры статистики посещений. 
Затем может следовать архив: иногда интересно узнать с какого момента автор ведет блог и посмотреть что-нибудь из "старенького".
И только после всего этого уместно размещать виджеты с рекламными материалами, баннеры ваших партнёров и ротацию фотографий в Pinterest. 
Желательно иметь кнопочку "наверх" -  функция быстрого возврата пользователя в начало страницы.  Как ее установить можно прочитать здесь.
Кроме того, для простоты перехода между рубриками вашего блога, рекомендую завиксировать панель навигации (меню), чтобы она "прилипла" к верхней части экрана.

 6- Ноль эффектов 

Про очевидные вещи насчет анимации, играющей по умолчанию фоновой музыки и автоматически загружающегося флеш-ролика и говорить, может быть, не стоит, но я все же напомню. Поверьте, мигающая стразиками туфелька или хлопающая крылашками бабочка совершенно не украсит ваш сайт и не прибавит ему индивидуальности. Если вас и запомнят, то только с мыслями "Божешки боже, ну и пошлятина! А это еще блог и стиле?"
И уж никто не захочет получить выговор от начальника за безделие, после того как он услышал из вашего компьютера веселые напевы, которые включились при загрузке сайта, не спрашивая вашего желание послушать их. Можно разместить аккуратную пиктограмму с кнопочкой play, на которую пользователь может нажать при большом желании послушать вашу музыку. Но врятли оно у него возникнет, такие эффекты уже стали моветоном.
И в придачу ко всем нежелательным эстетическим последствиям, эти эффекты значительно замедляют загрузку вашего сайта, и большинство людей закроют его, даже не успев открыть.

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

Надеюсь мои советы будут вам полезны! 

Follow
SHARE:

32 comments

  1. Полезный, хороший информативный пост! Я так же все время пытаюсь что-то изменить в своем блоге, но понимаю, что пора обращаться к профессионалам, мои идеи иссякли..:) А разбираться в кодах html - нет, увольте не смогу..)
    Кстати, замечу, что у многих самых популярных блогеров - ну такая беда с центрированием текста, или пишут жирным шрифтом, ну ты поняла, в общем... :)

    ❤ www.ksenianova.ru ❤ 

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

      Delete
  2. Согласна практически со всеми моментами!
    Думаю, ты никого не обидела, а дала пищу для размышлений и хорошие советы.
    По поводу излишне ярких и пёстрых дизайнов - это просто изнасилование глаз! :))

    Кстати, я рада что есть люди, которые знают настоящее значение слова "пошлость". ;)

    ReplyDelete
    Replies
    1. Спасибо, коллега) я знала, что ты точно поймешь меня)

      Delete
  3. Маргарита, спасибо за пост и за профессиональное мнение! Вдохновляете на совершенствование своего блога))).
    Ваш новый дизайн блога - приятный глазу и одновременно в ногу со временем.
    Помню этот блог "я сама блоггер" - действительно, достаточно пестрый и перелинковок столько, что забываешь, о чем читал первоначально))), хотя содержание полезное.

    ReplyDelete
    Replies
    1. Аня, спасибо) рада, что понравилось) вот самое обидное, когда блоггер интересно пишет, а дизайн не соответствует!(

      Delete
  4. Марго, отличный пост, очень нужный) Понравился твой дизайн, лаконичный и стильный! Я и сама давно уже хочу изменить дизайн своего блога, но мало разбираюсь в этом, боюсь испортить все, вот и не трогаю))))

    ReplyDelete
    Replies
    1. Юлечка, твой блог и стиль мои фавориты!) всегда слежу за обновлениями и с удовольствием смотрю на тебя!) не бойся, тут главное-эксперименты! Если будут вопросы, пиши мне вк, чем смогу помогу! Хотя у тебя вполне локаничный дизайн! Просто эти стандартные шаблоны-беда, беда!))

      Delete
  5. Я тоже очень критично отношусь к своему дизайну. Ты абсолютно права! К сожалению так, как мне бы хотелось, пока не получается сделать, нужно время. Но я стараюсь выжать все, что можно :)

    ReplyDelete
    Replies
    1. У тебя нет ничего критичного) это опять же, беда стандартных блоггер кит шаблонов, над которыми как не изгаляйся, нужного результата не получится( очень люблю твой блог)

      Delete
    2. Да, у меня есть куча мелочей, которые меня не устраивают, но вот пока иначе не сделать! На wordpress надо изучать все, привыкать заново. Может через какое-то время соберусь переезжать :)
      Спасибо,я к тебе тоже постоянно забегаю :)

      Delete
  6. Отличный пост, Рита!
    Дизайн очень важен, как составляющее любого сайта на самом деле. Важна и навигация, и палитра и масса еще других нюансов. Очень здорово, что ты написала о них в этом посте. А блогспот, да, хромает от недостатка удобных настроек! Мой шаблон уже пополам треснул от всех изысканий)))))

    ReplyDelete
    Replies
    1. Наташ, спасибо!) вот я тоже настолько перекроить свой стандартный шаблон, что уже окончательно запуталась в этих кодах и поняла, что нужно корд нальет все поменять с нуля)

      Delete
  7. Как раз сейчас рисую дизайн своего блога и очень полезной оказалась ваша статья) У меня сейчас нет вообще никакого дизайна - просто шаблон. Ноль функционала и удобства никакого- прямо беда. Но вот появилась возможность заняться им вплотную и скоро все изменится))
    Пролистывая популярные блоги тоже заметила тенденцию минимализма и монохромности. Мне нравится, но я решила что мне нужно что-то более "живое" что ли..) В общем, надеюсь в скором времени посетителям не захочется "просто закрыть и забыть" мой блог )))))))

    ReplyDelete
    Replies
    1. Яна, люблю к вам заходить) нравится ваш стиль! Новый дизайн очень вдохновляет! Удачи вам в разработке и я рада, что мои советы вам пригодились!)

      Delete
    2. Отличный пост, я тоже немного пожалела на счёт Wordpress, но решила для себя остаться тут и доделать сайт по индивидуальной задумке и без излишеств. Спасибо за пост, узнала для себя новые моменты.

      Delete
    3. Индивидуальный дизайн -это вообще идеальный вариант!

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

    Я всю неделю ночами сидела в поисках новой хорошей бесплатной темы, потому что сама профессионалам объяснить не смогла.
    Стала разбираться в кодах. С психами, со слезами сделала всё сама за три ночи, хотя мне за эту работу предлагали баснословные деньги.
    Пришла к выводу, что самое настоящее желание позволяет свернуть даже электронные горы)
    Очень хороший информационный пост
    Шла прямо по пунктам, проверяя что совпадает в новом оформлении.
    Огромное Вам спасибо, Маргарита!)

    C уважением,
    Анастасия, автор блога Fashionlovin’

    ReplyDelete
    Replies
    1. Настя, как я вас понимаю!) сама ночами не спала, рылась в этих кодах, уже глаза просто вываливались! А толку не было( у вас ооочень классный дизайн! Прям в моем вкусе полностью!))

      Delete
  9. Пост на злобу дня,моя больная тема))))Рита,отличнейшее оформление блога!ты умничка,завидую белой завистью твоим талантливым ручкам,мне увы таких азов не постичь(((((

    ReplyDelete
    Replies
    1. Спасибо, Кристин) попробуй среди нестандартный шаблонов!

      Delete
  10. Рита, спасибо за пост, что называется "не сыпь мне соль на рану..." У меня как раз эта проблема, а исправить ее не хватает знаний блогпоста и отсутствие фоошопа:(((( Хотя очень хочется изменить внешний вид блога и сделать его более приятным глазу...

    ReplyDelete
    Replies
    1. ну поставить фотошоп проблемы не вижу, нужно еще уметь им пользоваться) А по поводу знаний блогспота: попробуйте порыться у девочки в блоге, она прям для чайников объясняет как сделать некоторые штуки. Это мне, правда, мало помогло, меня все равно бесило все) но можно многое поменять в лучшую сторону!
      http://sineokashome.blogspot.ru/2014/02/1.html

      Delete
  11. Веду блог уже 2 года, постоянно вношу какие-то небольшие изменения во внешний дизайн, но сейчас наступил момент, когда хочется глобальной переделки. Вижу в голове картинку того, как должно всё выглядеть, но пока попытки не заканчиваются успехом...Рита, у Вас замечательный блог, дизайн очень приятный и минималистичный(я сама сторонник минимализма). Рада, что нашла Вас))) И спасибо за ссылку на Лабораторию красивых вещей, возможно, это мне поможет сделать блог таким, каким я его вижу в своей голове))

    Заглядывайте в гости:
    www.elenaeller.com

    ReplyDelete
    Replies
    1. Спасибо, Лена) У вас тоже очень интересно! Я когда-то училась на дизайн интерьеров)

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

    ReplyDelete
    Replies
    1. Марина, согласна с вами, что если у блоггера крутой дизайн, но пишет он какую-то ересь, само собой внешний вид его не спасет! Обидно за блоггеров с интереснейшим контентом, у которых колхозный дизайн, портящий все общее впечатление.

      Delete
  13. Согласна с вами по всем пунктам! И, оценивая дизайн вашего блога, вам аплодирую. Я сама весь год сидела на blogspot, мучилась с настройками шаблонов под себя, пересмотрела уйму нестандратных тем от сторонних разработчиков. В итоге плюнула на все и переехала на Wordpress. Сейчас обживаюсь на новом месте, выглядит мой блог все еще не идеально (можете оценить www.perfectasia.ru), шрифты не настроены, стандартные виджеты моих групп в соцсетях упорно не хотят отображаться так как надо, но с этим уже можно работать!

    ReplyDelete
    Replies
    1. Оля, спасибо за аплодисменты)) У вас очень необычный интерфейс, но мне лично понравилось! Все удобно и выглядит отлично!

      Delete
    2. Спасибо, Маргарита! Приятно слышать это от дизайнера, у которого блог - загляденье. Интерфейс у моей темы 2-х вариантов: стандартный блог в виде ленты из постов и "журнальная страница" с разбивками на рубрики. Я выбрала последний, "журнальный" вариант, и пока что все нравится. Единственное - в мобильной версии блог пока что отображается криво.

      Delete
  14. Я тоже дизайнер, правда интерьеров. Когда-то у меня была своя компания и сайт) Был дизайн сайта, который мне очень нравился, он был простой, черно-белый, на главной странице сменялись 3 ч\б картинки - кухня, спальня, гостиная - мои работы, лого - тоже простой и минималистичный и пункты меню - портфолио, блог и т.д.
    В блоге же дизайна нет, как такового, честно, я хорошо работаю в 3д, но почти не умею рисовать в других программах. Поэтому обращаться куда-то, тратить деньги я пока не готова. т.к это просто хобби.
    Моё мнение - не должно быть ничего лишнего, отвлекающего от содержания, черный, белый. серый, надписи, никаких иллюстраций (они быстро надоедают). И мне реально всё равно какой портрет, какой пейзаж (дизайн, шаблон), если ничего не пестрит, в глаза не бросается. Потому что я постоянно в поиске вдохновения и искренне восхищаюсь талантом и способностями многих блогеров и не понимаю, при чем тут дизайн, если блог простой и скромный - всё в порядке. Я не знаю, может кто-то заходит в блоги на дизайн блога полюбоваться))) Тогда, конечно, другое дело)))

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

      Delete

Blogger Template Created by pipdig