Веб-дизайн сайта: как соединить задачу, сценарий и визуальный образ

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

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

Первое впечатление о внешнем виде сайта возникает быстро. В исследовании Тух и соавторов участники оценивали 119 скриншотов после показа в течение 50, 500 или 1000 миллисекунд. На оценку влияли визуальная сложность и соответствие привычному образу сайта. Эксперимент проводился со статичными изображениями, поэтому по нему нельзя судить о конверсии или удобстве всего продукта. Он показывает другое: визуальная композиция начинает влиять на восприятие ещё до внимательного чтения содержания.

Что такое веб-дизайн

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

UX и UI описывают разные стороны этой работы.

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

Российский ГОСТ Р ИСО 9241-210-2016 описывает человеко-ориентированное проектирование интерактивных систем. Среди его принципов — понимание пользователей, их задач и условий работы, участие пользователей в проектировании, проверка решений и итеративная доработка.

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

Полный путь от постановки задачи до запуска разбираем в статье «Разработка сайта: от бизнес-задачи до запуска и развития».

Основные вопросы до начала дизайна

Запрос «сделать современно» не объясняет, какой сайт нужен. Один проект должен быстро представить компанию партнёру, другой — принять заказ, третий — помочь выбрать квартиру, четвёртый — сократить работу менеджеров через личный кабинет.

До макетов нужно определить:

• кто приходит на сайт и в какой ситуации

• откуда приходит человек: из поиска, рекламы, рекомендации, рассылки или другого канала

• что он уже знает о компании и продукте

• какой вопрос хочет решить

• какое действие должно стать следующим

• что мешает принять решение

• какой контент и какие доказательства доступны

• какие функции, интеграции и ограничения уже известны

• кто будет обновлять сайт после запуска

• по каким данным команда поймёт, что решение работает

Ответы влияют на структуру сильнее выбранного стиля. Пользователю из поисковой выдачи может понадобиться подробное объяснение. Человеку из рекламного объявления — быстрое продолжение конкретного обещания. Действующему клиенту — вход в кабинет и доступ к документам без повторного знакомства с брендом.

«Первоцветы»: несколько способов начать поиск квартиры

В сайте агентства недвижимости «Первоцветы» мы построили путь вокруг разных способов начать поиск квартиры. Для тех, кому нужна помощь, предусмотрели консультацию и квиз; для самостоятельного поиска — переход к каталогу. Отдельные сценарии подготовили для покупателей жилья и инвесторов.

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

Контент и прототип: почему их проектируют вместе

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

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

Для прототипа обычно нужны:

• заголовки и основные тезисы;

• состав навигации;

• реальные или близкие к реальным объёмы текста;

• характеристики и документы;

• подписи к формам и кнопкам;

• сообщения об ошибке и успешном действии;

• требования к фотографиям, видео, 3D и инфографике;

• связи между страницами;

• сценарии для разных аудиторий и устройств.

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

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

Бренд в интерфейсе

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

Начинать с вопроса «какой стиль нравится» рискованно. Личные предпочтения участников проекта легко уводят дизайн от аудитории и задачи. Сначала лучше определить, какое впечатление должен создавать сайт, чем оно подтверждается и какие визуальные приёмы бренду не подходят.

Перед утверждением концепции проверяют:

• что человек должен понять о компании по первым экранам

• какие особенности продукта можно показать, а не описывать

• какие материалы подтверждают заявленный уровень

• как фирменный стиль работает в интерфейсе

• где нужна сдержанность, а где уместен выразительный образ

• получится ли развивать эту систему на новых страницах

Цвет сам по себе не делает бренд надёжным или смелым. Синий интерфейс не гарантирует доверия, а яркий — энергии. Впечатление складывается из содержания, фотографий, композиции, деталей и поведения элементов.

«Стэлл Город»: единый образ для пяти компаний

В проекте сайта для ГК «Стэлл Город» нужно было объединить в одном образе пять компаний, которые работали в строительных материалах, модульных зданиях, логистике и промышленном оборудовании, но воспринимались раздельно.

Для сайта разработали концепцию «Горизонты будущего, созданные людьми». Она задала структуру, тон текстов, космическую эстетику, 3D-версию логотипа и движение элементов. Футуристичную подачу связали с реальными доказательствами масштаба: техникой, производством, людьми и объектами.

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

Из чего складывается интерфейс

Визуальная иерархия

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

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

Навигация

Пункты меню, ссылки и названия разделов должны совпадать с языком пользователя. Внутренние термины компании понятны сотрудникам, но могут ничего не говорить клиенту.

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

Количество пунктов само по себе мало о чём говорит. Важнее, насколько понятно они сгруппированы и названы.

Компоненты и правила

Кнопки, поля, карточки, табы, фильтры и уведомления повторяются на разных страницах. Для них задают единые размеры, отступы, поведение и правила использования.

Небольшому сайту может хватить UI-кита. Большому продукту нужна дизайн-система с компонентами, токенами, паттернами и документацией.

Примеры такого подхода есть и в российских продуктах: Гайды Госуслуг объединяют правила дизайна и контента для большой экосистемы, а VKUI предоставляет библиотеку адаптивных React-компонентов на основе дизайн-системы ВКонтакте.

Единые правила уменьшают расхождения между страницами и упрощают развитие продукта.

Состояния интерфейса

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

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

K7: единая система для разных сценариев

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

Уже после вёрстки клиент предложил добавить калькулятор доходности для инвесторов. Новую функцию встроили в готовый сайт без пересборки его общей логики.

Особенности интернет-магазинов и цифровых сервисов

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

По данным ИСИЭЗ НИУ ВШЭ и Росстата, в 2025 году товары или услуги онлайн покупал 71% россиян — на 4 процентных пункта больше, чем годом ранее. Эта цифра показывает распространённость онлайн-покупок, но ничего не говорит о качестве конкретного магазина.

В интернет-магазине особенно важны:

• поиск, категории и фильтры;

• карточка товара и варианты предложения;

• корзина и оформление заказа;

• оплата и доставка;

• история и статусы заказов;

• ошибки, отмена, возврат и поддержка.

По данным исследования Checkout UX 2025 от Baymard, 64% исследованных десктопных и 63% мобильных сайтов крупных интернет-магазинов США и Европы имеют посредственный или более слабый сценарий оформления заказа. Эти значения нельзя переносить на российский рынок или любой отдельный сайт, но они показывают, сколько проблем остаётся даже у крупных игроков.

Функции, интеграции, оплату, доставку и этапы такого проекта подробнее разбираем в статье «Разработка интернет-магазина: кому она нужна и что важно решить до старта».

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

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

Мобильная версия: не уменьшенная копия десктопа

Мобильный экран меняет порядок, плотность и способ взаимодействия. Перенести десктопные блоки в одну колонку недостаточно.

По данным ИСИЭЗ НИУ ВШЭ и Росстата, в 2025 году с мобильного телефона или смартфона выходили в интернет в 90% российских домохозяйств. Ноутбуки использовали в 43%, стационарные компьютеры — в 32%.

Это данные об устройствах доступа в домохозяйствах, а не распределение трафика на конкретном сайте. Собственную картину нужно смотреть в аналитике проекта.

При проектировании мобильной версии проверяют:

• какое содержание нужно показать раньше

• помещаются ли заголовки и элементы навигации

• удобно ли нажимать на кнопки и поля пальцем

• сколько действий требует форма

• остаются ли видимыми цена, статус и основное действие

• как работают таблицы, фильтры, карты и большие изображения

• что происходит при медленной сети

• нужна ли на телефоне вся десктопная анимация

• можно ли пройти ключевой сценарий одной рукой

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

Яндекс Вебмастер также предупреждает владельца, если страницы некорректно отображаются на мобильных устройствах.

СТАРК: мобильная версия для рекламного трафика

При работе над сайтом ЖК «СТАРК» нужно было передать масштаб проекта и привести пользователя к выбору квартиры.

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

Анимация: когда движение помогает интерфейсу

Анимация может объяснить изменение состояния, связать два шага, направить внимание или поддержать характер бренда. У неё должна быть конкретная роль.

Она может:

• показать, что действие принято системой

• объяснить появление, перемещение или скрытие элемента

• сохранить контекст при переходе

• обратить внимание на изменение данных

• раскрыть продукт или пространство

• задать темп истории на промосайте

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

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

Производительность оценивают уже на собранном сайте. Core Web Vitals измеряют скорость показа основного содержания, отзывчивость и визуальную стабильность страницы. Дизайнер влияет на эти показатели через объём медиа, шрифты, компоновку и сценарии движения, но итог зависит и от реализации.

Показатели, составляющие основу Core Web Vitals

Доступность в веб-дизайне

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

В России действует ГОСТ Р 52872-2019 с требованиями к доступности интернет-ресурсов, приложений и пользовательских интерфейсов. Международная спецификация WCAG 2.2 задаёт четыре принципа: содержание должно быть воспринимаемым, управляемым, понятным и технически надёжным.

Для дизайнера базовая проверка включает:

• достаточный контраст текста и элементов управления

• понятную структуру заголовков

• видимый фокус при работе с клавиатуры

• подписи у полей, которые не исчезают после ввода

• сообщения об ошибках с объяснением, что исправить

• отсутствие действий, доступных только по цвету, наведению или жесту

• возможность увеличить текст без потери содержания

• альтернативу движению и миганию

• логичный порядок элементов

• текстовые альтернативы для содержательных изображений

Для обычного текста WCAG 2.2 устанавливает минимальное контрастное отношение 4,5:1, для крупного — 3:1. Эти значения проверяют на конкретных сочетаниях фона и текста, включая состояния кнопок, ссылок и ошибок.

Автоматический анализ миллиона главных страниц в рамках WebAIM Million 2026 обнаружил вероятные нарушения WCAG на 95,9% страниц. Низкий контраст встретился на 83,9%.

Автоматическая проверка видит лишь часть проблем и не заменяет ручной аудит или тестирование с пользователями. Но масштаб базовых ошибок показывает, почему доступность стоит учитывать ещё на этапе дизайна.

Визуальные тренды: что стоит использовать

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

Перед использованием приёма стоит проверить:

• какую задачу он решает

• соответствует ли характеру бренда

• помогает ли отделить важное от второстепенного

• что произойдёт на мобильном экране

• сколько ресурсов потребует при разработке и загрузке

• сохранится ли доступность

• сможет ли команда поддерживать решение после запуска

• не устареет ли оно раньше самого сайта

Тренд уместен, когда усиливает содержание. Если без него страница становится понятнее и быстрее, значит приём занимал чужое место.

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

Когда сайту действительно нужен редизайн

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

Редизайн имеет смысл, когда есть наблюдаемая проблема:

• структура больше не соответствует продуктам и аудитории

• люди не находят нужные разделы

• мобильный сценарий заметно слабее десктопного

• форма, каталог или корзина создают лишние шаги

• визуальный образ расходится с нынешним позиционированием

• новый контент не помещается в старые шаблоны

• одинаковые компоненты выглядят и работают по-разному

• дизайн ограничивает развитие функций

• аналитика и обращения показывают повторяющиеся затруднения

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

«Днепровский»: редизайн после проверки рекламной воронки

В проекте ЖК «Днепровский» клиент изначально обратился за контекстной рекламой, но оценка посадочной страницы показала, что старый сайт слабо раскрывает жилой комплекс и не ведёт к выбору квартиры.

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

Разницу между редизайном, доработкой и новой разработкой подробнее разбираем в статье о разработке сайта.

Этапы работы над веб-дизайном

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

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

Что передают разработчикам

Одних экранов в Figma недостаточно. Разработчику нужны структура страниц, сетки, компоненты и их состояния, правила адаптации, логика интерактивных элементов и описание сложной анимации.

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

В передаче также должны быть:

• структура страниц и понятные названия макетов;

• сетки и правила адаптации;

• компоненты и их состояния;

• размеры, отступы и типографическая шкала;

• логика форм, фильтров и интерактивных элементов;

• поведение при загрузке, ошибке и отсутствии данных;

• графика и требования к её экспорту;

• описание сложной анимации;

• правила для контента переменной длины.

Разработчик должен понимать поведение интерфейса, а не восстанавливать его по соседним экранам.

Проверка дизайна до разработки

Оценка «нравится — не нравится» описывает личное впечатление, но почти не помогает принять макет. Дизайн проверяют по задаче и пользовательскому сценарию.

Перед передачей дизайна полезно пройти десять вопросов:

1. Понятно ли по первому экрану, куда попал пользователь и что ему предлагают?

2. Видно ли главное действие без объяснения дизайнера?

3. Соответствует ли порядок блоков вопросам аудитории?

4. Работает ли навигация на конкретных задачах?

5. Использован ли реальный контент, включая длинные значения?

6. Показаны ли ошибки, загрузка, пустые и успешные состояния?

7. Проработан ли мобильный сценарий?

8. Соблюдены ли базовые требования доступности?

9. Реализуемы ли графика и анимация в согласованные сроки и бюджет?

10. Понятно ли, что и как команда будет измерять после запуска?

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

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

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

Не каждый проект требует большого исследования. Даже небольшая серия тестов может обнаружить грубую проблему до разработки. Если ошибка особенно дорога — например, при оплате, оформлении документов или работе сотрудников, — объём проверки определяют отдельно.

Оценка результата после запуска

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

Метрики выбирают по роли проекта:

«Геометрия Фитнеса 2.0»: собственный сайт вместо стороннего квиза

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

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

По данным кейса, стоимость входящего лида снизилась в три раза.

Яндекс Метрика позволяет посмотреть, как люди взаимодействуют со страницей. Карта кликов помогает находить элементы, которые воспринимаются как интерактивные, а карта скроллинга показывает распределение внимания по длине страницы.

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

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

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

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

От чего зависят сроки и стоимость

Объём работы определяется не количеством пунктов в меню, а числом разных задач, шаблонов и состояний.

На оценку влияют:

• глубина исследования

• готовность структуры и контента

• количество аудиторий и сценариев

• число уникальных типов страниц

• сложность форм, фильтров, кабинетов и других функций

• количество состояний интерфейса

• необходимость UI-кита или дизайн-системы

• объём мобильной адаптации

• иллюстрации, 3D, видео и анимация

• требования к доступности

• ограничения платформы и будущей разработки

• пользовательские тесты и дизайн-контроль

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

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

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

Универсальная цена за «дизайн сайта» создаёт ложную точность. Сравнивать предложения имеет смысл после того, как подрядчики одинаково понимают состав страниц, функций, материалов и результатов.

Как понять, что дизайн решает задачу

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

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

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

Если проекту нужен полный цикл от исследования и прототипа до разработки и поддержки, состав работ собран на странице направления «Сайты».

Источники и материалы

Материалы Эдс

• Направление «Сайты»

• «Разработка сайта: от бизнес-задачи до запуска и развития»

• «Разработка интернет-магазина: кому она нужна и что важно решить до старта»

• Кейс сайта агентства недвижимости «Первоцветы»

• Кейс сайта ГК «Стэлл Город»

• Кейс сайта бизнес-центра K7

• Кейс сайта ЖК «СТАРК»

• Кейс сайта ЖК «Днепровский»

• Кейс сайта «Геометрии Фитнеса 2.0»

Российские источники

• Росстандарт — ГОСТ Р 52872-2019: требования доступности интернет-ресурсов и интерфейсов

• ГОСТ Р ИСО 9241-210-2016: человеко-ориентированное проектирование интерактивных систем

• ИСИЭЗ НИУ ВШЭ и Росстат — использование интернета в России в 2025 году

• ИСИЭЗ НИУ ВШЭ и Росстат — онлайн-покупки россиян в 2025 году

• Яндекс Вебмастер — проверка мобильной версии и технического состояния сайта

• Яндекс Метрика — карта кликов

• Яндекс Метрика — карта скроллинга

Инструменты и дизайн-системы

• Figma — Guide to Dev Mode

• Figma — Build your design system

• Гайды Госуслуг — правила дизайна и контента цифровых сервисов

• VKUI — библиотека адаптивных компонентов на основе дизайн-системы ВКонтакте

Международные исследования и стандарты

• Google Research — влияние визуальной сложности и прототипичности на первое впечатление от сайта

• Nielsen Norman Group — десять эвристик юзабилити

• Baymard Institute — состояние Checkout UX в 2025 году

• W3C — Web Content Accessibility Guidelines 2.2

• WebAIM — исследование доступности миллиона главных страниц в 2026 году

• web.dev — Core Web Vitals