Дизайн-
система

Собираем библиотеку компонентов и правил, чтобы новые экраны собирались быстро и выглядели одинаково.

Обсудить проект

Покажем структуру системы
за 15 минут!

Скорость
выпуска экранов

Новые страницы собираются из готовых блоков за часы, а не недели.

Единый стиль
всего продукта

Интерфейс выглядит цельно на сайте, в кабинете и в письмах.

Меньше правок
и переделок

Спорные вопросы решаются правилами системы, а не вкусами.

Язык для команд

Дизайнеры, разработчики и контент говорят на одном языке компонентов.

Диагностика

Как выглядит жизнь без системы

Без системы каждый экран проектируется с нуля, а баги стиля множатся вместе с ростом продукта.

Каждый экран — с нуля

Дизайнеры пересобирают одни и те же кнопки и формы на каждом макете.

Стили разъехались

На разных страницах разные отступы, оттенки и кнопки — продукт выглядит рыхлым.

Правки тормозят релизы

Изменение цвета проходит через десятки экранов и ломается в неожиданных местах.

Нет документации

Новые дизайнеры и разработчики разбираются в интерфейсе неделями.

Решение

Собираем систему из слоёв

От токенов и типографики до компонентов и документации — каждый слой системы закрывает свой класс задач.

01

Аудит интерфейса

Инвентаризируем текущие экраны, элементы и расхождения стиля.

02

Токены и основы

Цвета, типографика, сетки, отступы и тени — база в виде переменных.

03

Библиотека компонентов

Кнопки, поля, карточки, таблицы и модальные окна со всеми состояниями.

04

Шаблоны страниц

Типовые каркасы: главная, раздел, карточка, форма — сборка из компонентов.

05

Документация

Правила использования, примеры и запреты — чтобы систему не ломали.

06

Связь с кодом

Синхронизируем систему с фронтендом: компоненты совпадают с макетами.

Процесс

Как строим дизайн-систему

Экраны

Инвентаризуем интерфейс

Собираем все типы экранов и элементов, находим дубли и расхождения.

Команда

Изучаем процессы

Понимаем, кто и как проектирует и разрабатывает интерфейс сегодня.

План

Определяем рамки

Согласуем состав слоёв системы и порядок её внедрения.

Отчётность

Что даёт система продукту

Эффект системы виден в скорости команд и качестве интерфейса, а не только в цифрах.

Скорость сборки

Время проектирования и вёрстки новых экранов сокращается кратно.

Согласованность

Доля экранов, собранных из системных компонентов без кастомных отклонений.

Стоимость правок

Глобальные изменения стиля проходят в одном месте, а не по всем страницам.

Порог входа

Новые члены команды включаются в работу быстрее за счёт документации.

Договорённости

Что фиксируем до старта

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

+

Состав системы

Какие слои и компоненты входят в первую очередь, что развивается позже.

+

Платформа

Где живёт система: Figma, репозиторий или связка с фронтендом проекта.

+

Правила развития

Кто и как расширяет систему, чтобы она не превратилась в свалку.

Бюджетирование

Формат и стоимость разработки дизайн-системы

Финальные условия определяем после аудита интерфейса и согласования состава слоёв.

Под ключ

Дизайн-система под ключ

Рекомендуем для продуктов и команд, которым нужен единый источник дизайн-решений.

  • личный менеджер проекта;
  • оперативная поддержка;
  • еженедельные статус-встречи;

−50% при оплате 6 месяцев

60 000 ₽120 000 ₽/ мес.

Приоритетные модули

Дизайн-система для приоритетных модулей

Рекомендуем для команд, которые начинают с ключевых экранов и компонентов.

−50% при оплате 6 месяцев

45 000 ₽90 000 ₽/ мес.

Небольшой проект

Дизайн-система для небольшого продукта

Рекомендуем для лендингов и компактных сервисов с ограниченным числом экранов.

−25% при оплате 3 месяцев

45 000 ₽60 000 ₽/ мес.

В стоимость не входят лицензии на шрифты и стоковые материалы. Цены указаны ориентировочно и могут отличаться от стоимости, зафиксированной в договоре.

⚠ Цены на странице — черновые, до согласования по направлению. Финальные условия фиксируются в договоре.

Состав работ

Что входит в разработку дизайн-системы

Техпроцесс един для всех форматов — различие только в объёме работ. Базовый состав фиксируется в договоре.

Почасовая работа

Для разовых задач и консультаций

3 000 ₽ за час работы
Выборочный задачи по согласованию
Точечно аудит, консультации, компоненты
Сразу по выполненным задачам
Чат со специалистом в рабочие часы

Небольшой продукт

Для лендингов и сервисов

−25% при оплате 3 месяцев 45 000 ₽ 60 000 ₽ в месяц
Полный базовый объём
Ядро компонентов до 30 элементов
Ежемесячная план и факт
Чат команды проекта

Приоритетные модули

Для ключевых экранов

−50% при оплате 6 месяцев 45 000 ₽ 90 000 ₽ в месяц
Полный базовый объём
Выбранные модули состав согласовываем
Ежемесячная план и факт
Менеджер направления

Под ключ

Для продуктов и платформ

−50% при оплате 6 месяцев 60 000 ₽ 120 000 ₽ в месяц
Полный базовый объём
Полная библиотека все экраны и правила
Еженедельная плюс план и факт
Личный менеджер и оперативная поддержка

Прозрачность

Что влияет на стоимость и сроки

Объём системы зависит от размера продукта и количества платформ.

*

Количество продуктов

Система для одного сайта или для сайта, кабинета и приложений — разный масштаб.

*

Число компонентов

Ядро из тридцати элементов и полная библиотека на двести — разные проекты.

*

Состояние интерфейса

Хаотичный текущий дизайн требует большего аудита и нормализации.

*

Связка с разработкой

Синхронизация токенов с кодом и фронтенд-компонентами добавляет работы.

*

Формат документации

Краткие правила или подробные гайды с примерами — разная глубина.

*

Скорость согласований

Решения по токенам и компонентам утверждаются и не пересматриваются по кругу.

Совместная работа

Что потребуется от клиента

01

Доступ к продуктам

Все экраны и сервисы, которые должна покрывать система.

02

Представители команд

Дизайнеры и разработчики, которые будут жить в системе ежедневно.

03

Решения по бренду

Фирменные элементы и ограничения, которые система обязана учитывать.

Кейсы и результаты

ААльфа-машвидимость+62%
PПромтехконверсия×1,7
NНорд-сервисцелевые лиды+41%
VВекторCPL−28%
ААльфа-машвидимость+62%
PПромтехконверсия×1,7
NНорд-сервисцелевые лиды+41%
VВекторCPL−28%
B2B · разработка + SEOНовый сайт превратил сложный каталог в понятный путь к заявкеПоказываем исходную задачу, решение и изменение показателей.
SEO · оборудованиеРост видимости категорий в поиске+62% Реклама · услугиСнижение стоимости целевого обращения−28% Смотреть все кейсы Respect→

Respect Agency

Опыт, команда и результаты, которые можно подтвердить.

Об агентстве
8 лет

опыта в digital

Работаем с 2019 года
11

крупных проектов реализовано

Интернет-магазины, сайты-каталоги, сайты услуг
10

отзывов клиентов

Официальные бланки, Яндекс Карты и ВКонтакте
CEO

Руководитель агентства Сергей Алексеев — 8 лет личной практики в SEO-продвижении. Лично курирует все проекты и отвечает за результат.

↗

Команда проекта

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

Руководитель отвечает за результат

Стратегия и аналитика

Дата-аналитик · Маркетолог · Продакт‑менеджер · Проектный менеджер · Бизнес-Аналитик

Система и производство

SRE-инженер · Дизайнер UI/UX · Веб-разработчик · DevOps инженер · QA-инженер

Трафик и контент

SEO-специалист · Performance · Контент‑менеджер · SMM‑менеджер · CRM‑менеджер

FAQ

Вопросы о дизайн-системе

?

Система нужна маленькому продукту?

Да: даже небольшой сайт выигрывает от токенов и типовых блоков — система растёт вместе с продуктом.

?

Это только для дизайнеров?

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

?

Где будет жить система?

Базово — в Figma с документацией; при необходимости синхронизируем токены с фронтендом проекта.

?

Придётся переделывать интерфейс?

Внедрение поэтапное: новые экраны собираются в системе, старые переезжают по мере доработок.

?

Кто будет развивать систему?

Передаём команде правила расширения; можем брать сопровождение на себя по отдельной договорённости.

?

Сколько компонентов войдёт?

Состав согласуем после аудита — обычно начинаем с ядра из самых частотных элементов.