Процесс разработки сайта – основные этапы. С чего начать создание сайта?

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

Каковы основные этапы разработки веб сайта и в каком порядке они следуют друг за другом? Можно ли отказаться от каких-то этапов или сократить время на них?

Рассмотрим все этапы разработки сайта она начала работ до запуска по порядку.

Этап 0. Выбор домена

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

Почему это важно?

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

Но, в случае, если вы выберете достаточно распространенное название, особенно из одного слова, которое значит что-то конкретное и может легко использоваться для бизнеса в разных сферах — например, Unity, Luxor, Hurricane, Alternative, Boxer и прочие аналогичные — то крайне велика вероятность, что домен с таким именем уже будет занят, особенно в популярных доменных зонах (.ru, .com, .org, .su, .рф).

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

Этап 1. Выбор веб-студии, обсуждение задачи, оформление тех.задания, подписание договора

Как выбрать подходящую веб студию? См. отдельную статью.

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

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

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

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

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

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

Этап 2. Разработка прототипов основных страниц

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

Для чего выполняется эта работа?

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

Если клиент увидит, что в прототипах чего-то не хватает (о, а где же отслеживание по номеру заказа?), проектировщик добавит необходимые блоки, а тех. задание и смета будут скорректированы.

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

Разработкой прототипов занимается отдельный специалист — проектировщик интерфейсов, который, в первую очередь, при выполнении своего блока работ руководствуется понятием usability (удобство сайта для посетителей в плане навигации), обладает аналитическим складом ума, позволяющим создавать четкие логические структуры, понимает какие механизмы seo продвижения должны быть заложены в сайт на уровне структуры и что влияет на количество поступающих с сайта писем и звонков.

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

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

Этап 3. Концепция дизайна

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

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

Концепция сайта всегда разрабатывается в соответствии со стилистикой фирменного стиля или логотипа компании.

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

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

Этап 4. Дизайн внутренних страниц

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

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

Этап 5. Адаптивная вёрстка

Верстка сайта начинается после утверждения дизайн-макетов всех страниц сайта.

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

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

Этап 6. Программирование

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

Данный блок работ также носит название «back-end разработка», что отделяет его на смысловом уровне от понятия «front-end разработка», относящегося к верстке.

Этап 7. Интеграция сайта с 1С, CRM и другими внешними системами

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

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

Этап 8. Подключение механизмов онлайн-оплаты товаров и курьерских служб доставки товаров

На данном этапе веб студия подключит к сайту популярные системы оплаты (VISA, MasterCard, Maestro, МИР, Яндекс. Деньги, Robokassa, PayPal и другие), что позволит покупателям оплачивать покупки сделанные на вашем сайте непосредственно онлайн в момент заказа.

Также при необходимости будут подключены сервисы по доставке (СДЭК, Boxberry, Pick-Point и др.), позволяющие вашим клиентам выбирать доставку соответствующей службой непосредственно на вашем сайте на этапе оформления заказа.

Этап 9. Наполнение контентом

Вся структура, внешний вид и функционал сайта уже готовы. Остается наполнить его информацией (контентом).

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

Однако, большинство клиентов, исходя из нашей практики, предпочитают передать эту работу студии на аутсорс, что экономит им значительное количество человеко-часов (представьте, например, трудозатраты по заполнению товарного каталога с 10 000-ми товаров) и освобождает их сотрудников от несвойственной им работы (копирайтинг текстов, монотонное заполнение многочисленных карточек товаров, написание статей в блог и проч.), позволяя сконцентрироваться на основных задачах.

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

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

Этап 10. Внутренняя SEO-оптимизация сайта

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

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

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

Как и для чего проводится внутренняя seo-оптимизация сайта?

Для того чтобы сайт как можно быстрее начал свое движение вверх по списку поисковой выдачи все его страницы должны быть оптимизированы не только в плане структуры, заголовков и текстов, но и на уровне мета-тэгов (h1, h2, h3, title и description).

Все эти «свойства» заполняются в системе администрирования сайта по определенным правилам (количество допустимых знаков, допустимое количество повторений ключевых слов в мета-тэгах, использование комбинаций низкочастотных и высокочастотных запросов и проч.). Четкого списка этих правил не существует, так как Яндекс и Google не разглашают и постоянно меняют свои алгоритмы ранжирования сайтов, но seo-специалисты, исходя из своего опыта, знают каким образом можно повысить «эффективность» мета-тэгов.

Этап 11. Тестирование

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

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

Этап 12. Публикация сайта на хостинге

Как только все механизмы нового сайта отлажены на тестовом сервере — его можно будет переносить на выбранный вами доменный адрес (см. этап 0) и хостинг (интернет-площадку, где будет хранится вся база данных сайта и использование которой требует некоторой абонентской платы по расценкам хостинг-центра).

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

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

Этап 13. Установка систем аналитики

Для обеспечения вас необходимыми статистическими и аналитическими инструментами по оценке работы сайта студия должна установить вам системы Яндекс.Метрика и Google Analytics, а также добавить ваш сайт в Вебмастер Яндекса, Google и Mail.ru.

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

Этап 14. Покупка лицензии (1С-Битрикс)

Большинство сайтов в России создаются на базе 1С-Битрикс. Если выбранная вами студия использует эту CMS, то покупка лицензии просто будет включена в общую смету по разработке сайта отдельной графой.