Разработка UX/UI-дизайна

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

Kuznets — брендинговое агентство, поэтому мы смотрим на интерфейс шире веб-студии. Приложение или личный кабинет клиент открывает чаще, чем видит вывеску или рекламу. Значит, интерфейс — главный носитель бренда в digital. Мы проектируем его от ДНК бренда и брендбука, чтобы кнопки, тексты и микроанимация говорили тем же голосом, что и айдентика. Работаем по договору с юрлицами и ИП, офисы в Санкт-Петербурге и Москве.

Стоимость и срок рассчитываем после брифа и фиксируем в договоре. Подробный разбор того, что такое UX/UI и как устроен процесс со стороны заказчика, — в статье «Что такое UX/UI-дизайн — подробно».

Корпоративные и HR-порталы, личные кабинеты

Продукты со многими ролями и сотнями страниц, где главное — не запутать человека. Для HR-портала QIWI продумали роли Сотрудник, Руководитель и HR и весь функционал с логическими связями ещё на этапе проектирования. Главную страницу собрали по принципу максимальной простоты вокруг трёх ключевых разделов, и тот же принцип держит остальные 127 страниц. Смежные услуги: корпоративный портал, система обучения (LMS).

Мобильные приложения

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

Корпоративные сайты, образовательные платформы и лендинги

Структура, прототипы, адаптивные макеты. Для Школы экспорта РЭЦ после ребрендинга разделили портал на внешнюю часть с системой мини-лендингов и внутренний личный кабинет, сделали дизайн-систему и макеты 20 разделов для десктопа, планшета и смартфона. Для сайта ООО «ИТЦ МЧС» (инженерно-технический центр мониторинга чрезвычайных ситуаций и спецработ) сначала разобрали структуру главных страниц и меню конкурентов, потом сделали дизайн. Смежные услуги: разработка корпоративного сайта, разработка лендинга.

Дизайн-системы и UI-kit

Токены, компоненты и правила, из которых команда собирает новые экраны без дизайнера на каждой кнопке. Для Школы экспорта РЭЦ дизайн-система стала основой редизайна портала, а поведение интерактивных элементов описали отдельной системой анимации. Подробнее — разработка дизайн-системы.

UX-аудит и юзабилити-тестирование

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

1. Запуск продукта, портала или приложения. Сценарии и архитектуру дешевле всего продумать до разработки: исправить прототип обычно быстрее и дешевле, чем переписывать готовый код.
2. Прошёл ребрендинг, а интерфейсы остались старыми. Сайт и личный кабинет выбиваются из нового бренда, аудитория перестаёт связывать их с компанией. Так было у Школы экспорта РЭЦ. Если ребрендинг только впереди — смотрите ребрендинг компании.
3. Красиво, но не работает. Посетители не доходят до формы, сотрудники не пользуются порталом, в поддержку идут одни и те же вопросы. Здесь нужен сначала UX, потом UI.
4. Несколько продуктов выглядят по-разному. Сайт, приложение и кабинет делали разные подрядчики. Нужна общая дизайн-система.
5. Разработчики собирают экраны без дизайна. Каждый новый раздел отличается от предыдущего, кнопок становится всё больше. UI-kit и спецификации возвращают порядок.

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

По такому порядку шёл, например, проект Nauka: аудит, структура сайта, прототипирование страниц, контент, дизайн, техническое задание на разработку и авторский надзор. Для внутрикорпоративного сайта Техносилы, где сотрудники делились школьными мечтами, сначала составили прототип всех страниц, потом сделали версии для компьютеров и смартфонов. Со смартфонов в итоге пришли 52,8% пользователей. Поэтому мобильную версию мы проектируем как отдельный сценарий.

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

1. Экраны нарисованы раньше сценариев. Красивые макеты, в которых непонятно, как оформить заявку или найти документ. Логику приходится переделывать уже в цвете, и правка затрагивает десятки экранов.
2. Интерфейс «в трендах», а не в бренде. Сайт, приложение и кабинет выглядят как три разные компании, а фирменный стиль живёт только в презентации.
3. Нарисован только счастливый путь. Нет пустых экранов, ошибок, загрузки и отсутствия прав. Разработчики придумывают их сами, и интерфейс расползается.
4. Дизайн-система «потом». Через год в продукте десяток оттенков синего и пять видов полей ввода, а любое изменение вносится вручную на всех экранах.
5. Разработчики получают картинки вместо спецификации. Отступы, состояния и анимации угадываются, и в релиз уходит примерно похожий интерфейс. Лечится спецификацией и авторским надзором.

1. Карта сценариев и структура — какие задачи решает продукт и через какие экраны.
2. Кликабельный прототип — на нём проверяем логику до дизайна и разработки.
3. Макеты всех экранов и состояний в Figma — включая пустые экраны, ошибки, загрузку и мобильные версии.
4. UI-kit или дизайн-система — компоненты с вариантами и правилами применения.
5. Спецификация для разработки — отступы, состояния, поведение элементов, анимация.
6. Отчёт юзабилити-тестирования — если тест входит в проект.
7. Исходники и права — после оплаты передаём исходники в Figma; передача исключительных прав прописывается в договоре.

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

От чего зависит цена UX/UI-дизайна

1. Число сценариев и ролей. Каталог с корзиной и портал с тремя ролями и согласованиями — разный объём проектирования.
2. Количество уникальных экранов. Типовые страницы собираются из компонентов, нетиповые проектируются отдельно.
3. Платформы. Веб, адаптив, iOS, Android — каждая со своими паттернами.
4. Глубина исследования. Экспертный разбор, интервью с пользователями, юзабилити-тесты.
5. Есть ли брендбук. С готовой айдентикой UI-концепция быстрее; без неё добавляется визуальная концепция.
6. Нужна ли дизайн-система. Для одного лендинга хватит UI-kit, для линейки продуктов нужна система с документацией.

Работаем по договору с юрлицами и ИП, акты по этапам. Цены на брендинговые услуги — на странице «Цены».

1. QIWI, HR-портал · портал развития сотрудников. Роли Сотрудник, Руководитель и HR, функционал и связи продуманы на этапе проектирования. Главная построена вокруг трёх ключевых разделов, тот же принцип — на остальных 127 страницах.
2. РЭЦ, Школа экспорта · редизайн образовательного портала после ребрендинга. Значительная часть аудитории старше 50 лет, поэтому механику взаимодействия сохранили, а внешний вид привели к новому стилю. Вайрфреймы, дизайн-система, система анимации, макеты для десктопа, планшета и смартфона для 20 разделов.
3. Северсталь, мобильное приложение · 2021. Дизайн-система приложения на основе существующего брендбука.
4. ООО «ИТЦ МЧС» · 2024. Анализ структуры главных страниц и меню сайтов конкурентов, дизайн нового сайта, в котором цвета несут ключевые ассоциации бренда.
5. ВВЕРХ · 2023. Ребрендинг проекта и редизайн мобильного приложения: новая ДНК и фирменный стиль, новые механики, UX/UI всех экранов и состояний, сайт проекта.

Все проекты — в разделе «Кейсы».

1. Интерфейс от бренда, а не от шаблона. Работаем по методу Kuznets DNA: сначала смысл бренда, потом айдентика, брендбук и UI-kit. Поэтому интерфейс говорит тем же языком, что и фирменный стиль.
2. С 2009 года. Более 300 проектов, около 30 специалистов: стратеги, дизайнеры, редакторы.
3. Рейтинги и отрасль. Топ-4 брендинговых агентств России по версии Ruward, 72 место в рейтинге Sostav, член АКАР.
4. Награды в digital. Digital Awards 2018 и 2022 в номинации «Лучший внутрикорпоративный диджитал-проект».
5. Крупные клиенты. Среди клиентов агентства — Северсталь, QIWI, МТС, Альфа-Банк, Правительство Москвы.

Санкт-Петербург: ул. Конторская, 18, оф. 66. Телефон: +7 (812) 996-90-54. Агентство в Санкт-Петербурге →

Москва: ул. Новорязанская, 16-11, оф. 47. Телефон: +7 (921) 346-77-41. Агентство в Москве →

Почта для брифов: hello@kuznets.agency. С компаниями из других городов работаем удалённо: ключевые сессии и тесты проводим онлайн.

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

Разобраться в терминах и процессе: UX/UI-дизайн: что это и как устроен процесс.