Блог
Анны Фёдоровой Как зарабатывать в интернете и на своём блоге?

Как поменять дизайн сайта (блога)? Подробная инструкция!

2015.03.08
Автор:

Как поменять дизайн сайта (блога)

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

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

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

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

diz

Потом конечно сидела, ковыряла код, настраивала плагины, мудрила с фавиконом и много ещё чего делала. В общем сидела за ПК сутками. Хотя это на самом деле всё потеря драгоценного времени!

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

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

Теперь ближе к делу, с чего начать чтобы поменять дизайн блога (сайта)? Вот 5 основных этапов через которые проходят все блоггеры, которые меняли дизайны на своих ресурсах. И не важно какие эти дизайны простые, сложные или рисованные, всё происходит по одной и той же схеме:

1. Поиск нужного дизайнера и верстальщика
2. Составление ТЗ (технического задания)
3. Создание, рисование дизайна блога дизайнером
4. Натяжка нового дизайна на ваш сайт верстальщиком
5. Проверка работы после верстки

Кажется сложновато на первый взгляд? Но как говорится красота — требует жертв.

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

Сейчас настало то время, когда нужно стремится к уникальности всего того что находится на твоём ресурсе. Это касается как дизайна, так и контента, картинок.

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

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

Действие №1. Нужно найти дизайнера и верстальщика. Это пожалуй самый ответственный и важный момент. Ведь от этого будет зависеть, какой вид ваш ресурс приобретёт. Сейчас множество различных бирж удалённой работы, где вы сможете найти себе подходящих исполнителей. Про то где я заказывала, и кто мне рисовал дизайн, я писала в этой статье. Какие — то дизайнеры сотрудничают с верстальщиками, поэтому этот момент уточняйте. Может, сделают вам сразу и дизайн и верстку. Если же нет, то нужно будет самому отдельно искать нужную кандидатуру.

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

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

Действие №2. После того, как вы нашли нужного дизайнера, чьё портфолио вам понравилось, и он уже в курсе какой примерно дизайн вы хотите, и он согласен его осуществить – переходим к составлению технического задания, без него не обойтись. Вообще у большинства дизайнеров есть бриф-анкета для оформления ТЗ. Но можно составить своё, где вы всё подробно распишите.

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

Сейчас я расскажу, что должно входить в ТЗ дизайна:

Шапка блога (header)+название блога+описание+логотип
Футер блога+copyright+место размещения счётчика
Нижнее и верхнее меню блога
Место для вставки рекламной строчки Nolix
Favicon
Форма поиска
Форма подписки на обновление блога
Кнопки социальных сетей
Рубрики сайта и популярные статьи+топ комментаторов
Кнопка «Наверх»
Оформление комментариев
Выделение цитат на блоге

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

Чтобы было проще — можно походить по другим блогам, оформление которых вам нравится, и посмотреть, как там что сделано. Можно так же в качестве примера, если вы конечно умеете работать в фотошопе — нарисовать будущий макет (громко сказано), хотя бы примерно и отправить своё творчество дизайнеру, чтобы он уже представлял, как должен быть примерно оформлен тот или иной элемент. Я к примеру правый сайдбар в фотошопе состряпала, чтобы было проще.

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

Действие №3. Теперь нужно связаться с верстальщиком, который и будет делать верстку по готовому макету. Чтобы в вашем дизайне всё нажималось и включалось. И потом уже переносить этот дизайн на ваш блог. Вначале вы передаёте ему PSD файлы, а так же техническое задание.

Что туда входит:

В принципе практически всё то, что входило в ТЗ дизайнера. Это форма поиска, форма подписки, меню сайта, вывод «Лучший комментатор», кнопки наверх, кнопок социальных сетей, постраничной навигации, виджета вконтакте, формы комментариев, а так же логотип, фавикон, «Популярные записи», форма обратной связи и т.д.

как поменять дизайн сайта

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

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

После переноса сморите свой новый дизайн и проверяете работоспособность всех функций блога. Это и комментарии и ссылки и всё всё всё. Теперь вы знаете, как поменять дизайн блога (сайта), именно по такой я сменила свой старый дизайн на новый.

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

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

Кстати будет интересно посмотреть на сайты, кому уже дизайн блога поменяли. Если у кого-то возникли какие-нибудь вопросы, задавайте их в комментариях. И как кстати у меня для вас новость! Поскольку на моём блоге новый дизайн, и в правом сайдбаре появился «Топ комментаторов», то я объявляю конкурс «Лучший комментатор», все подробности читайте вот здесь.

С уважениемАнна Фёдорова


Комментариев: 37

  1. Александр

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

    Ответить
    1. Анна Федорова

      Спасибо Александр за комментарий!У вас есть все шансы попасть в Топ комментаторов.

      Ответить
  2. Мария

    Здравствуйте, Анна. Отличный пост получился, очень хорошие советы. Блог у Вас очень приятный. :)

    Ответить
    1. Анна Фёдорова

      Спасибо Мария большое. Рада стараться. :)

      Ответить
  3. Яна

    Здравствуйте, Аня. Блог у Вас замечательный, по содержанию в первую очередь. Забрала в закладки, сейчас подпишусь. Нам чайникам еще учиться и учиться.

    А по дизайну 2 вопроса: размеры шапки не подскажете? Когда она была в PSD.

    И с мобильной версии такой шедевр нормально отображается?

    Ответить
  4. Анна Фёдорова

    Здравствуйте Яна. Благодарю за комментарий, очень приятно. Сам дизайн фиксированный. На разрешениях монитора от 1000 до 2000 смотрится как надо. Если вы про мобильную версию блога, то она пока ещё не сделана, но планирую её сделать.

    Ответить
    1. Яна

      Спасибо.

      Ответить
  5. Андрей Косолапов

    Ну не знаю. :? У меня год, провисел мой бесплатный шаблон. А потом, я просто взял и сам сделал шаблон в программе Артистер. И если кому интересно, могу помочь. А заказывать верстальщику и тд. и тп. будет стоить не много, но и не мало денежков. А новичкам взять их негде. Вот как то так. :|

    Ответить
    1. Анна Фёдорова

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

      Ответить
      1. Андрей Косолапов

        Ну, на счет изюминки не знаю, но лично мне нравится. А на счет притяжения, это надо спросить моих читателей. :o

        Ответить
        1. Анна Фёдорова

          А вы провели бы опрос на эту тему и написали бы по этому поводу статью. Может у вашего блога есть изюминка. :)

          Ответить
          1. Андрей Косолапов

            Интересно, может быть и сделаю. Хотя судя по последней статье, опрос можно и не проводить. Посмотрите сами :|

          2. Анна Фёдорова

            У вас дружелюбная аудитория на блоге, это однозначно плюс.

          3. Роман

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

    2. Татьяна

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

      Ответить
  6. tanya

    красивый дизайн, вот только у меня съезжает вниз сайдбар, уменьшаю сайт — встает — но тогда текст не видно

    Ответить
    1. Анна Фёдорова

      А как это вы уменьшаете сайт, я чего-то не поняла. Можно поподробнее?

      Ответить
      1. Андрей Косолапов

        Анна, в Хроме, это делается так (ссылка) ;)

        Ответить
        1. Анна Фёдорова

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

          Ответить
          1. Роман

            Интересно, при увеличении думаю он у всех съезжать будет )) Также это делается клавишами Ctrl плюс и мунус

  7. Роман

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

    Ответить
    1. Анна Фёдорова

      Полностью согласна!

      Ответить
  8. Роман

    Анна а вы пользуетесь мобильными устройствами для работы на сайте? Мобильную версию блога сделали?

    Ответить
    1. Анна Фёдорова

      Нет. Мобильная версия блога пока ещё не сделана.

      Ответить
  9. Игорь Новожилов

    У Вас очень хороший дизайн Анна ;) Мило и аккуратно! И спасибо за статью, я как раз продумываю смену дизайна, потихоньку составляю ТЗ — Ваши советы очень кстати!

    Ответить
    1. Анна Фёдорова

      Спасибо Игорь. Благодарю за комментарий.

      Ответить
      1. Роман

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

        Ответить
    2. Татьяна

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

      Сразу видно, что сайт принадлежит женщине, поэтому и создаётся настрой, что и содержание будет касаться женских проблем, даже если они связаны с созданием сайта. :)

      Ответить
  10. Роман

    Тоже понемногу отредактировал бесплатный шаблон. Со временем думаю, сделаю себе оригинальный. )) Как накоплю.

    Ответить
  11. Татьяна

    Дизайн суперский, нет слов. 10 баллов. Только эти 2 пешехода справа Вам не бьют по глазам? :o Какие-то они со своими пакетами через плечо и пятыми точками тела категорически лишние на всей красивой картинке. ИМХО.

    А я так и не выделила средств на хорошего дизайнера, наваяла сама. Слепила из того, что было. :D Учитывая колхозную тематику моего блога, как сказал один блогер: «Для сельской местности сойдет». А у Вас уютно очень, и тема блога сама требует серьезного подхода.

    Ответить
    1. Анна Фёдорова

      По поводу двух пешеходов справа — возможно с вами и соглашусь :) Что касается вашего дизайна — прикольно получилось, хорошо слепили :D

      Ответить
      1. Татьяна

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

        Роман выше правильно писал — лучше отдать специалисту. А то я лепила долго и совсем не писала, потеряла время. Сэкономила деньги, а сегодня нашла кучу кривой верстки у самой себя после написания первого же комментария. Теперь снова приходится перебирать и ковырять. Скупой платит известно сколько раз. :o

        Ответить
        1. Анна Фёдорова

          Да, на это дело много времени требуется.

          Ответить
    2. Татьяна

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

      Ответить
  12. Инга

    А мне очень понравился Ваш дизайн. Настоящий женский сайт!

    Сразу притягивает внимание и хочется ознакомиться с содержанием.

    Ответить
    1. Татьяна

      Правильно, Инга. Если дизайн красивый, хочется и статьи начать читать.

      Так что читателей можно привлечь интересным оформлением сайта.

      Ответить
  13. Надежда

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

    Ответить

Оставить комментарий: