Шесть шагов для разработки сайта

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

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

Вот 6 шагов в разработке сайта:  1) Сбор информации, 2) Дизайн, 3) Написание и структурирование контента, 4) Кодинг, 5) Тестирование, обзор и запуск, 6) Поддержка и обновления.

Временная шкала разработки сайта

Временная шкала разработки сайта

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

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

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

Цикл разработки сайта

Шаг 1. Сбор информации: Назначение, Основные цели, Целевая аудитория

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

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

Далее подпунктом этого шага будет создание Sitemap и скетча для будущего сайта.

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

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

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

Примерная продолжительность от 1 недели.

Шаг 2. Дизайн: Макеты страниц, согласование и утверждение

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

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

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

Примерная продолжительность от 2 недель

Шаг 3.  Написание и структурирование контента

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

Примерная продолжительность от 4 недель

Шаг 4. Кодинг

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

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

Когда вы используете CMS для создания сайта, вы можете также установить CMS plugins если есть потребность в них на этом этапе. Другой важный щаг это SEO (Search Engine Optimization, оптимизация для поисковых систем). SEO это оптимизация элементов сайта (такие как, заголовок, описание, ключевые слова) которые могут помочь вашему сайту достичь более высокого ранга в поисковых системах. И опять же, валидный код очень важен для SEO.

Примерная продолжительность от 4 недель

Шаг 5. Тестирование, Обзор и Запуск

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

После того, как вы протестируете и перетестируете ваш сайт, пришло время выложить сайт на сервер. Для этого используется FTP (File Transfer Protocol) протокол. После того, как вы развернули файлы, проведите еще одно, финальное тестирование, чтобы убедиться, что все файлы загружены правильно

Примерная продолжительность от 1 недели

Шаг 6. Поддержка и Обновления

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

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

Другим важным моментом является регулярное и своевременное обновление сайта. Если вы используете CMS, регулярные обновления защитят вас от взлома, вирусов, и снизят риски в области безопасности.

Примерная продолжительность постоянно.

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