LightLogo
+7 (499) 350-13-90
Главная—Блог

Как в Атвинте разрабатывают веб-продукты, часть 1: что происходит на этапе аналитики и проектирования

Бизнес и эффективность
Новости
Дизайн
Аналитика
31 июля 2020
article preview

Содержание

  • Зачем нужен первый этап
  • Шаг 1. Исследования и аналитика
  • Шаг 2. SEO проектирование 
  • Шаг 3. Сбор и подготовка контента
  • Шаг 4. Проектирование архитектуры проекта и описание техзадания
  • Шаг 5. UX-проектирование 
  • Шаг 6. Дизайн-концепция  
  • Результаты этапа Аналитики и проектирования
Работа над сайтом, веб-сервисом или мобильным приложением состоит из двух крупных этапов: сначала проводим аналитику и проектирование; на втором этапе — непосредственно разрабатываем продукт. 
Эта статья посвящена Первому этапу — аналитике и проектированию. 

Что делаем на первом этапе

  1. Аналитика
  2. SEO проектирование
  3. Разработка контента: текст, фотографии, видео
  4. Проектирование архитектуры продукта и написание техзадания
  5. UX-проектирование интерфейса и разработка прототипов
  6. Разработка дизайн-концепции
  7. Опционально — разработка логотипа и фирменного стиля  

Зачем нужен первый этап

Этап аналитики и проектирования нужен, чтобы перевести идею продукта в конкретные шаги его реализации и понять, что именно и как лучше сделать с технической точки зрения. Этап помогает синхронизировать видение сайта или IT-продукта у заказчика и команды проекта.  
Если сравнить со строительством здания, то на этом этапе мы разрабатываем чертежи и проектную документацию. В случае веб-разработки аналитики, проектировщики и дизайнеры определяют, как должен работать и выглядеть сайт. 
А еще работа по техзаданию и прототипам помогают запараллелить часть работ на втором этапе. Ведь каждая функция и взаимодействие подробно описаны. Это ускоряет разработку и позволяет заказчику получить готовый сайт быстрее без потерь в качестве.
Мы в Атвинте не пропускаем этот блок работ. Если клиент не готов вложиться в первый этап, мы вынуждены распрощаться. Без аналитики и проектирования мы не можем гарантировать качество продукта, а потому не готовы взяться за проект.

Шаг 1. Исследования и аналитика

Какие специалисты задействованы

Маркетологи и менеджер проекта изучают аудиторию, конкурентов и спрос по данным систем аналитики и открытым источникам.

Для чего нужно

Главная цель этапа — сформировать объемное видение бизнес-ниши, исследовать потребности и поведение пользователей, изучить аналоги и конкурентов.
Это особенно актуально для стартапов и новых IT-продуктов, в которых на старте много неизвестных даже для самого заказчика.
На основе аналитики команда проекта:

Что делаем

В результате этапа клиент получает аналитический отчет. В зависимости от бизнес-задач клиента, в отчет включаем такую информацию:

Шаг 2. SEO проектирование 

Этап актуален для проектов, которые в дальнейшем нужно продвигать через поиск: корпоративных сайтов, интернет-магазинов, маркетплейсов, информационных порталов и сайтов СМИ и т.п.

Какие специалисты задействованы

SEOnспециалисты и маркетолог-аналитик собирают семантику для сайта, кластеризуют ее, разрабатывают структуру сайта и рекомендации по проектированию. В работе опираются на данные из аналитического отчета.

Зачем нужно

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

Что делаем

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

Шаг 3. Сбор и подготовка контента

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

Какие специалисты задействованы

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

Зачем нужно

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

Шаг 4. Проектирование архитектуры проекта и описание техзадания

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

Какие специалисты задействованы

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

Зачем нужно

Техническое задание (ТЗ) важно для высоконагруженных проектов со множеством интеграций. Например, для информационных систем, крупных ecommerce-решений, сервисов автоматизации процессов. В таких проектах много функциональных особенностей, которые нельзя упускать, иначе продукт не будет выполнять свои задачи. 
Кроме того, на больших проектах задействовано много разработчиков, и техзадание позволяет запараллелить разработку отдельных функций продукта, а потом безболезненно и бесшовно собрать проект. Такой подход позволяет делать и запускать продукты быстрее.

Что делаем

Техническое задание — это руководство для программистов, как должен работать сайт, веб-сервис или приложение, чтобы выполнять свои функции было сбоев и ошибок. 
Ниже выдержка — из оглавления технического задания для примера.
Грамотно составленное техническое задание содержит в себе массу пунктов, как основных, так и мелких. Подробнее рассказали об этом в статье «ТЗ и прототипы: два кита разработки ».

Шаг 5. UX-проектирование 

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

Какие специалисты задействованы

На этапе проектирования совместно работают UX-дизайнеры, аналитики и SEO-специалисты. В работе опираются на рекомендации SEO-проектирования и данные аналитического отчета.

Зачем нужно

Прототипы — это чертеж интерфейса. Процесс их создания можно назвать техническим дизайном.
Прототипы позволяют протестировать логику взаимодействий на реальных пользователях, собрать фидбэк и улучшить интерфейс до того, как начнем разрабатывать. Это особенно важно при разработке инновационных продуктов или веб-сервисов со сложной логикой взаимодействия.
Прототипы для сайтов нужны, чтобы заложить структуру уникальных страниц и не упустить важные контентные блоки.
Править прототипы значительно быстрее и дешевле, чем перерисовывать готовые макеты или переписывать код. UX-проектирование помогает избежать клиенту ненужных затрат в дальнейшем.
IT-стартам прототипы позволяют как можно раньше презентовать продукт инвесторам и получить инвестиции на разработку. Интерактивный прототип даст представление о функциональности и возможностях продукта без серьезных вложений.

Что делаем

Команда анализирует пользовательское поведение, прорабатывает пользовательские сценарии и Customer Journey Map — путь клиента по сайту. 
Результат этапа — схема всех страниц сайта или интерактивный прототип с учетом бизнес-задач клиента и пользовательских сценариев. 
На прототипах размечены контентные блоки, элементы взаимодействия вроде кнопок и инпутов, продумана механика работы интерфейса, последовательность событий на пути к цели пользователя. Например, до кнопки «Зарегистрироваться» или «Купить». 
Это еще не дизайн-макеты, а только «чертеж» для будущего дизайна. Чтобы превратить их в макеты, нужно продумать дизайн-концепцию и визуальные решения для всех элементов.

Шаг 6. Дизайн-концепция  

Следующий шаг — разработать визуальную идею для сайта, используя цвета, формы, шрифты, иллюстрации и анимацию. 
Концепцию разрабатываем на основе информации об аудитории, прототипов, фирменного стиля компании, тенденций дизайна и пожеланий клиента. Чаще всего делаем ее на примере главной страницы сайта или первого экрана приложения.

Какие специалисты задействованы

Над проработкой дизайн-концепции работают дизайнеры и арт-директор.

Зачем нужно

Если прототип — это чертеж сайта, то концепция — эскиз. Ее задача — передать визуальную идею будущего сайта, приложения или веб-сервиса. С ее помощью демонстрируем:
Концепция нужна, чтобы согласовать видение дизайна у заказчика и команды агентства до того, как будут отрисованы все макеты. 

Что делаем

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

Результаты этапа Аналитики и проектирования

В результате этого этапа получаем материалы, с помощью которых дизайнеры и разработчики воплотят проект, а заказчик получит работающий продукт вовремя и в рамках бюджета. 
Список материалов по итогам Первого этапа:
  1. Аналитический отчет
  2. SEO-рекомнедации
  3. Техническое задание
  4. Прототипы
  5. Дизайн-концепция
  6. Текст и прочий контент для сайта 
В завершении Первого этапа менеджер проекта оценивает стоимость реализации всех функций и дизайнерских решений. После согласования стоимости, заключаем дополнительное соглашение на второй этап и переходим непосредственно к разработке.

Читайте также: 

Елена Никулина
ex-редактор блога Атвинты
0
0
0

Подпишись и будь в курсе новых статей!

Услуги
Дизайн
Спроектируем удобный интерфейс, который экономит время и помогает пользователю быстро закрыть свои потребности внутри сервиса
Разработка
Соберем веб-продукт с надежной архитектурой и сильным функционалом под масштабный поток пользователей
Аутстафф
Передадим специалистов с опытом работы на сложных высоконагруженных проектах
Больше классных услуг нашей компании
Читайте также
Как зарабатывать на IT-стартапах: выбираем способ монетизации
Сроки разработки и как на них повлиять: суперсила заказчика
Robot
VC
VC
VC
VC
VC
VC
VC
VC
VC
VC
Telegram
Telegram
Telegram
Telegram
Telegram
Telegram
Telegram
Telegram
Telegram
Telegram
Dribbble
Dribbble
Dribbble
Dribbble
Dribbble
Dribbble
Dribbble
Dribbble
Dribbble
Dribbble
Behance
Behance
Behance
Behance
Behance
Behance
Behance
Behance
Behance
Behance
Dprofile
Dprofile
Dprofile
Dprofile
Dprofile
Dprofile
Dprofile
Dprofile
Dprofile
Dprofile