Как создать продающий сайт с нуля пошаговая инструкция

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

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

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

Созданием сайтов занимаются несколько специалистов: дизайнер, верстальщик, программист. Наполняют сайты текстами копирайтеры и контент-менеджеры, а продвигают готовые странички маркетологи. Руководит всем процессом менеджер проекта.

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

Шаг 1. Определяем цель создания сайта

Для начала стоит определиться с целью создания сайта. Они обычно бывают двух видов — коммерческие и некоммерческие.

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

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

Затем попробуйте определить задачи, которые сайт должен решить. Например:

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

Шаг 2. Выбираем тип сайта

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

Интернет-магазин

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

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

Сайт услуг

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

Сайт-визитка

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

Сайт компании, или корпоративный сайт

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

Порталы, новостные блоги

Главная цель — интересная подача информации. На таких сайтах обычно можно встретить множество статей, тестов, фото и видео.

Форумы

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

Шаг 3. Придумываем название и доменное имя

Доменное имя для сайта — это название сайта, которое вбивается в адресную строку, например profi.ru. Название должно отражать имя бренда, но при этом быть запоминающимся и легкочитаемым. В идеале вы должны суметь его легко продиктовать — без всяких «эс как доллар». Не стоит выбирать и слишком длинные имена — желательно ограничиться 12 символами. Также стоит избегать цифр и символов. И, конечно же, ошибок — всё это ассоциируется с мошенническими ресурсами.

Домен верхнего уровня, или доменная зона — это те буквы, которые стоят в конце адреса после точки: .ru, .com или .org. Благодаря им можно понять, где находится организация или в какой стране она ведёт свою деятельность. Самый популярный домен — .com, но его нет смысла использовать, если вы работаете только в России. Больше подойдёт привычный .ru. К тому же за использование доменов других стран поисковые системы могут применять к вашему сайту штрафные санкции.

В последнее время кроме географических доменов стали появляться профессиональные: agency, .media, .travel. Они сразу обозначают сферу вашей деятельности.

Доменное имя вы покупаете не навсегда, а лишь арендуете. Поэтому платить за него придётся регулярно, например раз в год. Выбирая доменное имя для сайта, обязательно проверьте, не совпадает ли оно с адресом конкурента. Если имя уже занято, добавьте к названию короткое слово, которое относится к вашей сфере деятельности. Например, к названию магазина можно добавить shop, а к игрушкам — toys. Купить доменное имя для сайта, подобрать и зарегистрировать домен можно, например, на сайтах WebNames, REG.RU, NIC.RU.

Шаг 4. Выбираем хостинг

Хостинг — это место на сервере, где будут храниться все материалы вашего сайта. При его выборе обратите внимание на показатель Uptime — время бесперебойной работы. Оно должно быть максимально приближено к 100%. Также желательно выбирать хостинги с понятным функционалом и русской службой поддержки. Именно к ней вы будете обращаться, если сайт перестанет работать.

Как и доменное имя, хостинг арендуют. Цена аренды зависит от объёма хранилища. Поэтому если вы не планируете создавать крупный портал, то дорогой хостинг вам не понадобится. Но и пользоваться бесплатными хостингами для сайта тоже не стоит — это ненадёжно. Сервер может внезапно «упасть», и все материалы с вашего сайта пропадут на неопределённое время.

Шаг 5. Выбираем платформу, или движок сайта

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

Платформу можно создать тремя способами:

• с помощью конструктора сайтов;
• с помощью CMS;
• написать код самостоятельно.

Конструкторы сайтов

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

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

Примеры конструкторов: Tilda, Mobirise, Wix, Nethouse.

СMS-системы

СMS, или Content Management System — это система управления сайтом, также называемая админкой. Они бывают платные и бесплатные.

Самая известная бесплатная система администрирования — WordPress. На ней создано около четверти всех сайтов в интернете. Она отлично подходит для блогов, сайтов-визиток, портфолио, корпоративных сайтов. Для новичков это идеальный вариант: управление админкой интуитивно понятно и не требует специальных знаний.

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

Самая известная платная CMS — «1С-Битрикс». Она позволяет создавать крупные сайты и может интегрироваться с системой 1C — это особенно важно для интернет-магазинов.

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

Чтобы создать сайт с нуля, нужно будет пройти три основных этапа:

1. Отрисовка макета сайта. На этом этапе дизайнер продумывает, как будут выглядеть основные элементы сайта — «шапка», меню, блоки с информацией, баннеры. Обычно для этого используют Adobe Photoshop или другие графические редакторы.
2. Вёрстка. На этом этапе пишется код, а созданные элементы вшиваются в сайт.
3. Внедрение PHP. Сайт перестаёт быть просто картинкой, пользователи могут взаимодействовать с ним, например оставлять заказы.

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

Шаг 6. Собираем семантическое ядро сайта

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

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

Шаг 7. Продумываем структуру сайта

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

1. Сделайте возможность попадать на главную с любой страницы. Например, с помощью шапки сайта и логотипа, на которые всегда можно кликнуть.
2. Не забудьте «хлебные крошки». Это кнопки, с помощью которых можно вернуться на шаг назад с любой страницы сайта. Например, в магазине одежды уйти со страницы конкретного платья обратно в общий каталог.
3. Не создавайте более 4 уровней страниц. Стоит остановиться на: Одежда —> Платья —> Праздничные платья —> Платья для свадьбы.

Шаг 8. Готовим контент сайта

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

Вот на что стоит обратить внимание:

• Тексты должны быть уникальными. Не стоит копировать статьи с сайтов конкурентов или перепечатывать странички из Википедии.
• Фотографии и видео не должны много весить. Например, вес одной фотографии не должен превышать 1 Мб. Некоторые CMS автоматически ужимают фотографии или позволяют это сделать при загрузке. Если такой опции нет, оптимизировать фото можно онлайн с помощью разных конвертеров или в графических редакторах типа Adobe Photoshop.

Шаг 9. Проверяем юзабилити, или удобство использования сайта

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

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

«Сейчас в тренде максимальная простота. Считается, что пользователь должен сделать не больше 2 кликов от момента входа на сайт до целевого действия, например нажатия кнопки «Добавить в корзину». Если путь длиннее, вы можете потерять клиентов».

Шаг 10. Создаём дизайн

Если вы используете конструкторы или системы типа WordPress, то можете выбрать дизайн из готовых бесплатных шаблонов — сделать это так же легко, как сменить заставку на телефоне. Если же вам хочется добавить сайту индивидуальности, придётся вникнуть в основы HTML и СSS. Тогда шаблон можно будет доработать под свои нужды: изменить шапку сайта, поменять цвета.

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

Шаг 11. Приступаем к вёрстке

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

Самостоятельно сверстать сайт можно в программах Atom, Sublime и Visual Studio Code.

Шаг 12. Запускаем сайт

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

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

Бонус: индексация в поисковых системах

Чтобы сайт попал в поисковые системы Google и Яндекс и отображался по разным запросам, нужно, чтобы поисковые машины его проверили. Этот процесс можно ускорить, если создать файлы robots.txt и sitemap.xml и отправить их в Яндекс.Вебмастер и Google Search Console.

Файл robots.txt создаёт программист, который пишет код сайта. В этом файле указаны рекомендации для поисковиков — что им можно сканировать, а что нет. Например, стоит запретить поисковику просматривать содержимое корзины клиента и системные файлы.

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

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

1. Ввести в поиске site: и название вашего сайта, например site: profi.ru. Количество результатов будет равняться количеству одобренных поисковиком страниц.
2. Посмотреть Google Search Console в разделе «Индекс Google — Статус индексирования» и в Яндекс.Вебмастере в разделе «Индексирование — Страницы в поиске».
3. Воспользоваться расширениями для браузера RDS Bar, который отобразит, была ли проиндексирована конкретная страница.

Есть несколько причин, по которым поисковики могут индексировать не все страницы:

1. Сайту меньше 3 месяцев.
2. В файле robots стоят ограничения на индексацию определённых страниц.
3. Вы редко обновляете информацию на сайте и создаёте новые страницы.
4. У сайта низкая скорость работы, страницы медленно загружаются. Это может произойти, если на страницах есть «тяжёлые» фото или видео.
5. Поисковики наложили на вас санкции за использование мошеннических схем или «серого» продвижения.

Instagram* («Продукт компании Meta, которая признана экстремистской организацией в России»).

Какие типы сайтов бывают

Сайты меняются и эволюционируют. Сегодня редко встречаются классические форумы — а ещё лет 10 назад это был один из самых популярных видов сайтов.

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

Лендинг

Это страница, которая предлагает пользователю совершить действие: купить, подписаться, оставить заявку.

Целевое действие — главное, что отличает лендинг от других видов сайтов, например корпоративных. На корпоративный сайт можно зайти для того, чтобы получить информацию о компании или конкретном продукте, уточнить расписание мероприятий, узнать контакты менеджера. Лендинг будет содержать только ту информацию, которая приведёт пользователя к нужному действию.

Портфолио или визитка

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

Корпоративный сайт

Сайт о компании, её продукции, истории, команде. Сегодня корпоративные сайты отчасти работают и как интернет-магазины: если у компании есть продукты или услуги, вы, скорее всего, сможете заказать их на сайте. Основная задача таких площадок — привлекать новых клиентов и удерживать старых.

Домен и хостинг: как выбрать и зарегистрировать

Чтобы сайт смог «поселиться» в Интернете, у него должно быть доменное имя.
Домен можно придумать любой, главное, чтобы он легко читался, запоминался и был свободен. Проверить, не занято ли доменное имя, можно на специальных Whois-сервисах, например на этом.

После того как имя выбрано, домен можно зарегистрировать. Это платная услуга. Непопулярные доменные имена могут стоить 200 рублей,а распространённые и дорогие — от 1000 рублей.

Важно и то, где регистрировать домен. Можно сделать это у хостинг-провайдера — организации, которая впоследствии будет предоставлять хостинг, виртуальное место для сайта. Тогда нужно проверить, кому в результате будет принадлежать домен. Если его владельцем будет провайдер, впоследствии могут возникнуть сложности: при смене хостинга, возможно, придётся лишиться и домена.

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

Хостинг-провайдеры различаются между собой — объёмом предоставляемого места, качеством услуг, стабильностью и типом хранения данных. Обычно новичкам, которые занимаются созданием сайтов своими руками с нуля, советуют выбирать из топа-5
крупнейших хостингов РФ: это крупные компании с развитой техподдержкой, которые не исчезнут завтра без предупреждения, оставив вас без сайта и домена.

Платформа сайта: CMS или конструктор

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

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

Топ CMS для создания сайта

WordPress

Бесплатная CMS, которая изначально задумывалась как платформа для блогов. Сегодня на WordPress можно создавать совершенно разные сайты — от интернет-магазинов до онлайн-сервисов. Важно только, чтобы эти сайты не были слишком объёмными: WordPress плохо справляется с большим количеством плагинов или с количеством товаров более 10 тысяч.

Структура, прототип и контент

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

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

Есть несколько типов структуры. Линейную часто используют в лендингах: тогда сайт строится по принципу «главная страница — услуги — оставить заявку — контакты».

Дизайн: как выбрать шаблон, если ты не профи

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

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

1. Фотографии обычных людей

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

1. Типографика на главном экране

Приём, в котором центральное место на главном экране отдаётся тексту — статичному или анимированному. Сообщение берёт на себя роль первого впечатления, которое получает пользователь, это простая, смелая и прямая коммуникация, которая к тому же оставляет пространство для креатива.

Публикация сайта в сети

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

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

Если сайт создан на базе CMS, его нужно загрузить на хостинг. Это можно сделать на сайте хостинг-провайдера, через специальную панель управления. Для этого нужно в специальном окне выбрать архив сайта на компьютере — в зависимости от хостинга, названия папок для загрузки файла могут быть public_html или www. Нужно выбрать нужные папки и нажать «Загрузить».

Всё — сайт доступен в интернете: на него можно заходить, переходить по страницам и отправлять ссылку друзьям и знакомым.

Работа сделана? На самом деле она только начинается. Теперь сайт можно тестировать и совершенствовать: менять дизайн, создавать адаптивную вёрстку, работать с интерфейсом и тестировать версии. Так создаются интересные и мощные веб-проекты: динамические сайты, интерфейсы для работы с базами данных, социальные сети.

Чтобы работать с сайтом на более глубоком уровне, возможностей CMS и конструкторов будет недостаточно. Понадобятся специальные знания, например умение писать код на HTML. CSS и JavaScript, работать с React и создавать бэкенд для взаимодействия с сервером.

Всему этому учат в Яндекс Практикуме, на курсе «Веб-разработчик». За 10 месяцев обучения можно изучить всё для того, чтобы получить востребованную профессию разработчика, а ещё — сделать 5 сайтов и веб-приложений, которые составят основу портфолио и помогут найти работу.

Привет! Меня зовут Марк, я маркетолог, у меня свое небольшое бутиковое агентство SpaceAds. Хочу поделиться своим опытом создания продающего сайта для ИТ-компании. Данную технологию можно применить в большинстве ниш для создания качественного лэндинга.

Немного предыстории. Свой путь в маркетинге я начал в 2008, когда сделал свой первый веб-сайт, пройдя онлайн-курс по созданию сайтов на joomla. Не могу сказать, что за такой долгий период я сделал много сайтов, потому что основные мои направления – это продвижение (SEO, директ, таргет, блогеры, SMM). Однако я имею достаточный опыт по созданию качественных проектов.

Для чего нужен хороший сайт? 💸 Для привлечения новых клиентов

🤔 Чем сайт landing за 80т.р. и более отличается от сайта за 10т.р. или за 20 т.р.?

В моих сайтах продумано всë до мельчайших деталей, я начинаю создание проекта с опроса клиента, изучения его бизнеса, ниши и конкурентов. После этого я пишу Техническое Задание с описанием всех блоков. На этом этапе уже есть ядро — маркетинг. ✴ Маркетинг влияет на продажи на все 100%, влияет на позиционирование вашего продукта, влияет на то, расскажет ли кто-то о вашем сайте или о вашей компании или просто пролистает дальше..

📝 Затем мы с дизайнером создаём прототип, на котором схематически изображены все блоки и отправляем заказчику на согласование.

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

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

После создания дизайна всегда бывают правки от заказчика, также и внутри команды мы берём обратную связь от более 5 человек и учитываем замечания каждого, ведь если даже одному человеку не понравился или непонятен какой-то элемент, то он может быть в дальнейшем также непонятен десяткам или сотням других людей и будет теряться конверсия, что напрямую влияет на выручку и продажи! 📊

📲 После того как дизайн готов и утверждён создаётся отдельная версия мобильной версии сайта.

🧰 Когда обе версии сайта готовы, начинается вёрстка и адаптация на движок. Здесь мы проверяем корректность вёрстки на разных устройствах и разных браузерах.

🖲 Когда вёрстка готова, мы наполняем сайт контентом и делаем SEO-оптимизацию для поисковых систем, выкладываем на хостинг, покупаем домен, https сертификат и другие детали для успешного функционирования

👨‍🏫 После этого мы передаем сайт клиенту, обучаем, каким им пользоваться и даём гарантийную поддержку.

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

Хороший сайт — это маркетинг + картинка + детали и юзабилити (удобство)

А теперь давайте на примере

Не так давно ко мне обратился сотрудник Дальневосточной компании записался на наставничество через сервис solvery.io

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

Я написал мини-курс, где просто по пунктам расписал, что должно быть на продающем сайте.

Вот, что получилось

Экран 1. Заголовок. Форма

Первый экран – это самая важная часть сайта с точки зрения маркетинга. Уже за несколько секунд пользователь может понять интересен ли ему продукт или нет. Поэтому здесь важно:

а) Коротко и емко донести, о чем речь

б) Завоевать доверие и вызвать симпатию

Определяем заголовок = УТП

УТП – это уникальное торговое предложение или его еще называют ОФЕР. Это предложение, с которым Вы выходите на рынок. Оно должно быть достаточно коротким и емким с указанием каких-то конкретных измеримых значений (время, стоимость, количество наименований)

Например, «Оцифруем бизнес под ключ за 1 месяц»

Под заголовком можно написать пояснения или преимущества буллитами

Форма заявки.

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

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

Доверие.

На первом экране человек может начать доверять компании по нескольким факторам:

Экран 2. Для кого?

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

Целевая аудитория обычно состоит из 3-6 сегментов. Здесь мы описываем их, а также ниже можно описать, какую боль он закроет.

Например:

Экран 3. Описание продукта/услуги

Сюда коротко формулируем, что из себя представляет продукт, какой у него есть функционал. У Вас есть 3-4 строчки.

Экран 4. Преимущества

Сюда описываем преимущества, которые есть у продукта. Подумайте, что важно для потребителей? Чем Вы отличаетесь от своих конкурентов?

Например:

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

Экран 5. Кейсы

В этот раздел выкладываем примеры работ. Достаточно несколько кейсов

Важно коротко описать:

а) Что за бизнес, можно указать ссылки на компанию

б) Что сделали

в) Как помогло (в цифрах)

Экран 6. Отзывы

Сюда выкладываете отзывы от клиентов. Они могут быть на официальном бланке или скриншоты из переписки

Если отзывов еще нет:

а) Попросите своих клиентов написать их

б) Пропустите пока что этот блок

Экран 7. Дополнительные услуги

В этот раздел можно указать, какие еще услуги оказывает ваша компания

Экран 8. Мотивирующая фраза

Это необязательный блок, но зачастую он добавляет мотивации сделать заказ.

Например, «Хотите удвоить выручку Вашего бизнеса за 3 месяца? Тогда оставляйте заявку, и мы бесплатно проконсультируем Вас, как это можно сделать с помощью инструментов цифровизации!»

Экран 9. Этапы работы

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

Например:

Экран 10. О компании

Информация о компании поможет посетителю быстрее довериться вам и оставить заявку.

Здесь нужно описать историю, миссию, какие-то достижения, если есть и другую важную информацию.

Экран 11. Команда

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

Экран 12. Форма заявки

Здесь можно продублировать форму заявки. Также форму можно усилить с помощью лид-магнита. Это может быть любой ценный материал. Например, чек лист из 10 шагов «Как оцифровать свой бизнес за 1 месяц».

Экран 13. Контакты

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

Финал.

Вот так, друзья, на мой вгляд, должен выглядеть современный продающий сайт – landing page.

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

Пример того, какой получился сайт, описанный в данной статье и по данной технологии можно посмотреть здесь https://clck.ru/33SyNp (нарезки из этого сайта использовались в статье)

Безусловно, можно сделать еще круче и у каждого свой вкус, каждый мой проект уникален, сделан индивидуально под заказчика и зависит от его предпочтений!

Если Вам требуется создание качественного сайта для своей компании, то обращайтесь ко мне в телеграм @im777

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

Сайт моего агентства, где можно ознакомиться также с другими маркетинговыми услугами http://spaceads.tech

Также я провожу наставничество по маркетингу (SEO, таргет, сайты, продажи и поиск клиентов, увеличение дохода и так далее)

Буду рад обратной связи и лайку, если статья получилась интересной и полезной!

Определяем цель

Это первоочередное – разобраться с вашими задачами и тематикой. Сначала решите, сайт будет продавать или информировать.

1. Классический пример коммерческого проекта – интернет-магазин. Здесь есть витрина товаров, разрабатывается форма заказа, корзина. Словом, придется тщательно поработать над функционалом.
2. Цель информационного – удовлетворить поисковые запросы пользователей. Работы здесь сравнительно меньше, основной упор делается на правильном оформлении статей, дизайне, навигации и т. д.

Выбираем тип

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

Интернет-магазин

В 2022 году один из самых популярных типов интернет-ресурсов. Его также называют e-shop. Основная цель – онлайн-торговля по всему миру. Клиенты магазина получают возможность сформировать заказ на покупку, выбрать способ оплаты и доставки, сравнивать характеристики и цены товаров и т. д.

Сайт услуг

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

Сайт-визитка

На английском business card website, а простыми словами – электронная визитка компании или отдельного человека. Включает описание деятельности, контактную информацию, портфолио или презентацию. Часто состоит всего одностраничник, которой бывает достаточно для размещения всей информации.

Сайт компании или корпоративный

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

Порталы, новостные страницы

Разновидность тематического блога. Главная задача – оригинально подать достоверную информацию. Обычно на новостниках множество коротких статей и лонгридов, видео и фото. В топ самых популярных российских порталов этого типа входят Ria.ru, RBC, Kp.ru, Aif.ru и другие. Создание таких сайтов с нуля по пошаговой инструкции не предполагает наличие навыков программирования.

Форумы

Площадка для вопросов/ответов, дискуссий и комментариев на конкретную тему. Часто бывают прилинкованы к основной площадке, но встречаются и в отдельном виде. Среди самых известных – Searchengines.guru, RU Board, Rus-Chat и другие.

Придумываем название и доменное имя

Домен – это название web-ресурса, которое вводится в адресную строку браузера. Например, sitebond.ru или русфонд.рф.

В идеале доменное имя должно быть:

• уникальным – нигде в интернете более не встречаться;
• коротким и запоминающимся – желательно ограничиться 10-12 символами и не использовать тире, цифры и лишние знаки;
• включать имя бренда или ниши – если вы работаете с автомобилями, то ищите название в тему (autotop, drive, avtocar и т. д);
• быть не ниже второго уровня – это всегда платные домены, где после точки идет название (site.ru, site.com, site.рф).

Его придется оплачивать регулярно, так как он не покупается навсегда, а арендуется. Сейчас многие хостинг-провайдеры дарят домены клиентам, если они подпишутся на годовой тариф. Так что можно сэкономить на этом. 

Выбираем хостинг

Это свободное место на сервере, где будет храниться база данных. Его предоставляют в аренду несколько провайдеров, выбор стоит делать на основе следующих критериев:

• авторитет сервиса – лучшими сейчас считаются Beget, Regru, Timeweb;
• показатель Uptime – время бесперебойной работы сервера должно быть не меньше 99-100%;
• объем дискового пространства – для небольших web-ресурсов достаточно 30-60 Мб, но в дальнейшем нужно будет как минимум 100 Мб;
• хороший набор технических инструментов и функций – поддержка PHP, SSH, популярных движков и т. д;
• лучшее соотношение цены и качества – дешевый хостинг может не предоставить качественное обслуживание, а дорогой ничем не отличаться от бюджетного (поэтому надо анализировать подробно);
• наличие бонусов – комплект доменов и SSL в подарок можно получить у перечисленных выше провайдеров.

Выбираем платформу или движок сайта

Она включает программные решения и скрипты, которые создают функционирующий интернет-ресурс. Можно сравнить с операционной системой для компьютера, что говорит о важности грамотного выбора движка. Реализуется с помощью конструкторов, CMS или отдельного кода. Ниже рассмотрим каждый из вариантов по отдельности.

CMS-системы

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

Топ CMS-систем, которые не требуют вложений

Сюда входят следующие движки:

1. WordPress. Самая популярная бесплатная CMS. Подходит для информационных и корпоративных блогов, порталов и форумов. Лучшее решение для новичков, так как управлять функциями удобно и просто, специальных знаний не требуется.
2. Joomla. Среди достоинств этого движка можно выделить тонкость настроек, но они сложные и требуют изучения. Управление тоже не совсем удобное – запутана структура шаблонов, часто выскакивают ошибки обновления плагинов. С другой стороны, если разобраться, то можно создать приличный промо-ресурс, каталог и даже полноценный портал.
3. OpenCart. Достаточная быстрая CMS, нетребовательная к ресурсам сервера. Благодаря этому на OpenCart часто делают интернет-магазины широкого спектра сложности. Из недостатков – неудобная панель управления, мало встроенных функций.

Топ платных CMS-систем

Сюда входят:

1. 1C-Битрикс. Профессиональная система управления. На основе движка создают различные коммерческие проекты. Популярный выбор для интернет-магазинов. Из плюсов: широкий функционал ecommerce, большое количество возможностей для масштабирования, стильный дизайн шаблонов.
2. CMS S3. Отличный вариант для лендингов под акции рекламной кампании. Здесь легко редактировать контент, предусмотрен раздел помощи и служба поддержки.
3. UMI. Подходит для реализации B2B кабинета, визитки, интернет-магазина или информационного портала. Функционал считается несколько устаревшим.

Топ конструкторов сайтов

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

Craftum

Платформа от российских разработчиков, отличающаяся удобством и простотой. Хороший вариант для новичков. Среди особенностей: готовые инструменты для отображения витрины товаров, уникальные дизайн-блоки для тонкой настройки внешнего вида, бесплатный SSL, неограниченное количество почтовых ящиков, адаптивная верстка и т. д. Жаль, что нет готовых решений для приема оплаты или уведомления клиентов. Цена использования в месяц – 197 рублей.

Tilda

Тильда не требуют знания кода. Предусмотрена бесплатная версия, которая не позволяет решать серьезные задачи. Для полноценной работы придется подписаться на платные тарифы – 500-700 рублей в месяц. В сервисе более 200 различных шаблонов и около 600 отдельных блоков (тип корзины, прием заказов, доставка товаров и т. д).

LPgenerator

Незаменим для создания посадочных. Функционал разработан вокруг генерации лидов и автоматизации продаж. Здесь есть много встроенных маркетинговых и аналитических инструментов (CRM, телефония, рассылки, квизы, всплывашки). Для новичков Lpgenerator сложный, так как здесь много опций, требующих изучения. Стартовая цена использования – 959 рублей в месяц.

WIX

Очередной конструктор, в котором есть сотни шаблонов, функция drag and drop, персональный домен, мобильная оптимизация. Цена платных тарифов в месяц начинается от $28. Предусмотрена также бесплатная версия, но с ограничениями по размеру дискового пространства.

Сравнение параметров конструкторов

Название	Для чего подходит	Кол-во бесплатных шаблонов	Цена в месяц
Craftum	Интернет-магазин, лендинги.	от 250	от 197 рублей
Tilda	Е-shop, информационные проекты.	от 200	от 500 рублей
LPgenerator	Визитки, лендинги.	от 300	от 959 рублей
WIX	Тематически форумы, инфоблоги.	от 500	от $28

Общие принципы создания сайтов на конструкторе

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

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

Как создать в конструкторе Craftum

Действуем по инструкции:

1. Переходим на Craftum, регистрируемся и жмем «Создать сайт».
2. Выбираем шаблон. Используем встроенный поиск по категориям. Также можете воспользоваться «Пустой страницей», и самостоятельно добавить туда блоки.
3. Мы выбрали для примера категорию «Авто/Прокат автомобилей». Главная у нас теперь уже готова (форма заказа, меню, телефон). Далее жмем на режим редактирования и «Настроить».
4. Попадаем в редактор. Здесь можем добавить дополнительные блоки, оформить контент, дизайн, форму.
5. После внесения изменений, кликаем на «Опубликовать». Теперь страница открывается в браузере, ей присвоен урл и домен третьего уровня.

Бесплатный период составляет 10 дней. Затем придется выбрать один из платных тарифов, привязать уникальный домен, добавить разделы и начать их наполнять контентом.

Как создать сайт на WordPress

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

Покажем на примере хостинга Beget:

1. Переходим на официальную площадку провайдера, регистрируемся и заходим в свою панель управления.
2. Кликаем в меню на «Домены и поддомены».
3. Вводим название приобретенного имени в строку.

Ждем 10-15 минут, пока домен успешно пропишется на DNS-серверах. Теперь приступаем к установке WordPress.

1. Идем в меню, кликаем на CMS.
2. Выбираем из списка WP.

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

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

Самостоятельное написание кода

Ниже инструкция для тех, кто имеет познания в HTML. Напишем вместе код и запустим его в Интернет.

Создание HTML-сайта

Наш web-ресурс будет самым простым, одностраничным:

• открываем стандартный блокнот на компьютере;
• вписываем туда базовый код;
• сохраняем документ, дав ему имя index.html.

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

Ключевые этапы создания сайта

Чтобы создать его на HTML с нуля, надо придерживаться 3 базовых правил:

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

Создание макета

Итак, рисуем эскиз в Photoshop:

• открываем новый файл, присваиваем ему название;
• ставим разрешение 1000х1000 px;
• задаем настройки;
• вставляем линии, картинки, текст.

Верстка

Это написание кодов. Первая строка должна начинаться с <!DOCTYPE html>, чтобы браузеру стало ясно, как ему нужно читать файл. Затем пропишите набор требуемых тегов. Например, теги <header>..</header> отобразят шапку, а <footer>..</footer> – подвал.

Создание сайта с помощью PHP

На HTML далеко не уедешь – проект будет статичным и не изменится при обращении со стороны пользователей. Чтобы создать полноценный современный web-ресурс, потребуются навыки PHP, Python, JavaScript.

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

Немного об индексации в ПС

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

Создавать сайт с нуля или на конструкторе 

Перечислим плюсы и минусы каждого варианта:

1. Скорость. Для верстки нужна команда специалистов (дизайнер, верстальщик, программист). И даже в этом случае работа затянется минимум на 2-3 месяца, а по блокам разработка займет пару дней
2. Дизайн. У блогов на верстке нет никаких ограничений по функциональности – вы сможете реализовать все желания и фишки. Во втором случае используются готовые шаблоны с возможностью менять цвет, шрифт, оформление блоков, но не более того. Есть исключения – на Тильде можно с нуля разработать проект с оригинальным дизайном и анимацией.
3. Перенос на другой хостинг. У сверстанных блогов никаких сложностей с этим нет. На Tilda и прочих есть ограничения – лишь некоторые платные тарифы позволяют переехать.
4. SEO. Площадки с уникальным дизайном отдается предпочтение. Шаблонные web-ресурсы труднее продвигать, так как поисковые системы распознают такие блоки.
5. Простота. Единственный критерий, по которому выигрывают конструкторы. Разработать здесь их могут даже школьники.

Полезные программы для начинающих вебмастеров

Перечислим также парочку важных инструментов, которые помогут в работе новичкам:

• Photoshop – здесь будете рисовать макет;
• Notepad++ – профессиональный текстовый файл для редактирования исходного кода;
• Adobe Dreamweaver – отдельная программа для разработки, включает возможность режима просмотра офлайн;
• Filezilla – сервис для интеграции с хостингом;
• Evernote – классный планировщик задач, позволяет сделать заметки и получать к ним доступ с любого устройства.

Заключение

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