Санкт-Петербург, Россия
+7-905-224-98-01

Сам себе веб-мастер. Как создать свой сайт самостоятельно за 10 шагов
wordpress

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

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

Как же создать свой сайт?

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

conceptsiyaОчень здорово и интересно об этом подходе к созданию собственного сайта рассказывают Станислав Орехов и Алекс Скидель в бесплатном Мастер-классе из четырех видео-частей «Продающий сайт дизайнера», по моему мнению просто обязательном к просмотру.

2.         Сайт можно создать тремя путями: самостоятельно, нанять фрилансера, отдать на выполнение в веб-студию.

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

Почему я выбрала самостоятельное создание сайта? Причин несколько: первая – банально финансовая. Максимальные мои средства были вложены в обучение по визуализации и нанимать платных специалистов для придумывания логотипа и создания сайта у меня просто уже было особо не на что. Но дело не только в этом.

Причина вторая – идея создания сайта меня захватила. Мне было просто очень интересно. Хотелось всё сделать самостоятельно и приобрести новый опыт.

Причина третья – дурацкий перфекционизм, из-за которого мне спокойнее всё сделать самой, чем объяснять исполнителю свои требования и проверять его работу, особенно когда я придирчиво отношусь даже к самым мельчайшим деталям: размеру и типу шрифта, отступам абзацев и прочему. Хотя, пожалуй, причина номер 2 была главной:-).

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

3.         Выбор вида своего будущего сайта.

Есть три основных типа сайтов – экспертный сайт, лэндинг и смешанный, совмещающий оба типа в одном.

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

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

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

Обо всех этих типах, их плюсах и минусах, форматах использования также отлично рассказывают ребята в указанном выше Мастер-классе.

На этом же этапе при выборе вида сайта,  я посоветовала бы сразу решить, в каком стиле Вы планируете продвигать свои услуги. Будет ли это достаточно активный, даже агрессивный продающий стиль под конкретную услугу? Или мягкий, деликатный стиль продаж, продвигающий Ваше имя как бренд на рынке? Для себя я выбрала второй способ: он мне более близкий по характеру, равно как и минимализм в дизайне оформления самого сайта.  Ваш выбор за Вами. От этого выбора будет зависеть макет сайта и его наполнение различными продающими «примочками».

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

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

Dmitryi Kot. CopywritingВажно знать, что от качественного, уникального контента зависит популярность Вашего сайта, посещаемость и индексация поисковиками. Решите для себя, будете ли Вы писать тексты самостоятельно или придется нанимать фрилансера? Помните, что безграмотный,  нескладный текст с ошибками способен убить впечатление потенциального клиента о Вас даже при наличии хорошего портфолио. В идеале тексты должны быть написаны с соблюдением правил копирайтинга и seo-разметкой. Для обучения основам  копирайтинга есть масса информации в сети и обычных книжных магазинах. Мне очень нравится чудесная во всех отношениях книга Дмитрия Кота «Копирайтинг. Как не съесть собаку», рекомендую, читается влёт.

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

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

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

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

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

7.         С помощью чего создавать сайт? Выбираем.

Первый, самый простой и быстрый способ создания сайта – бесплатный конструктор, например, обширно рекламируемый wix или аналогичные. Имеет массу встроенных шаблонов, легок в наполнении, не требует никаких особых знаний и вникания в механизмы создания сайта. Минусы существенны: длинное и «кривое» доменное имя, плохая индексация поисковиками, наличие посторонней рекламы, отсутствие гибкой адаптивности под мобильные устройства, и главное – ваш сайт вам не принадлежит. При закрытии или поломок сервиса Ваш сайт закроется вместе с ним.

Второй способ – создание сайта с использованием бесплатных движков, например, популярнейшего движка WordPress. Вы платите только за регистрацию доменного имени (имя сайта) и хостинг (аренда «квартирки» для вашего сайта на одном из хостингов), и это совсем небольшие деньги. Например, домен стоит порядка 120 рублей в год, хостинг от 100 рублей в месяц – для начинающих этого более чем достаточно. Я использую именно этот способ.

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

8.         coffeeСоздание сайта на движке WordPress – дело невероятно увлекательное, затягивает с головой и Вам понадобится много кофе:-) Будьте готовы, что друзья и близкие Вас на какое-то время потеряют, зато результат Вас будет радовать практически со 100%-ой вероятностью!

Для начала рекомендую видео Алексея Кальсина «Как быстро создать свой Сайт на WordPress — Пошаговое руководство!» — отличный рассказ про основные шаги от выбора хостинга и регистрации доменного имени до советов по созданию логотипа в графическом он-лайн редакторе Pixlr, в котором я и сделала свой логотип, и которым пользуюсь теперь постоянно для быстрых созданий картинок.

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

Сайты с рейтингом хостингов, например http://www.hosting-obzor.ru, а также отзывы пользователей, мне нравится ресурс http://irecommend.ru.

К выбору темы на WordPress советую подойти со всей тщательностью. Постарайтесь сразу найти максимально подходящую для своего макета сайта тему, чтобы редактировать ее минимально – структура тем разная, есть гибкие темы, а есть не очень, и их редактирование  может завести Вас в дебри настроек вплоть до правки кода html, чего бы я не советовала делать неспециалистам в веб-дизайне. Мне все же пришлось несколько раз влезть в код, и один из этих «разов» закончился «белой смертью экрана» почти готового сайта – однажды в 5 утра я чуть-чуть подправила код и всё, сайт умер, и я вместе с ним — от ужаса:-) На следующий день я всё исправила, но это стоило времени, нервов и таких познаний, в которые я в общем-то не планировала углубляться.

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

Как найти тему WordPress? В видео Алексея Кальсина вы увидите основные шаги по поиску нужной темы по названию. Можно искать любые темы по встроенному фильтру: в консоли WordPress выбрать: Внешний вид – Темы – Добавить новую – Фильтр характеристик. Тут можно указать желаемый цвет, разметку и функции. Важно поставить галочку в полях в рубрике Разметка:

  • Адаптивный дизайн (позволит теме красиво отображаться на любых мобильных устройствах)
  • Произвольный заголовок (позволит Вам править шапку сайта по своему усмотрению)
  • Микроформаты (полезная функция для удобной разметки сайта)
  • Готова к переводу (важно для русификации темы).

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

wordpress themesДалее нажать на Theme Homepage и уже на домашней странице темы ее можно посмотреть во всей красе со всеми возможностями, она обычно представлена там в виде демонстрации.

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

9.         После редактирования темы и наполнения ее начальным контентом Вам необходимо установить несколько обязательных плагинов — специальных программ, которые  в изобилии имеются в WordPress.

Эти плагины будут защищать Ваш юный сайт от взломщиков и спамеров, а также – что важно — помогать поисковикам индексировать Ваш сайт. Про необходимые плагины есть отличное видео «11 необходимых плагинов для WordPress» от Maxtop.org  – рекомендую!

Только будьте очень осторожны с плагином безопасности, о котором в нем идет речь. Кроме установок, о котором рассказывает автор, я случайно активировала также и автоматические настройки, за что и поплатилась – мой сайт запретил мне же самой вход в панель управления, приняв меня за взломщика:-) Было обидно:-) Так что следуйте за автором и не устанавливайте лишнего до тех пор, пока не разберетесь в плагине основательно. Только одно дополнение: на первых шагах настройки необходимо внести свой IP адрес в Белый список – автор об этом не упоминает, и это единственный недочёт. Этим шагом Вы предохраните себя от моей ошибки, а Ваш сайт будет благосклоннее относиться к своему создателю:-) Следуя за автором по видео-инструкции, Вы увидите пункт Global Setting (Общие настройки) — Lockout White List (Белый список блокировки) и ниже кнопку Add my current IP to Whitelist (Добавить мой IP адрес в Белый список) – сделайте это, IP определится автоматически.

Очень важный плагин – All in one seo pack — настройка сайта для поисковых систем, о котором упоминает автор. После его установки и настройки требуется также переход на каждую Вашу страницу и запись. В самом низу страницы, после редактора, появятся SEO-поля для ручного заполнения, их нужно будет заполнить. Поэтому указанные плагины лучше всего настраивать на начальном этапе создания сайта, чтобы потом не обновлять все руками.

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

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

10.       Рекомендую два дополнительных плагина, важных для 3D визуализаторов и дизайнеров.

Первый плагин необходим для создания галереи в портфолио – рекомендую посмотреть видео Алексея Кальсина «Как сделать галерею в WordPress?» и установить плагин  NextGen Gallery. Хороший, многофункциональный, удобный в работе.

Второй плагин – защита своего контента. Для дизайнеров и 3D визуализаторов крайне важно защитить авторское право на свои работы от бессовестного копирования и кражи. Поэтому так важно установить плагины для защиты контента – их много, можете выбрать любой на свой вкус, например, WP Content Copy Protection & No Right Click. Он позволит заблокировать правый клик кнопкой мыши и копирование Вашего текста.

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

Желаю Вам успехов в создании сайта!

Поделиться статьей с друзьями:
Share

Related Posts

2 comments

Светлана, отличная статья. Спасибо!!!!!

Svetlana Cherepkova

Алена, я очень рада, что вам пригодилась:-)

Comments are closed.