Метрика
Узнаваемость с первого экрана
WEB DEVELOPMENT / ANIMATION
Разработка анимированных сайтов
Брендовые сайты и интерактивные элементы с «вау-эффектом»: 3D, онлайн-конструкторы, игровые механики и анимация, которая работает на цель и не тормозит страницу. От концепта до запуска и поддержки.
Проекты редкие и брендовые: сроки больше, чем у обычного сайта, цену фиксируем в договоре · работаем с клиентами в долгую.
150+проектов реализовано[подтвердить цифры]
с 2017года на рынке[подтвердить цифры]
Awwwardsнаши сайты представлены на платформе
Все анимации → · Демо находятся ниже, под форматами
НАПРАВЛЕНИЯ
Сайт, который не потеряется среди одинаковых
Анимация, интерактив и 3D, подчинённые задаче: объяснить продукт, вызвать доверие и выделить вас среди конкурентов. Без потери скорости.
К любому анимированному сайту всегда предложимсопровождение · SEO-продвижение · наполнение и ведение · рекламу в поисковиках · и другое.
Нужна просто аккуратная анимация на сайте компании? Она входит в корпоративные сайты. Какие бывают анимированные проекты — ниже ↓
ФОРМАТЫ
Что мы создаём: найдите свой формат
Брендовые сайты и интерактивные элементы, которые выделяются и вызывают «вау». Выберите ближайший формат, остальное настроим под ваш продукт и аудиторию.
Брендовый сайт с «вау-эффектом»
Презентация сложного продукта или имиджевый сайт для премиальной аудитории: сценарий прокрутки, интерактив и 3D
Кейсы SOC Astel и «Дом гармонии»Онлайн-конструктор
Посетитель собирает и настраивает продукт прямо в браузере: цвет, форма, комплектация, с мгновенной реакцией
Пример ниже ↓Игровые элементы
Взаимодействие, похожее на игру: механики вовлечения, мини-игры, интерактивное обучение
Вовлечение [добавить кейс]HTML5-баннеры
Рекламные баннеры с анимацией и реакцией на наведение курсора
Реклама с интерактивом [добавить кейс]Графики и дашборды
Анимированные графики, аналитика и дашборды: данные оживают при наведении и смене параметров
Данные, которые отвечают3D-модели и сцены
Объёмный продукт или пространство в браузере. Модели мы создаём сами и подбираем более лёгкие решения
Пример ниже ↓Не нашли свой формат? Опишите идею, и мы предложим концепт. Обсудить задачу ↓ Дальше — кто и как делает такой проект ↓
Онлайн-конструктор: салон автомобиля
Материал и цвет сидений, декор панели и подсветка меняются на глазах, цена пересчитывается.
Three.js · GSAP
3D-сцена: поверхность следит за курсором
Форма тянется к курсору, её цвет и вид можно менять. Всё считает шейдер в браузере, без видео.
Three.js · шейдерЦены и комплектации в демо условные. Примеры для конструкторов, игр и баннеров добавит заказчик [добавить демо].
УСЛУГИ
От идеи до движения: эксперты на каждом этапе
Исследование, дизайн, интерактив, 3D, оптимизация и сопровождение: на каждом этапе у нас сильная экспертиза, а не универсальный «подрядчик на всё».
Исследование и концепт
Глубинные интервью с командой, изучение мотивации, страхов и барьеров аудитории, визуальная идея проектаДизайн и сценарий взаимодействия
Макеты и описание того, как реагирует каждый элемент: при наведении, прокрутке, клике и зачемИнтерактив и анимация
Реакция на наведение, микроанимации, векторные анимации, интерактивный скролл3D-модели и WebGL
Мы создаём 3D-модели сами и ищем более лёгкие решения для упрощения разработки и скоростиКонструкторы, игры, графики
Онлайн-конструкторы, игровые элементы, анимированные графики и дашборды. Лучшие примеры из библиотек внедряем и дорабатываем под брендОптимизация, админка, поддержка
Адаптация под слабые смартфоны, управление контентом на Strapi, пакет технической поддержки
Как устроена работа и что видите вы — в статье блога «Как мы работаем над проектом» [подтвердить URL]. На чём построен сайт — ниже ↓
ТЕХНОЛОГИИ
Быстрая анимация на современном стеке
Скорость, безопасность и техническая основа поиска закладываются в архитектуру, а не «докручиваются» после запуска.
- WebGL
- Three.js
- GSAP
- Lottie
- SVG
- JavaScript
- TypeScript
- Next.js
- Strapi
Интерактив вместо видео
Когда нужен интерактивный элемент, мы не используем встроенное видео: сцена живёт в браузере, реагирует на каждое действие и весит меньше
WebGL, Three.js, GSAP, LottieСкорость
Сложная анимация без тормозов: сцены и библиотеки подгружаются только по клику на демо, а вес материалов оптимизирован
Загружается относительно быстроБезопасность
Собираем по OWASP Top 10
Проверено безопасниками SOC AstelХостинг
Хостинг подбираем вместе с сайтом
Страница хостинга →Технологии подбираем под задачу. Стандарты и проверки — в статье блога «Безопасность и скорость сайта: как мы это проверяем» [подтвердить URL]. Как проходит работа по этапам — ниже ↓
Четыре этапа: от концепта до запуска анимации
Сроки долгие и зависят от объёма анимации и наличия 3D: мы создаём модели и уникальный интерактив. Первую версию концепта вы увидите уже через [N] недели.
Исследование и концепт
Дизайн, сценарий и 3D-модели
Разработка интерактива и оптимизация
Запуск и обучение
Задачи ведём в JiraСвоя доска под каждый проект: в ней концепт, сценарий и интерактив. Как мы работаем →
Срок зависит от объёма анимации и сложности 3D [подтвердить диапазон: на nadvan.kz для сложных сайтов указано 3–10 месяцев]. Что остаётся у вас после запуска — ниже ↓
РЕЗУЛЬТАТ
После запуска: контент ваш, анимация работает
Брендовый проект, которым ваша команда управляет сама: тексты и разделы меняет сотрудник, а интерактивные элементы остаются в рабочем состоянии.
Админ-панель на Strapi
Меняете тексты, фото и разделы без программиста [подтвердить, какие элементы редактируются, а какие остаются в коде]
Контент без разработчикаВидео-обучение для команды
Записываем обучение под ваш сайт и остаёмся на связи после запуска
Обучение входит в запускПоддержка и развитие
Пакет технической поддержки и возможность добавлять новые экраны и анимации
От 50 000 ₸ в месяцПримеры наших работ — ниже ↓
ПОРТФОЛИО
Анимированные сайты, которые мы запустили
Работаем с компаниями из разных отраслей. Ниже — примеры, остальные кейсы в разделе «Проекты».
SOC Astel
Сайт-презентация нового IT-продукта в кибербезопасности. Задача: не просто запустить, а ярко заявить о себе на рынке. Сделали более 10 000 связанных анимационных элементов, интерактивный скролл, лонгрид с поэтапным раскрытием продукта и адаптацию под бюджетные смартфоны. Загружается относительно быстро. Сайт представлен на Awwwards.
Кейс Nadvan; рост времени на сайте в 2–3 раза [подтвердить измерения]Дом гармонии
Имиджевый сайт нового реабилитационного центра для премиальной аудитории. Задача: вызвать доверие и эмоцию, а не просто быть визиткой. Сделали 3D-визуализацию, провели глубинные интервью, использовали Three.js, GSAP, WebGL и собственные шейдеры, сцены подгружаются динамически.
Кейс NadvanВсе анимации
Подборка из 10 интерактивных элементов «наведите для просмотра».
[подтвердить URL]Открыть Все анимации →Часть наших сайтов представлена на Awwwards. Кейсы по конструкторам, играм и баннерам: [добавить: на сайте их пока нет]. Все проекты →
СТОИМОСТЬ
Сколько стоит анимированный сайт
Называем диапазон до начала работ и фиксируем цену в договоре. Стоимость в разы выше, чем у обычного сайта [подтвердить формулировку]: мы создаём 3D-модели и уникальный интерактив.
Интерактивный элемент или баннер
Один элемент: конструктор, игровая механика, HTML5-баннер, график
от [X] ₸[N] недель
Обсудить сайтБрендовый анимированный сайт
Презентация продукта или имиджевый сайт
Сценарий, интерактив, индивидуальный дизайн
от [X] ₸[N] месяцев
Обсудить сайт3D и WebGL-проект
Собственные 3D-модели
Объёмные сцены, сложный интерактив
от [X] ₸[N] месяцев
Обсудить сайтК каждому сайту предлагаем пакет технической поддержки от 50 000 ₸ в месяц, состав зависит от проекта. Хостинг подберём вместе с сайтом: страница хостинга.
Рассчитать стоимость → Ответим в течение [N] рабочего дня.
От чего зависит цена анимированного сайта
- объём и сложность анимации: микроанимации, интерактив, 3D
- создание собственных 3D-моделей и поиск более лёгких решений
- наличие WebGL, собственных шейдеров и сложной интерактивности
- число страниц и экранов
- индивидуальный дизайн и концепт
- число языков (русский, казахский, английский)
- требования к размещению, например серверы внутри Казахстана
Форматы оплаты (фиксированная цена или Time & Material) описаны в статье блога «Как мы считаем стоимость и формат оплаты» [подтвердить URL].
Что оплачивается отдельно
Домен, хостинг, лицензии сторонних сервисов, пакет технической поддержки, подготовка видео, фото и 3D-материалов, если их нет у заказчика [подтвердить]. Стоимость каждого пункта показываем в смете заранее. НДС: [подтвердить условия].
Частые вопросы о создании анимированного сайта
НАЧАТЬ ПРОЕКТ
Обсудим ваш сайт
Опишите задачу в двух словах: что за продукт или бренд и какое впечатление должен производить сайт. Вернёмся с идеей концепта и ориентиром по цене в течение [N] рабочего дня.
Обсудить сайтНе уверены, что нужен именно анимированный сайт? Расскажите о задаче, подскажем, когда проще обойтись корпоративным сайтом.