• Дизайн-системи · 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 годин.

Дивитись кейси
  • Відповідь протягом 2 годин
  • Без зобов’язань
  • Працюємо за договором

Прайса на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази, і цифра «від» у такому разі нічого не пояснює. Спершу безкоштовний аудит — рахуємо ваші сторінки, дублі й швидкість, — потім називаємо суму й строк і фіксуємо їх у договорі.