Дизайн сайта в 2026: какие тренды работают на заявки, а какие только красивы

Три проверки для любого приёма

Список наш, не рейтинг и не статистика. Чтобы не спорить о вкусе, прикладывайте к каждому приёму три проверки.

1. Он ведёт к заявке. Эффект на пути к кнопке или форме полезен, рядом с ней — украшение.
2. Страница из-за него не тормозит. У Google для этого три показателя, вместе их называют Core Web Vitals. Главный блок страницы должен появиться не позже чем через 2,5 секунды после начала загрузки. На нажатие страница отвечает за 200 миллисекунд. Вёрстка не прыгает: сдвиг не больше 0,1. Google советует мерить по 75-му процентилю загрузок, отдельно для телефона и компьютера: в порог должны укладываться не меньше трёх загрузок из четырёх. Сам Google пишет, что эти показатели и другие признаки удобства страницы согласуются с тем, что его основные системы ранжирования стремятся поощрять.
3. На телефоне всё читается. Для индексации и ранжирования Google берёт мобильную версию сайта, а не ту, что вы смотрите на мониторе.

Пять приёмов одной таблицей

Крупный заголовок почти ничего не стоит

Нужен он любому сайту, от юриста до магазина запчастей.

У Velodíl, нашей работы про склад велозапчастей, первый экран говорит одной строкой: «Bike parts, by the part number», то есть запчасти по артикулу. Читатель сразу знает и что продают, и как здесь искать. Проверка простая: подставьте свой заголовок на сайт конкурента. Если он подошёл, заголовок слишком общий.

Цена у приёма одна — шрифт. Каждое начертание — файл, который браузер скачивает, пока на странице стоит запасной шрифт или пустое место. Когда файл доехал и заменил запасной, текст может сдвинуть всю вёрстку: два шрифта занимают на странице разное место. Web.dev, справочник Google для разработчиков, пишет, что быстрее всего тот шрифт, который не пришлось запрашивать, а системные шрифты хорошо подходят для основного текста. Нам хватает минимума: одно семейство, два начертания, запасной системный шрифт.

С контрастом крупный текст проще. По правилам доступности WCAG 2.2 (уровень AA) обычному тексту нужен контраст 4,5 к 1, а крупному (примерно от 24 пикселей, у жирного шрифта от 18,5) — 3 к 1. Поэтому подводит обычно не заголовок, а серая подпись под ним.

Тёмная тема идёт не всем

Под тёмной темой понимают два разных приёма. Первый: сайт нарисован тёмным, такой у него фирменный стиль. Второй: сайт переключается вслед за настройкой телефона. Браузер умеет узнавать, какую тему человек выбрал в системе, а если выбора нет, считает, что нужна светлая. Второй вариант — двойная работа: каждый экран рисуют и проверяют дважды.

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

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

Анимация: двигайте то, что объясняет

Хорошая анимация показывает порядок или изменение: шаги «как мы работаем» появляются по одному, цена пересчитывается на глазах, как в Glinowir, где форму вазы тянут пальцем. Плохая двигается ради движения.

Для скорости Web.dev советует по возможности ограничиваться двумя свойствами: transform (смещение, поворот, масштаб) и opacity (прозрачность). Анимация, которая двигает элемент иначе, например через top и left, скорее всего, будет медленной. Подрядчика стоит спросить, что именно у него двигается.

Запасной вид подсказывает сама система: у телефонов и компьютеров есть настройка, которая убирает лишнее движение. На iPhone: «Настройки» → «Универсальный доступ» → «Движение» → «Уменьшение движения». Сайт умеет её читать и выключать анимации. MDN напоминает, что масштабирование и перемещение крупных объектов могут вызывать дискомфорт при вестибулярных нарушениях. Работы Kruh, Quaderl и Glinowir из таблицы ниже эту настройку учитывают: при «Уменьшении движения» анимации в них отключаются.

Короткие ролики вместо длинных текстов

Ролик в 6–10 секунд без звука объясняет то, что в тексте заняло бы абзац: например, как проходит запись или как выглядит заказ. Ролик Velodíl из раздела с примерами идёт восемь с половиной секунд и весит около 240 КБ.

Как правило, браузеры разрешают автозапуск, если звука нет, а в Safari для этого нужен ещё атрибут playsinline (справка MDN). Значит, ролик без звука запустится сам, и смысл в нём должен быть понятен по картинке.

Если ролик на первом экране занимает больше места, чем всё остальное, скорость появления главного блока считается по постеру или по первому кадру, смотря что раньше. Поэтому постер должен загрузиться быстро: лёгкая картинка WebP, а сам ролик подгружается позже.

Чего ролик не заменяет: цену, сроки и условия. Их ищут глазами, а не ждут на восьмой секунде.

3D и вау-эффекты: когда нужны, а когда это дорогая картинка {#3d}

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

Теперь о скорости. Библиотека three.js, на которой мы делаем 3D, — два файла. По нашим замерам для версии 0.186 это около 800 КБ до сжатия и около 200 КБ после gzip. Сверху идёт код самой сцены. Рисует её видеочип устройства, и на слабом телефоне сцена может идти рывками.

Запасной вид обязателен. На некоторых устройствах 3D (технология называется WebGL) не запускается. В руководстве MDN сказано: если браузер WebGL не поддерживает, getContext() возвращает null, и код страницы должен это предусмотреть. В работах Kruh, Quaderl и Glinowir в этом случае, как и при включённом «Уменьшении движения», вместо сцены показывается плоский рисунок того же предмета.

3D и вау-эффекты у нас — расширение пакета «Сайт компании». Сумму здесь не называем.

Когда красота мешает

Вот по каким признакам видно, что эффект лишний:

• Заставка. Посетитель из рекламы смотрит, как заполняется логотип, и может закрыть вкладку раньше, чем увидит заголовок.
• Карусель на первом экране: пока человек читает первую строку, предложение уже сменилось.
• Заголовок лежит на фото без затемнения. На светлом пятне он пропадает, а проверяют обычно на одном телефоне.
• Кнопка съезжает, когда догружается шрифт или картинка. Человек целится в «Записаться», а попадает в соседнюю ссылку.
• Окно cookies на телефоне закрывает главную кнопку. Откройте сайт в приватной вкладке и посмотрите.

Если эффект убрать и посетитель не заметит потери, это украшение. Остальное покажет живая проверка: дайте телефон человеку, который сайт не видел, попросите найти, как записаться, и засеките время.

Примеры: на что смотреть в хорошем лендинге

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

Velodíl — склад велозапчастей в Брно: магазин для розницы и для веломастерских. Интерфейс на английском, цены в чешских кронах. Это магазин, а не лендинг, но приём тот, что нужен лендингу: форма заказа стоит на первом экране, до прокрутки. Мастерская вставляет список артикулов с количеством. В примере на первом экране их четыре: три строки готовы к заказу, одну надо поправить, внизу итог — 11 078 крон с НДС. Магазин показывает наличие и считает сумму, а позицию, снятую с продажи, предлагает заменить одной кнопкой. Вход для мастерских работает без пароля и меняет розничные цены на оптовые.

Открыть работу Velodíl

Ещё четыре работы с другими приёмами:

Если ваш бизнес ближе к Odontara, чем к Kruh, эффекты вам вряд ли нужны: нужны понятное предложение и короткая запись.

Что сделать сегодня

1. Откройте свой сайт с телефона и пять секунд смотрите на первый экран. Если непонятно, что вы продаёте и как заказать, эффекты трогать рано.
2. Прогоните главную через PageSpeed Insights. Он покажет Core Web Vitals отдельно для телефона и компьютера. Сравните с порогами: 2,5 секунды, 200 миллисекунд, 0,1. Если посетителей мало, данных о реальных пользователях может не быть. Тогда смотрите лабораторные замеры.
3. Включите на телефоне «Уменьшение движения» и откройте сайт. Если что-то сломалось или пропало, запишите это.
4. Проверьте контраст главного текста и кнопки. В Chrome откройте DevTools, нажмите Inspect (выбор элемента) и наведите курсор на текст: в подсказке будет значение контраста, а если оно слабое, рядом появится значок предупреждения. Норма: 4,5 к 1, для крупного текста 3 к 1.
5. Выпишите все эффекты на сайте и напротив каждого одной фразой, как он помогает дойти до формы. Где фразы нет, там эффект лишний.

Если хотите, сделаем это за вас

Лендинг стоит от €380, сайт компании — от €580. Срок: 3–⁠7 дней у лендинга и 2–⁠3 недели у сайта компании. Начинаем с созвона: что вы продаёте, кому и какого одного действия ждёте от посетителя. Дальше:

• дизайн под ваш бренд, отдельно для телефона и ноутбука;
• структура под ваше предложение, тексты готовим мы и присылаем вам на проверку;
• лёгкие анимации;
• форма заявки приходит в Telegram, на почту, в таблицу или в вашу CRM;
• публикация на вашем домене, домен и хостинг оформляем на вас, оплачиваете напрямую;
• правки бесплатно до приёмки, гарантия на ошибки: 3 месяца у лендинга и 6 у сайта компании.

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

Что входит в лендинг и сайт компании и как мы их делаем

С компаниями из России и Беларуси мы не работаем.

Обсудить задачу

Источники

Все страницы открывали и читали 21.10.2026.

Google (web.dev и Search Central):

• Web Vitals: пороги LCP 2,5 с, INP 200 мс, CLS 0,1; 75-й процентиль отдельно для телефона и компьютера.
• Largest Contentful Paint: для видео берётся время загрузки постера или показа первого кадра, что раньше.
• Best practices for fonts: быстрее всего шрифт, которого не запрашивали; системные шрифты для основного текста; сдвиги из-за разного размера шрифтов.
• Animations guide: по возможности только opacity и transform.
• Core Web Vitals и Google Search: показатели согласуются с тем, что стремятся поощрять системы ранжирования.
• Mobile-first indexing: для индексации и ранжирования берётся мобильная версия.
• About PageSpeed Insights: отчёт для телефона и компьютера; оценка Core Web Vitals по данным реальных пользователей при их достаточном числе.
• Check contrast in Chrome DevTools: кнопка Inspect, подсказка с контрастом и значок предупреждения.

MDN Web Docs:

• prefers-reduced-motion: настройка уменьшения движения, предупреждение про вестибулярные нарушения.
• prefers-color-scheme: сайт узнаёт выбранную тему.
• Autoplay guide for media: автозапуск видео без звука, playsinline в Safari.
• Getting started with WebGL: без поддержки WebGL getContext() возвращает null.

W3C:

• Understanding Success Criterion 1.4.3: Contrast (Minimum): 4,5 к 1 для обычного текста, 3 к 1 для крупного (18 pt или 14 pt жирным).

Apple:

• Настройка движения на экране iPhone: путь «Настройки» → «Универсальный доступ» → «Движение», параметр «Уменьшение движения».

← Все статьи блога