Blumberger
Дизайн и разработка сайтов с помощью ИИ
- Стоимость проекта
- $1,000
- Результат
- Рабочий сайт
- Премиальный UI/UX-дизайн
- Создание визуала с помощью ИИ
- Креативное руководство
- Разработка на Webflow
- Анимации на GSAP
- Управление контентом с помощью ИИ
- Масштабируемая дизайн-система
- Оптимизация производительности
Обзор
Blumberger нужен был премиальный лендинг, который передавал бы инновационность и доверие и при этом выделялся среди типичных корпоративных сайтов. Наша задача заключалась не только в создании выразительной визуальной идентичности, но и во внедрении ИИ на всех этапах производства — от поиска концепции до разработки и дальнейшего управления контентом.
Исследование концепций
До разработки финального интерфейса мы исследовали три разных творческих направления. Каждая концепция передавала одну и ту же основную идею через свою визуальную метафору, сохраняя чистую и премиальную эстетику. После просмотра концепций клиент выбрал второе направление как основу проекта.
Концепция 1
Из тени
Чистая минималистичная концепция, где переход от тёмного к светлому становится метафорой движения к прозрачной и полностью соответствующей требованиям финансовой экосистеме. Смена темы символизирует доверие, легальность и работу по правилам.
Концепция 2
Стопка стеклянных банковских карт
Стопка прозрачных стеклянных банковских карт символизирует доступ к нескольким банковским отношениям и счетам через единый процесс подключения. Стеклянный материал подчёркивает прозрачность и соответствие требованиям, а мягкая 3D-анимация и эффекты параллакса создают премиальное современное впечатление.
Концепция 3
Рассеивание света
Минималистичная концепция, построенная вокруг идеи рассеивания света. Один луч расширяется в множество лучей, показывая, как единый процесс подключения открывает доступ к нескольким банковским счетам и финансовым партнёрам. Динамичные градиенты и мягкая анимация создают премиальную футуристичную эстетику и одновременно подчёркивают простоту, масштабируемость и бесшовный доступ.
Создание визуала с помощью ИИ
После утверждения концепции мы сгенерировали с помощью ИИ все визуальные материалы проекта, включая hero-анимацию. Создание вращающегося стеклянного объекта оказалось гораздо сложнее, чем мы ожидали. Для финальной анимации потребовались десятки итераций в нескольких ИИ-инструментах, а затем апскейлинг видео, интерполяция кадров и дополнительная постобработка, чтобы добиться плавного кинематографичного движения.
Разработка на Webflow
Сайт создан в Webflow — мы объединили традиционную разработку и рабочие процессы с поддержкой ИИ на базе Webflow MCP.
Чтобы упростить дальнейшие обновления, мы также создали специальный ИИ-навык. Он позволяет клиенту редактировать существующие страницы и создавать новые прямо через Claude или ChatGPT, сохраняя структуру и дизайн-систему проекта.
Анимация и финальная полировка
Чтобы сайт ощущался живым, мы проработали каждое взаимодействие с помощью мягких микроанимаций и переходов, связанных со скроллом. Эти детали превращают статичную страницу в гораздо более выразительный опыт, сохраняя интерфейс быстрым и ненавязчивым.
Процесс создания с ИИ
Этот проект показывает, как ИИ может ускорить каждый этап современной веб-разработки — не только генерацию изображений, но и поиск концепции, анимацию, разработку и долгосрочное управление контентом. В результате получился премиальный сайт, который легко масштабировать и поддерживать и который готов к дальнейшему развитию.