Дизайн сегодня - это не про красивые картинки в Figma. Это про понимание. Про то, чтобы человек открыл сайт, ровно понял, что ему нужно, и сделал это за полторы минуты. Всё остальное - отвлечение.
Я видел клиентов, которые потратили кучу средств на дизайн у известного агентства. Красивейший сайт. Пиксель в пиксель. Но конверсия упала на 30%. Почему? Потому что красивый ≠ понятный.
Вот реальные правила хорошего UX в 2026.
Иерархия, которая работает без объяснений
Когда человек открывает сайт, у него ровно 3 секунды внимания. За эти 3 секунды он должен понять три вещи: кто вы, что вы продаёте, почему это ему нужно.
Плохая иерархия: всё одинакового размера. Заголовок 24px, подзаголовок 24px, текст 20px. Человек открывает, видит мешанину. Не понимает, на что смотреть. Закрывает.
Хорошая иерархия: главное огромное (36–48px), яркое, с воздухом вокруг. Подсказка помельче (18–20px), чуть светлее. Остальное — совсем мелким серым в углу. Человек видит путь.
Вот конкретный пример. Лендинг для бизнес-коуча.
Плохо:
Заработай больше денег
Специалист по коучингу помогает предпринимателям
развить свой бизнес. Есть 5 методик, курс длится
3 месяца, стоит 200k. Кнопка внизу.
Хорошо:
Заработай 200k в месяц (огромный заголовок)
Без своих клиентов (подзаголовок, важное уточнение)
Посмотреть метод (большая кнопка, контрастная)
[внизу мелким] Курс длится 3 месяца, включает 5 методик, 50+ видео
Второй вариант люди читают 2 секунды и кликают. Первый - закрывают и уходят. Иерархия - это дизайн.
Мобильный девайс - это главный сценарий, не второстепенный
Статистика суровая. 65% трафика на мобильных. В 2026 году, если ваш сайт не супер удобен на iPhone, вы теряете две трети аудитории.
Я видел клиентов, которые проектируют на большом десктопном мониторе (27 дюймов), а потом "адаптируют" под мобильный. Результат: на телефоне каша. Ползунки, которые нельзя точно потянуть. Кнопки размером в пиксель. Текст мельче булавки.
Правильно: начинаем с мобильного. 375px ширина, 667px высота (iPhone 8 — самый частый). Проектируем на этом. Потом расширяем на планшет и десктоп.
Что значит "удобный мобильный"?
Шрифты не мельче 16px. Это дефолт iOS - меньше, и браузер сам зуммирует при клике. Раздражает.
Кнопки и ссылки не меньше 48x48px. Палец человека примерно такого размера. Если кнопка меньше, неудобно тыкать.
Поля ввода занимают всю ширину. На десктопе рядом можно поставить "Имя" и "Фамилия". На мобильном - друг под другом, каждое на всю ширину.
Горизонтальный скролл - смерть. Люди не понимают, что ещё есть. Если вы делаете горизонтальный список товаров, пусть край товара справа чуть-чуть видно. Люди поймут "а дальше что-то есть".
Я видел e-commerce, где на мобильном товары были настолько маленькие, что люди не видели фото. Клали в корзину вслепую. Конверсия упала на 50%. Переделали — одно фото на всю ширину, большое, красивое. Конверсия вернулась.
Микроанимации - это язык общения между вами и пользователем
В 2026 году анимация - это не украшение. Это обратная связь. Это способ сказать пользователю "я тебя услышал".
Человек кликает на кнопку "Купить". Что дальше? Ничего не происходит. Кликает ещё раз. И ещё. Потому что не понимает, произошло ли действие.
Хорошая анимация: кнопка становится серой, в ней крутится белый лоадер. Через 2 секунды лоадер исчезает, появляется белая галочка, кнопка становится зелёной. Человек понимает: платёж прошёл.
Форма с ошибкой. Хорошая анимация: поле трясётся (shake animation, 300ms), текст под ним становится красным. Человек видит: что-то неправильно.
Чек-бокс. Хорошая анимация: при клике появляется белая галочка с масштабированием (0.2s). Человек видит: я это включил.
Все эти анимации быстрые. 100-300ms. Не больше. Дольше 300ms - раздражает. Меньше 100ms - не видит.
Я видел сайты, где логотип летает через экран при загрузке (крутая анимация, 2 секунды). Сидишь и ждёшь, пока логотип долетит. Раздражает. Отвлекает от контента. Убрали анимацию - люди стали дольше оставаться на сайте.
Тёмная и светлая тема - это не фишка, это необходимость
Вы когда-нибудь пробовали смотреть белый экран в 23:00? Глаза сгорают. Это реально больно.
В 2026 году 60% людей используют тёмный режим. Если у вас его нет, половина вечернего трафика отрубается.
Правильно: система сама узнаёт, включен ли на устройстве тёмный режим (prefers-color-scheme: dark), и переходит в него. Без кнопочек, без выбора. Автоматически.
На мобильном это встроено в ОС. На десктопе браузер тоже это видит. Ваш сайт подстраивается.
Неправильно: "Переключить тему" кнопка в меню. 95% не найдут. Или тема есть, но только светлая, и ночью люди мучаются.
Важный момент: контраст текста должен быть одинаково хорошим в обеих темах. Светлый текст на тёмном, тёмный текст на светлом - оба варианта должны быть читаемы. Минимум 4.5:1 соотношение контраста.
Я видел сайты, где в тёмной теме текст становился серым на чёрном. Не видно. Прямо нарушение доступности.
Скорость загрузки - это часть дизайна, не техники
PageSpeed 90+ (Google Lighthouse). Первое содержимое появляется за 1.5 секунды. Если дольше, люди уходят.
Тут главное не картинки. Это JavaScript. Если вы загружаете весь React вместе со всеми зависимостями на главную, страница зависает.
Правильно: критический код (что видит пользователь) загружается сразу. Остальное - lazy-load. Кнопка "Смотреть ещё" кликнул — только тогда загружаются товары ниже.
Изображения в современных форматах. WebP, AVIF. Файлы в 3–4 раза меньше, чем JPG. 5MB картинка становится 1.2MB. Скорость загрузки в 5 раз выше.
На Tilda PageSpeed 45–60 из 100. Google видит это и опускает вас в выдаче. На чистом React/Next.js - 95–100.
Мини-кейс: как переделка флоа подняла конверсию на 156%
Платформа для продажи онлайн-курсов. Была классическая схема.
Старый флоу (2020):
Человек нажимает "Купить курс"
Открывается форма регистрации: Email, Пароль, Имя, Фамилия
Он заполняет все поля (если не уйдёт)
Кликает "Зарегистрироваться"
Открывается форма платежа
Выбирает способ платежа, вводит карту
Кликает "Оплатить"
Если платёж прошёл, открывается курс
Проблема: на шаге 2 (регистрация) уходило 60% людей. Форма с 4 полями — много. Непонятно, почему нужна фамилия. Поля с валидацией — "пароль слишком слабый, используйте спецсимволы и цифры". Раздражает.
Новый флоу (2026):
- Нажимает "Купить курс"
- Одно поле: Email (вводит, кликает "Далее")
- Система генерирует временный пароль, открывает платёж
- Stripe платёж (система сама заполняет его email)
- После платежа → регистрация полная (пароль, имя, фамилия)
- Или → вход через Google (55% выбирают это вместо пароля)
- Готово, курс открывается
Что изменилось?
Убрали предварительную регистрацию. Главное - платёж. Всё остальное потом.
Одно поле на экране вместо четырёх. Человек видит: Email. Вводит. Кликает. Понимает.
Stripe платёж вместо собственной формы. Люди доверяют Stripe (он везде). Вводят карту быстрее, без страхов "украдут ли данные".
После платежа регистрация становится лёгкой. Человек уже заплатил, заинтересован. Введёт пароль.
Опция "Войти через Google". 55% выбирают это. Не хочет изобретать пароль - кликнул Google, готово.
Результат:
Было 2% конверсия (из 100 человек кликающих "Купить" - 2 платят).
Стало 5.1% конверсия (156% рост).
Среднее время прохождения флоа: 2 минуты 40 секунд → 38 секунд.
Bounce rate на шаге 2 (регистрация): 60% → 12%.
Почему это сработало?
Потому что каждый скрин - один вопрос. Email? Платёж? Пароль? Один выбор - один экран.
Потому что на мобильном удобно. Одно поле на ширину экрана, клавиатура появляется автоматически.
Потому что анимация помогает. При вводе email видна подсказка "тип дальше", кнопка меняет цвет при наведении.
Потому что Stripe быстро загружается параллельно, не блокирует страницу.
Потому что светлая и тёмная тема - платёжная форма выглядит хорошо в обе.
Мораль
Хороший UX в 2026 - это не красота. Красота - это вишенка на торте. Главное - понимание и стиль.
Каждый пиксель должен отвечать на вопрос пользователя. Каждая анимация - обратная связь. Каждый скрин - один шаг к целевому действию.
Если вы всё ещё проектируете на Figma и не тестируете на реальных людях, если ваш PageSpeed 45, если у вас нет тёмной темы, если на мобильном неудобно - вы в 2020.
2026 уже наступил.
Больше о наших проектах:
🌐 interphase.pro
💬 Telegram: @interphase_art