Successfully reported this slideshow.

Проектирование дизайн-системы Рамблера: трудности перевода

3

Share

1 of 54
1 of 54

Проектирование дизайн-системы Рамблера: трудности перевода

3

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Проектирование дизайн-системы Рамблера: трудности перевода

  1. 1. Саша Ермоленко Руководитель отдела дизайна
  2. 2. Трудности перевода: дизайн-система Рамблера RamblerFront&
  3. 3. Дизайн-система Рамблера RamblerFront&
  4. 4. Дизайн-система 
 Рамблера Документация Исходники Компоненты
  5. 5. Дизайн-система Рамблера Основная документация и описание новых возможностей дизайн-системы обновляется раз в несколько месяцев на внутренних ресурсах компании. Самые актуальные наработки фиксируются в Zeplin. Документация
  6. 6. Дизайн-система Рамблера Основные рабочие исходники хранятся в Sketch и находятся в облачном доступе на корпоративном Dropbox в папках, соответствующих названиям продуктов. Исходники
  7. 7. Компоненты актуализируются в front-end библиотеке которую можно найти на GitHub*. Библиотека представляет из себя NPM-пакет React-компонентов с использованием JSS для работы со стилями. Компоненты Дизайн-система Рамблера
  8. 8. Дизайн-система Рамблера React JSS Рендеринг UI, общая библиотека для всех команд + CSS in JS, техника работы со встроенными стилями
  9. 9. Rambler UI Библиотека front-end компонентов интерфейсов Рамблера
  10. 10. Шаблоны СтраницыАтомы Молекулы Организмы Atomic design Хранение UI-Кита
  11. 11. Дизайн-система 
 Рамблера Организмы Молекулы Атомы Форма Шрифт Шаблоны Search Buttons Dropdowns Inputs Checkboxes Toggles Tooltips Switchers Footer Topline Registration Media News Цвет Сетка Header menu
  12. 12. Цвет Форма Шрифт Сетка Визуальный язык Атомы
  13. 13. Buttons Inputs Dropdowns Tooltips Кросс-продуктовые элементы Молекулы
  14. 14. Topline Header Footer ID Навигация и виджеты Организмы
  15. 15. Новостная вертикаль Глянцевая вертикаль Страница материала Страница списка Вертикали и разделы Шаблоны
  16. 16. Основные продукты 1 2 Медийные вертикали 3 Оставшиеся продукты Этап 1 Этап 2 Этап 3
  17. 17. Процессы дизайн — разработка RamblerFront&
  18. 18. «Я тут дизайнер и не хочу ничего объяснять!» Процессы дизайн — разработка Трудности перевода #1
  19. 19. Процессы дизайн — разработка Проблема доверия появляется там, где мало информации
  20. 20. © Рамблер, 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←→ ←→ ←→
  21. 21. 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
  22. 22. Материалы из Rambler UI Белый и все фоны приобретают прозрачность В качестве ховера используется соседний в оттенок в палитре более светлого тона Синее становится темно-синим, но двух типов — в зависимости от того, заливка это или бордер 10% black #274BC8 Не синее становится синим 70% 40% 70% Исключение! Если в кликабельную зону попадает синяя иконка на неё правило не распространяется. Исключение! В случае если фон уже белый, ховер разрабатывается индивидуально. Топ-100 Игры ВходТВ Ещё Знакомьтесь легко! Топ-100 Игры ВходТВ Ещё Знакомьтесь легко! NORMAL HOVERS поиском по умолчанию Сделать стартовой НАЙТИ NORMAL поиском по умолчанию Сделать стартовой НАЙТИ HOVERS
  23. 23. 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
  24. 24. Процессы дизайн — разработка Удобный формат документации Инструменты коммуникации Регулярные встречи + +
  25. 25. «Line height» vs «Интерлиньяж» Процессы дизайн — разработка Трудности перевода #2
  26. 26. Процессы дизайн — разработка Экспертиза в смежных областях помогает лучше понимать друг-друга
  27. 27. Должен ли дизайнер понимать код, а разработчик понимать принципы дизайна? Процессы дизайн — разработка Трудности перевода #3
  28. 28. Процессы дизайн — разработка Синергия это когда 1+1=3
  29. 29. «Это невозможно сделать» Процессы дизайн — разработка Трудности перевода #4
  30. 30. «Давайте попробуем» Ваша команда «Это невозможно»
  31. 31. Процессы дизайн — разработка Предлагайте альтернативные возможности
  32. 32. «Я там кое-что поменял в макете» Процессы дизайн — разработка Трудности перевода #5
  33. 33. Процессы дизайн — разработка Продукт всегда меняется, многие решения сложно проверить на стадии дизайна
  34. 34. Процессы дизайн — разработка Минор Мелкие технические недостатки вёрстки, практически незаметные для пользователя, с которыми продукт может пойти в релиз Мажор Крупные заметные для пользователей недостатки, сильно влияющие на восприятие продукта и мешающие его запуску + Попросите дизайнеров расставить приоритеты в правках
  35. 35. Например, с помощью маркировки комментариев в Zeplin Процессы дизайн — разработка
  36. 36. «Ну заглядывал в макет пару раз» Процессы дизайн — разработка Трудности перевода #6
  37. 37. «Вёрстка по мотивам макета» Завести почту Пароль Введите e-mail ВОЙТИ Забыли пароль?Вход в почту Запомнить меня Завести почту Пароль Введите e-mail ВОЙТИ Забыли пароль?Вход в почту Запомнить меня Найдите отличия
  38. 38. Завести почту Пароль Введите e-mail ВОЙТИ Забыли пароль?Вход в почту Запомнить меня Завести почту Пароль Введите e-mail ВОЙТИ Забыли пароль?Вход в почту Запомнить меня
  39. 39. Процессы дизайн — разработка В дизайне важен каждый пиксель :)
  40. 40. Процессы дизайн — разработка Время которое занимает «перемещение пикселей» можно было бы потратить на более крутой код
  41. 41. Инструменты для работы с Pixel Perfect Процессы дизайн — разработка Zeplin Функция просмотра окна макета с прозрачностью PerfectPixel Расширение для Chrome, позволяющее создать полупрозрачную подложку Прямые руки Просто используйте превью в качестве фона для проверки качества своей работы 👐
  42. 42. Без сглаживания Не забывайте о сглаживании шрифтов Со сглаживанием +
  43. 43. Spacing Не забывайте о микро-типографике Line height Font weight ВОЙТИ Бренд Рамблера это больше чем Шрифт Шрифт Шрифт
  44. 44. «Этого не было в макете» Процессы дизайн — разработка Трудности перевода #7
  45. 45. Процессы дизайн — разработка Если в дизайн-материалах не хватает важных состояний — скажите об этом, не придумывайте свои
  46. 46. «Покатимся в прод без дизайн-ревью!» Процессы дизайн — разработка Трудности перевода #8
  47. 47. Процессы дизайн — разработка Работа дизайнера заканчивается только после проверки соответствия реализации макету
  48. 48. ‘‘Интерфейс — это тонкая прослойка между командой продукта и пользователями. Процессы дизайн — разработка
  49. 49. Любите свою команду! Процессы дизайн — разработка
  50. 50. Rambler UI Библиотека front-end компонентов интерфейсов Рамблера

×