Дизайн у замовній розробці провалюється однаково: намалювали двадцять гарних екранів, а на двадцять першому з'ясувалося, що він не схожий на жоден із попередніх. Далі кожен новий екран стає окремим творчим зусиллям і окремою суперечкою, а бюджет на доопрацювання росте без видимої причини.
Що відбувається на етапі
- Проєктування дизайн-системи: типографіка, сітка, кольори, стани елементів, правила відступів.
- Розробка UX/UI поверх сценаріїв, затверджених на прототипуванні.
- Візуальний стиль для вебу й мобільних платформ одразу, а не по черзі.
Етап відкриває комерційну версію продукту. До нього ми відповідали на запитання «що будуємо», тут починається те, чим живі люди користуватимуться щодня.
Дизайн-система це про економіку, а не про красу
Коли в кнопки описані всі стани, а у форми правила помилок, наступний екран збирається з готових деталей. Вартість двадцятого екрана стає близькою до вартості п'ятого. Без системи вона росте лінійно і ніколи не падає.
З чого складається дизайн-система
- Кольори, шрифти та шкала відступів.
- Кнопки, картки, меню, типові елементи форм.
- Стани: наведення, натискання, помилка, завантаження, порожній список.
- Правила для таблиць, фільтрів і списків у робочих інтерфейсах співробітників.
Дизайн-система оголошується у вигляді змінних CSS. Тому на наступному етапі, верстці інтерфейсів, верстальник бере її як є, а не переводить картинку в код на око.
UX: рішення, яких не видно на скриншоті
Добрий інтерфейс відрізняється не кольором кнопок, а тим, скільки зусиль він вимагає від людини. На етапі UX ми вирішуємо, що користувач бачить першим, у якому порядку заповнює поля, що відбувається в разі помилки і як виглядає екран, коли даних ще немає. Для робочих інтерфейсів співробітників важливе інше: скільки кліків займає типова операція, яку людина повторює десятки разів за зміну.
Що знадобиться від Вас
Брендбук або хоча б логотип і фірмові кольори, доступ до наявних макетів, якщо вони є, і кілька прикладів сервісів, які Вам подобаються або дратують. Цього достатньо, щоб дизайн-система спиралася на Ваш бренд, а не на смак дизайнера.
Що Ви отримуєте на виході
Дизайн-систему, за якою будь-який новий екран збирається без дизайнера, UX/UI ключових сценаріїв і єдиний візуальний стиль для вебу й мобільних пристроїв. Це фундамент, на якому далі тримаються верстка, логіка інтерфейсів і всі майбутні доопрацювання.
Скільки коштує дизайн інтерфейсу і від чого залежить
Етап коштує від $0 до $2400. Діапазон не маркетинговий хід. Якщо в компанії є чинний брендбук і дизайн-система, етап може коштувати нуль: ми просто працюємо у Ваших правилах.
Усередині діапазону ціну визначають:
- наявність брендбука, логотипа і готових правил стилю;
- кількість платформ: лише веб чи веб разом із мобільною версією;
- кількість ролей і робочих контурів: клієнт, менеджер, адміністратор, фахівець;
- глибина опрацювання сценаріїв на прототипі: що точніший прототип, то менше роботи в дизайнера.
Чому дизайн не замінює ТЗ і прототип
Часта помилка: почати з гарних макетів у Figma і вважати проєкт спроєктованим. Figma добре показує екрани, ролі та UX-потік, але не покриває бізнес-логіку, інтеграції, права доступу, дані й інфраструктуру. Тому дизайн у нас іде після технічного завдання і прототипу, а не замість них.
Що ламається, якщо етап пропустити
Інтерфейс розповзається. Зовні це виглядає як «трохи незачесано», а насправді означає, що будь-яке доопрацювання потребує дизайнера: верстальник не може зібрати екран сам, бо правил немає. З часом у продукті з'являються три види кнопок і п'ять відтінків основного кольору, і користувач перестає розуміти, що тут клікабельне. Наводити лад потім доводиться одразу в усіх екранах, і таке прибирання коштує дорожче, ніж дизайн-система, закладена на старті.
Приклад із практики
У проєкті медичної системи замовник уже мав стартову Figma. Вона задала настрій і напрямок, але не відповіла, хто створює запис, де редагується довідник і що бачить лікар. Ми зібрали прототипну дизайн-систему на Bootstrap і Font Awesome: кольори, шрифти, відступи, кнопки, картки, меню й елементи форм. Цього вистачило для візуального погодження без претензії на фінальний дизайн.
У концепті ресторанного застосунку мобільний інтерфейс одразу проєктували як основний, а не як адаптив від десктопа: гості замовляють із телефона. А для виробництва Скло інтерфейси розділили за ролями: у клієнта, менеджера з продажу і дизайнера свої застосунки та свій набір кнопок.
Куди далі
Наступний крок: верстка інтерфейсів. Попередній: прототипування. Мапа циклу в стратегії розробки застосунку.
Обговорити проєкт на безкоштовній консультації з архітектором. Після зустрічі Ви отримаєте розрахунок ціни й термінів за етапами.
