Что такое Lightweight 3D веб-дизайн?

Lightweight 3D-дизайн заимствует вид hero-иллюстраций в духе Spline или Blender - парящие сферы, кольца-торы, капсулы-кляксы с бликом и мягкой контактной тенью - но без реальной 3D-сцены. Глубину даёт радиальный градиент вместо источника света, тень вместо приподнятости над фоном и border-radius вместо объёма, поэтому страница грузится как обычный лёгкий макет, а не WebGL-канвас.

Стиль вытеснил тяжёлые hero-секции с фотографиями и иконками на многих SaaS- и продуктовых сайтах начиная с середины 2020-х: вместо скриншота или стоковой фотографии hero показывает небольшой кластер абстрактных фигур в фирменных цветах, часто с мягкой анимацией при скролле или движении курсора. Фигуры несут характер бренда так же, как раньше это делал маскот или иллюстративный стиль, но остаются достаточно абстрактными, чтобы их не пришлось перерисовывать при изменении продукта.

Поскольку это «3D» на самом деле 2D-градиенты и тени, притворяющиеся объёмом, стиль хорошо масштабируется вниз - фигура, которая на hero-секции выглядит глянцевой сферой, нормально читается и уменьшенной до размера маленькой иконки, чего нельзя сказать о настоящем рендеренном 3D-объекте.

Ключевые визуальные характеристики

• Парящие сферы, кольца-торы, кляксы и капсулы - у каждой яркий блик, смещённый к одному краю, и более тёмная кромка у противоположного
• Мягкая размытая контактная тень под фигурой или за ней, создающая ощущение, что она приподнята над фоном, а не лежит на нём плашмя
• Неправильная органическая клякса (асимметричный border-radius), добавленная среди более геометричных сфер и капсул для разнообразия
• Простой малофактурный фон - сплошной цвет или едва заметный градиент, - чтобы фигуры читались как единственные «освещённые» объекты на странице
• Небольшая стеклянная карточка или чип, парящая перед кластером фигур или рядом с ним, усиливающая ощущение многослойной глубины
• Просторные отступы вокруг кластера фигур вместо плотной композиции

Цветовые характеристики

• Спокойный, приглушённый фон, чтобы насыщенность и контраст несли сами фигуры, а не страница
• Один-два цвета фигур, построенных на том же основном/акцентном цвете, что и остальная страница, - чтобы hero читался как фирменный, а не декоративный
• Блики рендерятся как осветлённая, почти белая версия цвета самой фигуры, а не чистый белый - тогда фигуры выглядят тонированными, а не выцветшими

Типографика

• Чистый скруглённый или геометричный sans-serif, который не спорит с мягкими фигурами
• Крупный, но не гигантский заголовок - визуальный вес несут фигуры, поэтому шрифту не нужно
• Мелкие, сдержанные лейблы и подписи-метрики, вынесенные отдельно от заголовка - в духе bento- или дашборд-макетов

UI-паттерны

• Двухколоночный hero: заголовок и CTA с одной стороны, парящий кластер фигур - с другой
• Небольшая плавающая статус- или инфо-карточка, перекрывающая край кластера фигур
• Компактные карточки фич под hero-секцией, у каждой - маленькая тонированная иконка с тем же приёмом «фигура + тень», но в меньшем масштабе
• Пара основной и второстепенной (ghost) кнопок сразу под заголовком вместо одного громкого CTA