Дизайн

UX/UI дизайн сайтов и приложений

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

Стоимость: От 60 000 ₽
Сроки: Лендинг — 2–3 недели, корпоративный сайт или интернет-магазин — 4–6 недель, интерфейс веб- или мобильного приложения — 6–10 недель. Дизайн-система под существующий продукт занимает 3–5 недель и обычно идёт параллельно с разработкой.

Стартовая цена. Итог зависит от объёма, интеграций и сроков.

Коротко

UX/UI дизайн сайта — это исследование, структура, интерфейс и дизайн-система, а не одна красивая картинка. Мы рисуем ключевые экраны в трёх брейкпоинтах (360, 768 и 1440), собираем UI-кит из компонентов с состояниями наведения, фокуса, ошибки, загрузки и пустого списка и отдаём Figma-файл, по которому разработчик верстает без догадок. Лендинг — от 3 недель, продукт — от 6–8 недель, старт от 60 000 ₽.

Что входит в UX/UI дизайн

UX-часть отвечает на вопрос «что и в каком порядке видит человек»: карта экранов, сценарии, порядок блоков, логика форм и ошибок. UI-часть отвечает за то, как это выглядит и ощущается: сетка, типографика, цвет, иконки, состояния, микроанимации. Разделять их бессмысленно — логичный, но безликий экран не вызывает доверия, а красивый с непонятной структурой не приводит к заявке.

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

Исследование: разбор конкурентов из поисковой выдачи, интервью с заказчиком, чтение текущей аналитики и Вебвизора, если сайт уже работает.
Структура: карта экранов, каркасы в низкой детализации, сценарии ключевых действий — покупка, заявка, регистрация, оплата.
Визуальная концепция: одно-два направления на главном экране, чтобы согласовать стиль до отрисовки всего проекта.
UI-кит: кнопки, поля, селекты, карточки, таблицы, модальные окна и тосты со всеми состояниями.
Передача: файл с Auto Layout, переменными, именованными слоями и разложенными брейкпоинтами плюс созвон с разработчиками.

Чем дизайн, который доходит до релиза, отличается от красивой картинки

Картинка показывает идеальный случай: короткое название товара, аватарка на месте, три пункта в списке, ровно два слова в кнопке. Продакшен — это длинное название в три строки, отсутствующее фото, пустой список, ошибка оплаты и товар со скидкой 87%. Дизайн, который доходит до релиза, содержит эти случаи заранее, поэтому разработчик не придумывает их сам в последний день спринта.

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

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

Дизайн-система: UI-кит, токены, компоненты

Дизайн-система — это не отдельная услуга «для больших», а способ не переделывать проект дважды. В основе лежат токены: цвета, шкала типографики, отступы кратные 4 или 8, радиусы, тени, уровни z-index. Они заводятся в Figma Variables, а на стороне кода превращаются в CSS-переменные или конфиг Tailwind, поэтому смена акцентного цвета занимает минуты, а не день.

Поверх токенов собирается UI-кит: атомарные элементы, затем составные блоки (шапка, карточка товара, форма заявки, таблица заказов), затем шаблоны страниц. Каждый компонент получает варианты и состояния, а не двадцать копий с ручными правками. Для небольшого сайта хватает 25–40 компонентов, для личного кабинета или маркетплейса обычно 80–150.

Документация — короткая и практичная: когда использовать первичную кнопку, а когда вторичную; минимальная ширина карточки; что делать, если заголовок не влезает. Стостраничный PDF, который никто не откроет, мы не делаем.

Адаптив, доступность и передача в разработку

Базовый набор брейкпоинтов — 360 (мобильный), 768 (планшет), 1440 (десктоп); для широких дашбордов добавляем 1920. Мы не «сжимаем десктоп», а решаем каждый брейкпоинт отдельно: что скрыть, что превратить в горизонтальный скролл, где таблица становится списком карточек, куда переезжает кнопка действия на мобильном.

По доступности держим рабочий минимум: контраст текста не ниже 4.5:1, тач-зоны от 44×44 пикселей, видимый фокус на всех интерактивных элементах, читаемый порядок табуляции в формах. Это не сертификация по WCAG, но это то, что реально влияет на конверсию и на людей, которые заходят с телефона на солнце.

Передача включает кликабельный прототип для согласования, разложенные ассеты в SVG и WebP, спецификации отступов через Dev Mode и созвон с командой разработки. Дальше остаёмся на связи во время вёрстки — вопросы «а как это должно вести себя при 900 пикселях» появляются всегда.

Сколько стоит дизайн сайта и от чего зависит цена

Цена считается по количеству уникальных экранов и глубине проработки, а не по числу страниц на сайте. Каталог из 500 товаров — это один шаблон карточки, а не 500 макетов. Ориентиры: лендинг от 60 000 ₽, корпоративный сайт или интернет-магазин от 120 000 ₽, интерфейс веб-приложения или личного кабинета от 250 000 ₽, отдельная дизайн-система под существующий продукт от 180 000 ₽.

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

Что входит в работу

Карта экранов и каркасы ключевых сценариев в низкой детализации
Готовые макеты всех уникальных экранов в 360, 768 и 1440 пикселей
UI-кит: компоненты с вариантами и состояниями (наведение, фокус, ошибка, загрузка, пустое состояние, disabled)
Токены в Figma Variables: цвет, типографика, отступы, радиусы, тени
Кликабельный прототип основного пути для согласования и демо
Иконки и графика в SVG, изображения в WebP с указанием размеров
Краткая спецификация правил: сетка, шкала, поведение блоков на разных ширинах
Передача в Dev Mode и сопровождение команды разработки до релиза

Как мы работаем

01
Вводная и исследование
Разбираем задачу, аудиторию и целевое действие, смотрим конкурентов из выдачи и текущую аналитику, если сайт уже есть. На выходе — список экранов и приоритеты, а не абстрактный бриф.
02
Структура и каркасы
Собираем порядок блоков и логику переходов в чёрно-белых каркасах. На этом этапе дёшево спорить и переставлять — правки занимают часы, а не дни.
03
Визуальная концепция
Показываем одно-два направления на главном экране: цвет, типографика, характер. Согласуем стиль до того, как отрисован весь проект.
04
Отрисовка и UI-кит
Рисуем остальные экраны, параллельно собирая компоненты, состояния и адаптив. Показываем прогресс раз в несколько дней, а не один раз в конце.
05
Передача и сопровождение
Отдаём файл, ассеты и прототип, проводим созвон с разработкой и отвечаем на вопросы во время вёрстки. Спорные места фиксируем прямо в макете, а не в переписке.

Технологии и инструменты

Figma
FigJam
Figma Variables
Auto Layout
Figma Dev Mode
Tokens Studio
Storybook
Yandex Metrica
Maze
Adobe Illustrator

Примеры работ

NA Consulting

Сайт разработан для консалтингового агентства NA Consulting. Интерактивный лендинг умещает в себя всю информацию об агентстве и его услугах и при этом выглядит минималистично. Цвета успокаивают пользователя, чтобы показать безопасность и серьёзность компании. Разработано Veltos.Tech совместно с Алиёй (finnikkis.github.io/maulaviyevadesign).

Us After All

Сайт разработан для новостного агентства Us After All. Максимально простой и минималистичный ресурс для повседневных новостей, где собраны не только статьи и текст, но и видео, аудиокниги и целые плейлисты.

Промдиз МИСиС

Сайт отредактирован для учебного заведения НИТУ МИСиС. Для кафедры Промышленного дизайна произведён ребрендинг сайта «Дизайн Спринт». Новый сайт отсылает к промышленным чертежам, смешанным с новыми технологиями. Композиция будто нарисована по линейке со всплывающими окнами редактирования.

Частые вопросы

Сколько стоит дизайн сайта под ключ?

Лендинг обходится от 60 000 ₽, корпоративный сайт или интернет-магазин — от 120 000 ₽, интерфейс личного кабинета или веб-приложения — от 250 000 ₽. Считаем по количеству уникальных экранов, а не страниц: каталог из 500 товаров — это один шаблон карточки. Смету поднимают мультиязычность, несколько ролей пользователей, сложные таблицы, авторские иллюстрации и тёмная тема. Точную цифру называем после того, как соберём список экранов, — обычно это один созвон на 40 минут.

Чем UX отличается от UI простыми словами?

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

Что я получаю в конце — какие файлы?

Основной артефакт — файл Figma с правами редактирования на вашем аккаунте: страницы с каркасами, готовыми экранами в трёх ширинах, UI-китом и токенами в Figma Variables. Плюс кликабельный прототип, ассеты в SVG и WebP, короткая спецификация правил. Никаких «отдадим только PNG» — файл ваш, вы можете продолжать в нём работать с другой командой. По запросу выгружаем токены в JSON для Tailwind или CSS-переменных.

Нужна ли мне дизайн-система, если сайт небольшой?

Полноценная система с документацией небольшому сайту не нужна, но токены и компоненты нужны почти всегда. Разница в объёме: для сайта на 8–10 экранов это 25–40 компонентов и один набор переменных, что добавляет к сроку несколько дней. Окупается на первой же итерации — смена акцентного цвета или добавление раздела перестают быть переделкой всех макетов. Отдельный проект по дизайн-системе имеет смысл, когда у продукта уже есть 50+ экранов и несколько человек их правят.

Сколько правок входит в работу?

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

Делаете ли вы редизайн существующего сайта?

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

Обсудим вашу задачу?

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

Оставить заявку Посмотреть все услуги