Посоветуйте, что стоит поменять в дизайне блога

Ведение блога 09.02.2014 Комментарии: 69 13346 просмотров

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

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

Коррекция нижней части сайта (футер)

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

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

Элементы футера, которые стоит изменить

С текстом же об авторском праве получилась такая сложность – он плохо виден. Белый шрифт на бирюзовом фоне хорошо читается, если шрифт достаточно большой. У меня же он совсем маленький. Как думаете, стоит ли увеличить шрифт или может вместо него просто добавить свое фото как в шапке блога и указать несколько личных данных (почта, скайп, размер мозга и ширина плеч. :) )?

Незаметный неоновый афоризм. Да, есть такая штука в футере – в ней содержится умная мысль, которая является путеводной звездой в моей жизни:

Мой любимый афоризм на блоге

Насколько я понял, не все читатели ее заметили – хоть афоризм и красиво оформлен, он плох читаем. Получается как бы расплывчатое изображение, а не четкий текст. Возможно, я изменю его оформление. Как вариант, можно его сделать или белым, или темным (как это видно на примере рядом расположившихся с афоризмом слов “дизайн и разработка”). Как думаете, друзья, какой вариант лучше?

Советы и замечания по сайдбару (правая боковая часть блога)

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

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

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

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

Первый вариант нового сайдбара

+ концепция дизайна шаблона остается прежней – к ней уже многие читатели привыкли;

вложенные виджеты не сразу показывают свое содержимое на не открытые разделы;

2-й вариант – второй сайдбар. В этом случае сегодняшний сайдбар делиться на две части – левую и правую. В левой будут размещены рекламные блоки (мои инфопродукты, партнерки), а также топ-комментаторов. В правой будут расположены все виджеты, кассающиеся контента блога (социальные аккаунты, рубрикатор, блок полезных и популярных статей, канал Ютуб, блок “Рекомендую”). Таким образом получится гармоничное равновесие по тематике виджетов и длине страниц:

Второй вариант нового сайдбара

+ понятное тематическое разделение виджетов на рекламу и контент блога;

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

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

Предложения по оформлению страниц рубрик и постами

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

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

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

Сравнение разной высоты шрифта блога

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

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

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

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

Варианты оформления анкоров ссылок в тексте

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

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

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

Увеличение шрифта для параметров статьи

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

Интересные предложения в дизайне шапки блога

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

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

Меняем высоту шрифта в горизонтальном меню блога

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

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

Поэтому адрес “workformation.ru” так и остался. Позже я сделал первый свой фавикон (кто из старожилов моего блога его еще помнит?), а затем при появлении нового дизайна окончательный вариант – WF. И логотип блога стал таким же – можете еще раз взглянуть на него в шапке сайта.

Но сам ресурс имеет другое название – “Записки seo-специалиста”. В связи с этим поступило несколько соображений на тему нового фавикона и логотипа блога. И даже появился один оригинальный вариант в готовом виде. Его сделала Наташа, автор блога “Уроки по Фотошоп для начинающих“:

Вариант логтипа блога, предложенный Наташей

Как видите, автор этого логотипа решила обыграть само название моего сайта. И мне кажется, оно получилось не только отражающим суть ресурса, но и оригинальным. Конечно, его можно покрутить, что-то исправить. Например, было предложение сделать каждое слово своим цветом согласно шаблону блога (белый, красный, бирюзовый). А как Вам этот логотип? Нравится? Может есть тоже интересные идеи?

Подытожим

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

Чтобы Вам было проще ориентироваться во всех вышеописанных изменениях, а также не повторяться со своими предложениями, ниже я написал перечень уже показанных рекомендаций:

  1. Корректировка блока статистики в футере – добавить суточную статистику посещаемости, больший шрифт в тексте об авторском праве.
  2. Изменение оформления неонового афоризма в футере.
  3. Новая компоновка сайдбара – вложенный вариант или вариант с двумя сайдбарами.
  4. Вместе улучшим дизайн блога!Увеличение шрифта основного текста блога.
  5. Изменение цвета внутренних ссылок.
  6. Оформление параметров статьи.
  7. Увеличение шрифта/цвета букв в меню.
  8. Новый фавикон, отражающий суть блога.
  9. Новый логотип, отражающий название блога.

Давайте вместе сделаем блог “Записки seo-специалиста” лучше! :)

С уважением, Ваш Максим Довженко

Понравилась статья?

Подписывайтесь на новости сайта!

Получайте новые статьи блога прямо на свой e-mail:

Вверх