Этапы разработки сайта

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

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

• определение концепции сайта и функционала;
• разработка структуры сайта;
• отрисовка блочной структуры страниц;
• разработка дизайна;
• верстка и создание адаптивной версии;
• выбор административной напели сайта (CMS);
• «натяжка» верстки на админку;
• внедрение функционала на сайте;
• создание внутренней структуры разделов;
• наполнение сайта товарами и контентом;
• конечное тестирование функционала сайта;
• внедрение дополнительных технических правок.

Итак, давайте разберем все этапы более подробно.

Концепция сайта и функционал

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

LandingPage

Это сайт, состоящий из всего одной – посадочной страницы, на которой выведена вся информация о товаре/услуге, компании, его предоставляющей и все преимущества. Всё это выводится в отдельных блоках-экранах, обычно их от 6 до 12. Информация на них подается кратко, максимально привлекательно и красочно. Все сделано, чтобы человек совершил моментальную покупку.

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

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

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

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

Это не большой по размеру, количеству страниц и блоков на них сайт, который призван просто информировать потенциальных клиентов о человеке или о конкретной услуге. Количество страниц – от 3 до 5, но возможно наличие блога со статьями или новостями. На нем нет практически никакого функционала, только текстовые страницы с картинками и блоками выгод. Это самый простейший сайт в плане разработки и наполнения. Количество шаблонов страниц – 2-3 (однотипные страницы с разным контентом). Используется, чаще всего, как обычная визитка, только в цифровом виде (оттуда и название) – человек просто должен зайти на него, найти контакты или уточнить сферу деятельности.

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

Данный сайт может состоять из достаточного большого количества страниц и иметь глубокую внутреннюю структуру, например, веб-ресурсы юридических тематик. Там могут быть сотни страниц с оказываемыми услугами. Функционал сайта может быть достаточно разнообразным – от простейших форм связи до сложных калькуляторов. Количество шаблонов страниц – от 3 до 8. Количество блоков на странице больше, чем у визитки. Блоки располагаются в определённой последовательности для вовлечения человека в воронку продажи.

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

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

Это, пожалуй, один из самых сложных и трудозатратных видов сайта, особенно, если делать его “по уму”. Такого количества функционала, как на ИМ, не применяется больше нигде. Самый популярный:

• фильтры;
• сортировки;
• выборки;
• SEO фильтры;
• калькуляторы;
• тегирование;
• похожие товары;
• корзины и т.д.

Особенностью интернет-магазина является именно наличие “Корзины” – возможности сделать заказ через сайт. Ни у какого другого типа сайта её нет.

Разработка структуры сайта

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

Разработку структуры можно делать по разному.

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

Пример разработанной структуры в программе X-Mind

Разработка структуры страниц

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

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

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

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

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

После того как готова структура сайта и обрисованы схемы страниц (шаблонов страниц) и весь функционал, который должен быть, можно передавать это в работу дизайнеру. Вместе со всем ему необходимо предоставить несколько вариантов, которые, по мнению заказчика, хорошие и несколько, которые ему не понравились, чтобы дизайнер понимал «куда ему дальше двигаться». Давайте говорить откровенно, не все, что нравится Вам, действительно будет продавать. Также важно предоставить дизайнеру все, что необходимо использовать в разработке будущего внешнего вида – логотипы, картинки, look-book, корпоративные цвета и т.д.

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

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

Второй вариант – отрисовка дизайна всех шаблонов страниц и внесения правок после окончания. Этот способ используется чаще всего, но тут важно помнить, что дизайнер может ограничить количество внесений правок. На первый взгляд – это может звучать немного не правильно с точки зрения заказчика. Но еще раз напоминаю, что хороший дизайнер (особенно, если у него есть опыт в UX) намного лучше понимает в том, что он делает и для чего. Он четко знает, какие цвета и как совмещать, какие должны быть расстояния между элементами и как их лучше расположить. Очень часто, доверие к дизайнеру подтверждается высокой конверсией сайта.

Создание верстки на основе дизайна

После того, как дизайн полностью утвержден, необходимо преобразить в html-код, понятный для браузеров. Этот процесс называется версткой. Также на данном этапе разрабатывается вся анимация на сайте и все интерактивные элементы. Главное, о чем нужно помнить и сразу озвучивать front-end программисту (верстальщику), это то, что все работы должны производиться только по самым последним спецификациям CSS и HTML. Поскольку используя старые приёмы, ваш сайт в новых браузерах может выглядеть далеко не так, как вы хотели бы. Также это чревато тем, что на сайте могут быть ошибки в исходном коде и файлах стилей.

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

Выбор CMS (административной панели)

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

Как правильно выбрать CMS

Для этого нужно понимать какой функционал будет на сайте и какой у вас тип сайта. Например одни админ. панели разрабатывались специально для ИМ (OpenCart, Drupal), другие – для информационных сайтов (WordPress, Joomla). Это не означает, что нельзя на OpenCart сделать инфо сайт, но это будет не целесообразно в плане доработки функционала.

Например WordPress отлично подходит для инфосайтов, блогов, визиток и сайтов услуг, и при определенной настройке – для маленьких интернет-магазинов. Но реализовывать большой ИМ на ней категорически нельзя – она будет глючить и ломаться. Для полноценного магазина лучше использовать заточенные под это CMS – OpenCart, Bitrix. В них уже реализован функционал онлайн-покупок – корзина и фильтрования по параметрам.

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

Таблица вариантов CMS в зависимости от типа сайта:

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

Внедрение функционала

После того, как административная панель выбрана и установлена, проводятся работы по внедрению всего функционала сайта и настройки его правильной работы. На данном этапе back-end-программист разворачивает и настраивает базу данных сайта, выгрузку и загрузку данных из неё и увязывает это все с функционалом сайта. Устанавливает все необходимые плагины, дополнения и настройки, которые необходимы для осуществления правильной работы сайта и его технической части. Проводит оптимизацию всех процессов, связанных с его функциональной частью и стабильностью его работы.

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

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

Натяжка верстки

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

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

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

Адаптивная верстка

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

Наполнение сайта

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

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

Проверка функционала

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

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

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

И вот теперь все – сайт готов к работе и seo-продвижению!

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

Подведем итоги

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

Сергей Иванченко

CEO

Страница автора