UX/UI-дизайн сайта и веб-продукта от прототипа до UI
Об услуге
UX/UI-дизайн сайта — это проектирование пути клиента (UX) и внешнего вида каждого экрана (UI): от структуры и прототипа до готовых макетов в Figma. Он нужен, когда вы запускаете сайт или веб-продукт, делаете редизайн или видите, что люди уходят, так и не оставив заявку.
Мы начинаем с исследования и прототипа и только потом рисуем интерфейс — кинематографичный, с историей вашего бренда, светом и ритмом. Каждый экран проектируем с нуля под бренд и путь клиента, без готовых тем. У нашего UX/UI-дизайнера больше 8 лет опыта в сильных продуктовых командах, а SEO-специалист и разработчик работают рядом, без аутсорса: структура учитывает поиск, а сайт собирают именно таким, каким его нарисовали.
Вы получаете прототип, макеты для телефона, планшета и компьютера, UI-кит и исходные файлы Figma; разработку берём на себя или передаём файлы вашей команде. Так мы проектировали сайт американского грузоперевозчика Pixel Express со сценами на прокрутке, магазин органического чая Herbal Cup и сайт LGC о террасах и перголах — смотрите их в кейсах.
- Формат работы
- только дизайн или под ключ
- Стоимость
- после брифа
- Результат
- макеты и UI-кит в Figma
- Старт работы
- бесплатная консультация
Что такое UX/UI-дизайн сайта и зачем он бизнесу
UX отвечает за то, как сайт работает для человека, а UI — за то, как он выглядит и ощущается; бизнесу нужны оба.
- UX — структура страниц, сценарии, тексты кнопок и путь от первого экрана до заявки или оплаты.
- UI — типографика, цвет, сетка, компоненты, анимации и адаптив под телефон.
Сайт без продуманного UX может выглядеть дорого и не продавать, а логичный сайт без сильного UI не вызывает доверия. Когда их проектируют вместе, клиент быстрее понимает, чем вы лучше, меньше людей теряется по дороге к заявке, а разработка идёт по согласованному прототипу — без дорогих переделок в коде.
Цена разработки дизайна сайта
Цену разработки дизайна сайта отдельно от программирования называем после брифа, когда понятны объём и задачи. На стоимость влияют:
- количество уникальных шаблонов страниц и состояний интерфейса;
- глубина UX-исследования и количество сценариев в прототипе;
- адаптивы, анимации и иллюстрации;
- дизайн-система для команды, которая будет развивать продукт.
В сайтах под ключ дизайн уже входит в стоимость: лендинг — от $800, корпоративный сайт — от $2 000, интернет-магазин — от $5 000. Консультация бесплатная, а смету фиксируем до старта работ.
UX/UI-дизайн для SaaS и веб-продуктов
UX/UI-дизайн SaaS и веб-приложений начинается не с главной страницы, а со сценариев: что пользователь делает каждый день и где он может застрять.
- карта ролей и сценариев, онбординг без инструкций;
- дашборды, таблицы, формы и фильтры, с которыми удобно работать часами;
- состояния пустых экранов, ошибок и загрузки;
- дизайн-система, из готовых компонентов которой собираются новые функции.
Здесь помогает опыт нашего дизайнера в продуктовых командах: макеты сразу учитывают все состояния и ограничения разработки, а не только «красивую главную». Если нужна и программная часть, берём на себя разработку веб-приложения или SaaS.
Что входит
UX-исследование
Изучаем аудиторию, конкурентов и аналитику, чтобы знать, где клиент теряется.
Прототип сайта
Структура и сценарии ключевых экранов, согласованные ещё до цвета и графики.
UI-дизайн
Кинематографичные экраны со светом, ритмом и типографикой — с нуля под ваш бренд.
Адаптив
Отдельные макеты для телефона, планшета и компьютера, а не только для большого экрана.
Дизайн-система
UI-кит с цветами, шрифтами и компонентами, чтобы сайт рос без хаоса.
Передача в разработку
Файлы Figma с состояниями элементов и описанием анимаций — понятные любому разработчику.
Этапы работы
Бриф и стратегия
Разбираем бизнес, аудиторию и конкурентов и формулируем, что должен сделать сайт.
UX и прототип
Проектируем путь клиента к заявке или оплате и согласовываем прототип до визуала.
UI-дизайн
Рисуем экраны и адаптивы с нуля — два круга правок входят в работу.
Разработка и запуск
Разрабатываем на WordPress, React и Next.js, Node.js или Python — либо передаём файлы вашей команде.
Частые вопросы
Сколько стоит дизайн сайта?
Стоимость дизайна отдельно от разработки называем после брифа: она зависит от количества уникальных страниц и состояний интерфейса, глубины исследования, адаптивов, анимаций и необходимости в дизайн-системе. Если вы заказываете сайт под ключ, дизайн уже входит в его стоимость. Консультация бесплатная, а смету фиксируем до старта работ.
Сколько времени занимает UX/UI-дизайн сайта?
Прототип и дизайн многостраничного сайта занимают от 2 недель, а дизайн лендинга укладываем в общий срок его запуска — от 7 дней. Срок зависит от количества уникальных экранов, готовности текстов и скорости согласований; веб-продукту с большим количеством сценариев нужно больше времени. График этапов согласовываем после брифа.
Вы делаете дизайн сайта в Figma? Получу ли я исходники?
Да, прототипы и макеты делаем в Figma, а после завершения работ передаём вам все файлы. Вы получаете страницы с адаптивами, UI-кит с компонентами и стилями и доступ для вашей команды. С этими файлами любой дизайнер или разработчик сможет развивать сайт и без нас.
Можно ли заказать дизайн сайта отдельно, если разрабатывать будет другая команда?
Да, дизайн можно заказать отдельно, а разработку отдать своей команде или подрядчику. Мы готовим файлы Figma с адаптивами, UI-китом, состояниями элементов и описанием анимаций, объясняем разработчикам логику экранов и отвечаем на их вопросы во время вёрстки. Если удобнее, разработку тоже берём на себя: WordPress, React и Next.js, Node.js или Python.
Вы делаете редизайн действующего сайта?
Да. Редизайн начинаем с разбора того, что уже есть: аналитики, пути клиента и мест, где люди уходят с сайта. Потом решаем, что сохранить — узнаваемый стиль, адреса страниц, наработанное в поиске, — а что спроектировать заново. Так мы переделали интернет-магазин Air Soft Shop — с более удобными фильтрами в каталоге и более простым оформлением заказа.
Сколько правок входит в дизайн?
В работу входят два круга правок на этапе UI-дизайна. Прототип мы согласовываем отдельно, ещё до визуала, поэтому больших переделок в конце обычно не бывает. Правки удобно оставлять комментариями прямо в макетах Figma. Если после двух кругов появляются новые задачи, заранее оцениваем их отдельно.
Другие форматы
Корпоративный сайт
Многостраничный сайт компании с услугами, блогом и формами. Повышает доверие и статус бренда. Подробнее
Лендинг
Одностраничный сайт под одну цель — запуск продукта, акцию или рекламную кампанию. Максимум конверсии. Подробнее
Интернет-магазин
E-commerce с каталогом, корзиной, оплатами и интеграциями. Продажи онлайн 24/7. Подробнее
Веб-приложения и SaaS
SaaS, клиентские кабинеты, MVP и внутренние инструменты — дизайн и разработка в одной команде. Подробнее
UX-аудит сайта
Анализ юзабилити и пути клиента: находим, почему сайт не продаёт, и даём план исправлений со скриншотами. Подробнее
Брендинг и айдентика
Позиционирование, логотип, фирменный стиль и гайдлайн — бренд, на котором строим сайт. Подробнее
Криптопроект
Сайты для Web3, токенов и DeFi — современный дизайн, интеграции кошельков, высокая скорость. Подробнее
Маркетплейс
Платформа с множеством продавцов, личными кабинетами и сложной логикой. Масштабируется под рост. Подробнее
Покажем, каким будет ваш сайт и сколько он будет стоить
Бесплатная консультация: разберём нишу и конкурентов, предложим структуру, смету и сроки — даже если вы ещё сравниваете подрядчиков.
- Смета и сроки — до старта
- Поэтапная оплата
- Сайт и все доступы — ваши
После заявки с вами свяжется ведущий менеджер: бесплатно проконсультирует, обсудит ваши задачи и ответит на вопросы по стратегии.