Рассказ про создание дизайн-системы для white label продукта Onde, состоящего из более 250-ти приложений в 60-ти странах мира. Наглядные примеры, истории про эксперименты, успехи и ошибки.

1. Правила игры
Валентин Сауть,
дизайнер продукта в onde.app

2. Что такое Onde?
Uber like cервис, работающий по white label модели,
связывающий заказчиков и исполнителей.
Фокус на странах Азии, Ближнего Востока,
Африки и Латинской Америки.

3. Цифры
200 компаний
90 стран
300,000 водителей
7,000,000 пассажиров
8,000,000 заказов в месяц
250,000 в день
14,000 в час

4. Onde продукты
- пассажирское приложение для Android и iOS
- водительское приложение для Android и iOS
- панель управления компанией
- панель управления заказами (диспетчерская)
- вебдеск для заказа через браузер
- промосайт продукта

5. Правила игры понятные всем
- дизайнерам
Правила помогают создать консистентность
и интуитивность интерфейса
- команде разработки
- пользователям

6. Ритм
Нет ритма, нет хип-хопа
На основе ритма строится гармония

7. type-scale.com modularscale.com

8. Размерный ряд
Базовый текст 16pt
Переменный множитель 1.5 — perfect fifth
16 х 1.5 = 24
Межстрочное расстояние 24pt

9. 1, 2, 3, 5, 7, 11, 16, 24, 36, 54, 81, 122, 182, 273, 412…

10. Типографические стили на основе размерного ряда

11. Недостатки
Больше кегль, меньше межстрочное расстояние
На больших кеглях, слишком большое межстрочное,
пришлось ломать ритм.

12. Цветовая система
Меньше — лучше
«А вдруг пригодится?» — твой враг
У каждого цвета свое назначение

13. Цветовая система

14. Адаптация под цвета клиентов
Библиотека цветов с рекомендациями сочетаемости
Важно учитывать контраст цвета,
опираясь на рекомендации доступности WCAG
Щуриться полезно :)

15. Сolorable

16. Единый UIKit (web & apps)
Зачем? Плюсы и минусы

17. Атомарная система
Сокращенная, без шаблонов и полных страниц
Атомы Молекулы Организмы

18. Атомы

19. Молекулы и организмы

20. Условия использования
На вытянутой руке, указательным пальцем
Старые и маленькие телефоны
Отвлекающие факторы
Выделять приоритетное (цветом, размером, отступами)

21. Контент
Важно учитывать размер данных:
ФИО, имейлы, телефоны, адреса, валюты, названия
сервис-типов, размеры изображений и так далее…

22. Локализации
→ fleet size on launch
!
"
#
→ размер флота при запуске
→ tamaño de la flota en el lanzamiento

23. Коммуникация
Команда разработки должна знать об изменениях,
обновлениях и их причинах.
Нет крепкой аргументации? Это фиаско, братан!

30. t.me/sauts — мой канал в Telegram