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

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

Шапка блога

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

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

На месте Татьяны я бы уменьшил ширину картинки в шапке блога до 1100px, установив её по середине страницы браузера и под эту ширину подогнал бы каркас блога:

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

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

Я бы нашёл на просторе интернета клипарт деревянной таблички и написал бы на ней название блога:

или реализация с крынкой:

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

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

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

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

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

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

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

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

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

можно увеличить

Каркас блога

Каркас блога как я уже написал выше, я бы сделал в ширину 1100 пикселей и вот почему:

728px - левая ячейка с контентом (для баннера Google AdSense 728x90 )

300px - боковая колонка (для баннера Google AdSense 300x250 )

25px - боковые отступы по бокам и один между контентом и колонкой блога

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

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

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

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

2. Я бы убрал иконку календаря около даты, она как одинокий лебедь в пруду.

3. Можно убрать надпись опубликовано, ведь всем и так понятно, что рядом прописана дата публикации материала. Также я бы прописал дате серый цвет #999, чтобы она так сильна не выделялась в новостях:

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

5. Прописал бы основной ячейки новостей нижний внешний отступ в 45px, чтобы отделить пустым пространством одну новость от другой.

6. Привёл бы картинки новостей к единому размеру (к примеру 250x150 пикселей) и прописал бы им внешний правый отступ в 25px.

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

можно увеличить

Переключатели страниц блога

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

2. Внизу переключатели выравниваем по центру ячейки.

Боковая колонка блога

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

Теперь стоит обратить своё внимание на дополнительную информацию в ячейках.

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

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

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

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

Подвал блога

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

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

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

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

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

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

- картинка в шапке 902,28 КБ
- картинка в подвале 187,8 КБ
- фон блога 215,27 КБ

Плюс картинки в миниатюрах новостей, 71, 101, 84 кб и т.д а ведь вес этих изображений можно уменьшить в 2-4 раза, благодаря как я уже написал выше сервису TinyPNG , тем самым ускорить загрузку блога и пожалеть пользователей с мобильным интернетом.

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