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

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

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

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

Transcript

1. !1
2. !2 Дизайн-система тридцати продуктов для бизнеса
3. !3 компаний по всей стране пользуются программами и онлайн-сервисами Контура 1 870 000
4. !4 Программы электронного документооборота и электронной отчетности Онлайн-сервисы для предпринимателей и бухгалтеров Продукты для бизнеса
5. !5
6. !6
7. !7 продуктовых команд дизайнера 30 42
8. !8 часть команд — сервисные продуктовых команд 30
9. !9
10. !10 Делаем удобные продукты Стремимся к тому, чтобы ими пользовалось как можно больше компаний
11. !11 Сохранить единый пользовательский опыт, дизайн и поведение компонентов Обмениваться опытом и поднимать общий уровень дизайна Продукты одной экосистемы
12. !12
13. !13 Контур.Гайды UI kit, библиотека компонентов Инструмент дизайнера или разработчика, для быстрого старта новых продуктов. Дизайн-система Постоянно эволюционирующий свод правил, который определяет порядок создания продукта.
14. !14
15. !15
16. !16
17. !17
18. !18
19. !19
20. !20
21. !21
22. !22
23. !23
24. !24
25. !25
26. !26
27. !27
28. !28
29. !29 Контур.Гайды Дизайнеры Контура Продуктовые команды Гайды за пределами Контура 1. 2. 3.
30. !30 Контур.Гайды Контур.Гайды и дизайнеры Контура 1. Как мы их создаем и пользуемся
31. !31 Отдел проектирования пользовательских интерфейсов Первый стандарт Единый дизайн Площадка гайдов Контур.Гайды 2007 3 4 27 42 дизайнера 2009 2015 2017 2018 2012
32. !32 Контур.Гайды Авторы Контур.Гайдов Общее количество авторов Гайдов за все время их написания человек 20
33. !33
34. !34
35. !35 Контур.Гайды Погружение и причастность Практика, через которую проходит дизайнер, учится формулировать, достаточно глубоко понимает принципы, описанные в Гайдах
36. !36
37. !37 Контур.Гайды Кратко, просто, убедительно Текст, так же как и любой контрол, должен выполнять полезное действие
38. !38
39. !39 Цвет в интерфейсе сразу обращает на себя внимание и несет определенную смысловую нагрузку. С другой стороны, обилие цветов и оттенков размывает их значение. Цвет в интерфейсе следует использовать осторожно и со смыслом. В интерфейсе мы используем цвет для передачи смысла и не используем его для оформления. Цвет — это инструмент управления вниманием пользователя: он помогает выделять главное.
40. !40
41. !41 Контур.Гайды Сложности Проектирование в отрыве от разработки Попытка объять необъятное
42. !42
43. !43
44. !44
45. !45
46. !46
47. !47
48. !48 Контур.Гайды Переиспользование крутых решений Ответы на сложные вопросы, аргументация решений Больше времени на «смысловое» решение задачи
49. !49 Контур.Гайды Как устроены Контур.Гайды технически
50. !50
51. !51
52. !52 Контур.Гайды 2. Контур.Гайды и продуктовые команды Как мы внедряем Гайды и библиотеки на уровне всей компании
53. !53 Контур.Гайды Мы предоставляем удобные инструменты и если с ними легче выполнять свою работу — они распространяют себя сами
54. !54 Контур.Гайды UI Kit в Sketch и Figma для дизайнеров React UI — библиотека готовых компонентов для фронта
55. !55
56. !56 Контур.Гайды Как происходят изменения Что делать если кто-то хочет контрол которого нет Как команды относятся к изменениям
57. !57 Контур.Гайды 3. Контур.Гайды за пределами Контура Чем они могут быть полезны продуктовым дизайнерам
58. !58 Контур.Гайды
59. !59
60. !60
61. !61
62. !62 Контур.Гайды Читайте, комментируйте, делитесь!
63. !63 Контур.Гайды Спасибо!
64. !64 @KonturGuides guides.kontur.ru