Найти тему
Инноваторус

Как создать сайт с нуля

Оглавление

В статье говорим о том, как создать сайт с нуля и приводим презентацию веб-сайта туристической компании Open-Travel.Online, созданного с помощью онлайн конструктора CRM Битрикс24.

Презентация сайта полезна сотрудникам и партнерам компании Open Travel - описание страниц сайта помогает понять где на сайте размещена информации о компании, оказываемых услугах.

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

  • где можно создать сайт;
  • как создать сайт самому;
  • какой сайт создать.

Подобная инструкция полезна начинающим предпринимателям в решении задачи разработки сайта.

Этапы создания веб-сайта с нуля

Создание сайта Open-Travel.Online проводилась в последовательно в несколько этапов:

  1. определение целей сайта;
  2. анализ сайтов конкурентов;
  3. формулирование общих требований к сайту;
  4. разработка структуры сайта;
  5. подготовка текста для сайта;
  6. размещение текста и подбор картинок;
  7. настройка метрик сайта;
  8. доработка сайта (тестирование на кликабельность, удобство пользования и внесение улучшений).

01. Определите цели сайта

У туристической компании Открытый Мир, на самом деле, функционирует сайт. Однако решение обновить дизайн сайта open-travel.ru превратилось в намерение разработать новую структуру сайта, а еще через 3 дня трансформировалось в новую редакцию сайта.

Старая версия сайта Open Travel
Старая версия сайта Open Travel

Произошло это потому, что в 2022 году open-travel.ru не отвечает целям сайта по следующим причинам:

  1. Основной канал продаж компании - сарафанное радио. Клиенты в компанию приходят по рекомендации. По этой причине требуется сайт-визитка, на котором приводится краткая информация о компании, оказываемых услугах. Сайт-визитка должен подтверждать рекомендации владельцев и руководителей бизнеса обратиться в туристическую компанию Открытый Мир.
  2. Посетитель сайта должен сразу видеть нужные услуги бизнес-туризма, в фокус зрения лишняя для него информация попадать не должна. При этом сайт должен содержать простую в восприятии информацию, которая объясняет суть услуг делового туризма. Дело в том, что термины “бизнес-туризм”, “деловой туризм” не распространены, а содержание не очевидно даже для самих представителей бизнеса.
  3. Информация на сайте обновляется редко, поэтому нет смысла использовать CMS-системы, нести расходы на оплату соответствующего хостинга. Минус - поисковые системы плохо индексируют конструкторы сайтов. Впрочем, для рассматриваемого случая каналы продаж сосредоточены оффлайн, поэтому расходы на SEO-продвижение не запланированы.

02. Проведите анализ веб-сайтов конкурентов

Анализ сайтов конкурентов помогает определить:

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

Компания Open Travel работает с 2009 года, конкуренты известны. Тем не менее кроме опроса сотрудников, были проанализированы рейтинги туристических компаний, произведен поиск в социальных сетях, изучена поисковая выдача и контекстная реклама.

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

В результате поиск сайтов-конкурентов осуществлен через ввод в строку Яндекса поискового запроса «услуги делового туризма». Из полученной выдачи сайтов сформировали список понравившихся по следующим критериям:

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

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

Несмотря на то, что отобрали 6 сайтов-конкурентов, впоследствии преимущественно обращались к 2 из них.

03. Уточните требования к сайту

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

К создаваемому сайту open-travel.online были предъявлены следующие требования:

1. Стильный лаконичный дизайн

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

2. Краткий текст – информация посетителями воспринимается бегло, больше 2 абзацев мало кто читает.

3. Простая навигация – в любой раздел пользователь должен попадать в 2 клика.

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

04. Разработайте структуру сайта

В случае создания сложных сайтов (например, tender-gold.ru) разрабатывалась логическая схема размещения страниц веб-сайта, включая отрисовку взаимосвязей.

Создание сайта-визитки Open-Travel.Online шло по тому же принципу. Структура сайта создавалась непосредственно в конструкторе сайтов CRM Битрикс24, при этом:

  • структуру страниц сайта визуально задали в форме каталогов;
  • на уровне настроек сайта определили макет страниц сайта.

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

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

05. Подготовьте текст веб-сайта

Главная страница должна привлекать и удерживать внимание - посетитель должен сразу видеть ответ на внутренний запрос, с которым попал на сайт. Эту функцию выполняют меню и картинки.

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

Пример формы обратной связи
Пример формы обратной связи

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

Лайфхак! Перед размещением текста проверяйте его в севрсисах:
- Главред - на чистоту и читаемость.
- Text.ru - на уникальность и орфографию.

В результате на главной странице разместили:

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

Страница «О компании» отвечает на вопросы:

  • какие услуги оказывает компания?
  • какой сценарий оказания услуг – кто, что и в какой последовательности делает?
  • почему можно доверять компании Open-Travel.Online?
О компании Open Travel (Открытый Мир)
О компании Open Travel (Открытый Мир)

Страницы с базовыми услугами содержат:

  • описание направления оказываемых услуг;
  • информацию о деталях оказания услуг как подтверждение квалификации (деловые поездки, MICE мероприятия, визовая поддержка);
  • ответы на возражения для понятной услуги (частный отдых).

06. Подберите картинки

Размещение текста в CRM Битрикс24 упрощено использованием готовых шаблонов – готовый модуль переносится из панели инструментов на макет сайта. Цветовое оформление модуля автоматически адаптируется под заданный стиль сайта.

Выбор готовых шаблонов модулей сайта в Битрикс24
Выбор готовых шаблонов модулей сайта в Битрикс24

После заполнения текстом окон шаблона становится очевидным дизайн всей страницы сайта.

При работе над сайтом open-travel.online картинки подбирались под текст, причем в 80% случаев на момент подготовки публикации использовались собственные фото. Остальные 20% заимствованы из стока картинок, и впоследствии будут заменены на фотографии компании.

Картинки и рисунки должны:

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

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

Обработка картинок в GIMP при создании сайта Open-Travel.Online
Обработка картинок в GIMP при создании сайта Open-Travel.Online

07. Настройте метрики сайта

Оценка эффективности сайта проводится на основе цифровых показателей Яндекс-метрики или Google-аналитики. В случае с конструктором сайтов CRM Битрикс24 достаточно было указать номер Яндекс-метрики в настройках сайта.

Метрики сайта в Битрикс24
Метрики сайта в Битрикс24

08. Постоянно улучшайте веб-сайт

На заключительном этапе выполнены:

  • настройка CRM-форм для обработки запросов посетителей сайта open-travel.online;
  • исправлены выявленные орфографические опечатки;
грамотность - показатель квалификации сотрудников компании для посетителей сайта
  • внесены описания картинок как маленький элемент SEO;
  • прописаны английские названия модулей вместо цифровых обозначений – порядок и понятность должна быть во всем.

Заключение

Созданный веб-сайт постоянно дорабатывается под требования и пожелания посетителей. С этой целью:

  • новая версия сайта open-travel.online прошла обсуждение внутри компании;
  • запрос на оценку сайта направлен клиентам, друзьям и товарищам;
  • запущен процесс обсуждения в социальных сетях (ВКонтакте, Дзене, YouTube, RuTube).

Прошу вас, уважаемый читатель, после прочтения данной статьи сделать 3 простых шага:

  1. посетить сайт open-travel.online;
  2. ознакомиться с содержанием страниц веб-сайта;
  3. в комментариях к публикации написать о том, вызывал ли сайт желание заказать услуги делового туризма? Что понравилось? С чем не согласны? Что можно улучшить?