Основные этапы создания сайта
Сроки и стоимость создания сайта неоднозначная тема в веб-разработке. Для того чтобы получать то, что хочется, а не то, что получается важно разобраться с процессами создания сайта.
Основные этапы разработка сайта
1. Бриф и техническое задание
2. Разработка дизайна
3. Верстка
4. Программирование
5. Тестирование
6. Наполнение информацией (контентом)
7. Публикация
Этап 1. Бриф и техническое задание (ТЗ)
Чем отличается бриф от технического задания? Бриф – по сути, это правильно сформулированный ВОПРОС – что вы хотите от сайта? А техническое здание – это ОТВЕТ, как это получить.
На деле бриф – это список вопросов, помогающих структурировать пожелания к будущему сайту. С учетом полученных данных разрабатывается техническое задание, описывающие его смысловые, визуальные и технические характеристики. На основании ТЗ обычно разрабатывается прототип сайта – схематичная работающая версия сайта без дизайна.
Техническое задание и прототип сайта уменьшают количество согласований, страхуют от возможных дополнительных расходов. Они необходимы для корректировки стоимости и сроков работ последующих этапов, т.к. до момента утверждения ТЗ достаточно сложно точно оценить работу.
В зависимости от масштаба проекта объем технического задания может сильно отлиться – от нескольких страниц, до многостраничного документа. Для небольших проектов (например, одностраничников) иногда достаточно прототипа сайта с описанием ключевых требований.
ТЗ на сайт имеет самостоятельную ценность. Его стоит рассматривать как бизнес-план будущего сайта, без согласования которого, результат будет непредсказуем.
Этап 2. Разработка дизайна
После того, как мы определились с желаемым результатом, приступаем к его визуализации.
Сначала создается общая концепция дизайна сайта. Разрабатывается дизайн шаблонов ключевых страниц (главная и типовые страницы). Разрабатываются основные стилистические элементы – инфографика, текстуры, шрифты, цветовая гамма и пр.
На основании утвержденных шаблонов создается и дизайн всех остальных страниц и элементов сайта.
В результате получаем графические файлы, выполненные в виде послойных редактируемых элементов. Дизайн-макеты обычно создаются в программах AdobePhotoshop или Sketch и подготавливается согласно требованиям верстальщика. При необходимости создается краткое руководство (с описанием размеров, цветов, шрифтов, анимации элементов и пр.).
Все необходимые замечания по дизайну необходимо согласовать на данном этапе. Только после согласования и утверждения дизайн-макеты передаются на верстку.
Бывает, что в процессе утверждения дизайна возникают новые идеи и требования к сайту, которые согласовываются и вносятся в ТЗ с корректировкой стоимости и сроков работ последующих этапов.
Этап 3. Верстка сайта
После утверждения дизайна начинается техническое воплощение сайта — html-верстка страниц сайта.
Верстка должна отвечать базовым требованиям — соответствовать макету, быть кроссбраузерной, нормально отображаться на всех мобильных устройствах, изображения должны быть оптимизированы, сверстанные макеты должны предоставляться в виде страниц html и прилагаемых файлов (css, изображений, js и др.).
В результате создаётся код, который можно просматривать с помощью различных браузеров, а сверстанные страницы впоследствии используются как шаблоны, для последующего внедрения в «движок» сайта.
Этап 4. Программирование сайта
Для того, чтобы обычный пользователь мог самостоятельно редактировать информацию на сайте, сверстанные страницы программируются в «движок» (систему управления сайтом (CMS) или Framework). Выбор «движка» происходит с учетом специфики конкретного сайта.
Работы по программированию сайта ведутся на тестовом домене, чтобы рабочий процесс был скрыт от обычного пользователя.
Этап 5. Тестирование
После программирования сайта, он тестируется на основных браузерах и на соответствие поисковым системам. Обнаруженные ошибки исправляются до тех пор, пока не будут устранены.
Получаем рабочий, пока пустой сайт на тестовом домене. Как магазин с пустыми полками.
Этап 6. Наполнение контентом
Затем сайт наполняют информацией (контентом) — текстами, изображениями и пр. Информацию предоставляет заказчик, либо он создается исполнителем. Это решается на 1 этапе составления технического задания.
Если брать во внимание что пользователь заходит в интернет за информацией, то работа по созданию полезного и понятного контента является одной из самых важных!
Этап 7. Публикация
После наполнения сайта информацией, он переносится на основной домен, где повторно тестируется, настраиваются необходимые системы аналитики, вносятся стилистические и программные корректировки. При необходимости проводится обучение пользователя по работе с «движком» сайта.
Вуа-ля! Получаем управляемый готовый сайт на основном домене.
Дальнейшее продвижение и сопровождение проекта (внесение обновлений и техническая поддержка) обычно оговариваются отдельно.