Построение здоровых и долгосрочных отношений дизайна и разработки на примере создания дизайн-система Рамблера.

2. Саша
Ермоленко
Руководитель отдела дизайна

3. Трудности перевода:
дизайн-система Рамблера
RamblerFront&

6. Дизайн-система Рамблера
RamblerFront&

7. Дизайн-система
Рамблера
Документация
Исходники
Компоненты

8. Дизайн-система Рамблера
Основная документация и описание новых
возможностей дизайн-системы обновляется
раз в несколько месяцев на внутренних
ресурсах компании. Самые актуальные
наработки фиксируются в Zeplin.
Документация

9. Дизайн-система Рамблера
Основные рабочие исходники хранятся
в Sketch и находятся в облачном доступе
на корпоративном Dropbox в папках,
соответствующих названиям продуктов.
Исходники

10. Компоненты актуализируются в front-end
библиотеке которую можно найти на GitHub*.
Библиотека представляет из себя NPM-пакет
React-компонентов с использованием JSS для
работы со стилями.
Компоненты
Дизайн-система Рамблера

11. Дизайн-система Рамблера
React JSS
Рендеринг UI, общая
библиотека для всех команд
+
CSS in JS, техника работы со
встроенными стилями

12. Rambler UI
Библиотека front-end
компонентов интерфейсов
Рамблера

13. Шаблоны СтраницыАтомы Молекулы Организмы
Atomic design
Хранение UI-Кита

14. Дизайн-система
Рамблера
Организмы
Молекулы
Атомы
Форма
Шрифт
Шаблоны
Search
Buttons
Dropdowns
Inputs
Checkboxes
Toggles
Tooltips
Switchers
Footer
Topline
Registration
Media
News
Цвет
Сетка
Header menu

15. Цвет Форма Шрифт Сетка
Визуальный язык
Атомы

16. Buttons Inputs Dropdowns Tooltips
Кросс-продуктовые элементы
Молекулы

17. Topline Header Footer ID
Навигация и виджеты
Организмы

18. Новостная
вертикаль
Глянцевая
вертикаль
Страница
материала
Страница
списка
Вертикали и разделы
Шаблоны

19. Основные продукты
1 2
Медийные вертикали
3
Оставшиеся продукты
Этап 1 Этап 2 Этап 3

20. Процессы дизайн —
разработка
RamblerFront&

21. «Я тут дизайнер
и не хочу ничего
объяснять!»
Процессы дизайн — разработка
Трудности перевода #1

23. Процессы дизайн — разработка
Проблема доверия
появляется там, где мало
информации

24. © Рамблер, 2017 Cтарый дизайн Мобильная версия Мобильные приложения Реклама Помощь Вакансии Пользовательское соглашение 18+
15
15
20 20 20 20 20 20 20 20
55
101010101010
10 10
←→
Например, путешествие в Голландию
Войти в почтуНАЙТИ
Сделать поиском по умолчанию Сделать стартовой
15
252515
25 30
ВходЗнакомьтесь легко!Рамблер Новости Почта Гороскопы Знакомства Класс Ответы Топ-100 Игры ТВ Ещё
15
20 20 20 20 20 20 20 20 20 20 20 2555 252525←→ ←→ ←→

25. Outline
REGULARREGULAR
REGULAR
HOVERHOVER
HOVER
ACTIVEACTIVE
ACTIVE
LOADINGLOADING
LOADING
DISABLEDDISABLED
DISABLED
BUTTON
Regular blue
REGULARREGULAR
REGULAR
HOVERHOVER
HOVER
ACTIVEACTIVE
ACTIVE
LOADINGLOADING
LOADING
DISABLEDDISABLED
DISABLED
BUTTON BUTTONBUTTONBUTTONBUTTON BUTTONBUTTON
BUTTONBUTTON BUTTONBUTTONBUTTONBUTTON BUTTONBUTTON
BUTTONBUTTON
BUTTONBUTTON BUTTONBUTTON BUTTONBUTTON
With icons
BUTTONBUTTON BUTTONBUTTON BUTTONBUTTON
BUTTONBUTTON
REGULAR HOVER ACTIVE LOADING DISABLED
BUTTON BUTTONBUTTON BUTTON
BUTTON BUTTONBUTTON BUTTON
BUTTON BUTTON BUTTON
BUTTON BUTTON BUTTON
BUTTON
BUTTON

26. Материалы из Rambler UI
Белый и все фоны приобретают
прозрачность
В качестве ховера используется
соседний в оттенок в палитре более
светлого тона
Синее становится темно-синим,
но двух типов — в зависимости от того,
заливка это или бордер
10% black
#274BC8
Не синее становится синим
70%
40%
70%
Исключение! Если в кликабельную
зону попадает синяя иконка на неё
правило не распространяется.
Исключение! В случае если фон
уже белый, ховер разрабатывается
индивидуально.
Топ-100 Игры ВходТВ Ещё Знакомьтесь легко!
Топ-100 Игры ВходТВ Ещё Знакомьтесь легко!
NORMAL
HOVERS
поиском по умолчанию Сделать стартовой
НАЙТИ
NORMAL
поиском по умолчанию Сделать стартовой
НАЙТИ
HOVERS

27. Media fonts
CorsicaH1 Medium 30 px / 40 px
CorsicaH2 Medium 24 px / 35 px
CorsicaH3 Medium 20 px / 30 px
GeorgiaText Regular 18 px / 28 px / 20 px
GeorgiaEpigraph Italic 22 px / 32 px
GeorgiaQuote Italic 22 px / 32 px / 20 px
RobotoSource Regular / Uppercase 11 px
RobotoTime stamp Regular 12 px
RobotoDescription Regular 12 px / 15 px
font-size / line-height / paragraph
Headline
Обзор зарубежных СМИ
планы Трампа, альтернативный
РАМБЛЕР/НОВОСТИ 5 минут назад
Новости Москвы Политика Экономика
15 PX
15 PX
20 PX
H1
Source
Time stamp

28. Процессы дизайн — разработка
Удобный формат
документации
Инструменты
коммуникации
Регулярные
встречи
+ +

29. «Line height» vs
«Интерлиньяж»
Процессы дизайн — разработка
Трудности перевода #2

30. Процессы дизайн — разработка
Экспертиза в смежных
областях помогает лучше
понимать друг-друга

31. Должен ли дизайнер
понимать код, а
разработчик понимать
принципы дизайна?
Процессы дизайн — разработка
Трудности перевода #3

32. Процессы дизайн — разработка
Синергия это когда
1+1=3

33. «Это невозможно
сделать»
Процессы дизайн — разработка
Трудности перевода #4

34. «Давайте попробуем»
Ваша команда
«Это невозможно»

35. Процессы дизайн — разработка
Предлагайте
альтернативные
возможности

36. «Я там кое-что поменял
в макете»
Процессы дизайн — разработка
Трудности перевода #5

37. Процессы дизайн — разработка
Продукт всегда меняется,
многие решения сложно
проверить на стадии
дизайна

38. Процессы дизайн — разработка
Минор
Мелкие технические
недостатки вёрстки,
практически незаметные
для пользователя, с
которыми продукт может
пойти в релиз
Мажор
Крупные заметные для
пользователей
недостатки, сильно
влияющие на восприятие
продукта и мешающие
его запуску
+
Попросите
дизайнеров
расставить
приоритеты в
правках

39. Например, с
помощью маркировки
комментариев в Zeplin
Процессы дизайн — разработка

40. «Ну заглядывал в макет
пару раз»
Процессы дизайн — разработка
Трудности перевода #6

41. «Вёрстка по мотивам макета»
Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня
Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня
Найдите отличия

42. Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня
Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня

43. Процессы дизайн — разработка
В дизайне важен
каждый пиксель :)

44. Процессы дизайн — разработка
Время которое занимает
«перемещение пикселей»
можно было бы потратить
на более крутой код

45. Инструменты для работы с Pixel Perfect
Процессы дизайн — разработка
Zeplin
Функция просмотра окна
макета с прозрачностью
PerfectPixel
Расширение для Chrome,
позволяющее создать
полупрозрачную подложку
Прямые руки
Просто используйте превью
в качестве фона для
проверки качества своей
работы
👐

46. Без сглаживания
Не забывайте о сглаживании шрифтов
Со сглаживанием
+

47. Spacing
Не забывайте о микро-типографике
Line height Font weight
ВОЙТИ
Бренд
Рамблера
это больше
чем
Шрифт
Шрифт
Шрифт

48. «Этого не было
в макете»
Процессы дизайн — разработка
Трудности перевода #7

49. Процессы дизайн — разработка
Если в дизайн-материалах не
хватает важных состояний —
скажите об этом, не
придумывайте свои

50. «Покатимся в прод без
дизайн-ревью!»
Процессы дизайн — разработка
Трудности перевода #8

51. Процессы дизайн — разработка
Работа дизайнера
заканчивается только после
проверки соответствия
реализации макету

52. ‘‘Интерфейс — это тонкая прослойка
между командой продукта и
пользователями.
Процессы дизайн — разработка

53. Любите свою команду!
Процессы дизайн — разработка

54. Rambler UI
Библиотека front-end
компонентов интерфейсов
Рамблера