Made on
Tilda
Интерактивная версия документа. Сами стили этой страницы — это и есть применение описанных принципов: переключатель тем, Resonant Stark с 1px-границами, custom-шрифты с кириллицей, sticky-навигация с blur-эффектом, отсутствие стоковых изображений.
Три ключевых тезиса, на которых держится весь документ. Если читать только это — этого уже достаточно.
Чтобы понимать тренды 2026, нужно увидеть, в какую сторону вообще движется индустрия.
Roboto/Inter, светлый фон, центрированный hero, 3 колонки преимуществ, карусели логотипов, footer на 4 колонки. Через Tilda/Webflow/Squarespace каждый smb получил «адекватный» сайт за неделю. Качество выросло — но все сайты стали похожи.
Сейчас «адекватный сайт» можно сделать промптом в AI-конструктор за час. Средний уровень больше не выделяет. Чтобы быть заметным, нужно либо быть на голову выше технически (custom-вёрстка, нестандартная типографика, авторский визуал), либо резко отличаться эстетически.
Tokens, компоненты, design-to-code пайплайны — без этого серьёзный проект не запускается. Сайты без системы видны сразу: разная типографика в разных блоках, рандомные отступы, цвета «на глаз».
Раньше всё было «сайтом». Сейчас два мира расходятся:
Тренды у них разные. Запрос «современный дизайн» без указания типа сайта приводит к ошибкам.
Перед тем как применять любой тренд — определи, какой сайт ты делаешь. Это снимает 80% возможных ошибок.
| Тренд | A · Marketing | B · Product | C · Editorial | D · Portfolio |
|---|---|---|---|---|
| Bento-сетка | ✓ | ✓ | ~ | ~ |
| Editorial layout | ✓ | ✕ | ✓ | ✓ |
| Kinetic typography | ✓ | ~ | ~ | ✓ |
| Agentic UI | ✕ | ✓ | ✕ | ✕ |
| Cmd+K palette | ✕ | ✓ | ✕ | ~ |
| Component-driven layouts | ~ | ✓ | ✕ | ✕ |
| Resonant Stark (1px borders) | ✓ | ✓ | ~ | ✓ |
| Dark + Light toggle | ✓ | ✓ | ✓ | ✓ |
| Maximalism / брутализм | ~ | ✕ | ~ | ✓ |
| Spatial / 2.5D depth | ✓ | ~ | ✕ | ✓ |
✓ подходит органично · ~ с осторожностью / в части блоков · ✕ не подходит
9 актуальных приёмов современного веб-дизайна. У каждого — описание, применимость по типам сайтов и живое превью прямо здесь.
Главный визуальный язык 2026. Отход от размытых теней и глянца к чистым 1px-разделителям, frosted-glass для разделения слоёв, лёгкому CSS-шуму для тактильности.
Большая размытая тень снизу — 2018–2020 эстетика
Чистая 1px-граница, без тени, плоско и точно
backdrop-filter + 1px-граница для слоёв
1px solid rgba(255,255,255,0.08) — стандартная граница карточек на тёмной теме1px solid rgba(0,0,0,0.06) — на светлой темеbackdrop-filter: blur(20px) — для модалок, плавающих панелей, sticky-header (как этот хедер)Шрифт в 2026 — не «оформление текста», а главная визуальная конструкция страницы. Огромные плотные заголовки, variable-fonts с разной толщиной, текст, который меняется при скролле или hover.
Variable font меняет вес и letter-spacing при hover
Прижилось в 2024–2025, к 2026 — стандарт для блоков «возможности», «что получит пользователь», «команда». Apple популяризировал на продуктовых страницах.
Сайт перестаёт быть «hero + features + cta». Лучшие marketing-сайты 2026 читаются как журнальные развороты: чередование плотных и разреженных секций, цитат, breakout-блоков.
Эпоха чат-ботов и пустых полей для промптов закончилась. Современный AI-интерфейс показывает процесс работы: дерево решений, текущие подзадачи, статус уверенности, логи.
Claude Desktop с инструментами, Cursor, GitHub Copilot Workspace, ChatGPT advanced agent mode, Linear с AI-фичами.
Страница перестаёт быть статичным набором блоков. Она собирается из независимых функциональных виджетов, которые меняют размер, положение и плотность в зависимости от контекста, шага пользователя, его роли.
Linear (дашборды), Notion (страницы), Figma (панели инструментов), Vercel (deployments).
Грань между сайтом в браузере и desktop-приложением в 2026 стирается. Web-приложения должны ощущаться как Figma или Linear — мгновенный отклик, командная палитра, горячие клавиши.
«Стоковые фото улыбающихся людей» — главный признак устаревшего сайта в 2026. Award-winning сайты используют:
Hover-состояния, click-feedback, scroll-triggered появления — это базовый уровень, без них сайт ощущается мёртвым. Но в 2025–2026 случилось перенасыщение: «animation fatigue». К 2027 идёт откат к сдержанной анимации.
translateY(-4px) + изменение цвета границы
Базовый паттерн для всех интерактивных элементов
translateY(-4px)Если хоть один из этих признаков есть на сайте — он считывается как «сделан за вечер на конструкторе».
Эти шрифты стали «дефолтными» — мгновенно выдают шаблон. Видишь их — видишь «default Tilda/Webflow setup».
| Признак | Почему плохо | Что вместо |
|---|---|---|
| Стоковая фотография | Все узнают, потеря доверия | Custom-визуал или реальная фотография |
| AI-генерация улыбающихся людей | В 2026 считывается за 2 сек | Custom-иллюстрации, ноль людей |
| Карусели логотипов «нам доверяют» | Не читаются, никто не листает | Статичная сетка или убрать |
| Soft UI с размытыми тенями | Стиль 2018–2020 | Resonant Stark с 1px-границами |
| Декоративное 3D на фоне | Замедляет, не несёт смысла | Минимальный декор или ничего |
| Эмодзи как иконки в production | Выглядит как набросок | SVG-иконки (Phosphor, Lucide, Tabler) |
| Floating chat-widget справа-снизу | Ассоциация с дешёвым лидгеном | Inline-формы / интегрированный чат |
| Признак | Что вместо |
|---|---|
| Все секции одинаковой высоты | Editorial pacing — разная плотность |
| Кружочки 1-2-3-4 «Этапы работы» | Storyboard, нелинейная подача |
| Три колонки «Качество / Удобство / Цена» с галочками | Bento с конкретикой |
| Hero с фото человека за ноутбуком | Custom-визуал или сильная типографика |
| Footer на 4 колонки с одинаковыми списками | Минимальный footer с ключевым |
| Модалка «Подпишитесь» при попытке закрыть страницу | Inline-CTA в нужных местах |
| Все CTA-кнопки одинаковые («Узнать больше») | Primary / Secondary / Ghost, разные тексты |
| Признак | Почему плохо |
|---|---|
| «Первый», «лучший», «единственный» | Штраф ФАС за неподтверждаемые превосходства |
| «10+ инструментов / 100+ нейросетей» | Quantity over substance, выглядит дёшево |
| «Гарантированный результат» | Маркер инфобиза |
| «Изменит вашу жизнь» / «революционно» | Pluffy-маркетинг, не работает |
Это не тренды, это условия выхода. Любой сайт в 2026 без них не работает в принципе.
Тестировать на throttled 3G и реальном среднем Android — а не только на MacBook Pro. То, что smooth на маке, может быть unusable на реальных устройствах.
prefers-reduced-motionВ 2026–2027 поиск частично перешёл в AI-агенты (ChatGPT, Perplexity, Claude). Чтобы сайт находили:
/llms.txt в корне сайта — описание для языковых моделей/agents.json — спецификация для AI-агентов<article>, <section>, <nav>Готовые к использованию решения: шрифты с кириллицей, цветовые палитры под обе темы, отступы, радиусы.
Базовый принцип в 2026: обе темы по умолчанию, переключатель в шапке, при первой загрузке — prefers-color-scheme из системных настроек. Палитра под обе темы планируется вместе. Эта страница работает с обеими — переключи в шапке и посмотри.
Brand-цвета в светлой теме чуть темнее для сохранения контраста при белом фоне. Это не одинаковые палитры — это две согласованные системы.
Все отступы кратны базовому шагу (4px или 8px). Это создаёт визуальный ритм без случайных чисел.
--space-2xs: 4px
--space-xs: 8px
--space-sm: 12px
--space-md: 16px
--space-lg: 24px
--space-xl: 40px
--space-2xl: 64px
--space-3xl: 96px
--space-4xl: 128pxМежду секциями страницы — space-3xl или space-4xl. Внутри секций — меньшие шаги. Заголовок и подзаголовок — space-sm. Карточки в сетке — space-md или space-lg.
Системные значения, не «как нарисовалось». В 2026 — умеренные радиусы: не сильно скруглённые (это 2018), не острые (это брутализм). Золотая середина.
--duration-fast: 150ms /* hover-состояния */
--duration-base: 250ms /* стандарт */
--duration-slow: 400ms /* появление крупных блоков */
--duration-very-slow: 700ms /* hero-анимации */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1) /* появление */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1) /* transitions */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1) /* «живые» эффекты */Главное правило: все длительности > 300ms должны быть отключаемы через prefers-reduced-motion: reduce.
Сайты для регулярного изучения. Все ссылки открываются в новой вкладке.
Если хоть один пункт не выполнен — сайт не готов. Можно кликать по пунктам, отмечая выполненные.