Дизайн интерфейсов сайта в Уфе

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

  • Разбор сценариев по Вебвизору и аналитике форм
  • Кликабельный прототип проверяем на пользователях
  • Дизайн-система с состояниями для разработчиков

Рассчитать стоимость

Изучим задачу и пришлём план работ с ценой.

Когда нужен UX/UI-дизайн

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

  • Личный кабинет

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

  • Каталог с фильтрами

    Сотни товаров или объектов с параметрами. Важно, как фильтр работает на телефоне и что человек видит, когда подходящих вариантов нет.

  • Калькулятор или конфигуратор

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

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

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

  • B2B-портал

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

  • Запись и бронирование

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

Кейсы

Добыча наших клиентов

  • Частный юрист · Симферополь

    350 ₽

    стоимость заявки в контекстной рекламе Яндекса

    Дизайн сайта-визитки частного юриста из Симферополя: стоимость заявки в контекстной рекламе Яндекса — 350 рублей.

    Смотреть кейс
  • Интернет-магазин спецтехники

    Дизайн сайта интернет-магазина спецтехники Lonking

    Дизайн сайта интернет-магазина спецтехники Lonking: продажа по всей России, сервис, запчасти и лизинг.

    Смотреть кейс
  • Компания по строительству бассейнов · Севастополь

    Дизайн сайта компании по строительству бассейнов в Севастополе

    Дизайн сайта компании, которая строит бассейны на заказ в Севастополе и по Крыму: планирование, проектирование и строительство. Десктопная и мобильная версии.

    Смотреть кейс
  • Частное охранное предприятие · Севастополь и Ялта

    Дизайн корпоративного сайта частного охранного предприятия

    Дизайн корпоративного сайта частного охранного предприятия в Севастополе и Ялте. Десктопная и мобильная версии.

    Смотреть кейс

UX и UI: в чём разница

UX/UI-дизайн сайта — две части одной работы. Их часто путают, поэтому покажем разницу на примере.

  • UX — как устроен путь

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

  • UI — как интерфейс выглядит и откликается

    Шрифты, цвета, кнопки, поля и их состояния: наведение, нажатие, ошибка, загрузка. Итог — макеты и дизайн-система.

  • На примере формы заказа

    UX решает, нужны ли все десять полей и можно ли подставить адрес из прошлого заказа. UI — как выглядит поле с ошибкой и где стоит кнопка на телефоне.

  • Почему их не разделяют

    Хороший UI не спасёт лишний шаг, а верный сценарий теряется, если кнопку не видно. Поэтому обе части ведём в одном проекте и одной командой.

Как проектируем интерфейс

Сроки — ориентиры для проекта под ключ. Если начинаем с UX-аудита, первые два шага и есть аудит.

  1. 3–5 дней

    Данные

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

    Итог этапаСписок проблемных мест

  2. 3–5 дней

    Интервью

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

    Итог этапаЗадачи пользователей их словами

  3. 3–5 дней

    Сценарии

    Описываем путь по шагам: откуда человек пришёл, что делает, где сомневается. Для сложных процессов рисуем карту пути клиента — CJM.

    Итог этапаCJM и user flow

  4. 1–2 недели

    Вайрфреймы

    Раскладываем разделы и экраны, рисуем чёрно-белые схемы ключевых шагов.

    Итог этапаСхемы экранов

  5. 1–2 недели

    Прототип и тест

    Собираем кликабельный прототип и даём пройти задачи пяти-семи пользователям. Что не сработало, исправляем до дизайна.

    Итог этапаПроверенный прототип

  6. 2–4 недели

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

    Рисуем экраны и собираем библиотеку компонентов со всеми состояниями.

    Итог этапаМакеты и дизайн-система

  7. 2–3 дня

    Передача

    Готовим спецификацию, отвечаем на вопросы разработчиков, по договорённости сверяем вёрстку.

    Итог этапаФайл Figma и спецификация

Что вы получите

  • Отчёт UX-аудитаПроблемы по сценариям, их причины и приоритет исправлений
  • Карта пути клиентаШаги, вопросы и сомнения пользователя на каждом этапе
  • User flowПереходы между экранами, включая ошибки и возвраты
  • Кликабельный прототипСсылка, по которой сценарий можно пройти до дизайна
  • Итоги тестаЧто участники сделали, где застряли и что изменено после
  • Дизайн-системаКомпоненты, стили и правила их применения
  • Спецификация состоянийПустые списки, загрузка, ошибки, успешное действие

Стоимость дизайна интерфейсов в Уфе

Начать можно с UX-аудита — он покажет, какие сценарии править первыми, и уточнит объём остальной работы.

  • UX-аудит

    Разбор интерфейса работающего сайта. Ориентир — 1–2 недели

    от 30 000 ₽

    • Сценарии по данным Метрики
    • Проверка форм и ключевых страниц
    • Отчёт с приоритетами правок
  • Прототип сценариев

    Ключевые сценарии до дизайна. Ориентир — 2–4 недели

    от 60 000 ₽

    • Карта пути пользователя
    • Вайрфреймы
    • Кликабельный прототип
  • UX/UI под ключ

    От исследования до дизайн-системы. Ориентир — от 6 недель

    от 150 000 ₽

    • Исследование и сценарии
    • Прототип и тест на пользователях
    • Интерфейс и дизайн-система
  • Интервью и тест — с вашими клиентами или сотрудниками, по согласованию
  • Число итераций правок — в договоре
  • Вёрстка и программирование — отдельно

Не подошёл тариф — предложите свою цену

Назовите бюджет — предложим состав работ или запуск по этапам.

Кто работает над интерфейсом

  • UX-проектировщик

    Разбирает сценарии и данные Метрики, делает прототип: что, где и в каком порядке.

  • UI-дизайнер

    Рисует макеты страниц и адаптивы, собирает UI-кит.

  • Арт-директор

    Отвечает за концепцию и единый стиль, ведёт согласования и сроки этапов.

FAQ

Вопросы о UX/UI-дизайне

Не нашли ответ?

Нужен ли UX-аудит перед редизайном?

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

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

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

Сколько пользователей нужно для теста?

Для проверки прототипа хватает пяти-семи человек из вашей аудитории. Якоб Нильсен из Nielsen Norman Group ещё в 2000 году показал, что пять участников находят большую часть проблем, и советовал вместо одного большого теста проводить несколько маленьких. Так и делаем: тест, правка, повторная проверка.

Работаете с личными кабинетами и порталами?

Да. В UX-дизайне сайтов с кабинетами главное — повторные действия: повторить заказ, скачать документ, сменить тариф. Их проектируем так, чтобы постоянный пользователь справлялся в пару касаний.

Как передаёте дизайн-систему разработчикам?

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

Кто с вашей стороны нужен в проекте?

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

Содержание
  1. Принципы, которые проверяем в каждом сценарии
  2. Доступность — часть удобства
  3. Как понять, что стало удобнее

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

Принципы, которые проверяем в каждом сценарии

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

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

Доступность — часть удобства

Интерфейсом пользуются люди с разным зрением, на разных экранах, а кто-то — только с клавиатуры. Поэтому доступность проверяем в каждом сценарии: виден ли фокус, в каком порядке он идёт по форме, понятна ли ошибка без цвета. Пороги контраста и размеров берём из WCAG 2.2, а если сайт должен соответствовать ГОСТ Р 52872-2019, — из стандарта.

Как понять, что стало удобнее

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

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

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

Первый шаг

Пришлите ссылку — начнём с разбора сценариев

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

Что написать в заявке, чтобы план был точнее:

  • Какой сценарий беспокоит — заказ, запись, кабинет
  • Подключены ли Метрика и Вебвизор
  • Есть ли своя команда разработки

Офис в Уфе: адрес уточняется · контакты

Перезвоним в рабочее время и ответим на вопросы.

Расскажем, как сделали этот проект, и прикинем план для вашего бизнеса.