Дизайн система — це набір компонентів для проєктування, які можна повторно використовувати в різних комбінаціях, щоб пришвидшити створення якісного функціоналу продукту.
Цей комплексний підхід покращує процес розробки продукту:
- мінімізує непорозуміння між дизайнером і розробником;
- оптимізує ресурси, що необхідні для проєктування і розробки продукту;
- покращує загальну якість дизайну на проєкті;
- спрощує обслуговування і оновлення;
- забезпечує ефективність і масштабованість процесу проєктування.
Однією з найпопулярніших методологій, які використовуються для створення системи дизайну є атомарний дизайн. Цю методологію запропонував Brad Frost і згідно з нею система дизайну повинна складатися з наступних елементів:
Головний принцип атомарного дизайну – від меншого до більшого.
фундаментальні стилі, які не можна розділити на більш дрібні елементи (текстові стилі, палітра кольорів, іконки, кнопки, поля вводу);
функціональні одиниці з кількох атомів, відносно прості групи елементів інтерфейсу користувача, які функціонують разом як єдине ціле (поля для пошуку, фільтри та інш.);
незалежні і відносно складні за структурою частини інтерфейсу, що складаються з групи атомів/молекул (картки товару, форми пошуку, навігація);
шаблони визначають порядок і налаштовують розташування елементів, розміщують компоненти в макеті та формують основну структуру сторінки;
шаблони, наповнені контентом, що готові до застосування, показують, як виглядає інтерфейс користувача з реальним репрезентативним вмістом. ми можемо взяти ї та додати в шаблон репрезентативний текст, зображення та медіа, щоб показати реальний вміст у дії.
Перше, що ми повинні зробити - це вибрати відповідний під стилістику шрифт або пару шрифтів, щоб задати текстові стилі. Створюючи їх, визначаємо відповідний розмір і товщину заголовків, підзаголовків, основного тексту, підписів. Підбираємо оптимальну висоту строки (інтерліньяж), щоб текст легко читався і слідував вертикальному ритму.
Потрібно правильно називати стилі тексту, щоб полегшити роботу розробникам і собі. Назви текстових стилів задаються в залежності від типу проєкту, якщо це веб-додаток - Bootstrap, якщо Android, то ми керуємося правилами для Material Design, а якщо це додаток IOS - Human Interface Guidelines. Flutter використовує свій власний неймінг, оснований на Material design. У будь-якому випадку в назві стилю ми вказуємо ім'я (Header, tittle, body і т.п.) і властивості (товщина, колір, розмір).
Сворюючи палітру визначаємо основні і другорядні кольори, а також для тексту, фону, помилок і інших повідомлень. Після вибору тестуємо їх у різних поєднаннях, щоб побачити, як вони працюють разом. Особливо важливо перевірити кольори на відповідність вимогам Web Accessibility, щоб переконатися у їх доступності для всіх користувачів. Після цього надати їм відповідні назви.
Коли вже є кольори, ми визначаємо радіус кутів округлення і тіней для інтерфейсу. Заокруглення кутів — це основа для ваших кнопок, карток, таблиць, навігації, все що визначає зовнішній вигляд вашого інтерфейсу. Вже потім підбір ілюстрацій та інших графічних матеріалів.
При виборі можна використовувати готові набори або створювати іконки самостійно. Переконайтесь, що іконки відповідають вашим потребам і допомагають передавати необхідні значення/контекст. Іконки повинні бути в єдиному стилі, щоб інтерфейс виглядав консистентно.
У таблиці бачимо назви різних компонентів та їх стани. Перед розробкою, продумайте компонент, враховуючи усі його можливі конфігурації. При створенні закладайте всі стани заздалегідь (детальніше в таблиці).
Коли визначили базові стилі та компоненти системи (атоми та молекули), тепер можете їх використовувати для створення більш складних організмів. Вони можуть складатися з однакових та різних типів молекул. Наприклад, організм з сторінок сайту може складатися з безлічі різних компонентів: логотипу, системи навігації, форми пошуку, блоку посилань на соціальні мережі. Або наприклад, фото, назву і ціну товару. На даному етапі проєктування стає наочним для формування візуального стилю інтерфейсу, внесення правок і обговорення із замовником.
При створенні дизайн-системи важливо підібрати сітку (направляючі) з урахуванням особливостей проєкту, технологій і цільової аудиторії.
Вертикальна сітка — обов'язкова складова адаптивного дизайну (підлаштовується під різні розміри екрану). Ширина екрану може бути 1024 px, 1200 px, 1440 px, 1920px і так далі. При проєктуванні потрібно побудувати надійну систему направляючих — одну для всіх.
Зазвичай використовують три типи розмірів екранів для адаптиву: під мобільний девайс, планшет і десктоп. Для дизайну мобільних застосунків вибираємо розмір екрану (все залежить від платформи: Android, Flutter або iOS).
Також важливою є горизонтальна і вертикальна сітка — це система відступів, щоб по всьому проєкту робити відступи між блоками та слідувати логічній системі відступів із дотриманням візуального ритму. Для зручності рекомендується використовувати 2-кратні відступи (сітка з відступами 4px, 8px, 16px, 18px і т.д.), для веб-сайтів може використовуватися 5-кратна сітка.
Для того, щоб не виникло проблем при розробці екранів та їх передачі розробникам, дотримуйтесь цих порад:
