• Дизайн-системи · Next.js

Дизайн-система: чтобы десятый экран делался не так долго, как первый, и выглядел с ним одинаково

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

дней после подписания акта

интерфейсы продуктов и магазинов
Специализация
от 15 до 45 рабочих дней
Срок
бесплатный разбор интерфейса
Начало
в течение 2 часов
Ответ
по письменному договору
Работа
Что входит

Полный перечень работ и того, что вы получаете на выходе

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

Что не входит в работу — чтобы не было сюрпризов на сдаче

  • переделка всего продукта под новую систему одним заходом
  • дизайн-система ради самой дизайн-системы, без ближайших задач под неё
  • гарантия, что новый вид понравится пользователям больше
  • поддержка и развитие системы после передачи, если не оговорено отдельно
  • обещания роста конверсии от унификации
Кому подходит

Ситуации, в которых эта услуга даёт результат

Сценарий 1 из 4

Продукт, который растёт уже несколько лет

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

Разберём вашу ситуацию на бесплатном аудите
Бесплатный разбор интерфейса

Смотрим, сколько у вас на самом деле разнобоя и оправдана ли система на вашем объёме.

Что мы измеряем

  • Сколько разных вариантов одного и того жеСчитаем кнопки, поля, карточки, сообщения. Цифра обычно впечатляет владельца больше любых аргументов.
  • Сколько значений одного цветаПростейший показатель накопленного хаоса. Пять оттенков серого вместо двух — это не эстетика, это пять мест для правки.
  • Что будет делаться дальшеСистема окупается будущими экранами. Если впереди ничего не планируется, она станет красивым документом без применения.
  • Кто ею будет пользоватьсяЕсли интерфейс собирает тот же человек, что и рисует, выгода меньше. Если их двое и больше — выгода начинается сразу.
  • На чём построен продуктКомпоненты в React и шаблоны Twig — разные по трудоёмкости истории. Это главный технический фактор объёма.
  • Есть ли что сохранитьЧасть решений у вас уже правильная и узнаваемая. Систему строим из них, а не вопреки им.

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

  • посчитанный разнобой: сколько вариантов одного и того же
  • перечень частей, из которых сложится система
  • оценка объёма работ с разбивкой по этапам
  • честный ответ, если на вашем объёме система не окупится

Срок: 3–5 рабочих дней

Почему это бесплатно

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

Что дальше

Вы получаете перечень частей и оценку. Дальше решаете сами — документ остаётся у вас.

Короткая форма: контакт и адрес сайта

  • Договор, акт и гарантия 30 дней

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

  • ФОП и безналичный расчёт

    Исполнитель — зарегистрированный ФОП. Оплата на счёт с закрывающими документами.

  • Права и доступы — ваши

    Код, дизайн и материалы переходят к вам после полной оплаты. Домен, хостинг, репозиторий оформляем на вас.

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

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

  • Заказчики из Европы

    Среди работ — проекты для Норвегии, Болгарии, Молдовы и Испании.

  • Цифры, которые можно проверить

    Каждый кейс в портфолио — со ссылкой на живой сайт и техническим замером.

  • Сначала аудит, потом сумма

    Прайса на сайте нет намеренно: объём одной и той же работы у двух клиентов отличается кратно.

  • Говорим «нет», когда не уверены

    Если задача не наша или срок нереальный — скажем сразу.

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

Почему две одинаковые на вид задачи считаются по-разному

  • Количество частейДвадцать компонентов и сто — разные работы. Но количество определяется не желанием, а тем, из чего действительно состоят ваши экраны.
  • Сколько состояний у каждойКнопка — это шесть состояний, а не одно. Форма с проверкой — больше десятка. Именно состояния, а не внешний вид, забирают время.
  • Техническая основаКомпоненты в React собираются быстрее, чем шаблоны в старой теме, где разметка и логика переплетены. Это главный множитель объёма.
  • Состояние имеющегося кодаЕсли стили писались годами слой поверх слоя, сначала надо понять, что на что влияет. Иногда это больше работы, чем сама система.
  • Перенос экрановСистема без единого перенесённого экрана — теория. Мы всегда переносим несколько реальных, и их количество прямо влияет на сумму.
  • Кто будет поддерживатьЕсли систему будут развивать ваши люди, нужны описанные правила добавления. Это добавляет работы и снимает зависимость от нас.
Кейсы

Задачи и результат в цифрах — все показатели сняты нашим замером

собственный премиум-шаблон и набор модулей для OpenCart 4 с адаптацией под украинский рынок

Задача
Сделать так, чтобы магазин на OpenCart 4 с большим каталогом открывался быстро и из коробки умел то, что в Украине нужно всегда: Новую Почту с накладными, украинские платёжки, нормальный поиск и структурированные данные — вместо того чтобы каждый раз собирать это из чужих модулей разного качества.
Решение
Шаблон для OpenCart 4.1+ на PHP 8.1+ с собственным слоем кеширования (APCu для объектного кеша, OPcache с JIT, nginx fastcgi_cache, прогрев топовых категорий по расписанию) и исправлением N+1 в категориях, где нативный OpenCart делал по 200+ запросов COUNT. Поверх — Theme Engine с 10 готовыми пресетами дизайна и 200+ настроек, поиск на FULLTEXT с синонимами и автодополнением, уведомления о появлении товара с восстановлением через email и SMS, отзывы с разметкой AggregateRating, набор схем JSON-LD (Organization, WebSite, Product, Breadcrumb, Article, FAQ), украинский слой: Новая Почта с автоматическими накладными, реестрами и вебхуками, Укрпочта, LiqPay, monobank, WayForPay. Отдельно — страница трекинга заказа и печатный счёт, защищённый токеном. Поставляется пятью архивами: полный инсталлятор, тема для маркетплейса и три самостоятельных модуля.
Результат
Внутренний стенд на каталоге 14 тыс. товаров: нативный OpenCart 4 отдаёт холодную категорию за 8–17 секунд, с нашим шаблоном — 0,18 с из кеша и 0,8 с без него, то есть в 30–95 раз быстрее. В кодовой базе 8 157 файлов PHP, 718 шаблонов Twig и 726 файлов JavaScript; в перечне возможностей 167 пунктов в 16 разделах. Версия 1.1.0, продукт готовится к запуску и публично ещё не выходил.

Не нашли свой случай?

Опишите, как это устроено у вас, — ответим, подходит ли «Дизайн-система для продукта» и что это значит в вашей ситуации. Без брифа и без звонка: один вопрос, один ответ.

Этапы работы

Прозрачные этапы с согласованием на каждом шагу

Общий срок:15–45 дней

  1. Разбор разнобоя

    3–5 рабочих дней

    Собираем все варианты кнопок, полей, карточек и сообщений, которые есть в продукте. Считаем цвета и отступы. Здесь становится виден настоящий масштаб.

  2. Основа

    3–6 рабочих дней

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

  3. Части

    7–20 рабочих дней

    Делаем компоненты со всеми состояниями и поведением на узком экране. Не рисунки, а рабочие части, которые сразу можно вставлять.

  4. Живая страница

    2–5 рабочих дней

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

  5. Перенос реальных экранов

    4–10 рабочих дней

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

  6. Правила и передача

    2–4 рабочих дня

    Описываем, как добавлять новое, не ломая имеющееся, и передаём систему вашим людям. Дальше действует гарантия 30 дней со дня подписания акта.

Технологии и интеграции

На чём строим и с чем это соединяется

Стек

  • Next.js
  • React
  • TypeScript
  • JavaScript
  • Tailwind CSS
  • Radix UI
  • shadcn/ui
  • Twig
  • PHP
  • HTML
  • CSS
  • Storybook
  • Figma
  • Git

Интеграции

  • Figma
  • Storybook
  • Git
  • GitHub
Система компонентов или макеты под каждый экран

Чем этот вариант отличается от альтернативы

Десятый экранскладывается из готового
Правка общего элементав одном месте
Работа вдвоём и большеправила одинаковы для всех
Затраты на стартезаметные, окупаются дальше
Когда макеты лучшеизбыточно для трёх страниц и одного исполнителя
Что нужно от вас

Без этого не начнём — лучше подготовить заранее

  1. доступ к имеющемуся продукту или к его экранам
  2. кто принимает решения о виде и кто будет собирать экраны дальше
  3. есть ли уже какие-то правила стиля, даже неписаные
  4. какие экраны планируются в ближайшее время
  5. на чём построен интерфейс технически
  6. кто с вашей стороны принимает работу

Если чего-то из этого нет — скажите, подскажем, как собрать или сделаем сами отдельной задачей.

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

Что спрашивают чаще всего — с конкретными ответами

Это не будет красивым файлом, которым никто не пользуется?

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

Надо будет переделывать весь продукт?

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

Сколько должно быть компонентов?

Столько, сколько разных частей в ваших экранах, и ни одним больше. Соблазн сделать «на будущее» велик, но компонент, который нигде не используется, — это затраты без отдачи. Мы выводим перечень из того, что у вас есть, а не из чужих примеров.

У нас магазин на OpenCart со старой темой. Здесь это возможно?

Да, но это дороже, чем в продукте на React. В старых темах разметка и логика часто переплетены, и сначала надо понять, что на что влияет. Свою тему для OpenCart мы строили именно как систему с набором настроек, так что имеем представление, где там болит.

Улучшит ли это конверсию?

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

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

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

Сколько это длится?

От 15 до 45 рабочих дней. Основа и первые компоненты идут быстро; время забирают состояния, поведение на узком экране и перенос реальных страниц. Если продукт большой, разумнее начать с части экранов, а не покрывать всё сразу.

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

Можно, но не стоит. Система, построенная из представлений, а не из реальных экранов, почти всегда оказывается не о том. Если продукта ещё нет, честнее начинать с первой версии, а систему выводить из неё, когда станет понятно, что повторяется.

Посчитаем, сколько у вас разнобоя

Посмотрим интерфейс и скажем, из каких частей сложится система и окупится ли она на вашем объёме. Разбор бесплатный, отвечаем в течение 2 часов.

Из измеренных кейсовВнутренний стенд на каталоге 14 тыс

Смотреть кейсы
  • Ответ в течение 2 часов
  • Без обязательств
  • Работаем по договору

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