Пост будет полезен тем, кто никогда не сталкивался с задачей сделать новый сайт. Нескучно об очевидных и неочевидных этапах работы по версии Пиратского сайта.
Если говорить без долгих и нудных вступлений, то процесс разработки сайта состоит из следующих этапов:
В этой статье мы расскажем о своем опыте выстраивания процесса разработки сайта с нуля, коротко и нескучно объясним, что происходит на каждом этапе. Потому что, как показывает практика, никто вообще ничего не понимает в этом (в том числе и некоторые разработчики сайтов).
Этапы разработки сайта
Заявка и первый контакт с клиентом.
На этом этапе потенциальный клиент заявляет о намерении работать над сайтом. Как правило, мы получаем лид (т.н. входящий интерес) через заявку и связываемся с заказчиком по указанным контактам: это может быть почта или телефон.
Договариваемся о встрече: очной или онлайн.
Кто работает: менеджер проекта.
Выявление потребности. Брифинг.
Встречаемся очно или онлайн. Знакомимся с бизнесом клиента поближе, задаем много вопросов.
Цель: понять, какие задачи должен решать сайт и как встроить его в бизнес-процессы компании.
Заполняем бриф, на основании которого будем выстраивать гипотезы и делать коммерческое предложение.
Как правило, уже на этом этапе нам становится понятно, какой формат сайта может отвечать запросу клиента.
Предварительно оцениваем работу, называем «вилку» по стоимости. Четкая стоимость разработки сайт будет названа позже.
Кто работает: менеджер проекта, арт-директор.
Коммерческое предложение.
Если клиент после предварительной оценки готов продолжать диалог, то мы берем паузу, чтобы конкретизировать предложение и оценить объем работы, сроки и стоимость. Составляем коммерческое и отправляем заказчику на ознакомление.
Кто работает: менеджер проекта.
Подписание договора
Составляем договор на разработку сайта. Согласуем и подписываем.
Кто работает: менеджер проекта.
Предоплата 25% от стоимости по Договору: за разработку Технического задания.
Разработка технического задания.
ТЗ — это требования к содержанию и техническому исполнению сайта. Документ является неотъемлемой частью договора (Приложение 1).
В нем прописывается то, из каких страниц сайт должен состоять, как все будет работать. Фраз в духе «сайт должен быть удобным и красивым» нет. Также в техническом задании указываются сроки работ по каждому этапу разработки, ответственные за контент. Если контент предоставляется заказчиком, то в каком виде и какие сроки это происходит.
В техническом задании не описывается то, как сайт должен выглядеть. Исключения могут быть в том случае, если у компании заказчика есть гайдлайны и брендбук, где внешний вид фирменных элементов регламентирован. Если так, то это указывается в ТЗ. Но не более, потому что на этапе разработки ТЗ ни один разработчик еще точно не знает, как будет выглядеть сайт в готовом виде.
Кто работает: менеджер проекта, арт-директор, программист.
Акт выполненных работ: Техническое задание.
Предоплата 25% от стоимости по Договору: за разработку прототипа сайта.
Исследование и базовая поисковая оптимизация.
«Не зная броду не суйся в воду». Маркетинговое и дизайнерское исследование (модные разработчики это называют «ресерч») позволяет разобраться в тематике, понять рынок, конкурентов, отмести несостоятельные гипотезы относительно инструментов, функционала и внешнего вида будущего сайта.
По сути, это такая дизайн-разведка, которая позволяет как следует подготовиться и повысить вероятность успеха проекта.
Проводится первый этап поисковой оптимизации. Да, если делать все нормально, то о SEO нужно задумываться едва ли не в самом начале, а не после того, как сайт сдан клиенту.
Самая распространенная ошибка: сначала сделать сайт, а потом его оптимизировать для поиска. Это то же самое, что сначала построить многоквартирный дом, а потом думать, сколько в нем будет квартир. В рамках базовой (разовой) оптимизации собирается семантическое ядро, кластеризация ключевых, по которым сайт будут искать, продумываются метатеги для каждой страницы. На этом же этапе лучше всего определиться с доменом (это адрес сайта). Как и с хостингом, чтобы быть уверенным, что он совместим с вашей системой управления контентом (в нашем случае это 1С-Битрикс).
Кто работает: маркетолог, арт-директор, SEO-специалист.
Прототипирование и копирайтинг.
Прототип — это черновик дизайна. Здесь не прорабатываются детали, нет цели оформить всю графику так, как то будет выглядеть при сдаче сайта.
На этапе прототипа мы прописываем УТП продукта клиента, проектируем пользовательские сценарии, продумываем расположение смысловых блоков, подбираем изображения, пишем тексты.
Согласование структуры сайта и контента происходит именно на этом этапе. Здесь происходит максимум коммуникаций заказчика и исполнителя. Почему? Потому что на этапе прототипа правки стоят недорого: гораздо проще что-то поменять местами, убрать или добавить, не задумываясь об эстетике.
Черновик позволяет сконцентрироваться именно на контенте и его смысле, а не на том, насколько все красиво выглядит.
Кто работает: маркетолог, арт-директор, дизайнер, копирайтер.
Акт выполненных работ: Прототип сайта.
Предоплата 25% от стоимости по Договору: за разработку дизайн-макета.
Разработка дизайн-макета.
Утвержденный прототип переносится на чистовик.
Здесь создается макет, внешний вид которого будет совпадать с внешним видом готового сайта. Продумывается стилистика (если она не задана гайдлайнами или брендбуком заказчика), готовятся изображения и видео, настраивается анимация.
При работе над финальным макетом дизайнерам очень важно калиброваться с верстальщиками и программистами, чтобы утвержденные в конечном итоге дизайн-решения ни для кого не стали сюрпризом. А точнее, чтобы не стало сюрпризом то, что некоторые дизайн-решения не могут быть реализованы в том виде, в котором нарисованы в макете.
Вообще, мы считаем, что дизайнер уже при работе над прототипом должен думать о том, как его задумки будут собираться верстальщиком. Если есть сомнения в тех или иных решениях — сразу к коллегам сборщикам: можно так сделать или лучше поискать другое решение?
Очень грустно смотреть на креативщиков, которые сначала все утвердили с заказчиком, а потом пришли с нереализуемыми решениями к сборщикам.
После утверждения дизайн-макета дизайнер готовит так называемый шаблон для сборки. Шаблон — это папка, в которой собраны все материалы, из которых состоит сайт: картинки в нужных форматах и разрешениях, видео в нужных форматах и разрешениях, чистовые утвержденные тексты, файл с метатегами. Шаблон прикладывается к макету и все вместе передается на верстку.
Кто работает: дизайнер, арт-директор.
Акт выполненных работ: Дизайн-макет сайта.
Предоплата 25% от стоимости по Договору: за верстку и программирование.
Верстка и программирование сайта.
Верстка — это когда сайт из макета, который сделан в графическом редакторе (в Фотошопе или Фигме, например) воспроизводится в виде кода.
Программирование сайта — это выстраивание взаимосвязей сверстанных элементов с базами данных, которые можно редактировать с помощью системы администрирования сайта (ее называют CMS). 1С-Битрикс как раз-таки является одной из систем администрирования.
Система администрирования сайта позволяет управлять контентом — добавлять, редактировать, удалять — с помощью графического интерфейса без знания языков разметки, стилей и программирования вообще.
На этом же этапе настраиваются средства коммуникации пользователя с компанией через сайт: формы обратной связи, почтовые события, чаты. При программировании страницам присваиваются прописанные ранее метатеги тайтл и дескрипшн.
Результатом программирования является работающий интерактивный сайт, но пока еще на тестовом домене, не опубликованный для публичного доступа.
Кто работает: верстальщик, программист, арт-директор.
Тестирование #1
Перед тем, как опубликовать сайт, мы проводим проверку на соответствие сайта макету и техническому заданию.
Арт-директору и дизайнеру важно убедиться, что весь контент находится на своих местах, тексты и медиа соответствуют своим разделам, кнопки и ссылки работают, как положено.
Кто работает: верстальщик, программист, дизайнер, арт-директор.
Акт выполненных работ: верстка и программирование сайта.
Публикация
Разработчики распаковывают сайт на хостинге, делая его доступным по уникальному адресу — домену. На этом же этапе завершается базовая поисковая оптимизация: каждая страница обретает свой уникальный адрес — URL — проверяются метатеги Title и Description.
Кто работает: программист, системный администратор.
Тестирование #2
После после публикации сайта не помешает еще раз убедиться, что сайт работает корректно, что с контентом и функционалом все в порядке.
Кто работает: программист, верстальщик, дизайнер, арт-директор.
Передача сайта клиенту. Обучение.
Теперь сайт находится в открытом доступе. Начинается самое интересное для клиента — обслуживание. Научить заказчика пользоваться своим новым сайтом — задача разработчика.
На этом этапе мы знакомим ответственных со стороны клиента с системой администрирования. Показываем, как устроены инфоблоки и как публиковать с их помощью новый контент. Передаем логины и пароли для входа в Битрикс.
После обучения клиент может принять решение о том, чтобы передать администрирование сайта на аутсорс — это поддержка, которую мы тоже оказываем, чтобы предприниматели занимались бизнесом и не отвлекались на сайт.
Финальный акт выполненных работ.
Регистрация сайта в системе Яндекса для ускорения индексации.
Опубликованный новый сайт не сразу появляется в результатах поиска по ключевым запросам. Должно пройти некоторое время для того, чтобы поисковые роботы обошли все страницы и поняли, что они существуют. Это называется индексация.
На это может уйти месяц или несколько месяцев (никто точно не скажет).
Есть хорошая новость: на скорость индексирования можно влиять.
Установите Яндекс Метрику на сайт.
Метрика начнет фиксировать посещения сайта и источники трафика, так что поисковые алгоритмы Яндекса быстрее отреагируют.
До некоторых событий бывали жаркие споры: где лучше продвигать сайта, в сети Яндекса или Гугла?И рекомендация была одна: выберите одну сеть и продвигайте там, другая сама подтянется. Сегодня же, если компания находится и работает на территории РФ, лучше выбирать Яндекс.
Добавьте сайт в Яндекс Вебмастер.
Это бесплатный сервис от Яндекса, который анализирует качество сайта и его поисковой оптимизации, дает всякие подсказки, где что улучшить. На картинке ниже есть меню Вебмастера. Каждый пункт разворачивается, так что есть, чем увлечься (а если вас больше увлекают другие вещи, то можете поручить нам заниматься вашим сайтом).
Яндекс очень любит, когда компании пользуются Вебмастером, поэтому скорость индексации после регистрации тоже ускорится.
Добавьте сайт в карточку компании на Яндекс Бизнесе.
Это позволит компании хорошо выглядеть во всех сервисах Яндекса.
Появится карточка предприятия в результатах поиска, в Яндекс Картах. Можно будет получать независимые отзывы от пользователей Яндекса и многое другое.
Да, если у вас еще нет профиля в Яндекс Бизнеса, заведите сегодня же.
Кто работает: системный администратор со стороны заказчика, SEO-специалист.
Как нельзя выкинуть из процесса разработки хорошего сайта этапы проектирования, чтобы ускориться или снизить стоимость.
Сайт — это программа, которая создается и настраивается под задачи бизнеса, чтобы приносить деньги.
Зачастую заказчики при выборе подрядчика для разработки сайта обращают внимание только на визуал, совершенно не задумываясь о том, какие задачи решались.
Нам тоже говорили, дескать, смотрели портфолио и работы «визуально не впечатлили». Наши сайты не всем нравятся на первый взгляд — это нормально. Зато они очень нравятся своим заказчикам, потому что зарабатывают им деньги. Сайт — это не картина в галерее, а мы не про творчество. Мы про бизнес.
Но мало сделать сайт. Его нужно наполнять содержанием со смыслами.
К сожалению, нередка картина, когда на хорошем сайте не появляется новый актуальный контент и пользователю становится неинтересно на него приходить. Посещаемость падает, активность падает, конверсии падают. Как результат, падают и позиции в поисковой выдаче (были на первом месте, стали на десятом). И в этом случае, конечно, проще всего подумать, что проблема именно в сайте, а не в том, что не было отлаженного процесса по его обновлению и поддержанию интереса.
Кроме этого мы помогаем клиентам делать контентный маркетинг, развивать контентную стратегию, чтобы разворачивать потенциал сайта и выводить его в топ поиска естественным образом.
Разберемся и в вашей тематике, сделаем сайт, предложим контентную стратегию и поможем выбиться в лидеры рынка.
Давайте поговорим о ваших задачах?
Мы пишем статьи, чтобы вы могли не только посмотреть на то, что мы делаем, но и на то, как мы думаем.
А еще Журнал — это хороший инструмент органического продвижения в поисковиках.