• /
  • /

Пошаговое создание сайта: инструкция и этапы — подробное руководство

Создание сайта — важное решение для любого бизнеса. Сайт — неотъемлемая часть компании, её представительство в Интернете.

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

Этапы создания сайта для штатного маркетолога или руководства или владельца бизнеса

Этап 1 — определяем цели и задачи

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

Но сайт — это инструмент в достижении бизнес-задач. У инструмента не может не быть цели, с его помощью выполняют задачи.

Примеры задач, для выполнения которых нужен сайт:
• Увеличить спрос.
• Создать и поддержать положительный имидж
• Усилить бренд.
• Вывести новый продукт на рынок — информировать аудиторию о нём.
• Привлечь новых партнёров и размещать информацию для них.
• Увеличить число подписчиков, наращивать e-mail базу.
• Публиковать новости компании.
• Создать пространство для обсуждения продукции покупателей.
• И другие.

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

Этап 2 — выбор подрядчика

Кому доверить поэтапное создание сайта? Есть несколько вариантов, в таблице мы опишем плюсы и минусы.
Естественно, это не все критерии выбора. Есть еще рейтинги, портфолио и собственный сайт исполнителя. Но! Место в рейтинге, грамоты, награды, дипломы и сертификаты — всё можно купить. Собственный сайт студии часто лучше, чем те, что лежат в портфолио, потому что ему уделили больше времени.

Советуем пообщаться с потенциальными подрядчиками и задать несколько вопросов:

В чем их специализация? В чем конкретно они развиваются и что лучше всего понимают? В каких отраслях их специалисты разбираются лучше всего? На что уйдет больше всего времени во время разработки? С какого конкретно направления начинала студия?

Это вопросы помогут определить будущий подход к созданию сайта. Подробнее о них мы писали в статье «Подходы к разработке сайта — управляем процессом с умом».

Этап 3 — подготовка информации, ответы на вопросы

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

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

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

Задача клиента — выделить время эксперта, чтобы он САМОСТОЯТЕЛЬНО надиктовал в аудиозаписи или написал ответы на вопросы, которые сформирует маркетолог. На это требуется время, возможно тонкости, которые кажутся на первый взгляд избыточными, но именно из них мы складываем потом отличные тексты о компании и её предложении.

Этап 4 — согласование дизайна

Этап согласования дизайна сайта
На этом этапе вам покажут первые видимые результаты проделанной работы. Обычно первоначальный дизайн демонстрируют на 1-5 страниц.

Здесь часто случаются трения заказчика и подрядчика потому что дизайн не имеет четких правил оценки. На что следует обратить внимание:

1. Оцените не мешает ли дизайн прочитать текст? Не перетягивают ли какие-то слишком яркие элементы внимание на себя? Задача — найти баланс.

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

3. Дизайн должен отражать фирменный стиль. Если есть корпоративные цвета, то соответствовать её гамме.

4. Просите аргументацию решения, если что-то кажется вам неуместным. Хорошие специалисты всегда могут объяснить почему выбрали именно этот ход.

5. Смотрите глазами вашего клиента. Если есть возможность дать кому-то из клиентов оценить дизайн с честным комментарием, сделайте это.

Этап 5 — проверка текстов

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

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

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

2. Больше цифр и конкретики. Утверждение, подкрепленное цифрой, имеет больший вес для вашего потенциального клиента и убедит его быстрее.

3. Ваши сильные стороны в блоках преимуществ должны быть УНИКАЛЬНЫМИ, отличными от того, что написано у конкурентов.

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

Этап 6 — тестирование

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

Проверьте сайт с мобильных устройств.

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

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

Пошаговая инструкция создания сайта для исполнителя услуги

Шаг 1 — определяем цели

Сайт — инструмент к достижению бизнес-задач. Задачи ставят под цель. Вот с неё и стоит начать.

Цель — то, чего хотим достичь.
Например: «Увеличить прибыль компании в этом году на 30%».

Задачи — конкретные действия, которые нужно сделать для достижения цели.
• Повысить объем продаж.
• Увеличить объем рекламы.
• Расширить каналы сбыта.
• Сделать рассылку старым клиентам.
• Увеличить присутствие в Интернете

Инструменты — с помощью чего будем достигать задач.
• Сайт
• Поисковая оптимизация
• Реклама в Интернете
• Реклама в городе

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

Дальнейший план создания сайта определяется его типом: интернет-магазин, визитка, корпоративный сайт, промо-сайт и так далее.

Шаг 2 — подробный опрос

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

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

Но! Запрашивая информацию в таком виде типа: «Ваши конкурентные преимущества» — с вероятностью 90% придет ответ — «Индивидуальный подход, низкие цены, высокое качество», а так не пойдет! Ведь это не то, что выделит компанию на рынке.

Далее обязательно нужно задать уточняющие вопросы типа:
• На сколько процентов цены ниже рынка?
• В чем проявляется индивидуальный подход (опишите конкретные действия)?
• Как добиваетесь высокого качества?

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

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

Шаг 3 — изучаем конкурентов

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

1. Берем несколько основных запросов, по которым будущий сайт должен быть в ТОПе. Вводим первый запрос в Яндексе и Google в режиме инкогнито, выбрав нужный регион.

2. Анализируем ТОП 10. Считаем количество разных типов сайта: сколько коммерческих, информационных, агрегатов-сайтов в топе. Эта информация поможет понять насколько сложно будет продвинуть коммерческие страницы.

3. Создаем таблицу, в которую будем вносить по каждому конкуренту основную информацию: место в выдаче, url страницы, уникальное торговое предложение (УТП), основные блоки (структура страницы), преимущества.

Спросите у клиента кого он считает основными конкурентами отрасли. Они могут быть не в ТОПе, но будут полезны для анализа УТП.

Шаг 4 — готовим проект сайта

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

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

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

Этапы создания проекта сайта:
1. Определить структуру страницы. Для этого используем файл с анализом конкурентов, который подготовили ранее. Например, базовые элементы Главной страницы:
• Шапка с логотипом и контактной информацией.
• Меню навигации.
• Преимущества.
• Описание компании.
• Тизеры на основные услуги или товары.
• Отзывы и примеры работ.
• Футер (подвал).

2. В 90% студиях этот пункт не делают и зря. Пишем для страниц проекта настоящие тексты. Это поможет понять объем текста в каждый блок. Дизайнер сразу будет работать на живом проекте. И когда мы получим от него дизайн, то разработчику верстальщику не придется танцевать с бубном, чтобы уместить текст в блок. Пусть дизайнер сразу увидит сколько контента нужно разместить.

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

4. Сдаем проект дизайнеру.

Шаг 5 — пишем тексты

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

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

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

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

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

Основные принципы написания текстов для коммерческих страниц:
• Аргументируйте и доказывайте цифрами свои утверждения.
• Пишите кратко и по делу. Без длинных вступлений и общеизвестных фактов.
• Раскрывайте услугу подробно. Из чего она состоит, как проходит и т.д.
• Клиенты имеют дело не с компанией, а конкретными исполнителями — рассказывайте о них подробнее.
• Для товаров важны подробные параметры, характеристики, фотографии.
• Если не можете назвать цену, расскажите из чего она складывается, дайте пример расчета.
• Сопровождайте текст фотографиями и видео компании. По возможности, не используйте стоковые фото. Попросите клиента устроить фотосессию.

Шаг 6 — разрабатываем дизайн

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

• Помогает пользователю быстро найти нужную информацию.
• Не мешает прочитать текст и привлекает к нему внимание.
• Легкий и не перегружает мозг анализом большого количества деталей и анимацией.
• Даже при большом объеме информации разбавлен графическими элементами и блоками, поэтому легко воспринимается.
• Функционален и удобен.
• Соответствует стилю компании, её характеру и отрасли.

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

Шаг 7 — делаем базовое SEO

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

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

Что нужно сделать на корпоративном сайте:
• Сформируйте список адресов страниц. Этапы создания структуры сайта у каждого оптимизатора свои. Мы опираемся на каталог клиента и конкурентов.
• Задавая адреса страниц, следовать правилу ЧПУ — человеко-понятный урл.
• Заполнить метатеги: title, description. Сделайте их понятными, простыми без использования большого количества ключевых фраз.
• Размечать заголовки текстов h1, h2, h3 на страницах.
• Если вы переделываете старый сайт, то настроить 301 редиректы с удаленных страниц, чтобы не потерять вес.
• Сделать внутреннюю перелинковку там, где это уместно и органично.
• Сформировать robots.txt, в котором закрыть от индексации правилами страницы с get-параметром.
• Задавайте alt и title изображениям.
• Добавьте сайт в панели веб-мастера и google и сделайте там базовые настройки.
• Установите счетчики аналитики, например, Метрику.

Шаг 8 — верстаем

Верстка сайта
Дизайн передается на верстку. Пройти создание сайта по шагам невозможно без верстки.

В зависимости от типа сайта определяем движок, на котором будет собиран сайт.
• CS-Cart, Битрикс — подходят для интернет-магазинов.
• Diafan, FLEX, Битрикс, Wordpress — подойдут для корпоративных сайтов и визиток.
• Tilda — конструктор, который подойдет практически для всего. Его любят роботы, сайты на Тильде быстро выходят в ТОП.

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

3 главных принципа верстки:
• Сайт должен быстро загружаться. Всё что, можно оптимизировать в коде должно быть сделано: сжатие веса картинок, очистка от комментариев и неактуальных сервисов и т.д.
• Дизайн не должен страдать. Не уходите от дизайна слишком далеко. Потратьте больше времени на разработку, но добейтесь полной идентичности с дизайном.
• Оценивайте итоговый результат с позиции пользователя и SEO-специалиста, чтобы ничего не мешало продвижению. Уберите всё лишнее из кода.

Шаг 9 — тестируем и запускаем

Чтобы грамотно создать сайт, пошагово проверяйте себя и исполнителей. Поэтому последний этап — тестирование.

• Проверьте отображение сайта во всех браузерах.
• Посмотрите, как отображается сайт на нескольких моделях смартфонов.
• Используйте специальные сервисы автоматического аудита: https://tools.pixelplus.ru/
• Скорость загрузки сайта по Google https://developers.google.com/speed/pagespeed/insights/
• Проверка на ошибки в панелях вебмастера поисковых систем.
• Проверка корректности работы всех форм на сайте.
• Проверить отображение сайта на разных платформах и операционных системах (Windows, Android, Linux, Mac OS и т.д.).
• В панелях вебмастера Яндекса и Google загрузить карты сайта.

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