Весь процесс разработки мы делим на две большие части:
I. Этап аналитики и проектирования.
II. Этап разработки.
На первом этапе закладываем базис будущего сайта: определяем, кто и как будет пользоваться, разрабатываем пользовательские сценарии, проектируем архитектуру и логику работы продукта, определяем общую стилистику, готовим контент.
Об этом рассказали в предыдущем материале.
Эта статья посвящена второму этапу: как команда digital-агентства создает работающий сайт или другой продукт на основе аналитики, прототипов, дизайн-концепции и техзадания.
Работы этого этапа:
Теперь подробнее о каждом шаге.
1. Разработка дизайн-макетов
Результат этого этапа — набор всех страниц сайта или экранов приложения под все необходимые разрешения и устройства, правила использования всех элементов на них.
Какие специалисты задействованы
Арт-директор, дизайнеры, менеджер и аккаунт проекта.
Дизайнеры разрабатывают макеты главной и всех уникальных страниц сайта или экранов приложения. В работе опираются на аналитику, прототипы, дизайн-концепцию и SEO-рекомендации.
Арт-директор подбирает на проект дизайнеров с релевантным опытом, контролирует чистоту макетов и единство стилистики. При необходимости направляет дизайнеров к лучшим решениям в интерфейсе.
Что нужно для разработки
SEO-структура сайта, прототипы, дизайн-концепция, текстовый и медиа-контент.
Что делаем на этапе разработки дизайн-макетов
На этапе проектирования мы отвечали на вопрос «Как работает?», на этапе концепции подобрали визуальную идею. Теперь развиваем стилистику для всех страниц сайта, детально продумываем внешний вид элементов и эффекты при взаимодействии пользователя с интерфейсом.
Для каждого экрана разрабатываем адаптивные макеты, чтобы сайт хорошо выглядел и работал на разных устройствах с разными разрешениями экранов. Сайт будет одинаково удобен и на компьютере или ноутбуке, и на смартфоне.
Вот так выглядит набор макетов, включая адаптивы, для корпоративного сайта Детской многопрофильной больницы:
А так набор макетов для интернет-магазина обуви:
В проектах со сложными анимациями и визуальными эффектами на этапе разработки дизайн-макетов подключаем frontend-разработчиков, чтобы заранее продумать техническую реализацию.
Это здорово экономит время и упрощает работу на этапе программирования интерфейса. Разработчик сразу будет в курсе, с чем ему предстоит работать и заранее подберет решения. А дизайнеры найдут баланс между визуальной эффектностью и удобством реализации.
Финальный шаг этапа — подготовка макетов к верстке и формирование UI-кита. UI-кит дизайнеры выносят все типы элементов интерфейса и как они реагируют при наведении курсора, нажатии, переключении между страницами. В нем же описаны все типы заголовков и их поведение при изменении верстки. Этот инструмент помогает frontend-разработчикам быстро собрать верстку, избежать разнобоя в элементах и сохранить стилистическое единство всех разделов.
Перед передачей в разработку дизайнеры проверяют макеты по чек-листу на ошибки: на всех ли страницах верная сетка, отступы, расположение элементов.
Инструменты и технологии
Макеты разрабатываем в Figma, для создания иллюстраций, иконок визуальных эффектов используем Photoshop и Illustrator, отдельный софт используем для 3D и моушен-графики.
2. Программирование: frontend
Результат frontend-разработки — всё, с чем взаимодействует пользователь на сайте или в приложении. Главная цель этапа — сделать сайт удобным для пользователей и эффективным с точки зрения бизнеса.
Какие специалисты задействованы
Frontend-разработчики и технический директор.
Фронтендеров иногда еще называют Creative Frontend Developer, так как они являются связующим звеном между дизайном и его техническим воплощением. Они программируют визуальные решения, пользовательские сценарии и функциональность, заложенные дизайнерами.
Что нужно для разработки
Дизайн-макеты, UI-кит или дизайн-система, сценарии и архитектура продукта, описанные в техзадании.
Что делаем на этапе frontend
На этапе фронтенда — воплощаем функциональность и «оживляем» отрисованный дизайнерами интерфейс с помощью кода.
Frontend — это больше, чем просто верстка макетов. Frontend-разработчики разрабатывают все, что помогает пользователю быстрее и удобнее решать задачи с помощью сайта.
- Пишут скрипты, при помощи которых контент динамически подгружается на страницы при первом обращении к сайту. В результате страницы в браузере пользователя загружаются быстрее, а переход между ними выглядит более плавным.
- Делают элементы интерактивными, чтобы кнопки, инпуты, формы ввода и другие элементы логично реагировали на действия пользователя и вели к нужным конверсиям.
- Реализует, оптимизирует сложные анимации и визуальные эффекты.
- Пишет API для интеграции с бэкендом или CMS-системой. То есть не просто создает клиентскую часть, но и связывает все действия пользователя с бизнес-логикой веб-продукта.
- Пишет юнит-тесты для проверки после разработки каждой функции. Эти тесты нужны для проверки, насколько корректно работает та или иная функциональность.
Инструменты и технологии
- Базовые технологии фронтенд-разработчика — это HTML5, CSS и JavaScript. HTML используется для разметки страницы, CSS — задает стили и внешний вид, а JavaScript — отвечает за интерактив и логику (реакции) элементов на действия пользователей.
- Для сложных веб-сервисов и ecommerce-проектов используют фронтенд-фреймворки: Vue.js, React.
- Для SEO-оптимизации SPA-приложений* используем фреймворк Nuxt.js.
*SPA или Single Page Application — это одностраничное веб-приложение, которое позволяет быстрее загружать контент в браузер пользователя. При первичном обращении к SPA-приложению загружается разметка и основной контент. А остальная информация при прокрутке или переходах между страницами подгружается динамически без полной перезагрузки всей страницы.
3. Программирование: Backend
Реализуем все процессы, которые происходят на серверной части сайта в ответ на действия пользователя.
Какие специалисты задействованы
Backend-разработчики, технический директор.
Чаще всего этот этап идет параллельно frontend-разработке, а разработчики бэкенда и фронтенда работают в тесной связке.
Что нужно для разработки
Техническое задание с подробным описанием всех необходимых алгоритмов, структуры данных, техническими описаниями для интеграции с фронтендом и сторонними сервисами.
Что делаем на этапе backend
Cайт без бэкенда — это не более, чем красивая оболочка. Чтобы сайт функционировал, нужно запрограммировать логику хранения данных и правила обмена информацией между сервером и клиентской частью.
Backend-разработчики программируют внутреннюю логику работы сайта или веб-продукта.
- Программируют серверную часть сайта или приложения.
- Проектируют базы данных, в которых хранится вся информация о содержимом всех страниц сайта. Например, информацию о товарах и категориях на сайте интернет-магазина.
- Настраивают пользовательские роли и управление сайтом в админпанели.
- Для проектов на готовой CMS на этом этапе настраивают админ панель для управления контентом на сайте.
- Разрабатывают API для интеграции со сторонними сервисами: почтой, программами складского и товарного учета вроде 1С, CRM, эквайрингом и т.д.
Инструменты и технологии
Бэкенд пишем на PHP.
- Для корпоративных сайтов и небольших интернет-магазинов используем CMS-системы. В Атвинте это MODx и Битрикс.
- В сложных кастомных проектах пользуемся фреймворком Laravel — одним из самых популярных фреймворков. Для сайтов на Laravel легко найти специалистов на поддержку сайта в отличие от других, менее популярных фреймворков, вроде Ruby on Rails.
- Для баз данных используем MySQL, MariaDB, Redis, PostgreSQL.
4. Тестирование
Тестирование нужно, чтобы оценить, все ли работает как надо и исправить до передачи проекта заказчику и релиза для конечных пользователей.
Какие специалисты задействованы
Тестировщики, менеджер проекта, технический директор, арт-директор.
Что делаем на этапе тестирования
Тестирование проводится после каждого этапа разработки сайта: после этапа проектирования тестируем пользовательские сценарии, проверяем по чек-листу сначала макеты, а потом верстку, проводим автотесты и нагрузочные тесты после разработки каждой новой функции. Особенно это актуально для многофункциональных веб-сервисов.
Основные виды тестирования:
- Контроль качества фронтенда. Арт-директор и дизайнеры отсматривают соответствие верстки и макетов. На этом шаге проверяем верность сетки, размеров и расположения элементов, правильную отработку ховеров и анимаций, межстрочные расстояния и т.д.
- Функциональные автотесты. Тестировщик пишут специальных ботов, которые автоматически проходят по определенным сценариям на сайте и выдают отчет о наличии технических ошибок. Эти сценарии берем из технического задания.
Так тестируем сценарии авторизации, добавления товара в корзину, путь до определенного экрана. Проверяем, верно ли отрабатывают формы, кнопки, верную ли информацию выдает сайт в ответ на запросы пользователей.
- Юнит-тесты — это автоматические тесты, которые пишутся самими разработчиками в процессе создания сайта. Они проводятся после доработки каждой функции в течении всего проекта. Юнит-тесты позволяют отследить стабильность работы каждого функционального модуля, найти и исправить конфликты между ними.
Например, разработчик написал модуль добавления товара в корзину. И он проверяет, правильно ли отработает модуль при разных сценариях:
1. Если добавили товар в пустую корзину, то на выходе на странице корзины должен отобразиться один товар.
2. Если в корзине уже был товар, то предыдущий должен остаться в корзине, а к нему добавиться новый.
- Нагрузочное тестирование нужно, чтобы оценить производительность сайта или сервиса при возрастании нагрузки. Оно позволяет определить, какие мощности нужны для корректной работы сайта, и выявляет «бутылочные горлышки» в производительности веб-продукта.
Инструменты и технологии
- Для нагрузочного тестирования — Яндекс.Танк
- Для фронтенд-тестирования — Jest
- Для тестирования бэкенда — PHPunit
5. Релиз сайта или веб-сервиса
После завершения всех этапов:
- Переносим сайт на сервера заказчика,
- Передаем инструкцию по использованию,
- Проводим обучение пользователей для сложных веб-продуктов вроде сервисов автоматизации производства и ERP-систем проводим обучение.
Что происходит после релиза
Чаще всего после релиза работа Атвинты над проектом не заканчивается. Следующий этап — развитие и продвижение проекта.
Развитие и поддержка
Техподдержка сайта в Атвинте бывает трех видов:
- Гарантийная поддержка.
Как любой производитель технически сложного продукта мы предоставляем гарантийную техподдержку для каждого разработанного нами сайта. Она распространяется на ситуации, когда в сайте обнаружена ошибка, связанная с нашим кодом.
- Абонентское обслуживание.
По договору абонентского обслуживания следим за работоспособностью проекта: чтобы сайт всегда был доступен и не «упал» из-за внешних причин, например, при хакерской атаке или большом потоке пользователей в период акций или распродаж.
Такая техподдержка работает как страховка на случай форс-мажора. Особенно это актуально для ecommerce-проектов.
Если сайт не находится на техподдержке, пройдет много часов, пока программисты вникнут в код, найдут и исправят проблему. А в это время клиенты не смогут попасть на сайт за покупками, или вообще получат вредоносную рассылку от вашего имени.
Результат — финансовые и репутационные потери, или упущенные выгоды.
При абонентском обслуживании команда техподдержки сработает более оперативно и устранит проблему с минимальными последствиями для бизнеса клиента.
- Развитие проекта.
Дизайнеры и разработчики Атвинты дорабатывают и качественно улучшают функциональность или интерфейс продукта. Например, когда возникла потребность в новой фиче или нужно изменить дизайн сайта с учетом аналитики поведенческих метрик. Digital-агентство бронирует ежемесячно команду, которая будет заниматься вашим проектом.
Продвижение
В Атвинте есть собственный отдел продвижения. Команда отдела разрабатывает стратегию продвижения и на ее основе запускает контекстную и таргетированную рекламу, проводит SEO оптимизацию, готовит статьи для продвижения через корпоративный блог, создают лендинги для проверки гипотез.
Для отслеживания эффективности рекламы мы подключаем Google Analytics, Яндекс.Метрику, настраиваем цели, устанавливаем пиксели рекламных систем.
Ежемесячно высылаем отчет с результатами за текущий месяц и тактический план работы на следующий месяц.
