Работа над сайтом, веб-сервисом или мобильным приложением состоит из двух крупных этапов: сначала проводим аналитику и проектирование; на втором этапе — непосредственно разрабатываем продукт.
Эта статья посвящена Первому этапу — аналитике и проектированию.
- В предыдущем материале мы рассказали, с чего начинается работа над проектом: Что происходит после заключения договора на разработку и как в Атвинте ведут проекты.
- Про второй этап читайте в статье: Как мы разрабатываем веб-сайты: этап дизайна и программирования
Что делаем на первом этапе
Зачем нужен первый этап
Этап аналитики и проектирования нужен, чтобы перевести идею продукта в конкретные шаги его реализации и понять, что именно и как лучше сделать с технической точки зрения. Этап помогает синхронизировать видение сайта или IT-продукта у заказчика и команды проекта.
Если сравнить со строительством здания, то на этом этапе мы разрабатываем чертежи и проектную документацию. В случае веб-разработки аналитики, проектировщики и дизайнеры определяют, как должен работать и выглядеть сайт.
А еще работа по техзаданию и прототипам помогают запараллелить часть работ на втором этапе. Ведь каждая функция и взаимодействие подробно описаны. Это ускоряет разработку и позволяет заказчику получить готовый сайт быстрее без потерь в качестве.
Мы в Атвинте не пропускаем этот блок работ. Если клиент не готов вложиться в первый этап, мы вынуждены распрощаться. Без аналитики и проектирования мы не можем гарантировать качество продукта, а потому не готовы взяться за проект.
Шаг 1. Исследования и аналитика
Какие специалисты задействованы
Маркетологи и менеджер проекта изучают аудиторию, конкурентов и спрос по данным систем аналитики и открытым источникам.
Для чего нужно
Главная цель этапа — сформировать объемное видение бизнес-ниши, исследовать потребности и поведение пользователей, изучить аналоги и конкурентов.
Это особенно актуально для стартапов и новых IT-продуктов, в которых на старте много неизвестных даже для самого заказчика.
На основе аналитики команда проекта:
- правильно спроектирует интерфейс и функциональность веб-сервиса;
- подберет подходящие технологии;
- определит, какие функции важны успеха у пользователей, а какие — только раздувают бюджет.
Что делаем
В результате этапа клиент получает аналитический отчет. В зависимости от бизнес-задач клиента, в отчет включаем такую информацию:
- информацию о спросе в нише;
- анализ сильных и слабых сторон конкурентов и продуктов-аналогов;
- информацию о технологиях у продуктов-аналогов;
- анализ сильных и слабых сторон клиента в сравнении с конкурентами;
- анализ целевой аудитории, ее сегментация и портретирование;
- данные о поведении пользователей по информации из систем аналитики существующего сайта;
- описание пользовательского поведения на основе данных о конкурентах.
Шаг 2. SEO-проектирование
Этап актуален для проектов, которые в дальнейшем нужно продвигать через поиск: корпоративных сайтов, интернет-магазинов, маркетплейсов, информационных порталов и сайтов СМИ и т.п.
Какие специалисты задействованы
SEO-специалисты и маркетолог-аналитик собирают семантику для сайта, кластеризуют ее, разрабатывают структуру сайта и рекомендации по проектированию. В работе опираются на данные из аналитического отчета.
Зачем нужно
Если пропустить SEO-проектирование, у сайта нет шансов попасть в топ поисковиков. Для поискового продвижения нужно заранее прописать структуру сайта, учитывая семантическое ядро для бизнес-тематики и технические требованиями поисковиков.
SEO-проектирование не гарантирует попадание в топ-10 сразу после релиза сайта, зато создает инструменты, чтобы это в принципе было возможно.
Что делаем
На этом этапе продумываем и закладываем фундамент для дальнейшего SEO-продвижения: собираем семантическое ядро, составляем рекомендации по структуре сайта в целом и каждой его страницы, прописываем обязательные технические требования для разработчиков.
Подробнее, что такое SEO-проектирование и что делают специалисты на этом этапе, рассказали в отдельной статье.
Шаг 3. Сбор и подготовка контента
Под контентом понимаем всю информацию на сайте: текст, изображения, фотографии, видео.
Какие-то материалы предоставляет заказчик, а что-то мы берем на себя. В любом из этих случаем мы ожидаем вовлеченности от представителя заказчика, потому что любой контент разрабатывается на основе информации о компании, ее продуктах, ценностях и УТП.
Какие специалисты задействованы
Редактор и копирайтеры собирают информацию и пишут текст для разделов сайта. Фотограф и иллюстратор создают визуальный контент. При необходимости подключаем видеопродакшн.
Зачем нужно
Эту работу стоит начать как можно раньше, чтобы к моменту UX-проектирования было ясно, под какие материалы нужно заложить блоки на каждой странице сайта.
Тогда не получится так, что сайт готов и стоит пустой. Или спроектирован дизайн и отрисованы макеты, а в них не предусмотрено место под важную информацию. Потому что про эту информацию вспомнили только к концу разработки, когда начали собирать контент.
Подробно о том, что делаем на этом этапе и почему важно приступать к нему заранее подробно рассказали в статье: Контент для сайта: сделать сразу или подождать конца разработки.
Шаг 4. Проектирование архитектуры проекта и описание техзадания
На этом этапе продумываем внутреннюю логику работы с технической точки зрения: как веб-продукт работает, какие процессы запускаются в ответ на действия пользователей, какие планируются интеграции и какие API нужны для этого. Также прописываем, какие технологии и как будем использовать.
Какие специалисты задействованы
Проектированием архитектуры занимается команда из менеджера проектов, разработчиков и технического писателя. Для проектов со сложными интерфейсами этот этап делаем параллельно с проектированием интерфейса. Тогда к работе подключаем дизайнеров.
Зачем нужно
Техническое задание (ТЗ) важно для высоконагруженных проектов со множеством интеграций. Например, для информационных систем, крупных ecommerce-решений, сервисов автоматизации процессов. В таких проектах много функциональных особенностей, которые нельзя упускать, иначе продукт не будет выполнять свои задачи.
Кроме того, на больших проектах задействовано много разработчиков, и техзадание позволяет запараллелить разработку отдельных функций продукта, а потом безболезненно и бесшовно собрать проект. Такой подход позволяет делать и запускать продукты быстрее.
Что делаем
Техническое задание — это руководство для программистов, как должен работать сайт, веб-сервис или приложение, чтобы выполнять свои функции было сбоев и ошибок.
Ниже выдержка — из оглавления технического задания для примера.
Грамотно составленное техническое задание содержит в себе массу пунктов, как основных, так и мелких. Подробнее рассказали об этом в статье «ТЗ и прототипы: два кита разработки».
Шаг 5. UX-проектирование
На этом шаге разрабатываем структуру каждой страницы сайта, пользовательские пути по экранам и структуру взаимодействия пользователей с интерфейсом. Результат этапа — интерактивные или плоские прототипы, которые отражают пользовательские сценарии.
Какие специалисты задействованы
На этапе проектирования совместно работают UX-дизайнеры, аналитики и SEO-специалисты. В работе опираются на рекомендации SEO-проектирования и данные аналитического отчета.
Зачем нужно
Прототипы — это чертеж интерфейса. Процесс их создания можно назвать техническим дизайном.
Прототипы позволяют протестировать логику взаимодействий на реальных пользователях, собрать фидбэк и улучшить интерфейс до того, как начнем разрабатывать. Это особенно важно при разработке инновационных продуктов или веб-сервисов со сложной логикой взаимодействия.
Прототипы для сайтов нужны, чтобы заложить структуру уникальных страниц и не упустить важные контентные блоки.
Править прототипы значительно быстрее и дешевле, чем перерисовывать готовые макеты или переписывать код. UX-проектирование помогает избежать клиенту ненужных затрат в дальнейшем.
IT-стартам прототипы позволяют как можно раньше презентовать продукт инвесторам и получить инвестиции на разработку. Интерактивный прототип даст представление о функциональности и возможностях продукта без серьезных вложений.
Что делаем
Команда анализирует пользовательское поведение, прорабатывает пользовательские сценарии и Customer Journey Map — путь клиента по сайту.
Результат этапа — схема всех страниц сайта или интерактивный прототип с учетом бизнес-задач клиента и пользовательских сценариев.
На прототипах размечены контентные блоки, элементы взаимодействия вроде кнопок и инпутов, продумана механика работы интерфейса, последовательность событий на пути к цели пользователя. Например, до кнопки «Зарегистрироваться» или «Купить».
Это еще не дизайн-макеты, а только «чертеж» для будущего дизайна. Чтобы превратить их в макеты, нужно продумать дизайн-концепцию и визуальные решения для всех элементов.
Шаг 6. Дизайн-концепция
Следующий шаг — разработать визуальную идею для сайта, используя цвета, формы, шрифты, иллюстрации и анимацию.
Концепцию разрабатываем на основе информации об аудитории, прототипов, фирменного стиля компании, тенденций дизайна и пожеланий клиента. Чаще всего делаем ее на примере главной страницы сайта или первого экрана приложения.
Если у клиента есть фирменный стиль, то в концепции придерживаемся рекомендаций из гайдбука. Если у клиента нет логотипа и фирменного стиля, то предлагаем разработать его до того, как начнем продумывать дизайнерские решения интерфейса.
В рамках разработки фирменного стиля продумываем логотип, подбираем фирменные элементы, цвета и шрифты, описываем правила их использования в гайдбуке.
Какие специалисты задействованы
Над проработкой дизайн-концепции работают дизайнеры и арт-директор.
Зачем нужно
Если прототип — это чертеж сайта, то концепция — эскиз. Ее задача — передать визуальную идею будущего сайта, приложения или веб-сервиса. С ее помощью демонстрируем:
- как будет выглядеть продукт,
- какие смыслы будет транслировать,
- какие стилистические приемы будут использованы.
Концепция нужна, чтобы согласовать видение дизайна у заказчика и команды агентства до того, как будут отрисованы все макеты.
Что делаем
Дизайнеры составляют мудборд и подбирают визуальные образы под бизнес-задачи проекта.
В концепции будут отражен стиль будущего веб-продукта через цвета, шрифты, формы плашек, кнопок, инпутов и прочих элементов взаимодействия.
На этом этапе сразу закладываем анимации и интерактивные решения: как отрабатывают нажатия кнопок, как ведет себя страница при скролле, как отображается переход между экранами и т.д.
Важно: это не финальные макеты, а эскиз будущего сайта. В процессе разработки дизайна на втором этапе некоторые элементы могут быть скорректированы.
Дизайн-концепцию презентуем в формате, который лучше всего продемонстрирует креативную идею. Это может быть видео, набор экранов или интерактивная презентация.
Смотрите другие примеры концепций, которые мы разрабатывали для наших клиентов.
Результаты этапа Аналитики и проектирования
В результате этого этапа получаем материалы, с помощью которых дизайнеры и разработчики воплотят проект, а заказчик получит работающий продукт вовремя и в рамках бюджета.
Список материалов по итогам Первого этапа:
- Аналитический отчет
- SEO-рекомнедации
- Техническое задание
- Прототипы
- Дизайн-концепция
- Текст и прочий контент для сайта
В завершении Первого этапа менеджер проекта оценивает стоимость реализации всех функций и дизайнерских решений. После согласования стоимости, заключаем дополнительное соглашение на второй этап и переходим непосредственно к разработке.
