Термины UX/UI и веб-дизайна простыми словами

Продуктовый дизайн это дисциплина, которая определяет и проектирует цифровой продукт целиком: цели бизнеса, потребности пользователей, рабочие процессы, информационную архитектуру, данные и технические ограничения, а также сами экраны. Дизайн пользовательского опыта и интерфейса (UX/UI, user experience и user interface) составляет одну видимую часть этой работы. Результат: проверенная концепция, кликабельный прототип и дизайн-система, по которым команда разработки может работать без догадок.

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

UI/UX-дизайн это проектирование того, как цифровой продукт ведёт себя для пользователей (UX, user experience) и как выглядят и откликаются его экраны (UI, user interface). UX определяет, кто пользователи и что каждому из них нужно сделать; UI превращает это в экраны и компоненты, которые разработчики могут собрать, с понятной иерархией, навигацией, состояниями и доступностью. Наш UI/UX-дизайн стоит от $10 000 для продуктов с аккаунтами, ролями и сценариями: компактное приложение обычно занимает 15-30 экранов, продукт с несколькими ролями 80 и больше, а прототипы проверяются до разработки.

Подробнее: UI/UX Дизайн

Пользовательские исследования это изучение того, как реальные люди выполняют работу, которую должен поддерживать продукт: интервью, наблюдение, аналитика, обращения в поддержку и таблицы, где живут исключения. Хорошие вопросы касаются прошлого («покажите, что вы делали с последним заказом»), а не пожеланий, и в B2B покупатель и пользователь часто разные люди. Бём и Базили оценили, что 40-50% усилий в программных проектах уходит на переделки, которых можно было избежать; значительную их часть исследования, прототипы и тесты ловят заранее.

Подробнее: UI/UX Дизайн

Карта пути клиента (CJM, customer journey map) это схема шагов и решений, через которые человек проходит от первого контакта до заявки или покупки, по разным каналам и во времени. Построенная на данных, а не на догадках, она показывает, что люди редко идут по прямой: видят публикацию, через несколько дней ищут компанию в Google и возвращаются ещё через пару недель. Универсального лучшего пути нет: люксовый магазин может намеренно замедлять клиента, а магазин электроники убирает любые препятствия. В люксе клиенты нередко возвращаются три-четыре раза, прежде чем выйти на связь.

Подробнее: Почему luxury e-commerce нарушает все правила conversion optimization

Jobs to Be Done (JTBD) это метод продуктового дизайна, который смотрит на прогресс, которого добивается клиент, то есть на «работу», ради которой он «нанимает» продукт или услугу, а не на его демографию или функции, о которых он просит. Он переводит задачу из вопроса «что должно быть на странице» в вопрос «что человеку нужно сделать». Вместе с Double Diamond, объектно-ориентированным UX и Atomic Design это один из признанных методов, на которых строится наш подход к дизайну интернет-магазинов.

Подробнее: Как мы проектируем e-commerce: от объектов к опыту

Двойной алмаз (Double Diamond) это модель дизайн-процесса из четырёх фаз: найти и сформулировать правильную проблему, затем разработать и выпустить правильное решение, дважды расширяя поиск и снова сужая его. Она защищает от самой дорогой ошибки в дизайне, отполированного ответа на неверный вопрос. Как JTBD, OOUX и Atomic Design, она формализует простой принцип: начинать с того, что бизнесу нужно от его цифрового продукта.

Подробнее: Как мы проектируем e-commerce: от объектов к опыту

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

Подробнее: Как мы проектируем e-commerce: от объектов к опыту

Атомарный дизайн (Atomic Design) это метод Брэда Фроста, в котором интерфейс собирается как иерархия частей: атомы вроде кнопок и подписей, затем молекулы, организмы, шаблоны и страницы. Он делает компоненты переиспользуемыми и сохраняет единство растущего интерфейса. Мы применяем его в обратном порядке: начинаем с организма, то есть с реального бизнеса и путей его клиентов, и только потом разбираем его на компоненты, чтобы части служили целому, а не UI-киту.

Подробнее: Как мы проектируем e-commerce: от объектов к опыту

Анализ конкурентов в UX это системное изучение того, как конкурирующие сайты и приложения решают те же задачи: навигация, фильтры, карточки товаров, формы и оформление заказа. Каждое найденное решение рассматривают как гипотезу, которую нужно проверить, адаптировать или отклонить, но не копировать, и свежий запуск конкурента не служит отправной точкой. Для одного магазина жемчуга мы разобрали 13 ювелирных сайтов и составили матрицу из 24 способов войти в каталог; одного из них, фильтра по размеру в миллиметрах, не было ни у одного из пяти профильных конкурентов.

Подробнее: Процесс создания сайта, который рисуют агентства, неверный

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

Подробнее: Product Design против UX/UI: где реально начинается цифровой продукт?

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

Подробнее: Дизайн сайтов

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

Подробнее: Дизайн сайтов

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

Подробнее: Дизайн сайтов

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

Подробнее: UI/UX Дизайн

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

Подробнее: Процесс создания сайта, который рисуют агентства, неверный

Кликабельный прототип это интерактивная модель ключевых экранов продукта, обычно в Figma, по которой можно пройти основные сценарии до того, как написан код. Проверить его на реальных пользователях недорого: правка в прототипе это несколько экранов, а после разработки это переделка кода и базы данных. При этом аккуратный прототип может скрывать открытые вопросы об источниках данных, ответственности, сбоях и масштабе. Им завершается discovery-фаза, у нас это две-четыре недели и от $4 000.

Подробнее: Процесс создания сайта, который рисуют агентства, неверный

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

Подробнее: Процесс создания сайта, который рисуют агентства, неверный

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

Подробнее: Product Design против UX/UI: где реально начинается цифровой продукт?

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

Подробнее: Процесс создания сайта, который рисуют агентства, неверный

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

Подробнее: Процесс создания сайта, который рисуют агентства, неверный

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

Подробнее: UI/UX Дизайн

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

Подробнее: Дизайн сайтов

Подход «контент до дизайна» (content-first) это порядок работы, при котором настоящие тексты, фотографии и данные собирают или готовят до визуального дизайна, чтобы макет строился вокруг того, что бизнесу действительно нужно сказать. Без реального контента дизайн можно проверить только на заглушках. Шаблонные сайты и сайты, сгенерированные по промпту, похожи друг на друга именно потому, что сначала был дизайн, а контент залили потом. Структура решает, заслуживает ли бизнес внимания; дизайн решает, получит ли он его.

Подробнее: Дизайн сайтов

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

Подробнее: UI/UX Дизайн

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

Подробнее: UI/UX Дизайн

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

Подробнее: Скрытый технический долг, из-за которого редизайн сайта стоит дороже плана

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

Подробнее: Что реально делает хороший веб-дизайн, когда структура уже правильна

F-паттерн и Z-паттерн это типичные траектории взгляда на странице: F-образная на страницах с большим количеством текста, где люди пробегают верхние строки и левый край, и Z-образная на простых макетах, от левого верхнего угла вправо и затем по диагонали вниз. Они помогают решить, где разместить заголовки, ключевые сообщения и призывы к действию. Это тенденции, а не законы поведения: контент, отрасль и мотивация посетителя меняют то, как страницу читают на самом деле.

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

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

Подробнее: Почему некоторые сайты выглядят дёшево, даже когда они хорошо спроектированы

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

Подробнее: 7 трендов UX/UI дизайна которые реально важны в 2026 году

Пустое пространство (whitespace, negative space) это свободное место между элементами страницы и вокруг них: поля, внутренние отступы, промежутки между строками и блоками. Оно даёт контенту воздух для чтения и выделяет главное. Пространство возникает потому, что что-то намеренно убрали, поэтому оно выглядит премиально только тогда, когда оставшееся достаточно сильное, чтобы его заслужить; иначе страница просто кажется пустой.

Подробнее: Почему некоторые сайты выглядят дёшево, даже когда они хорошо спроектированы

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

Подробнее: Дизайн, который не ощущаешь: почему лучший дизайн исчезает

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

Подробнее: Та же машина в другом цвете это другая машина

Первый экран (above the fold) это часть страницы, которая видна без прокрутки. На нём посетитель должен понять, чем занимается бизнес, для кого он и что делать дальше. Лендинг без ясного призыва к действию на первом экране заставляет посетителей из рекламы искать, куда нажать. Социальное доказательство, например рейтинг и число клиентов, работает лучше всего рядом с главным обещанием, а не тремя прокрутками ниже.

Подробнее: Редизайн сайта Сиэтл | Сайты которые генерируют лиды

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

Подробнее: Нужен ли сайту редизайн? Начните с юзабилити-аудита

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

Подробнее: 7 трендов UX/UI дизайна которые реально важны в 2026 году

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

Подробнее: Почему некоторые сайты выглядят дёшево, даже когда они хорошо спроектированы

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

Подробнее: AI веб-дизайн и AI видеомонтаж для фронтенда | PERETZ.agency

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

Подробнее: Когда бренд исчезает, он действительно мёртв?

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

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

Первое впечатление от сайта это оценка его визуальной привлекательности, которую посетитель составляет почти мгновенно, ещё ничего не прочитав. Линдгаард и коллеги из Карлтонского университета в 2006 году показали, что люди оценивают визуальную привлекательность веб-страницы примерно за 50 миллисекунд, и эти оценки тесно совпадают с оценками, сделанными через 500 миллисекунд. Этот первый взгляд окрашивает восприятие всего остального на сайте, включая доверие к нему.

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

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

Подробнее: Влияние UX/UI-дизайна на бизнес в 2026 году: почему это окупается

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

Подробнее: 7 трендов UX/UI дизайна которые реально важны в 2026 году

3D на сайте это трёхмерная графика, которая рисуется в браузере в реальном времени, обычно с помощью WebGL и библиотек вроде three.js, для показа товаров, интерактивных сцен или впечатляющих первых экранов. Она делает бренд запоминающимся, но она тяжёлая: на телефонах без сильного графического чипа страница тормозит или ломается. Когда мы проверили первый экран на three.js на собственном сайте, мобильный PageSpeed упал до 32; после того как сцену стали загружать только там, где её может отрисовать графический чип, а остальным показывать лёгкую версию, оценка выросла до 78.

Подробнее: 3D на живом сайте: наш эксперимент с three.js и что увидел Google

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

Подробнее: AI веб-дизайн и AI видеомонтаж для фронтенда | PERETZ.agency

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

Подробнее: AI веб-дизайн и AI видеомонтаж для фронтенда | PERETZ.agency

Персонализация UX это подстройка сайта или приложения под каждого посетителя: приоритет контента, навигация и формулировка призывов к действию меняются в зависимости от того, кто он и чего, судя по всему, хочет. Системы машинного обучения теперь выводят намерение из поведения, выходя за пределы правил и A/B-тестов 2010-х. Для дизайнера единицей работы становятся уже не страница и компонент, а контекст, намерение и решение.

Подробнее: AI веб-дизайн и AI видеомонтаж для фронтенда | PERETZ.agency

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

Подробнее: 7 трендов UX/UI дизайна которые реально важны в 2026 году

Юзабилити-аудит это экспертная проверка того, насколько легко людям сделать на сайте или в приложении то, ради чего они пришли: навигация, структура, формы, скорость загрузки, битые ссылки и места, где посетители бросают начатое. Итогом становится список исправлений по приоритетам, а не новый дизайн, поэтому аудит часто оказывается более дешёвым первым шагом перед редизайном. Наш юзабилити-аудит стоит от $1 500. Аудит занимает одну-две недели, опирается на записи сессий, rage clicks и аналитику и завершается скриншотами с пометками и созвоном с разбором.

Подробнее: Юзабилити аудит

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

Подробнее: Юзабилити аудит

Юзабилити-тестирование это наблюдение за тем, как реальные пользователи пытаются выполнить реальные задачи на сайте, в приложении или в прототипе, чтобы увидеть, где они медлят, ошибаются или сдаются. Оно выявляет проблемы, которых не видит команда, слишком хорошо знающая продукт. Nielsen Norman Group ещё в 2000 году показала, что пять пользователей одного типа находят около 85% проблем юзабилити, поэтому несколько небольших раундов с правками между ними лучше одного большого исследования. Тест имеет смысл, только если он может провалиться.

Подробнее: UI/UX Дизайн

Тепловые карты и карты кликов это визуальные отчёты, которые показывают, куда посетители нажимают, как далеко прокручивают страницу и где останавливается их внимание, по сумме множества сессий. Они также выявляют rage clicks, повторные клики по тому, что не реагирует, и dead clicks по элементам, которые не являются ссылками, например в Microsoft Clarity. Тепловые карты позволяют опереть редизайн на поведение, а не на мнения; они дополняют дизайнерское суждение, а не заменяют его.

Подробнее: Нужен ли сайту редизайн? Начните с юзабилити-аудита

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

Подробнее: Нужен ли сайту редизайн? Начните с юзабилити-аудита

Трение в UX (UX friction) это расстояние между тем, что человек пришёл сделать, и тем, что интерфейс заставляет его сделать на пути к цели. Плохое трение это сломанный поиск, непонятные условия доставки и лишние поля при оформлении заказа, и каждое из них стоит конверсий. Часть трения намеренная, например подтверждение оплаты, а в люксе время, потраченное на то, чтобы рассмотреть изделие со всех сторон, прочитать о его происхождении или посмотреть, как его делали, и создаёт желание.

Подробнее: Почему luxury e-commerce нарушает все правила conversion optimization

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

Подробнее: 7 трендов UX/UI дизайна которые реально важны в 2026 году

Призыв к действию (CTA, call to action) это элемент, обычно кнопка или ссылка, который говорит посетителю, что делать дальше: запросить расчёт, записаться на звонок, купить. Размытые CTA вроде «Узнать больше» заставляют посетителя думать больше, а конкретные действия с низким риском вроде «Записаться на бесплатную консультацию» получают больше кликов. В люксе «Узнать о наличии» или «Записаться на частный показ» заменяют «Купить», когда товар требует осмотра или совета. CTA, который растворяется в странице, не деликатен, а невидим.

Подробнее: Почему ваш бизнес не получает лидов с сайта (и как это исправить в 2026-м)

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

Подробнее: Редизайн сайта Сиэтл | Сайты которые генерируют лиды

Сигналы доверия это элементы, которые дают посетителю проверяемые причины поверить бизнесу: проекты, отзывы, рейтинги, цифры, сертификаты и имена клиентов в момент принятия решения. Значки сами по себе доверия не создают, его создают утверждения, которые можно проверить. Дизайн тоже сигнал: в исследовании Стэнфордской лаборатории убеждающих технологий с участием более 4 500 человек 46,1% сказали, что визуальный дизайн влиял на то, насколько надёжным им казался сайт. Одна компания с сотнями отзывов в Google получила больше заявок, когда эти отзывы появились на её собственном сайте.

Подробнее: Почему ваш бизнес не получает лидов с сайта (и как это исправить в 2026-м)

Закреплённая кнопка покупки (sticky CTA) это кнопка призыва к действию, которая остаётся на экране при прокрутке, чаще всего цена и кнопка покупки на мобильной карточке товара. Она держит главное действие под рукой на длинных страницах; в одном редизайне магазина её ввели потому, что 76% заказов приходили с телефонов. Проверять её нужно вместе со всем, что плавает над страницей: на трёх из девяти изученных нами люксовых сайтов чат, кнопки помощи или виджеты доступности перекрывали мобильную панель покупки.

Подробнее: Мы измерили девять сайтов люксовых брендов. Вот что в их дизайне работает

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

Подробнее: Мы измерили девять сайтов люксовых брендов. Вот что в их дизайне работает

Воспринимаемая скорость это то, насколько быстрым сайт кажется посетителю, и зависит она не только от времени загрузки, но и от того, что появляется первым, сдвигается ли макет и сразу ли страница откликается. Скорость это решение UX: по данным Aberdeen Group, задержка в одну секунду снижала конверсию примерно на 7%. Страница, которая медлит, прыгает при загрузке или проявляет картинки по частям, говорит кое-что о бизнесе; в одном магазине блок цены загружался после кнопки покупки и сдвигал её, так что первый клик промахивался.

Подробнее: Почему некоторые сайты выглядят дёшево, даже когда они хорошо спроектированы

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

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

WCAG 2.2 (Web Content Accessibility Guidelines) это версия международного стандарта веб-доступности, которую W3C опубликовал в октябре 2023 года, с критериями успеха уровней A, AA и AAA. Уровень AA, обычная цель, требует контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса, а также областей нажатия не меньше 24 на 24 CSS-пикселя. Соответствие стандарту это минимум, а не потолок: сайт может пройти все проверки и всё равно оставаться неудобным.

Подробнее: Дизайн сайтов

Соответствие сайта ADA означает, что сайт доступен людям с инвалидностью в соответствии с Americans with Disabilities Act, американским законом о гражданских правах. В разъяснениях марта 2022 года Министерство юстиции США указало, что ADA распространяется на то, что открытый для публики бизнес предлагает в интернете; детального технического правила закон не задаёт, а WCAG называет полезным ориентиром. Иски о доступности сайтов в США обычное дело, поэтому для бизнеса, работающего с американским рынком, доступность это не только вопрос UX, но и юридический.

Подробнее: UI/UX Дизайн

Контрастность цвета (contrast ratio) это измеренная разница яркости между текстом или элементом интерфейса и его фоном, выраженная в диапазоне от 1:1 (контраста нет) до 21:1 (чёрное на белом). WCAG требует не меньше 4,5:1 для обычного текста. Низкий контраст прячет даже самые важные кнопки: у одного люксового дома кнопка заказа по телефону была чёрной на фоне #222222, примерно 1,3:1. Палитру, которая не проходит по цифрам, нельзя исправить в коде без изменения дизайна, поэтому контраст проверяют уже при выборе палитры.

Подробнее: Мы измерили девять сайтов люксовых брендов. Вот что в их дизайне работает

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

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

Доступная аутентификация это требование WCAG 2.2 (уровень AA): вход в систему не должен зависеть от проверки памяти или головоломки, если нет альтернативы, поэтому менеджеры паролей и вставка из буфера должны работать. WCAG 2.2 добавил и связанные правила для форм и управления: пользователю не нужно заново вводить уже указанные данные (уровень A), а у действий перетаскивания должна быть альтернатива одним нажатием (уровень AA). Эти правила помогают всем, а не только людям с инвалидностью.

Подробнее: UI/UX Дизайн

Размер области касания это размер зоны, которая реагирует на нажатие пальцем, и она может быть больше видимой иконки или текста. Рекомендации Apple по умолчанию 44 на 44 пункта, Android не меньше 48 на 48 dp, WCAG 2.2 не меньше 24 на 24 CSS-пикселя, если цели не разнесены. Цель, удобная для мыши или тачпада, часто слишком мала для большого пальца, а это промахи и раздражение на телефонах.

Подробнее: UI/UX Дизайн

Уменьшение движения (reduced motion) это настройка операционной системы для людей, чувствительных к анимации, которую сайт может распознать через медиазапрос prefers-reduced-motion. Внимательный к посетителям сайт её уважает: смягчает или отключает параллакс, крупные переходы и движущиеся сцены. На нашем сайте посетители с этой настройкой видят лёгкий первый экран без 3D-сцены.

Подробнее: 3D на живом сайте: наш эксперимент с three.js и что увидел Google

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

Подробнее: Редизайн сайта Сиэтл | Сайты которые генерируют лиды

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

Подробнее: AI веб-дизайн и AI видеомонтаж для фронтенда | PERETZ.agency

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

Подробнее: Редизайн сайта Сиэтл | Сайты которые генерируют лиды

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

Подробнее: Дизайн сайтов

Гайдлайны платформ это официальные правила дизайна мобильных операционных систем: Human Interface Guidelines от Apple для iOS и Material Design от Google для Android. Пользователи ждут, что приложение для iOS будет вести себя как другие приложения для iOS, а приложение для Android как другие приложения для Android, поэтому борьба с этими соглашениями создаёт трение. Следуя им, продукт получает основу вроде областей нажатия под палец и важных действий в зоне досягаемости, но состояния ошибок и работы без сети всё равно нужно проектировать для каждого продукта.

Подробнее: Когда бизнесу реально нужно мобильное приложение?

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

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

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

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

RTL-верстка (right to left) это зеркальная версия сайта для языков, которые пишутся справа налево, например арабского. Навигация, порядок колонок, стрелки, слайдеры, иконки и формы отражаются, а числа, латинские названия брендов и артикулы по-прежнему идут слева направо, и шрифты подбираются заново. Для этого требовался отдельный зеркальный дизайн, а не простое переключение, поэтому арабская версия попадает в верхнюю часть диапазона в 10-30% дополнительного бюджета на каждый рынок.

Подробнее: Digital-агентство для бизнеса в ОАЭ

Расширение текста при переводе это рост длины текста интерфейса при переводе с английского на другой язык. Русский и украинский обычно на 15-25% длиннее: «Book a Call» превращается в «Записаться на звонок», это почти вдвое больше символов. Кнопки, меню и заголовки, которые идеально помещаются на английском, начинают переноситься или ломаться, поэтому каждый компонент нужно проверять на самом длинном языке до утверждения дизайна.

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

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

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

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

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

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

Подробнее: Дизайн сайтов

Лендинг это одна веб-страница, построенная вокруг одного предложения и одного действия, например заявки, записи или покупки, обычно как точка приземления рекламной или почтовой кампании. Всё на ней работает на это решение, и отвлекающего на ней минимум. Когда реклама приносит клики, но не заявки, проблема часто именно в странице, куда ведёт объявление. Наши лендинги стоят от $4 000.

Подробнее: Разработка Landing page под ключ

Корпоративный сайт это основной сайт компании, где она объясняет, чем занимается, для кого и почему ей можно доверять. Он подходит бизнесу с несколькими услугами или аудиториями и обычно включает кейсы, несколько языков и заявки, которые сразу попадают в CRM. Это проект крупнее лендинга: у нас корпоративный сайт стоит $20 000-40 000.

Подробнее: Корпоративные сайты

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

Подробнее: Редизайн сайта Сиэтл | Сайты которые генерируют лиды

Шаблонный сайт строится на готовой теме или конструкторе, а индивидуальный проектируется и разрабатывается под конкретный бизнес, его структуру и цели. Шаблоны подходят для проверки идеи, портфолио и очень маленьких локальных компаний; индивидуальный сайт нужен, чтобы конкурировать в поиске, получать заявки или привлекать дорогих клиентов, ведь шаблонные и сгенерированные по промпту сайты делают компании одной отрасли похожими друг на друга. В США в 2026 году конструкторы стоят $20-80 в месяц, фрилансеры $1 500-6 000, а индивидуальные сайты от агентств $15 000-50 000 и больше.

Подробнее: Сколько стоит сайт в Сиэтле в 2026 году?

Редизайн сайта это новый дизайн, а часто и новая структура существующего сайта с сохранением домена, контента и поискового авторитета. Это правильный выбор, когда фундамент здоров: есть видимость в поиске, надёжная CMS, логичная структура и хорошая скорость. Если любое изменение требует разработчика, а платформа медленная и хрупкая, лучше может оказаться новый сайт, а редизайн только потому, что сайт выглядит устаревшим, не стратегия. В США редизайн обычно стоит $5 000-15 000 и занимает 6-12 недель.

Подробнее: Редизайн сайта Сиэтл | Сайты которые генерируют лиды

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

Подробнее: Большинству компаний нужен не новый сайт, а новая структура

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

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

UX люксового интернет-магазина это проектирование онлайн-магазинов для премиальных брендов, где сам опыт покупки становится частью продукта, а стандартные правила конверсии часто не работают. Люксовый сайт может намеренно замедлять посетителя, использовать много пустого пространства или нестандартную навигацию; нарушение привычного правила здесь бывает верным решением. Медленные переходы и видео принадлежат бренду, но полный текст о материалах и размерах должен быть в HTML с первой загрузки. На девяти люксовых сайтах шесть из восьми кнопок покупки были с прямыми углами, и ни одна не использовала скруглённую кнопку-пилюлю массовых магазинов.

Подробнее: Почему luxury e-commerce нарушает все правила conversion optimization

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

Подробнее: Как мы проектируем e-commerce: от объектов к опыту