UX/UI-дизайн сайта: что действительно важно в 2026 году

Почему самый красивый редизайн часто ничего не меняет

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

Дизайн в смысле UX отвечает не на вопрос, как что-то выглядит, а на вопрос, сколько препятствий лежит между намерением и его осуществлением. Каждое лишнее решение, каждое поле, каждый клик является препятствием. Тот, кто меняет только оболочку, оставляет все препятствия на месте и лишь красит их заново.

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

Самая важная часть дизайна: скорость загрузки

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

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

Уже несколько лет это измеряют с помощью Core Web Vitals от Google. Это три показателя, и каждый из них является дизайнерским решением, хотя звучит технически. Значение имеет то, чего достигают 75 процентов реальных просмотров страницы, отдельно для телефона и компьютера, а не один быстрый тест в офисном Wi-Fi.

Как ориентир на каждый день достаточно, чтобы первая отрисовка укладывалась в две секунды на обычном мобильном соединении, а не в Wi-Fi за рабочим столом. Кто тестирует только за столом, тестирует те условия, в которых сайт никогда не бывает проблемой.

PageSpeed Insights показывает вверху данные реальных пользователей, если у сайта достаточно посетителей, а ниже лабораторный тест. Решающими являются реальные данные. Лабораторный тест помогает найти причину.

Визуальная иерархия: одна страница, один следующий шаг

Самая распространённая слабость корпоративных сайтов не в уродливой кнопке, а в слишком большом количестве равнозначных предложений рядом друг с другом. Записаться на встречу, подписаться на рассылку, скачать брошюру, заказать обратный звонок, и всё одного размера и одинаково громкое. Для посетителя это не выбор, а задача.

Работает один основной путь, который на всём сайте выглядит и называется одинаково, плюс максимум один более спокойный запасной путь для тех, кто ещё не готов. Всё остальное относится в подвал сайта, а не в основную часть.

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

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

• Заголовок, который называет результат: для кого, что и с какой пользой. Никакого слогана, который сначала нужно расшифровать.
• Один акцентный цвет, зарезервированный только для основного пути. Если ссылки, иконки и подсказки окрашены так же, кнопка теряет сигнальную силу.
• Свободное пространство вместо рамок: отступы группируют контент спокойнее, чем линии, блоки и тени.
• Мало размеров шрифта: трёх-четырёх ступеней хватает почти для любого сайта. Больше ступеней создают беспокойство, а не порядок.
• Никакого автоматического слайдера в шапке. Он прячет четыре из пяти сообщений и стоит времени загрузки.

Читаемость не мелочь

Очень многие сайты спотыкаются о мелочи, которые ничего не стоят. Основной текст меньше 16 пикселей на смартфоне, строки во всю ширину экрана, светло-серый шрифт на белом фоне, потому что в шаблоне это смотрелось элегантно. Каждое такое решение стоит читателей, и ни одно из них не бросается в глаза тому, кто и так знает текст.

Рабочие ориентиры: основной текст от 17 пикселей, длина строки от 60 до 80 знаков, межстрочный интервал около полутора и контраст, который держится на телефоне даже на солнце. Рекомендации по доступности WCAG требуют для обычного текста коэффициент контраста не ниже 4,5 к 1, для крупного шрифта 3 к 1. Это не вопросы вкуса, это условия того, что текст вообще будет прочитан.

Проверка ничего не стоит: откройте собственный сайт на улице с телефона при средней яркости. То, что вы там не читаете без усилий, не читает и никто другой.

Сначала мобильная версия, и всерьёз

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

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

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

• Зоны нажатия: WCAG 2.2 в критерии 2.5.8 требует не меньше 24 на 24 CSS-пикселя или достаточного расстояния до соседних элементов. Это нижняя граница. Для основных кнопок мы по опыту закладываем высоту 44-48 пикселей.
• Размеры шрифта: основной текст от 16, а лучше от 17 пикселей. Поля ввода не меньше 16 пикселей, иначе Safari на iPhone при нажатии увеличивает масштаб формы.
• Навигация: не больше одного уровня в мобильном меню, основная кнопка остаётся видимой вне меню.
• Таблицы и сравнения: на телефоне в виде карточек друг под другом или с горизонтальной прокруткой и видимой подсказкой, но никогда не обрезанные.
• Телефон и email в виде ссылок, чтобы хватало одного нажатия.

У нас порядок обратный. Первый набросок делается в ширину телефона, и только когда он там работает, его раскрывают на большой экран. Звучит как формальность, а меняет результат сильнее любого решения о цвете.

Доступность: качество дизайна и для некоторых обязанность

С 28 июня 2025 года в Германии действует закон об усилении доступности (Barrierefreiheitsstärkungsgesetz, BFSG), немецкая реализация Европейского акта о доступности. Он обязывает поставщиков определённых услуг для потребителей делать эти услуги доступными. Для сайтов важны прежде всего услуги электронной торговли, то есть предложения, через которые потребители заключают договор онлайн: магазины, бронирования, подписки.

Скажем честно: многие чисто B2B-сайты под закон не подпадают. Закон привязан к услугам для потребителей, и информационный сайт с контактной формой, через который не заключается договор с частными лицами, по распространённому толкованию не является случаем BFSG. Кроме того, есть прямое исключение для микропредприятий, оказывающих услуги: меньше десяти сотрудников и не более двух миллионов евро годового оборота или валюты баланса. Попадаете ли вы под закон в своём конкретном случае, вопрос юридический, а не дизайнерский. Его один раз решают с юристом, а не в брошюре агентства.

Независимо от обязанности большая часть этого окупается и так, потому что совпадает с хорошим оформлением. Доступность не дополнительная функция, а мерило качества: работает ли страница в плохих условиях, с уставшими глазами, в поезде, одной рукой, когда очки для чтения лежат где-то в другом месте.

• Контраст не ниже 4,5 к 1 для основного текста
• Управление с клавиатуры с видимым фокусом
• Подписанные поля форм вместо одних только подсказок внутри поля
• Альтернативный текст у изображений, которые несут смысл
• Чёткая структура заголовков, понятная и экранным дикторам, и поисковым системам

Формы и запись на встречу

Форма это место, где заканчивается большая часть работы, вложенной в страницу. Кто дочитал до сюда, тот заинтересован, и всё же многие уходят именно здесь. Обычно дело не в недостатке мотивации, а в полях, которые требуют больше, чем посетитель готов отдать в этот момент.

• Как можно меньше полей: имя, email, одно свободное поле. Всё, что можно спросить в разговоре, в форме не нужно.
• Чётко отмечать обязательные поля и объяснять ошибки прямо у поля, а не после отправки где-то вверху страницы.
• Называть кнопку по результату: «Запросить встречу» вместо «Отправить».
• Сказать, что будет дальше: кто свяжется, когда и сколько продлится разговор.

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

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

Доверие в B2B: конкретика вместо блеска

В B2B никто не покупает с первого клика. Прежде всего сайт должен ответить на один вопрос: можно ли доверить этим людям встречу, бюджет и своё имя внутри компании? Глянец тут мало помогает. Помогает то, что можно проверить.

• Настоящие лица: фотографии людей, с которыми действительно предстоит общаться, вместо стоковых рукопожатий.
• Отзывы с именами: логотипы клиентов, цитаты с указанием человека и компании, кейсы с исходной ситуацией и результатом. Анонимные похвалы скорее вредят.
• Конкретные цифры вместо прилагательных: годы на рынке, число проектов, назначенные встречи. Только то, что правда и что можно подтвердить.
• Цены или хотя бы ценовой диапазон, где это возможно. Кто ничего не называет, того часто считают дороже, чем он есть.
• Полные выходные данные (Impressum) и реальный адрес. В Германии Impressum обязателен в любом случае, и B2B-закупщики действительно туда заглядывают.

Элементы доверия работают сильнее всего рядом с основной кнопкой, а не на отдельной странице с отзывами, которую почти никто не открывает.

Где заканчивается дизайн и начинается предложение

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

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

А когда страница готова, всё остальное решает то, найдут ли вас в поиске. Что в этом сейчас меняет ИИ-поиск, описано в материале SEO с искусственным интеллектом.

Чек-лист перед редизайном

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

1. Сформулировать одним предложением единственный следующий шаг для каждой страницы.
2. Проверить текущие Core Web Vitals по данным реальных пользователей, отдельно для телефона и компьютера.
3. Посмотреть в веб-аналитике, где посетители входят и где уходят.
4. Пройти сайт на собственном телефоне на улице до отправленной формы или назначенной встречи.
5. Сверить контраст, размеры шрифта и зоны нажатия с ориентирами выше.
6. Проверить предложение: понимает ли посторонний человек за тридцать секунд, для кого оно и сколько стоит?
7. Собрать подтверждаемые элементы доверия и разместить их рядом с основной кнопкой.
8. Выяснить, распространяется ли BFSG на ваше предложение, до создания нового сайта, а не после.
9. Определить показатели, по которым вы оцените успех после перезапуска: заявки, встречи, скорость загрузки.

Когда редизайн не решает проблему

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

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

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

Как мы делаем сайты

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

Наш взгляд на сайты идёт из продаж: с 2023 года мы назначили для клиентов более 2000 встреч, и в каждом случае потенциальный клиент рано или поздно попадает на сайт. Как это выглядит в деталях, описано на нашей странице о сайтах. Если у вас уже есть сайт и вы хотите понять, где он буксует, мы посмотрим на него вместе на первом созвоне.

Частые вопросы

Источники

1. web.dev (Google): Web Vitals и пороговые значения
2. web.dev (Google): Interaction to Next Paint (INP)
3. W3C: WCAG 2.2, критерий 2.5.8 Размер цели (минимум)
4. W3C: WCAG 2.2, критерий 1.4.3 Контраст (минимум)
5. Закон BFSG, текст закона
6. Директива (ЕС) 2019/882, Европейский акт о доступности