Дизайн и UX сайта: как влияют на конверсию и продажи

Дизайн сайта — не про «красиво». Это про деньги: хороший UX поднимает конверсию на 200–400%, плохой — отправляет клиентов к конкурентам ещё до того, как они прочитали ваше предложение. Разбираемся, как дизайн влияет на продажи, что такое UX на практике и зачем нужен прототип перед тем, как открывать Figma.

Почему дизайн — это конверсия, а не эстетика

Первое впечатление о сайте складывается за 50 миллисекунд — это доказано исследованием Google. За эти полсекунды пользователь принимает интуитивное решение: остаться или уйти. Никакой текст ещё не прочитан, никакая цена не увидена.

Вот что происходит, когда дизайн сделан без UX-логики:

• Кнопка «Заказать» не видна — пользователь ищет, не находит, уходит.
• Форма из 12 полей — заполняют меньше 30% посетителей, остальные бросают.
• Главный экран не отвечает на вопрос «что вы делаете» — 40% уходят, не прокрутив ниже.
• Нечитаемый шрифт на мобильном — 60% российского трафика приходит со смартфонов.

В практике АйТи-Стандарт редизайн сайта московской юридической компании с переработкой UX-логики поднял конверсию с 0,8% до 3,2% — только за счёт перестройки структуры страниц и упрощения формы заявки. Без изменения рекламного бюджета.

Что такое UX и чем он отличается от UI

Путаница в терминах стоит заказчикам денег — когда они заказывают «красивый дизайн» и получают красивую картинку без логики.

UI (User Interface) — визуальный слой: цвета, шрифты, кнопки, иконки, отступы. Это то, что видно.

UX (User Experience) — пользовательский опыт: как легко найти нужное, сколько шагов до заявки, понятна ли навигация, возникают ли ошибки. Это то, что ощущается.

Хороший UI без UX — красивый тупик. Хороший UX без UI — функциональный, но отталкивающий. Работает только их связка.

Прототип сайта: зачем он нужен перед дизайном

Создание прототипа сайта — это шаг, который экономит 40–60% бюджета на разработку сайта. Прототип — это схема страниц без цветов и картинок: только структура, блоки, кнопки, переходы.

Почему прототип обязателен:

• Ошибки в логике видны до того, как потрачены деньги на дизайн. Переделать wireframe занимает 30 минут, переделать готовый макет — 3–4 часа работы дизайнера.
• Заказчик видит структуру, а не цвета. Согласование идёт предметно: «здесь нужна ещё кнопка», а не «поменяйте оттенок синего».
• Разработчики получают техническое задание, а не пустые слова. Прототип — документ: он описывает поведение, состояния компонентов, переходы.

Создание прототипа сайта в Figma занимает 3–5 рабочих дней для типового корпоративного сайта. Это один из самых окупаемых этапов: час работы прототиписта (1 500–3 000 ₽) экономит 8–10 часов дизайнера (12 000–20 000 ₽).

Что входит в прототип

• Главная страница: все блоки, их порядок, тексты-заглушки
• Внутренние шаблоны: страница услуги, статья блога, контакты
• Состояния форм: пустое, заполненное, с ошибкой, успешная отправка
• Мобильная версия: 375px для ключевых страниц
• Интерактивные переходы (кликабельный прототип): заказчик «ходит» по сайту до его разработки

Figma: стандарт разработки дизайна сайта в 2026

Создание сайта в Figma — это не просто инструмент, это процесс. Figma позволяет вести весь цикл проектирования в одном месте: от wireframe до финального UI, от согласования с заказчиком до передачи разработчикам.

Почему Figma — стандарт рынка:

• Реальное время. Заказчик видит правки мгновенно — без архивов и версий файлов по email.
• Компонентная система. Кнопка изменяется в одном месте и обновляется на всех 40 страницах автоматически.
• Dev Mode для разработчиков. Программисты видят точные размеры, отступы, цвета в CSS-формате. Вопросов «а каким должен быть отступ?» не возникает.
• Прототипирование. Кликабельные переходы, оверлеи, анимации — можно показать заказчику, как будет работать сайт, ещё до написания кода.
• Дизайн-токены. Все цвета, шрифты и отступы хранятся в одном месте. Ребрендинг — это не 200 часов правок, а пара часов.

АйТи-Стандарт работает только в Figma. Исходники после сдачи проекта передаются заказчику — без «закрытых форматов» и зависимости от студии.

Mobile-first: почему начинают с телефона

В 2026 году 62% трафика российских корпоративных сайтов приходит со смартфонов. Несмотря на это, многие студии до сих пор проектируют десктопную версию, а потом «адаптируют» её под мобильный.

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

Mobile-first означает: сначала проектируем для экрана 375px, где нет места ни одному лишнему элементу. Каждый блок должен быть ценным. Потом расширяем на планшет и десктоп — добавляем, а не убираем.

Результат: сайт работает хорошо на всех устройствах, а не «нормально на десктопе и кое-как на телефоне».

Дизайн-система: почему крупные сайты работают без разночтений

Дизайн-система — это не красивое слово, а инструмент экономии. Представьте: 50 страниц сайта, 3 дизайнера работают параллельно. Без дизайн-системы — через месяц на сайте 4 разных стиля кнопок, 6 вариантов карточек, непоследовательная типографика.

Дизайн-система решает это структурно:

• Цветовые токены — все цвета в одном месте. «Основной синий» — это всегда #1A5FA0, не «синеватый» и не «голубой».
• Компонентная библиотека — кнопки, формы, карточки, иконки. Каждый компонент — один раз, используется везде. Правка компонента — мгновенно обновляет все вхождения.
• Сетка и отступы — 8px-сетка стала стандартом рынка. Все элементы кратны 8: отступы 8, 16, 24, 32, 48px. Результат — визуальное единообразие без ручного согласования.
• Типографическая шкала — H1/H2/H3/body/caption с фиксированными размерами, весом, межстрочным интервалом. Читаемость гарантирована.

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

Этапы разработки дизайна сайта: от брифа до хэндоффа

Профессиональный процесс разработки дизайна сайта — это не «рисуем пока не понравится». Каждый этап имеет чёткий результат и дату приёмки.

1. Бриф и аналитика (1–2 дня). Изучаем бизнес, ЦА, конкурентов. На выходе — документ с ключевыми UX-гипотезами: что должен сделать пользователь на каждой странице.
2. Прототипирование wireframes (3–5 дней). Схема всех страниц в Figma. Заказчик видит структуру и согласует логику — без цветов, без дизайна. Самый важный этап для экономии бюджета.
3. Дизайн-система (2–3 дня). Определяем цветовую палитру, типографику, базовые компоненты. Утверждаем с заказчиком до начала дизайна страниц.
4. Дизайн страниц (5–14 дней). Применяем систему к шаблонам. Главная, ключевые внутренние страницы, уникальные блоки. Каждый экран проходит внутреннее ревью.
5. Адаптивные версии (2–4 дня). 375px (смартфон), 768px (планшет), 1440px (десктоп). Проверяем на реальных устройствах через BrowserStack.
6. Хэндофф разработчикам (1 день). Figma с Dev Mode: все размеры, отступы, цвета в CSS-формате. Экспорт ассетов. Разработчики не задают вопросов — всё задокументировано.

Итоговый срок для лендинга — 2–3 недели, для корпоративного сайта — 5–7 недель. Срок зависит от скорости согласования: задержки на стороне заказчика — главная причина срыва дедлайнов.

UX-аудит: когда дизайн уже есть, но конверсия низкая

Если у вас уже есть сайт, но он не продаёт — не факт, что нужен полный редизайн. UX-аудит позволяет найти конкретные точки потери конверсии и исправить их точечно.

Что анализируется при UX-аудите:

• Тепловые карты Яндекс.Метрики: куда кликают, где останавливаются, что игнорируют
• Вебвизор: записи сессий реальных пользователей — видно, где теряются
• Воронка конверсии: на каком шаге уходит большинство
• Мобильная версия: соответствие стандартам WCAG 2.2, размер кнопок (минимум 44px)
• Скорость: Core Web Vitals влияют и на UX, и на позиции в поиске

Стандартный UX-аудит занимает 3–5 рабочих дней и даёт список конкретных правок с приоритетами. Стоимость аудита засчитывается в стоимость редизайна, если вы решаете двигаться дальше.

Пример: после UX-аудита интернет-магазина строительных материалов мы обнаружили, что 68% пользователей уходили со страницы корзины из-за обязательной регистрации. Убрали принудительную регистрацию — конверсия в заказ выросла на 34% за 2 недели.

Дизайн и Core Web Vitals: скрытая связь производительности

Многие заказчики считают, что скорость сайта — это задача разработчиков, а дизайн к ней не относится. На деле неправильные дизайн-решения напрямую влияют на три ключевых метрики Google и Яндекса: LCP, CLS и INP.

LCP (Largest Contentful Paint) — скорость загрузки самого крупного элемента. Если дизайнер поставил в hero-секцию огромное растровое изображение без компрессии — LCP провалится, даже если хостинг быстрый. Решение: webp-формат, размеры прописаны в HTML, ленивая загрузка только для изображений ниже первого экрана.

CLS (Cumulative Layout Shift) — прыжки контента во время загрузки. Когда шрифт подгружается и текст «прыгает», или изображение появляется без зарезервированного места — это CLS. Дизайнер обязан прописывать aspect-ratio для всех динамических блоков и использовать системные шрифты как фолбэк. В практике АйТи-Стандарт CLS = 0 — обязательное требование для всех проектов.

INP (Interaction to Next Paint) — скорость отклика на клик. Тяжёлые анимации на CSS с тысячью ключевых кадров, анимированные фоны на canvas, параллакс на scroll — всё это блокирует главный поток и даёт высокий INP. Хороший дизайнер знает, что анимации должны работать на GPU (transform, opacity), а не на CPU (top, left, width).

Подробнее о том, как Core Web Vitals влияют на позиции и заявки, и как их измерить — в нашей отдельной статье.

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

Типичные ошибки заказчиков при заказе дизайна — и как их избежать

За 16 лет работы с московским бизнесом мы видели одни и те же ошибки в десятках проектов. Зная их заранее, вы сэкономите деньги и нервы.

Ошибка 1: «Мне нравится сайт конкурента, сделайте похожий». Копирование без понимания контекста — путь в никуда. У конкурента другая ЦА, другой продукт, другая воронка. Скопированный визуал работает только в связке с аналогичным позиционированием. Правильный подход: изучить, почему у конкурента высокая конверсия, и применить те же принципы — но для вашего бизнеса.

Ошибка 2: Согласовывать дизайн на основе вкуса. «Поменяйте синий на зелёный, мне так больше нравится» — убивает проект. Цветовые решения должны обосновываться психологией восприятия, контрастом для читаемости и соответствием фирменному стилю. Субъективный вкус — плохой критерий. Хорошие студии обосновывают каждое дизайн-решение данными или профессиональной аргументацией.

Ошибка 3: Экономить на прототипе. «Зачем платить за схему, нарисуйте сразу красиво» — и потом платить дважды за переделки. Мы подробно разбирали математику выше: прототип на входе дешевле переделки дизайна на выходе в 8–10 раз.

Ошибка 4: Не проверять дизайн на реальных устройствах. Браузерный эмулятор Chrome DevTools — не замена реальному смартфону. Шрифты выглядят иначе, скролл ведёт себя иначе, touch-события имеют задержку. Финальное согласование всегда проводите на реальном iPhone и Android-устройстве.

Ошибка 5: Согласовывать у одного человека. Если финальное «да» даёт только директор — статистически 40% реальных пользователей могут иметь противоположное восприятие. Правильная практика: показывать прототип 3–5 реальным представителям целевой аудитории (не коллегам!) до утверждения финального дизайна.

Частые вопросы о дизайне и UX сайта

Сколько стоит разработка дизайна сайта?

Стоимость зависит от объёма: дизайн лендинга — от 90 000 ₽ (3–4 недели), корпоративный сайт — от 150 000 ₽ (5–7 недель), редизайн с UX-аудитом — от 110 000 ₽. Точный расчёт — после брифинга, который занимает 1 час.

Можно ли обойтись без прототипа и сразу делать дизайн?

Технически — да. Но вероятность переделок дизайна без прототипа вырастает до 70–80%. Один час прототипирования (1 500–3 000 ₽) экономит 8–10 часов дизайна (12 000–20 000 ₽). Математика однозначная — прототип окупается в первом раунде правок.

Чем отличается адаптивный дизайн от мобильной версии?

Адаптивный дизайн — один сайт, который перестраивается под любой экран (один URL, одна кодовая база). Мобильная версия (m.site.ru) — отдельный сайт для смартфонов: два URL, двойная поддержка, риск дублирования контента в поиске. В 2026 году адаптивный дизайн — единственный правильный выбор.

Насколько важен дизайн для SEO?

Напрямую — не влияет. Косвенно — критически. Скорость загрузки, CLS, адаптивность — всё это факторы SEO-ранжирования. Поведенческие факторы (время на сайте, глубина просмотра, процент отказов) и Core Web Vitals входят в алгоритм Яндекса и Google. Плохой UX = высокий отказ = хуже позиции. Хороший дизайн удерживает пользователей и косвенно улучшает ранжирование.

Как долго действителен дизайн сайта?

В среднем — 3–4 года до морального устаревания. Быстрее устаревает дизайн в высококонкурентных нишах (финансы, недвижимость, IT). Сигналы к редизайну: конверсия ниже 1%, мобильный трафик вырос, а мобильная версия не пересматривалась 2+ года, визуальный стиль сильно отстаёт от конкурентов.

Что значит mobile-first в проектировании?

Mobile-first — это когда дизайнер начинает с экрана 375px (смартфон), а не с 1440px (десктоп). На мобильном месте меньше, поэтому оставляют только главное. Потом расширяют на планшет и десктоп, добавляя детали. Результат — сайт работает отлично на смартфоне, а не «кое-как» после адаптации десктопа.

Хотите проверить, теряет ли ваш сайт клиентов из-за UX? Закажите UX-аудит или разработку дизайна — первый шаг за 1 рабочий день.