Спецпроекты

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

от 2 недель

Figma

Tilda

Webflow

React

PHP

Trapcode

Adobe After Effects

Node.js

Unity

Unreal Engine

Bubble

Смотреть

Sber Mars

Смотреть

Месяцы PRO

Расписываем подробно, как мы делаем свою работу. Сроки каждого этапа могут отличаться из-за масштаба проекта, но подход к веб-разработке всегда последователен и прозрачен

1ый
спринт

Знакомимся с задачей или продуктом — формируем цели и подробное ТЗ

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

Техническое задание

Пример

Анализируем рынок, изучаем конкурентов, собираем информацию. Готовим мудборд и референсы

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

Пример аналитики здесь

2ой
спринт

Разрабатываем прототип будущего сайта, оптимизируем пользовательский путь

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

Пример
прототипа тут

Спринт —
это сколько?

Это промежуток времени, в рамках которого собирается и закрывается определённый пул задач. Для нас спринт — это 40 часов

3ий
спринт

Создаём три визуальные концепции, чтобы был выбор

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

Подкрепляем слова реальным примером

Собираем дизайн сайта с адаптивами, полностью готовый к вёрстке. Не забываем про UI-kit

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

Настоящий макет в Figma

4ый
спринт

Верстаем и настраиваем админку

Чтобы вы сразу понимали, CMS или админка — это сердце сайта, а вёрстка — это его лицо. Утверждённый дизайн перенесём в код и анимируем элементы. Во время разработки поделимся с вами тестовой ссылкой, чтобы вы всегда были в курсе текущих дел. Параллельно с вёрсткой будем настраивать CMS, которая позволит вам самостоятельно загружать контент без технических навыков и знаний в программировании. Мы обязательно вас обучим пользоваться системой управления и напишем инструкцию, если понадобится

Показываем внутрянку сайта — его админку

5ый
спринт

Тестируем и наполняем контентом. Настраиваем боевой хостинг и домен, подключаем метрики. Запускаем!

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

info@spans.ru

Напишите нам, сориентируем по бюджету и срокам. Как минимум, поможем советом

Заполнить бриф

Что ещё делаем

Веб-разработка

Корпоративные сайты, лендинги, онлайн-платформы, интернет-магазины. Начинаем с исследований — держим фокус на результате

Смотреть

Брендинг

Упаковываем продукт, создаем фирменный стиль и прописываем гайды, разрабатываем полноценную бренд-стратегию

Смотреть

Аутстафф

Поддерживаем бизнес, несмотря на ночи, кризисы и лунные фазы

Смотреть

А ещё можем

Рисуем иллюстрации, умеем 3D, владеем No-code, продумываем юзерфлоу и интерфейсы, разрабатываем мобильные приложения

Смотреть