Вводная
Процесс разработки всегда одинаковый для всех видов веб-продуктов: лендингов, корпоративных сайтов, веб-сервисов, интернет-магазинов, личные кабинеты и т.д.
Этапы могут меняться и выполняться параллельно в зависимости от поставленной задачи, но я опишу основной процесс разработки сайта «под ключ».
Сбор информации и анализ конкурентов
Прежде всего необходимо собрать полную информацию о бизнесе: целях, ценностях, задачах, нюансах. Это важно, так как при первичном общении клиент может не знать о каких-то нюансах или не иметь четко сформулированных целей.
Следующим этапом изучаем конкурентов. Необходимо выделить преимущества конкурентов, понять слабые и сильные стороны их бизнеса. Выделяем удачные и неудачные решения реализованные на сайте конкурента, все это поможет сделать нам лучший сервис.
Особое внимание стоит уделить UI/UX. Не стоит городить велосипед, люди уже давно привыкли и сформировали хорошие решения по UX, используйте их. Но иногда в той или иной нише могут быть удачные решения по структуре или расположению элементов, вот для этого и нужно анализировать сайты конкурентов.
Структура и проектирование
Проработайте структуру сайта. На этапе согласования вы уже должны понимать, какие разделы будут на сайте, какая вложенность, но чтобы нагляднее видеть ваш проект, визуализируйте структуру и вложенность разделов, это поможет избежать ошибок в будущем.
В этот же этап я включил проектирование. По сути это проектирование архитектуры сайта. Для неольших проектов она может быть самой простой, особенно если вы разрабатываете проект на CMS, а вот для больших проектов это важный и значимый этап. Подробнее об архитектуре вы можете прочитать тут.
Архитектура упрощает:
- Поддержку проекта
- Вход новых разработчиков
- Масштабирование проекта
- Отладку
Прототипирование
Прототипирование — это схематическое отображение будущих разделов сайта.
Прототипирование помогает визуализировать будущую структуру страниц сайта. На этом этапе можно быстро и с меньшими затратами формировать и менять порядок расположения блоков, добавлять, удалять новые элементы и создавать несколько страниц для тестирования.
Также на этом этапе прорабатывается UX совместно с дизайнером для поиска лучшего решения.
Дизайн
Тут думаю все понятно, разработка проект-дизайна сайта. От UI до дизайн-концепции, разработки Ui-kit сетки компонентов и корпоративного стиля (при необходимости).
Разработка
Разработка делится на backend и frontend части. Зачастую они ведутся параллельно (если позволяет команда).
Backend — это функциональная, серверная часть сайта, которую не видят пользователи, но именно эта часть отвечает за обработку, передачу и форматирование (чаще) данных.
Frontend — это визуальная, клиентская часть сайта с который взаимодействуют пользователи. Эта часть отвечает за обработку пользовательских действий, визуальных эффектов, обработки каких-то данных и их отображения.
Тестирование
Ручное или автоматическое тестирование сайта, выявление ошибок или багов, исправление и повторная проверка.
На больших проектов зачастую настраивают CI/CD процесс для непрерывного тестирования и выгрузки функционала.
Выгрузка на хостинг / облачное решение
Публикация сайта в продакшн, так называемый «запуск» проекта для будушей индексации поисковыми роботами и пользования клиентами.