Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeFest 2018. Владимир Дзех (СКБ Контур) — Дизайн-система тридцати продуктов для бизнеса

CodeFest
April 09, 2018

CodeFest 2018. Владимир Дзех (СКБ Контур) — Дизайн-система тридцати продуктов для бизнеса

Посмотрите выступление Владимира https://2018.codefest.ru/lecture/1344/

За последние 10 лет мы создали и продолжаем разрабатывать три десятка веб-сервисов для бизнеса со сложным, но удобным интерфейсом. Мы хотим, чтобы наши пользователи получали одинаковый опыт работы с различными продуктами, а тридцать продуктовых дизайнеров проектировали интерфейсы, соответствующие единым требованиям. Для этого мы создали дизайн-систему для продуктов Контура, описали её в Контур.Гайдах (guides.kontur.ru) и реализовали их требования в библиотеке React-компонентов. Я поделюсь опытом создания Гайдов, расскажу почему они именно такие и как мы ими пользуемся.

Уровень
Дизайнеры интерфейсов из продуктовых компаний. Средний и высокий уровень.

CodeFest

April 09, 2018
Tweet

More Decks by CodeFest

Other Decks in Design

Transcript

  1. !1

  2. !5

  3. !6

  4. !9

  5. !11 Сохранить единый пользовательский опыт, дизайн и поведение компонентов Обмениваться

    опытом и поднимать общий уровень дизайна Продукты одной экосистемы
  6. !12

  7. !13 Контур.Гайды UI kit, библиотека компонентов Инструмент дизайнера или разработчика,

    для быстрого старта новых продуктов. Дизайн-система Постоянно эволюционирующий свод правил, который определяет порядок создания продукта.
  8. !14

  9. !15

  10. !16

  11. !17

  12. !18

  13. !19

  14. !20

  15. !21

  16. !22

  17. !23

  18. !24

  19. !25

  20. !26

  21. !27

  22. !28

  23. !33

  24. !34

  25. !35 Контур.Гайды Погружение и причастность Практика, через которую проходит дизайнер,

    учится формулировать, достаточно глубоко понимает принципы, описанные в Гайдах
  26. !36

  27. !37 Контур.Гайды Кратко, просто, убедительно Текст, так же как и

    любой контрол, должен выполнять полезное действие
  28. !38

  29. !39 Цвет в интерфейсе сразу обращает на себя внимание и

    несет определенную смысловую нагрузку. С другой стороны, обилие цветов и оттенков размывает их значение. Цвет в интерфейсе следует использовать осторожно и со смыслом. В интерфейсе мы используем цвет для передачи смысла и не используем его для оформления. Цвет — это инструмент управления вниманием пользователя: он помогает выделять главное.
  30. !40

  31. !42

  32. !43

  33. !44

  34. !45

  35. !46

  36. !47

  37. !50

  38. !51

  39. !53 Контур.Гайды Мы предоставляем удобные инструменты и если с ними

    легче выполнять свою работу — они распространяют себя сами
  40. !54 Контур.Гайды UI Kit в Sketch и Figma для дизайнеров

    React UI — библиотека готовых компонентов для фронта
  41. !55

  42. !56 Контур.Гайды Как происходят изменения Что делать если кто-то хочет

    контрол которого нет Как команды относятся к изменениям
  43. !59

  44. !60

  45. !61