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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше

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

Короткая форма: контакт и адрес сайта
Договор и документы

Работаем официально

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

Нам доверяют6 брендов

Нам доверяют: Kvant Energy, GYPSUN, Naturel Cosmetics, Pancer Protection, LUGI, BeeTech

Условия, зафиксированные письменно8 пунктов

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

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

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

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

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

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

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

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

  • Сайты в девяти странах

    Наши сайты работают в девяти странах: кроме Украины — Польша, Германия, Австрия, Англия, Норвегия, Болгария, Молдова, Испания.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Сайты в девяти странах

    Наши сайты работают в девяти странах: кроме Украины — Польша, Германия, Австрия, Англия, Норвегия, Болгария, Молдова, Испания.

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

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

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

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

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

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

NDA подписываем по запросу. После завершения свои доступы удаляем сами.

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

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

  • Количество частейДвадцать компонентов и сто — разные работы. Но количество определяется не желанием, а тем, из чего действительно состоят ваши экраны.
  • Сколько состояний у каждойКнопка — это шесть состояний, а не одно. Форма с проверкой — больше десятка. Именно состояния, а не внешний вид, забирают время.
  • Техническая основаКомпоненты в 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 мы строили именно как систему с набором настроек, так что имеем представление, где там болит.

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

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

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

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

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

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

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

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

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

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

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

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

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