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

И нашей первой ласточкой будет блог Галины Нагорной - Смешная Школа Блогеров.

Не буду вас томить, приступаю к разбору оформление блога.

Фон блога

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

Во-первых, попадая на такой блог складывается впечатление, что перед тобой блог посвящённый домашним животным, в частности кошкам.

Во-вторых, на данном фоне плохо читается текст, его практически не видно:

В-третьих, картинка фона имеет шов между первой и последующей повторяющейся картинкой:

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

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

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

Фон шапки блога

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

Во-первых, вес такой картинки составляет 300,14 КБ, вновь лишняя нагрузка на блог, я бы ещё понял если бы там красовалась красивая картинка на тему блога.

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

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

Либо заменил бы данную картинку шапки, к примеру на клипарт рисованного школьного класса, где на школьной доске мелом было написано "Смешная Школа Блоггеров" с двумя буквами Г.

Помню данную идею я реализовал ещё в 2009 году, когда занимался чатами, вот одна из моих работ.

Я думаю суть идеи вы поняли!

Логотип блога и его название

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

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

К чему может привести неправильно написанные слова на блоге, можно прочитать в заметке Блогер или блоггер, а как правильно?

На месте Галины я бы убрал название домена Мyrassilka из горизонтальное меню, и остановился бы на варианте Смешная Школа Блогеров, а около данного текста установил бы символ блога.

Горизонтальное меню блога

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

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

Советую многим читателям прочитать заметку на тему Ошибки в горизонтальном меню.

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

В результате у меня получилась вот такая шапка блога:

Оформление каркаса блога

Автор данного шаблона для блога (не Галина) по неизвестным мне причинам решил прописать в каркасе серый цвет фона.

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

Я бы отдал своё предпочтение белому фону данного каркаса блога.

Оформление миниатюр новостей блога

К сожалению с оформлением новостей блога все очень печально:

1. Два заголовка новостей. Зачем придумывать велосипед, пользователь не дурак, он и так поймёт по большому шрифту и цвету ссылки, что передним заголовок новости.

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

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

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

5. Разные по размеру картинки, отсутствует единый размер и стиль оформления, в одной новости картинка имеет размер 300×178 пикселей, в другом 271×400 пикселей.

Можно сделать все иначе, просто, понятно и со вкусом:

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

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

1. Я сразу заметил, что в боковой панели блога отсутствует вертикальное меню выбора категорий, а это очень тревожный звоночек.

Представьте такую ситуацию, пришёл на блог пользователь которому интересно посмотреть материал по категории "Технические моменты блога" и ему не интересен другой контент размещённый на страницах блога.

Что ему делать и как быть?

Просматривать миниатюры новостей и искать ссылку на нужную категорию, а что если ссылка отсутствует или чего хуже её нет, а есть только название категории.

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

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

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

3. Ячейки с книгами, одна картинка книги весит 240,43 КБ, другая 398,34 КБ, нет никакого смысла уменьшать картинки благодаря html-css коду, размер картинок надо сразу сжимать в Фотошопе до нужного размера.

Подвал блога

Что касается подвала блога, я не стал бы устанавливать счетчики статистики вертикально, а установил бы их горизонтально:

с левой стороны подвала вся информация о блоге
с правой стороны подвала счётчики статистики

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

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

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

картинка кликабельна

Плюсы блога

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

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

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

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

- надпись "Смешная школа блоггеров" наезжающая на заголовок первой новости в адаптивном дизайне

- маленькая кнопка наверх

- по центру ячейки не выровнены картинки книг и лишняя тень вокруг них

- отсутствие иконки и подписки на RSS ленту

- неудобная с точки зрении юзабилити форма добавление комментариев

- лишняя тень у картинок в контенте блога

- отсутствие фавикона

- многие английские слова не переведены на русский язык

- форма подписки не выравнена по сетке по отношению других ячеек в боковой панели блога

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