Как я сменил дизайн своего сайта

Ведение блога 24.04.2013 Комментарии: 82 14511 просмотров

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

Мои требования к дизайну сайта

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

О редизайне сайта я задумывался с нового года. Все дело в том, что прошлый шаблон блога мне очень нравился. Он был в меру строгий, со своими интересными фишками и индивидуальным стилем. Каждый элемент был продуман, каждый шрифт сидел на своем месте. Но было у него две беды. Первая – это большое наличие ошибок и неправильная отрисовка страниц блога с точки зрения поискового продвижения. Мне пришлось вручную исправлять многие недоработки. Например, сам исправил тег h2 на тег h1, в котором находилось название постов. Вторая сложность – это нехватка в старом шаблоне важных элементов, которые использует каждый блоггер. Мне вручную пришлось оформлять подписку на статьи блога, добавлять социальные кнопки и т.д. Поэтому смена дизайна сайта была не за горами, но я ее планировал сделать через 5-6 месяцев. Но с выходом марафона Надежды Ковальской “Тысячник 2.0.”, я пересмотрел свои планы и решил как можно быстрее полностью переодеть свой сайт.

Шапки блога старого и нового шаблонов

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

  • код нового шаблона должен быть чистым, без ошибок. В нем должны быть учтены все пожелания с точки зрения поискового продвижения (правильные теги h1-h4, закрытие ненужных ссылок, правильная отрисовка страниц и т.д.);
  • общая расцветка не должна напрягать глаз посетителей блога, гамма цветов должна сочетаться с общепризнанными правилами дизайна, на всех постах и статьях должен прослеживаться общий стиль сайта.
  • шапка и подвал блога не должны быть перегруженными морем информации, все виджеты в сайдабре должны иметь одинаковое исполнение;
  • к блогу должны быть подключены все важные социальные сигналы в виде красивых и понятных кнопок, посетитель должен видеть их сразу;
  • ко всем элементам блога читатель должен иметь доступ за кратчайшее число кликов, его ничто не должно отвлекать от чтения или поиска материалов сайта;
  • все страницы из меню должны быть оригинальными по оформлению, но придерживаться общего стиля блога.

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

Элементы дизайна моего сайта

Основные изменения в шаблоне блога

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

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

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

Блок подписки на статьи и рассылку

Про отдельный блок хочу рассказать более подробно. Он заменил специальный блок, в котором находились ссылки плагина по перелинковке страниц Smart Linker Pro. Я все же решил, что лучше все делать самому и поэтому заказал у дизайнера такой способ отображения ссылок на похожие статьи моего блога. В нем вручную я делаю внутреннюю перелинковку своего блога, которую подробно описал в моей новой бесплатной книге “Поисковый трафик на службе у блоггера”. Как Вы понимаете – каждый блок содержит не только уникальный перечень ссылок на посты блога, но и еще как сам анкор, так и околоанкорный текст.

Специальный блок для внутренней перелинковки

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

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

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

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

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

Друзья” – это самая теплая и добрая страница. Если так можно сказать. С помощью открывающихся окошек она теперь может без длительной прокрутки показать еще больше визиток блогов моих друзей. А значит в ближайшем будущем она пополнится новыми всплывающими окошками, которые познакомят моих читателей с новыми друзьями. Может это будет кто-то из Вас? :)

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

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

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

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

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

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

Некоторые фишки моего блога

Кто же смог сделать такой необычный дизайн сайта?

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

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

Добрый день, Саша! Позволь мне задать тебе пару вопросов, чтобы мои читатели смогли лучше узнать того человека и дизайнера, который так преобразил мой блог.  И первый вопрос  – Расскажи немного о себе.

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

Родилась я в небольшом городке Яготин. После школьного образования, закончила технический ВУЗ по специальности программист. С того времени и по сегодня – занимаюсь веб-сайтами и работаю на себя.

Живу в городе Чернигов вместе со своим мужем. Мы очень любим загородные поездки и при малейшей возможности «пропадаем» на природе. Сейчас просто волшебно наблюдать за тем, как оживает все вокруг  – просто дух захватывает!

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

Это точно, Саша! Твою сестру, Алену Скопич, я уже тоже неплохо знаю, особенно ее блог “У мадам”. И в цветах она действительно разбирается. Кстати у нее буквально на днях вышла ее первая бесплатная книга про орхидеи. Желаюшие, не пропустите новинку! Таких книжек не найдете в Рунете!

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

Еще будучи студентом, больше всего любила занятия по веб-программированию. Был и краткий курс по веб-дизайну и пользовательским интерфейсам, но все бегло и для ознакомления.  Когда я училась на последнем курсе, мне предложили сделать сайт для свадебного фотографа. У меня, как говорится, руки зачесались J. Сайт я, конечно, сделала и с большим интересом начала глубже изучать веб-программирование, тонкости веб-дизайна и работу с фотошопом. Через время поступил очередной заказ, и тогда я окончательно поняла: «Мне нравится делать сайты!».  А если мне что-то очень нравится, то я ухожу с головой. И тут уже началось – самоучители, уроки, книги…

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

Дизайн разных страниц Александры Вовк

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

Тяжело выделить что-то самое важное.

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

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

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

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

А если брать в общем смысле, то очень важно, что моя работа мне нравится! Это огромный плюс и возможность полностью отдаться процессу.

Это точно. Если тебе нравится твоя работа, то заказчику тем более! Саша, ты уже видела достаточно сайтов с разными дизайнами, можешь сразу на глаз определить силу и слабость того или иного шаблона. А какие частые ошибки делают блоггеры, работая над своим блогом?

Что касается новичков, то самая распространенная ошибка – установка бесплатного шаблона.  Понятно, что не каждый может себе позволить качественный шаблон с уникальным дизайном. Но если Вы решили поначалу обойтись бесплатным шаблоном, то убедитесь, что шаблон из хорошего источника и как минимум не содержит вредоносных кодов. Мне приходилось сталкиваться с шаблонами, которые делали из сайта «линкопомойку». Однажды восстанавливала блог, после того как активация очередного бесплатного шаблона привела к удалению всей информации с блога.

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

Часто начинают «вешать» на блог множество украшательств, кнопочек, анимированных картинок и т.д. В итоге блог выглядит как новогодняя елка – все разное и не к месту. Прежде, чем поставить на блог очередную «фишку», задумайтесь – а так ли она нужна вашим посетителям? И ставьте только, если уверенны, что вот без этой кнопки ну никуда! Помните – для читателя важно содержание, он приходит к Вам на блог, потому что хочет прочесть ту или иную статью. Подайте информацию в удобном формате и не отвлекайте от чтения Вашей, уверенна, очень интересной статьи.

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

Мой фаворит – страница с благодарностью за первый комментарий. Люблю добавлять к своим проектам особую изюминку – интересную страницу для ошибки 404 или такое нестандартное оформление отдельной страницы, как у тебя «Об авторе».

Очень нравятся хаотичные неоновые линии и иконки на страницах «Услуги» и «О блоге».

Вообще, редизайн твоего блога мне понравился основательным подходом – не осталась без внимания ни одна страница.

Ну да, я такой! Никуда без плана. :) Кстати, о планах. А какие они у тебя на будущее в сфере профессиональной деятельности?

Не очень люблю планировать. Как только готов наполеоновский план, сразу же что-то помешает. Наверно поэтому я в жизни придерживаюсь двух принципов: «Старайся проживать каждый день как последний» и «Все, что не делается – к лучшему».

Есть желание больше уйти именно в дизайн. Очень увлекает векторная графика, но с ней я еще не работаю.

Примеры работ Александры Вовк

Ты работаешь только с блоггерами или сотрудничество уже вышло за рамки блогосферы?

Моя работа не ограничивается сотрудничеством с блоггерами. Я начинала с заказов от частных лиц и компаний. А в блогосферу попала после того, как создала блог себе и сестре – Елене Скопич. Блоггеры начали обращаться именно по рекомендации сестренки.

На сегодняшний день я сотрудничаю с израильским медицинским центром «Кармель». Сайт для них разрабатывала еще в начале 2011 года. Сейчас сопровождаю его и готовлюсь к редизайну по просьбе заказчика.

Также в начале этого года закончила редизайн и на данный момент сопровождаю сайт итальянской компании, которая занимается продажей горно-шахтного оборудования в России – CapitalSRL. Один из более ранних проектов с владельцами этой компании – аренда недвижимости в Итальянской и Французкой Ривьере.

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

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

Замечательно, когда портфолио увеличивается, ты набиваешь руку, твой опыт растет. Твоя популярность повышается, растет твой авторитет. Когда я первый раз увидел твое портфолио (советую посмотреть, друзья – кнопка рядом!), то оценил разнообразие стилей и вариантов подачи страниц. А это говорит о многом – дизайнер работает в разных направлениях, видит сайт заказчика с разных сторон. Молодец, Саша!

Портфолио Александры Вовк

Ну, и на последок традиционный вопрос. Что пожелаешь моим читателям?

Конечно же, вдохновения в работе, много-много читателей и успеха во всех начинаниях!

Вести и продвигать блог самостоятельно – тяжелый труд, но он того стоит. Хорошо, что есть такие замечательные люди, как ты, Максим. Отличнейшая подача материала, все по полочкам и очень подробно – все это значительно облегчает тяжкий труд блоггера.

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

Всем желающим получить 500 рублей и мою платную книгу “Как писать и оптимизировать статьи” в подарок, я предлагаю решить такой числовой ребус:

А + В = Х,

где А – это число типов человечков на моем блоге (кроме картинок с ними в постах);

В – секретное число на одной из страниц моего сайта.

Вы должны посчитать их сумму и полученное число Х прислать на мою почту (lightmage@yandex.ru). На этом я прощаюсь с Вами, до новых встреч на страницах блога “Записки Seo-специалиста”.

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

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

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

Вверх