Стек маркетингового сайта 2026

Большинство «современных» маркетинговых сайтов отстают на пять лет. Шаблон Webflow из 2021 года, два веб-шрифта от Adobe, Lottie в hero, CSS-бандл размером с фильм Marvel. А потом по соседству за 200 мс загружается страница Linear или Cursor, и разрыв виден уже на первом скролле.

Стек 2026 года узнаётся за десять секунд. Тот же фреймворк, те же шрифты, та же анимация, та же визуальная плотность. Это разбор по брендам того, как на самом деле устроены лучшие маркетинговые сайты, и аудит, который должен проходить ваш следующий сайт.

В стеке 2026 пять слоёв

Перестаньте думать о маркетинговом сайте как об одной вещи. Страницы, которые дизайнеры хотят скопировать, состоят из пяти отдельных слоёв. Ошибётесь в любом из них, и весь сайт выглядит устаревшим.

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

Слой 1: фреймворк и хостинг сошлись на Next.js плюс Vercel

Война фреймворков окончена. Linear, Cursor, v0, Anthropic, OpenAI, Stripe, Vercel и Notion выпускают Next.js на Vercel. Это конвергенция, а не совпадение. Связка из коробки даёт статический рендеринг, partial prerendering, кеширование на edge, оптимизацию изображений и предзагрузку на уровне маршрутов.

Достойных альтернатив мало. Astro плюс Vercel подходит инди-SaaS, которому нужен почти нулевой JavaScript на контентном сайте. Framer (собственный конструктор компании) держит дизайн-ориентированные креативные агентства и инди-сегмент на шаблонах. Webflow всё ещё стоит на многих страницах, но его доля в серьёзном SaaS сползает. Команды, которые раньше выкатывали главные на Webflow, переезжают на Next.js плюс CMS вроде Sanity или Contentful, потому что упираются в потолок, как только маркетинговый сайт должен вести себя как продукт.

Если у вашего сайта есть хоть одна продуктовая поверхность (hero-секция с живыми данными, прайсинг, связанный с биллингом, раздел документации с авторизацией), берите Next.js. Визитка для креативной студии? Framer подойдёт. Всё остальное это легаси.

Слой 2: шрифты сошлись на небольшом конкретном списке

Посмотрите на типографику сайтов, которые вы реально хотите скопировать. Это одни и те же шесть семейств по кругу. Inter и его display-собрат, Geist и Geist Mono, Söhne, Switzer, Tobias и General Sans. Вот действующий состав.

Inter это дефолт. Linear использует Inter Display в hero и Inter для текста. Vercel везде ставит Geist и Geist Mono, включая v0 и сам сайт Vercel. Anthropic берёт Söhne и шрифт с засечками для редакционного саб-бренда. Stripe использует Söhne и в маркетинге, и в продукте. OpenAI выпускает кастомный вариант Söhne. Notion и Framer оба используют Inter. Cursor берёт кастомный display-шрифт для hero и рабочую рубленую гарнитуру для текста.

Тренд на моноширинный шрифт характерен для dev-инструментов. Vercel, v0, Cursor, Linear и Anthropic используют моно в подписях-эйбрау, примерах кода, чипах версий и крошечных подписях. Это сигналит «сделано инженерами», не произнося этого вслух, и самый быстрый способ сделать SaaS-сайт похожим на 2026 год, а не на 2022.

Большинство из них это вариативные шрифты, захощенные на том же домене, что и сайт. Adobe Fonts теряет долю в серьёзном SaaS: цена задержки реальна и прямая, а прямые лицензии теперь выигрывают по стоимости. Как выбрать пару, разобрано в гиде по подбору шрифтовых пар. Мета-правило 2026: одного сильного вариативного семейства плюс моно более чем достаточно.

Слой 3: анимация это аффорданс, а не украшение

Анимация в 2026 году работает, а не заполняет тишину. Сценические моменты привязаны к скроллу, смена страниц идёт через API View Transitions, а микроинтеракции живут в Framer Motion или чистом CSS.

Доминируют три паттерна. Хореография hero (градиентное цветение Linear при первой отрисовке, сдержанное проявление текста у Anthropic). Закреплённые при скролле показы продукта (Cursor закрепляет панель, страница скроллится, панель обновляется на месте). Смена страниц через view transitions (Vercel и v0 используют API View Transitions, так что навигация ощущается как смена состояния, а не перезагрузка).

Lottie тихо уходит на пенсию на серьёзных сайтах. Тяжёлая, враждебная к доступности, пахнет 2021-м. Бренды, которые сегодня выпускают анимацию, берут Framer Motion для компонентов, GSAP или scroll-linked CSS для сценических моментов и View Transitions для навигации. Планка такая: «у каждого движения есть причина», а не «у нас есть анимация».

Слой 4: визуальная система геометричная, внесеточная и зернистая

Визуальный язык сайтов 2026 года узнаётся без контекста. Крупная геометричная типографика как главный элемент hero. Внесеточные микро-скриншоты, которые вылезают за колонку. Цветовые палитры в OKLCH с высококонтрастными режимами, выглядящими нативно. Зернистые градиенты (плавный градиент с наложением киношного шума), заменяющие плоские. Генеративные SVG-паттерны в hero вместо стоковых фото.

Hero Linear это канонический референс: одна фраза огромным начертанием, мягкое градиентное цветение, скриншот продукта, парящий с лёгким параллаксом, акцентные чипы одного цвета. Главная Stripe использует кастомную SVG-композицию, которая анимируется при скролле, а за текстом работает их генератор градиентов. У Anthropic редакционный саб-бренд на засечках и продуктовый бренд на рубленой, и контраст между ними делает реальную работу.

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

Слой 5: производительность это последнее эстетическое решение

Бренды, которые выглядят лучше всех, и грузятся быстрее всех. Одна и та же дисциплина, выраженная двумя способами. Сайт, который не отрисовывается быстрее секунды на 4G, не сайт 2026 года, как бы он ни выглядел.

У лидеров паттерн одинаков. Захощенные вариативные шрифты с предзагрузкой и font-display: swap. Статическая генерация с Vercel Image Optimization. Предзагрузка на уровне маршрутов. View Transitions для мягкой смены страниц. Никаких сторонних скриптов в критическом пути. Реальные цифры Core Web Vitals, которые не стыдно поставить на слайд.

Навигация «ощущается мгновенной» это самый копируемый элемент. Наводите на ссылку, Next.js предзагружает маршрут. Кликаете, страница уже в кеше, а View Transition сглаживает смену. Маркетинговый сайт ощущается как продукт, в этом и смысл. Глубже об этом в материале скорость это бренд.

Разбор по брендам

Конкретика важнее принципов. Вот что на самом деле крутится на поверхности у каждого из названных сайтов.

Linear. Next.js на Vercel. Inter и Inter Display, self-hosted. Framer Motion для интеракций компонентов, scroll-linked CSS для градиентного hero. Один акцентный цвет, хореография hero при первой отрисовке, липкий CTA на длинных страницах.

Cursor. Next.js на Vercel. Кастомный display-шрифт для hero, рабочая рубленая для текста, моно для подписей. Фирменный ход: закреплённые при скролле показы продукта.

v0 и Vercel. Next.js, Geist и Geist Mono, View Transitions по всем маркетинговым маршрутам. Hero v0 с «живым превью» это настоящий работающий iframe сгенерированной страницы, самое сильное доказательство, какое только может показать продукт.

Anthropic. Next.js, Söhne, сдержанная анимация (проявление текста, а не трюки с параллаксом), саб-бренд на засечках для редакционных материалов. Делает меньше почти любого конкурента и благодаря этому выглядит более «премиально».

Stripe. Next.js, Söhne, кастомные SVG-композиции в hero, генератор градиентов за текстом и информационная архитектура, построенная вокруг документации, которая десятилетие задаёт планку для финтеха.

OpenAI. Next.js, кастомный шрифт, близкий к Söhne, минималистичная плотность, больше похожая на музей, чем на SaaS-лендинг. Почти нет CTA в hero, и это работает, потому что бренд может себе это позволить.

Notion. Next.js на Vercel, Inter, анимированные продуктовые иллюстрации, где настоящий интерфейс делает настоящую работу. Много реальных визуалов продукта, мало стоковых метафор.

Framer (компания). Построен на самом Framer, сильнейший из возможных догфудинг. Дизайн-ориентированная шаблонная эстетика, плотные страницы, много анимации и чёткий посыл «хотите такой сайт, берите этот инструмент».

Контрпримеры заметны сразу. SaaS-сайт на WordPress-теме 2018 года со стоковой иллюстрацией «люди с ноутбуком» выглядит на десять лет старше ещё до первого скролла. Главная креативного агентства с медленным автоплей-видео и hero с четырьмя CTA читается как питч-дек, притворяющийся сайтом. Урок в категории, а не в бренде.

Пять вопросов, чтобы оценить любой стек

Прежде чем копировать стек, оцените его. Пять вопросов в таком порядке.

1. Какова навигация на ощупь? Полная перезагрузка со вспышкой нестилизованного контента значит, что стек отстаёт минимум на один цикл. Смена состояния значит, что он актуален.
2. Насколько быстра первая отрисовка на среднем мобильном? Меньше 800 мс это планка 2026 года. Больше 2 секунд это провал.
3. Как загружается шрифт? Захощенный вариативный с предзагрузкой или сторонний CDN со вспышкой запасного текста? Первое читается как инженерная работа, второе как 2019 год.
4. Как анимация служит сообщению? Срежиссирована под контент или налеплена как украшение? Выдаёт Lottie-анимация в hero.
5. Как выглядит пустая страница? Уберите hero и градиенты. Если типографика, отступы и структура всё ещё читаются как бренд, стек настоящий. Если всё разваливается, это был шаблон. Более глубокая версия в материале пустые состояния это продукт.

Антипаттерны, которые старят сайт за ночь

Шесть паттернов, которые датируют сайт в момент релиза.

• Каша из drag-and-drop конструктора. Страница, собранная перетаскиванием двенадцати секций из маркетплейса, выглядит как двенадцать секций из маркетплейса. Ничто не проектировалось относительно соседнего.
• Паки иллюстраций, которых никто не узнаёт. Безликие векторные люди на плоском фоне из тех же трёх библиотек, что у каждого второго SaaS. Визуальный шум без запоминаемости.
• Lottie-анимации в каждой секции. Тяжёлые, враждебные к доступности и все на одних и тех же кривых easing, потому что из одного маркетплейса шаблонов.
• Конструкторы страниц с 600 КБ CSS. Сайт с CSS-бандлом на 600 КБ не понимает, что производительность это брендовое решение.
• Ловушка «вручную закодили в 2021». Когда-то аккуратно написан руками и больше не обновлялся. Структура чистая, типографика устарела, контраст неверный. Поддержка это часть стека.
• Cookie-модалки, перекрывающие hero. Стена согласия как первое взаимодействие это провал стека, наряженный в комплаенс.

Аудит стека 2026

Оцените свой текущий маркетинговый сайт по этим семи вопросам. Пять и более ответов «нет», и вы не на стеке 2026 года.

1. Отрисовывается ли страница быстрее секунды на 4G?
2. Захощены ли шрифты как вариативные и предзагружены ли выше линии сгиба?
3. Ощущается ли навигация между маршрутами как смена состояния, а не перезагрузка?
4. Есть ли один акцентный цвет, использованный на странице не более четырёх раз?
5. Есть ли у каждой анимации ясная задача (аффорданс, проявление, переход)?
6. Это настоящие скриншоты настоящего продукта, а не сток или 3D-абстракции?
7. Останется ли страница узнаваемо брендовой, если убрать hero?

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

Часто задаваемые вопросы

Правда ли, что Next.js единственный достойный фреймворк для маркетинговых сайтов в 2026?

Для серьёзного SaaS и бренд-сайтов, по сути, да. Astro достоин внимания для контентных сайтов, которым нужен почти нулевой JavaScript. Framer достоин для дизайн-ориентированных поверхностей креативных агентств. Всё остальное идёт с потолком, который проявляется, как только сайт должен вести себя как продукт.

Стоит ли уходить с Webflow, если сайт уже работает?

Только из-за эстетики не стоит. Уходите, когда Webflow перестаёт справляться с тем, что нужно сайту (кастомная анимация, предзагрузка маршрутов, view transitions, реальные бюджеты производительности), или когда маркетинговому сайту нужно делить компоненты с продуктом. Если это визитка и она нормально конвертирует, оставьте как есть.

Framer, Webflow или Next.js для небольшого бренда?

Framer выигрывает там, где нужна дизайн-ориентированная шаблонная эстетика, а анимация и визуальная система делают основную работу. Webflow выигрывает, когда маркетинговая команда выпускает обновления без инженеров, а сайт действительно визитка. Next.js выигрывает везде, где сайту нужно делить код, компоненты или контент с настоящим продуктом.

Постройте сайт на стеке 2026

Стек не секрет. Лидеры принимают одно и то же семейство решений, и разрыв между сайтом 2026 года и сайтом 2021-го закрывается одним сфокусированным проектом. Выберите фреймворк. Выберите вариативный шрифт и моно. Выберите три паттерна анимации, которые странице реально нужны. Вырежьте всё остальное.

Если вам нужен маркетинговый сайт на стеке 2026 года вместо шаблона Webflow прошлого цикла, наймите Brainy. Мы делаем бренд-сайты на Next.js с захощенными вариативными шрифтами, настоящей анимацией и бюджетом производительности, который не стыдно поставить на слайд.