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

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

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