VovkDesign

Блог Александры и Владимира Вовк

RSS лента
wp-puzzle

Обновление дизайна блога или Осень меня вдохновляет…

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

Новый дизайн

Шаг к переменам

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

график посещаемости блога

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

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

Что же изменилось?

Шапка

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

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

дизайн блога avovkdesign

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

Название и описание в центральной части, фокусируют внимание и знакомят посетителя с блогом и авторами. Плюс небольшой намек на «пасхальное яйцо» — фишка со значком RSS над точкой буквы i. Сейчас при наведении курсора просто выпадает ссылка на RSS-ленту. Хотелось бы обыграть поживее.

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

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

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

В правом уголке скромно приютился поиск по сайту. Скорее всего, рядом еще приживется ссылка на Карту блога.

Сайдбар

Боковая колонка блога также весьма изменилась. Теперь главное место отведено блоку с наиболее популярными статьями.

Активная оранжевая закладка хорошо обращает внимание на себя, сообщая о чем-то важном. Главная цель блока — привлечь посетителя к самым интересным статьям, заинтересовать дополнительным материалом и, как следствие, увеличить глубину просмотра блога и время пребывания. В Топ месяца выводятся наиболее обсуждаемые статьи за последние 30 дней. В Популярное можно найти самые просматриваемые статьи блога за все время. И на закладке Новое можно проследить за последними новыми публикациями.

сайдбар блога

Виджет с последними комментариями сообщит о горячих темах, где идет обсуждение. Этот блок и виджет с популярными статьями кроме своего прямого назначения, также призваны «оживить» блог и привлечь посетителя к активному участию.

Контент

В этой части, пожалуй, изменений совсем минимум.

Немного видоизменилась строка с мета-информацией о статье — поменялся шрифт, добавились иконки для каждой рубрики. Покрупнее их можно рассмотреть на странице определенной рубрики. Все иконки на блоге сделаны не картинками, а используется специальный шрифт Font Awesome — один из наиболее популярных.

В ленте анонсов видоизменилась кнопка Читать далее — теперь просто ссылкой с красивой иконкой руки.

Одна из моих любимых фишек — выезжающая справа кнопка В начало. И новые кнопки социальных сетей, позволяющие на месте поставить +1 или Like.

детали оформления

Что будет дальше…

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

Дорогие друзья!

Мы с Владимиром будем рады вашим отзывам!

Расскажите, что больше всего понравилось в новом дизайне, что вы считаете не самым удачным решением, что хотелось бы добавить/убрать, а что вовсе странно работает (нашли ошибку?).

А может вам порядком надоел этот минимализм? 🙂

Комментарии всего: 18

  • ДОбрый день. При смене дизайна использовались методы А/Б тестирования? Спасибо.

    • Нет. Я бы сказал, что в создании нового дизайна использовались долголетний опыт в сайтостроении Александры и мой опыт в аналитике 🙂 Так что в вопросе тестирования вся надежда на вас — читателей блога.
      Спасибо за информацию о найденном баге 😉

    • Добрый день, Иван. Нет, тестирование не проводилось. Решение принималось на нашем личном опыте

  • Здорово! И до обновления мне всё нравилось. Блог стал более функциональный, а рубрикатор перенесенный наверх, лучше подчеркивает тематику.

    Дополню от себя:
    1. Я долго крутился на логотипе, что бы иконка RSS появилась. В итоге у меня появляется просто надпись «RSS-лента», а не как на скриншотах.
    2. Миниатюры авторов в блок «Комментарии» смотрелись бы неплохо)

    • Игорь, спасибо за оценку!
      Потестируем с RSS. Скорее всего, из-за наложения слоев не во всех браузерах отображается.
      И про миниатюры авторов возьмем на заметку. В таком варианте блок однозначно еще больше «оживет».

  • Привет! Всё отлично. Новое всегда радует, хотя и старый дизайн был тоже ничего. Вообщем мне понравилось. Особенно — приятный цвет.

  • Александра, поздравляю с обновлением блога. Очень симпатично и функционально . Удачи и отличного настроения.

  • Александра, подскажите, как у вас сделан самый верхний блок с популярными записями. Информативный и места мало занимает в сайдбаре. Спасибо.

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

  • Отлично, Александра!) Буду ждать. Хочу такой блок поставить на новый женский журнал. Спасибо.

  • У меня аж слов нет! Вот уже 10 дней, как я любуюсь вашим блогом! С того самого дня, как я увидел Поворенка! Все у вас супер! Больше всего мне понравился идея с RSS лента на шапке. А могли бы как то оживить этот круглышок буквы i ? Ну например, чтобы она вертелась в виде типо планеты Земля. Думаю сразу бы лезло в глаза и более живое как бы было. Читать далее с рукой тоже классно смотрится! Еще сайдбар классный! Жаль предыдущий вид сайта вашего не видел и поэтому не могу сравнить, но думаю тот тоже был хорош, но этот более профессиональным стал!

    • Вадар, спасибо за отзыв. Фрагменты предыдущего дизайна видны на скриншотах в статье — это все, что осталось 😉
      RSS лента — постоянная анимация здесь не подойдет, слишком много внимания. Будем запускать ее только при наведении. А над Вашей идеей подумаем, спасибо за участие 🙂

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

    • Татьяна, конкретно в Вашем случае достаточно прописать в файле темы style.css вот такую строчку (вставляйте в самый конец файла):

      #header { text-align: center; }

      А в каждом конкретном случае зависит от верстки.

      • Александра, пробовала вставлять этот код в файл темы, но изменений никаких. Я жду по акции Seo- аудит моего сайта, может заодно и посмотрите как сделать название сайта по центру.

        • Татьяна, должно сработать. Не забывайте очищать кеш после внесения изменений в код, если установлен плагин кеширования.
          А сейчас ведь название уже по центру. Или Вы что-то другое имели ввиду?
          P.S. Аудит к верстке сайта не имеет значения. Разве что косвенно в плане проверки ошибок валидации, но не с расположением элементов 🙂

  • Очистила кеш после внесения кода. Спасибо за помощь.

Комментировать

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

wp-puzzle.com logo