Сайт ZNN: Синтез современных технологий и инновационного дизайна

Архитектура и технологии

Денис, CEO: "Перед нами стояла тяжелая задача сделать красивый сайт с сложными формами, и к самим себе как заказчик мы супер придирчивы. Нам хотелось получить много glow и жидкого стекла, и в тоже время чтоб это было живым и дышало, и не убивало производительность сайта, и сохраняло инженерную строгость. Этот проект по настоящему зубодробящий, потому что нам понадобилось 4-5 MVP концептов, чтоб прийти туда где мы сейчас."

Frontend: Next.js 15 и React 19

Сайт ZNN построен на передовой стеке технологий, возглавляемом Next.js 15 — последней версией фреймворка, который обеспечивает исключительную производительность и SEO-оптимизацию. Использование React 19 с его революционными возможностями серверных компонентов и улучшенной гидратацией создает основу для молниеносно быстрых пользовательских интерфейсов.

Архитектура приложения следует принципам App Router — современному подходу к маршрутизации в Next.js, который обеспечивает лучшую производительность и более интуитивную структуру кода. Каждая страница представляет собой независимый компонент с собственным состоянием и логикой.

TypeScript и типизация

Полная типизация с помощью TypeScript 5 гарантирует надежность кода и предотвращает множество ошибок на этапе компиляции. Особенно это важно для работы с API и управления состоянием приложения, где строгая типизация данных обеспечивает консистентность интерфейса.

Стилизация: Tailwind CSS и кастомные переменные

Дизайн-система построена на Tailwind CSS 3.4 — утилитарном фреймворке, который обеспечивает быструю разработку и консистентность дизайна. Кастомная цветовая палитра ZNN интегрирована в Tailwind через расширение конфигурации:

colors: {
  'znn-primary': '#00df81',    // Яркий неоново-зеленый
  'znn-secondary': '#f1f7f6',  // Светло-серый
  'znn-dark': '#041010',       // Глубокий темно-зеленый
  'znn-gray': '#707d7d'        // Средне-серый
}

Анимации и интерактивность

Framer Motion 12 обеспечивает плавные, профессиональные анимации, которые оживляют интерфейс. Библиотека используется для создания микроанимаций, переходов между страницами и интерактивных элементов, что значительно улучшает пользовательский опыт.

Three.js: 3D анимации и интерактивные эффекты

Three.js 0.155 — мощная библиотека для создания 3D графики в браузере — используется в ZNN для создания уникальных интерактивных анимаций, которые выводят пользовательский опыт на новый уровень.

Архитектура 3D анимаций

Сайт ZNN включает несколько специализированных 3D анимаций, каждая из которых создает уникальную атмосферу:

Hero Blob Animation: органическая форма с динамической деформацией и свечением
Snake Blob Animation: интерактивная "медуза" с реакцией на движение курсора
Shader-based Rendering: кастомные GLSL шейдеры для уникальных визуальных эффектов

Помимо этого самое сердце сайта это анимация Fish-animation со страницы Услуги. Любя мы называем его Буся... Мы очень рекомендуем вам посетить страницу Услуги и нажать кнопку "Хотите поплавать?"

Денис, CEO/CTO : "Я сам написал Snake Blob, и конечно то что он есть сейчас — это совсем не то что было изначально (его вы видите на странице О компании). Я думаю у вас закрался резонный вопрос почему он называется Snake Blob если он не похож на змею. Все дело в том что по изначальной задумке это блоб который реагирует на курсор извиваясь как змея ползает за ним и тянется щупальцами, но он был настолько приставучим что пришлось отделить его от пользователя стеклом чтоб он перестал его видеть и теперь он просто ползает там выжидая добычу (смеется). Один раз во время работы над страницей О компании я экспериментировал в три часа ночи абсолютно забыв про его свойства и снес ограничение дав ему возможность вылезти в футер. И вот я скроллю страницу и этот монстр вылазит в футер и тянется к моему курсору щупальцами — передать как я испугался было тяжело, я упал со стула разлив банку Burn и прикусил себе губу в трех местах... Было что-то в этом всем лавкрафтианское, но больше мы не экспериментируем с хоррором. Зверь спит за стеклом, пользователи могут быть спокойны."

Техническая реализация

WebGL Renderer и Canvas

const renderer = new THREE.WebGLRenderer({
  canvas, 
  alpha: true, 
  antialias: true
});
renderer.setClearColor(0x000000, 0); // Прозрачный фон

Использование WebGL с поддержкой прозрачности позволяет интегрировать 3D анимации в существующий дизайн без нарушения визуальной целостности.

Кастомные шейдеры

Vertex Shader создает органическую деформацию геометрии:

float r = 1.2 + 0.45 * sin(4.0*position.x + t + 2.2*sin(position.y*2.5+t))
         + 0.35 * sin(4.0*position.y + t*1.1 + 2.4*cos(position.z*2.1-t))
         + 0.2  * sin(4.0*position.z + t*0.7 + 1.7*cos(position.x*1.8+t));

Fragment Shader обеспечивает сложные эффекты освещения и цветовые переходы:

vec3 znnGradient(float f) {
  if (f < 0.17) return mix(col1, col2, smoothstep(0.00, 0.17, f));
  else if (f < 0.33) return mix(col2, col3, smoothstep(0.17, 0.33, f));
  // ... дополнительные цветовые переходы
}

Интерактивность и отзывчивость

Реакция на курсор

Анимации Snake Blob включают продвинутые алгоритмы отслеживания курсора:

float stretch = max(0.0, dot(normalize(position), vec3(uTargetDir,0.0)));
r += stretch * 0.28 * smoothstep(0.3, 1.0, stretch);

Динамическое свечение

Hover-эффекты создают интерактивное свечение с использованием uniform переменных:

float edgeGlow = smoothstep(1.1, 1.23, dist) * uGlow;
float centerGlow = 0.05 * pow(1.0 - dist/1.25, 2.0) * uGlow;

Производительность и оптимизация

Геометрия и детализация

IcosahedronGeometry: использование икосаэдра как базовой формы для оптимального соотношения детализации и производительности
Level of Detail: 64 уровня подразделения для плавных деформаций
Efficient Rendering: оптимизированные шейдеры с минимальным количеством вычислений

Анимационный цикл

function animate() {
  requestAnimationFrame(animate);
  
  // Обновление времени для шейдеров
  material.uniforms.uTime.value = clock.getElapsedTime();
  
  // Рендеринг сцены
  renderer.render(scene, camera);
}

Интеграция с дизайн-системой

Цветовая палитра ZNN в 3D

Все 3D анимации используют фирменную цветовую схему ZNN:

Основные цвета: неоново-зеленый (#00df81) и его вариации
Градиенты: плавные переходы между оттенками зеленого
Свечение: эффекты, соответствующие брендовой идентичности

Стилистическая согласованность

Органические формы: соответствуют философии "живого" интерфейса
Плавные переходы: синхронизированы с CSS анимациями
Интерактивность: усиливает ощущение отзывчивого дизайна

Психологическое воздействие 3D анимаций

Эмоциональная вовлеченность

Удивление: неожиданные 3D эффекты привлекают внимание
Исследование: пользователи взаимодействуют с анимациями
Запоминаемость: уникальные эффекты выделяют бренд

Восприятие качества

Технологичность: демонстрирует высокий уровень разработки
Инновационность: показывает готовность к экспериментам
Профессионализм: сложные эффекты внушают доверие

Backend и управление контентом

Directus CMS

В качестве headless CMS используется Directus — современная платформа управления контентом, которая предоставляет REST API для динамического управления статьями, кейсами и категориями. Интеграция с Directus позволяет команде контент-менеджеров легко обновлять информацию без вмешательства разработчиков.

Дима, Разработчик: "Я был первым разработчиком компании и работал как с первым сайтом z-nn.site, так и с текущим. Было применено много интересных решений, в том числе переход со Strapi на Directus — это было интересно работать с новой CMS. В целом у нас еще много работы, несмотря на то что сайт выглядит законченным и работает — он на самом деле реализован на 50% и скорее это MVP нежели законченный продукт."

API интеграция

Сайт использует rest api для безопасного взаимодействия с CMS. Все запросы к API оптимизированы и включают fallback-механизмы для обеспечения стабильной работы даже при временной недоступности сервера.

Оптимизация изображений

Next.js Image компонент с интеграцией Sharp обеспечивает автоматическую оптимизацию изображений, адаптивные размеры и современные форматы (WebP, AVIF), что критически важно для производительности и SEO.

Женя, DevOps: "Сайт деплоится через GitLab CI/CD с автоматическим тестированием и сборкой. Используем Docker для контейнеризации и разворачиваем на VPS с Nginx. Основная сложность была в настройке CI/CD пайплайна — нужно было обеспечить быстрый деплой без простоя, автоматическое обновление SSL сертификатов и мониторинг производительности. Сейчас процесс полностью автоматизирован: коммит в main ветку → автоматическая сборка → тесты → деплой на продакшн. Если что-то ломается, система автоматически откатывается к предыдущей версии. В планах — добавить staging окружение и blue-green деплой для еще большей надежности."

Стратегии рендеринга и производительность

Статическая генерация с динамическими компонентами

Сайт ZNN использует статическую генерацию — все страницы собираются на этапе build и раздаются как готовые HTML файлы. Это обеспечивает максимальную скорость загрузки и отличную производительность.

Архитектура рендеринга:

Статические страницы: генерируются на этапе сборки для мгновенной загрузки
Динамические компоненты: интерактивные элементы загружаются на клиенте
Гибридный подход: статическая основа + клиентская интерактивность

Техники оптимизации:

Static Generation: все страницы готовы к загрузке
Code Splitting: автоматическое разделение кода по страницам
Lazy Loading: отложенная загрузка изображений и компонентов
Selective Hydration: гидратация только интерактивных элементов

Кэширование и производительность

Браузерное кэширование:

Статические ресурсы: CSS, JS, изображения кэшируются браузером
HTML страницы: загружаются мгновенно как статические файлы
API данные: кэшируются на уровне компонентов

Оптимизация сборки:

Tree Shaking: удаление неиспользуемого кода
Minification: сжатие всех ресурсов
Image Optimization: автоматическая оптимизация изображений через Next.js Image

Дизайн-философия: Синтез промдизайна и скевоморфизма

Мария, Дизайнер: "Мы в текущем проекте хотели передать сочетание казалось бы не сочетаемых вещей — скевоморфизма и промдизайна. Этот сайт как старый металлургический завод, в котором сделали арт-пространство. Мы очень много смотрели на фото таких мест, когда его разрабатывали, и думали как сочетать индустриальную грубость и инженерную продуманность с красивой богатой цветовой гаммой и насыщенностью скевоморфизма. Идея, которую мы хотели передать — как рождается проект, по аналогии как искусный мастер-стеклодув создает из казалось бы бесформенных кусков объекты искусства. До этого мы перепробовали 3-4 концепта и из каждого взяли лучшее в текущий проект. Например, до этого у нас была мрачная готическая история, но в итоге когда проект был доведен до MVP, мы пересмотрели концепцию, поскольку нам показалось что слишком witchcraft энергетика отпугнет потенциальных клиентов — из нее остались только слайды на главной."

Промдизайн: Функциональность превыше всего

Дизайн ZNN следует принципам промдизайна — направления, зародившегося в промышленном дизайне 1920-30-х годов. Основные характеристики:

Функциональность: каждый элемент интерфейса имеет четкое назначение
Минимализм: убраны все декоративные элементы, не несущие функциональной нагрузки
Читаемость: типографика оптимизирована для максимальной читаемости
Логичность: пользовательский путь интуитивно понятен и предсказуем

Скевоморфизм: Тактильность и узнаваемость

Парадоксально, но в эпоху flat design команда ZNN решила обратиться к скевоморфизму — стилю, который имитирует реальные физические объекты. Это проявляется в:

Текстурах и тенях: элементы интерфейса имеют объем и глубину
Градиентах: использование многослойных градиентов создает ощущение материальности
Интерактивности: hover-эффекты имитируют физическое взаимодействие
Цветовых переходах: плавные переходы между состояниями создают ощущение реальности

Синтез подходов

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

Цветовая психология и брендинг

Основная цветовая палитра ZNN

Неоново-зеленый (#00df81) - ZNN Primary

Основной брендовый цвет ZNN — яркий неоново-зеленый — символизирует:

Инновации: ассоциируется с технологиями будущего и цифровым прогрессом
Энергию: создает ощущение динамики, движения и жизненной силы
Рост: зеленый цвет традиционно связан с развитием, процветанием и эволюцией
Уверенность: яркий, насыщенный цвет привлекает внимание и внушает доверие
Креативность: неоновые оттенки ассоциируются с творческим мышлением и оригинальностью
Экологичность: зеленый символизирует заботу об окружающей среде и устойчивое развитие

Темно-зеленый (#041010) - ZNN Dark

Фоновая основа сайта — глубокий темно-зеленый — создает:

Контраст: обеспечивает отличную читаемость и фокусировку внимания
Профессионализм: темные тона ассоциируются с серьезностью, надежностью и компетентностью
Фокус: направляет внимание пользователя на контент, не отвлекая от главного
Глубину: создает ощущение многослойности и богатства интерфейса
Элегантность: темные оттенки придают сайту премиальный и современный вид
Стабильность: символизирует надежность компании и долгосрочные отношения

Светло-серый (#f1f7f6) - ZNN Secondary

Вторичный цвет — нежный светло-серый с зеленоватым подтоном — обеспечивает:

Читаемость: создает мягкий контраст для текста и второстепенной информации
Гармонию: плавно сочетается с основной зеленой палитрой
Спокойствие: нейтральный оттенок не перегружает восприятие
Баланс: уравновешивает яркость основного цвета и глубину фона
Современность: соответствует трендам минималистичного дизайна
Универсальность: подходит для различных типов контента

Средне-серый (#707d7d) - ZNN Gray

Акцентный серый — насыщенный серый с зеленоватым оттенком — используется для:

Детализации: выделения второстепенных элементов интерфейса
Иерархии: создания визуальной структуры и разделения контента
Связности: объединения различных элементов в единую композицию
Профессионализма: добавления делового и серьезного характера
Контраста: создания промежуточных уровней между основными цветами
Стильности: придания интерфейсу современного и утонченного вида

Дополнительные цвета и их применение

Градиенты и переходы

От неоново-зеленого к темно-зеленому: символизирует переход от идеи к реализации
От темно-зеленого к прозрачному: создает эффект глубины и многослойности
Многослойные градиенты: имитируют физические материалы и текстуры

Состояния и интерактивность

Hover эффекты: плавные переходы от основного к более яркому зеленому (#00c973)
Активные состояния: усиление яркости для привлечения внимания
Отключенные элементы: приглушенные серые тона для неактивного контента

Психологическое воздействие цветовой схемы

На пользователей

Вдохновение: яркие зеленые акценты мотивируют к действию
Доверие: профессиональная темная основа внушает уверенность
Комфорт: сбалансированная палитра не утомляет глаза
Запоминаемость: уникальное сочетание цветов выделяет бренд

На бизнес-процессы

Конверсия: яркие акценты направляют внимание на призывы к действию
Восприятие качества: премиальная цветовая схема повышает ценность услуг
Лояльность: приятная цветовая гамма способствует возврату пользователей
Дифференциация: уникальная палитра выделяет ZNN среди конкурентов

Культурные и отраслевые ассоциации

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

Технологичность: зеленый ассоциируется с кодом, алгоритмами и инновациями
Прогрессивность: неоновые оттенки символизируют будущее технологий
Креативность: яркие цвета отражают творческий подход к решению задач

В бизнесе

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

Техническая оптимизация

Производительность

Code splitting: автоматическое разделение кода по страницам
Lazy loading: отложенная загрузка изображений и компонентов
Tree shaking: удаление неиспользуемого кода
Compression: сжатие ресурсов для ускорения загрузки

SEO и доступность

Semantic HTML: семантическая разметка для лучшего понимания поисковыми системами
Meta tags: динамические мета-теги для каждой страницы
Sitemap: автоматическая генерация карты сайта
Accessibility: соблюдение стандартов доступности WCAG

Адаптивность

Mobile-first: дизайн сначала для мобильных устройств
Responsive grid: адаптивная сетка с использованием CSS Grid и Flexbox
Touch-friendly: оптимизация для сенсорных устройств

Заключение

Дима, Разработчик: "Первый сайт мы делали неосознанно, опираясь просто на то что нам нравится. В то время не было осмысленного дизайна и брендинга, и сайт был с упором на азиатскую тематику с первым лого в виде яркого китайского дракона, потому что Денис по всему этому тащится. Второй вариант спустя несколько лет был более строгим, и в нем мы начали исправлять допущенные ошибки по SEO. Визуально он по итогу никому не понравился. Потом было еще 2 прототипа: один более fancy-friendly с глассморфизмом, бенто и более яркими цветами, другой более темный и гротескный в черно-фиолетовой гамме. По итогу мы сели, подумали и переработали все максимально, использовали лучшие наработки."

Дизайн-подход, объединяющий функциональность промдизайна с эмоциональностью скевоморфизма, создает запоминающийся пользовательский опыт, который выделяет ZNN среди конкурентов. Каждый элемент интерфейса тщательно продуман и оптимизирован для достижения баланса между эстетикой и функциональностью.

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

Влад, CMO/COO: "Для меня этот сайт просто что-то невероятное. Команда показывала мне все варианты, и я был в процессе начиная с первой рестайлинга, версии z-nn.site — я не застал потому что тогда еще не был в команде. Было много эмоций, и каждый из прототипов мне нравился все больше и больше, а потом ребята показали мне текущий и я вскрикнул: 'ДА ЧЕРТ ВОЗЬМИ, ЭТО ОНО!'"

Данная статья описывает техническую архитектуру и дизайн-философию сайта ZNN по состоянию на 2025 год.