Мы спроектировали и запустили новый сайт ZNN - быстрый, технологичный и визуально выразительный продукт, где WebGL-анимации и строгая архитектура дополняют друг друга. Цель была показать технологичность ZNN через визуал и микровзаимодействия, не просаживая Core Web Vitals и SEO.
Нам был нужен корпоративный сайт, который одинаково хорошо решает имиджевые и продуктовые задачи: быстро грузится, выглядит «живым», поддерживает сложные анимации и масштабирование. На практике совместить промышленную эстетику, лёгкий скевоморфизм и современный стек, сохранив инженерную строгость интерфейса - оказалось задачей не из легких...
Мы строили визуальный язык вокруг идеи «приемственности творения»: инженерная строгость, материальность интерфейса и живое движение. «Стеклянные» слои и свечения транслируют глубину, а минимализм конструкций - уважение к форме и функции. Так рождается ощущение технологичного ремесла — когда форма ведёт пользователя, а не отвлекает.
Если попытаться описать идею более строго:
Концепт — синтез инженерного минимализма и «живой» материи: стеклянные панели, аккуратные глоу-акценты, тактильные ховеры. Визуал говорит о непрерывности создания - от идеи до продукта.
Дизайн отдел ZNN постарался передать идею эволюции продукта: каждый экран — логическое продолжение предыдущего, а микродвижение - «дыхание» системы. Переходы не развлекают, а объясняют: они показывают, что интерфейс - это процесс, а не набор страниц. Последовательность, ясная иерархия, бережные анимации и предсказуемые паттерны - так мы превращаем сложность в комфорт.
Анимации работают как язык интерфейса: подсвечивают причинно-следственные связи (нажатие → изменение состояния), помогают ориентироваться и поддерживают «ощущение материала». Никакой лишней кинематографичности - только смысл.
Глоу-акценты и лёгкий параллакс создают «эффект присутствия», но не спорят с контентом. Важны миллисекунды и милиметры - именно они делают цифровой материал убедительным. Премиальность через дисциплину: чистая типографика, дозированный цвет, сдержанные эффекты.
Красота не противоречит доступности: читаемость, фокус-кольца, предсказуемые состояния - по умолчанию. Понятные фокусы клавиатуры, логичная табуляция. Визуальные эффекты оптимизированы и не мешают скорости — эстетика не ценой UX.
Мы верим, что технологичность - это не сложность, а дисциплина. Поэтому интерфейс ZNN честен, прост и материален.
Инновации должны ощущаться естественно. Именно для этого мы свели эстетику «стекла» и инженерную логику в единый язык.
Синтез промдизайна и мягкого скевоморфизма: стеклянные слои, живые свечения, тактильные hover-состояния, читаемая типографика. Палитра бренда: неоново-зелёный #00df81 и холодные нейтралы. «Живой» интерфейс без визуального шума: минимализм конструкций, глубина за счёт света и материала, акцент на интерактивных элементах и эффекте присутствия.
Задачи поставленные дизайн отделом решались нашими программистами с особой тщательностью соблюдения тз. Добиться текущего результата нам помогли: гибридная архитектура на Next.js 15: статическая генерация страниц + клиентские интерактивы. Анимации вынесены в изолированные модули, шейдеры оптимизированы под прозрачный фон и hover-сценарии. Весь код декомпозирован на независимые компоненты: контент — через headless CMS, 3D — на Three.js с кастомными GLSL, переходы — Framer Motion; сборка и выкладка — в CI/CD.
Мы взяли на себя проектирование архитектуры, дизайн-систему, разработку анимаций и настройку полного конвейера CI/CD — от сборки до нулевого простоя при выкладке. Ответственность команды: UX/UI, фронтенд, интеграции с CMS, оптимизация рендера WebGL и автоматизация релизов.
Pезультаты:
1. Быстрый и стабильный сайт с уникальными интерактивами: органические 3D-формы, «рыба»-анимация в разделе услуг и «snake blob» с отложенной гидратацией.
2. Сохранили премиальный визуал и добились высокой производительности за счёт статической генерации, оптимизации изображений (WebP/AVIF) и продуманного code-splitting.
Благодарим вас за то что ознакомились с нашим кейсом, до новых встречь.
Хочется глубже — про дизайн-систему, принципы анимации и архитектуру или просто посмотреть сайт вживую?
Все нюансы проекта (3D, дизайн-система, перформанс) в полном кейсе:
znn.by/keysi/veb-prilozhenia/site-znn-sintez-technologiy-i-sovremennogo-dezayna
