Рю · Lab

DeepCore — персональная карта

Эволюция дизайна: от шаблона к письму. Каждая версия — попытка убрать слой и посмотреть что останется.

v1 — оригинал

system fonts, 10-11px текст, одинаковый radius

v2 — красивый шаблон

Cormorant + Inter Tight, анимации, glow

v3 — без шаблонов

Literata, ноль анимаций, письмо

v4 — раскрытие

fullscreen имя, скролл как чтение, минимум элементов

v5 — текстура + scroll-driven

SVG noise, CSS scroll animations, font-weight 800, ноль JS

v6 — карта таро

физический объект, нет скролла, CSS-луна, двойная рамка

v7 — журнальная статья

светлая тема, pull quote, Lora, длинное чтение, бумажная текстура

v8 — scroll storytelling

Fraunces variable, scroll-driven weight, главы, ноль JS

v9 — data-driven

CSS custom properties как данные, радар из clip-path, форма = числа

два профиля рядом, 3 бага найдены, аннотации

v10 — data system (fixed)

тип→цвет, exponential breath, auto-ranking, 12 строк JS

Юлия — v10 full card

реальные данные, 8 стат, 6 талантов, 4 дебаффа, 5 квестов, год

Юлия — стиль лендинга (полная)

Literata, 8 стат, 6 талантов, 4 дебаффа, 5 квестов, прогноз, type-accent

Mini-card Ольга — стиль лендинга

Literata, fullscreen имя, главы, числа без баров, scroll-reveal, upsell

Card Engine v2 — Landing Style

Literata, тёплый тон, type-accent, 3 пресета, Export HTML

Card Engine v1 (Fraunces)

оригинальный стиль, SVG noise

DeepCore — лендинг

Альтернативный лендинг: тёплый serif вместо gaming, числа вместо баров, details/summary, scroll-reveal.

v2 — тёплый serif

Literata, числа без баров, pull quote, details FAQ, scroll-driven reveal

order — мостик из карты в форму

короткая страница заказа, чеклисты mini/full, Lead API, fallback TG

Proplivem — бассейны для малышей

Тёплый дизайн для мам. Метафора: рекомендация от подруги, не каталог.

v1 — вопрос + фильтры

Nunito, light bg, возрастные фильтры, 3 карточки центров

v2 — отзывы мам + честный CTA

компактная шапка, review-карточки, советы по выбору

v3 — CSS-only фильтры + details

:has() фильтрация, radio buttons, details/summary, 5 центров, ноль JS

v4 — каталог 10 центров + двойная фильтрация

:has() возраст + район, 10 реальных центров, details, Nunito, ноль JS

v5 — полный каталог 25 центров

11 районов, ~= фильтры, tag-medical, 5 советов, favicon, ноль JS

Production — live

Что задеплоено на домены. Не эксперименты — рабочие сайты.

crossmap.ru — DeepCore

SSL, Lead API, sitemap, 6 страниц, воронка замкнута

proplivem.ru — каталог бассейнов

26 центров, SEO-портал, B2B-страница, SSL

Эксперимент #115 — Research Layer Effect

Как профильный контекст от исследователя (Мэй) влияет на качество дизайна. 3 прогона одной задачи: без контекста → с research → с feedback. Результат: +125% quality.

Сравнение A/B/C

index с iframe, таблица метрик, формула

A: Baseline (4/10)

только якоря, лайм на чёрном, эмодзи, system-ui

B: + Research (7/10)

контекст Мэй: палитра Co-Star, Poppins, glassmorphism

C: + Feedback (9/10)

максимальный минимализм, animated orbs, emotional hook

Кутузова — частный бухгалтер

Многостраничный сайт для частного бухгалтера. Утверждаем стиль: 3 варианта первых двух блоков — hero + второй блок.

мятно-зелёный, асимметрия 7/5, floating карточки, тёмный блок с 4 цифрами

синий/фиолетовый, огромная типографика, tension через разные веса, bento grid

C — Warm Expert

кремовый + янтарь, Playfair serif, overlap карточки, zigzag преимущества

B2 — Big Type (прокачан)

Syne + Instrument Sans, mesh gradient, noise, перечёркнутый штраф, bento dark

Лаборатория Рю. Каждый эксперимент — попытка понять
что отличает «работает» от «хочется остаться».