Методология

Как мы работаем над проектами

Автор статьи
Анна
Исполнительный директор

Подписчиков
457
Подписчиков

Четыре стадии, которые предстоит пройти вашему проекту: UX-проектирование, дизайн, программирование, запуск.


1. UX

Сбор данных

Начинаем со сбора и анализа данных. С нашей стороны работает UX-проектировщик, с вашей — носители ценной информации о пользователях, бизнес-процессах и планах развития компании.

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

Исполнитель: UX-проектировщик
Исходники: —


Структура

Основываясь на собранных данных, продумываем структуру, навигацию и функционал будущего сайта. Результат оформляем в древовидную карту сайта с учётом всех разделов и их взаимодействия. Вместе обсуждаем и вносим коррективы.

Итог этапа — PDF-файл с ясной и логичной структурой будущего сайта. Это чёткий план предстоящей работы.

Исполнитель: UX-проектировщик
Основа: Бриф


Прототипы

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

Самое частое опасение на этапе прототипирования, что дизайн будет похож на прототипы. Пример прототипов и дизайна, который сделан на основе этих прототипов.

Иногда лучше начать с проектирования адаптивной версии.

Исполнитель: UX-проектировщик
Основа: Структура


2. Design

Дизайн-концепция

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

Итог этапа — макет главной страницы сайта. Согласованный дизайн станет основной для всех внутренних страниц.

Исполнитель: Дизайнер
Основа: Прототипы


Дизайн внутренних страниц

Отрисовываем дизайн всех уникальных страниц сайта. Используем готовый контент: материалы встают на свои места, и дизайн сразу выглядит так, как будет в финале. В результате вы получаете макеты всех уникальных страниц для основной версии сайта.

Исполнитель: Дизайнер
Основа: Дизайн-концепция


Адаптивный дизайн

Создаём адаптивный дизайн для телефонов и планшетов, чтобы сайт корректно отображался на любых устройствах. В итоге вы получаете макеты всех уникальных страниц для адаптивной версии сайта.

Чем адаптивная версия отличается от мобильной

Исполнитель: Дизайнер
Основа: Дизайн-макеты


3. Programming

Техзадание

Описываем функционал сайта в техническом задании — кратко, ёмко, понятно обеим сторонам. Бережём ваше время и сложное описываем простым языком.

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


Вёрстка

Переводим дизайн в html-код. Прорабатываем вёрстку обоих версий сайта — основной и адаптивной. Грамотная работа обеспечивает быструю загрузку страниц и качественный вывод на разных устройствах и браузерах. Этап выполняет front-end разработчик и контролирует дизайнер, чтобы всё было в соответствии с макетами.

В результате вы получаете ссылку на html-страницы будущего сайта. Их уже можно открыть в браузере на любом устройстве.

Исполнитель: Front-end разработчик
Основа: Дизайн-макеты


Программирование

Разрабатываем программную часть сайта, соединя внешнее и внутреннее — front-end и back-end. Систему управления сайтом настраиваем для удобного использования вашими сотрудниками.

На выходе получаем сайт на нашей технической площадке. Его уже можно наполнять и тестировать.

Исполнитель: Web-разработчик
Основа: ТЗ, вёрстка


Интеграция

Интегрируем сайт со сторонними сервисами, как указано в техзадании: 1С-Битрикс, FastOperator и прочее. Делаем парсинг — автоматический сбор контента со старого сайта.

Исполнитель: Web-разработчик
Основа: ТЗ

Статья по теме:
Интеграция с 1С


4. Production

Наполнение

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

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

Исполнитель: Контент-редактор
Основа: ...


Тестирование

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

Вы получаете отлаженный сайт. Он идеально работает и полностью готов к публикации.

Исполнитель: Контент-редактор, UX-проектировщик, дизайнер, тестировщик
Основа: Наполненный сайт


Запуск

Переносим сайт с нашей технической площадки на ваш домен и хостинг. Успешный запуск, выход в свет и... поздравления с готовым проектом!

Вы получаете готовый сайт на домене. Все довольны результатом: и мы с вами, и пользователи.

Исполнитель: Web-разработчик
Основа: Протестированный сайт

Статья по теме: Выбор хостинга

Берём ответственность за весь проект. Успешный запуск — главная цель и радость для команды