SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Проектирование дизайн-системы Рамблера: трудности перевода
5.
Дизайн-система Рамблера
Основная документация и описание новых
возможностей дизайн-системы обновляется
раз в несколько месяцев на внутренних
ресурсах компании. Самые актуальные
наработки фиксируются в Zeplin.
Документация
6.
Дизайн-система Рамблера
Основные рабочие исходники хранятся
в Sketch и находятся в облачном доступе
на корпоративном Dropbox в папках,
соответствующих названиям продуктов.
Исходники
7.
Компоненты актуализируются в front-end
библиотеке которую можно найти на GitHub*.
Библиотека представляет из себя NPM-пакет
React-компонентов с использованием JSS для
работы со стилями.
Компоненты
Дизайн-система Рамблера
8.
Дизайн-система Рамблера
React JSS
Рендеринг UI, общая
библиотека для всех команд
+
CSS in JS, техника работы со
встроенными стилями
9.
Rambler UI
Библиотека front-end
компонентов интерфейсов
Рамблера
22.
Материалы из Rambler UI
Белый и все фоны приобретают
прозрачность
В качестве ховера используется
соседний в оттенок в палитре более
светлого тона
Синее становится темно-синим,
но двух типов — в зависимости от того,
заливка это или бордер
10% black
#274BC8
Не синее становится синим
70%
40%
70%
Исключение! Если в кликабельную
зону попадает синяя иконка на неё
правило не распространяется.
Исключение! В случае если фон
уже белый, ховер разрабатывается
индивидуально.
Топ-100 Игры ВходТВ Ещё Знакомьтесь легко!
Топ-100 Игры ВходТВ Ещё Знакомьтесь легко!
NORMAL
HOVERS
поиском по умолчанию Сделать стартовой
НАЙТИ
NORMAL
поиском по умолчанию Сделать стартовой
НАЙТИ
HOVERS
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.
Процессы дизайн — разработка
Удобный формат
документации
Инструменты
коммуникации
Регулярные
встречи
+ +
25.
«Line height» vs
«Интерлиньяж»
Процессы дизайн — разработка
Трудности перевода #2
26.
Процессы дизайн — разработка
Экспертиза в смежных
областях помогает лучше
понимать друг-друга
27.
Должен ли дизайнер
понимать код, а
разработчик понимать
принципы дизайна?
Процессы дизайн — разработка
Трудности перевода #3
28.
Процессы дизайн — разработка
Синергия это когда
1+1=3
29.
«Это невозможно
сделать»
Процессы дизайн — разработка
Трудности перевода #4
30.
«Давайте попробуем»
Ваша команда
«Это невозможно»
31.
Процессы дизайн — разработка
Предлагайте
альтернативные
возможности
32.
«Я там кое-что поменял
в макете»
Процессы дизайн — разработка
Трудности перевода #5
33.
Процессы дизайн — разработка
Продукт всегда меняется,
многие решения сложно
проверить на стадии
дизайна
34.
Процессы дизайн — разработка
Минор
Мелкие технические
недостатки вёрстки,
практически незаметные
для пользователя, с
которыми продукт может
пойти в релиз
Мажор
Крупные заметные для
пользователей
недостатки, сильно
влияющие на восприятие
продукта и мешающие
его запуску
+
Попросите
дизайнеров
расставить
приоритеты в
правках
35.
Например, с
помощью маркировки
комментариев в Zeplin
Процессы дизайн — разработка
36.
«Ну заглядывал в макет
пару раз»
Процессы дизайн — разработка
Трудности перевода #6
37.
«Вёрстка по мотивам макета»
Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня
Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня
Найдите отличия
38.
Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня
Завести почту
Пароль
Введите e-mail
ВОЙТИ
Забыли пароль?Вход в почту
Запомнить меня
39.
Процессы дизайн — разработка
В дизайне важен
каждый пиксель :)
40.
Процессы дизайн — разработка
Время которое занимает
«перемещение пикселей»
можно было бы потратить
на более крутой код
41.
Инструменты для работы с Pixel Perfect
Процессы дизайн — разработка
Zeplin
Функция просмотра окна
макета с прозрачностью
PerfectPixel
Расширение для Chrome,
позволяющее создать
полупрозрачную подложку
Прямые руки
Просто используйте превью
в качестве фона для
проверки качества своей
работы
👐
42.
Без сглаживания
Не забывайте о сглаживании шрифтов
Со сглаживанием
+
43.
Spacing
Не забывайте о микро-типографике
Line height Font weight
ВОЙТИ
Бренд
Рамблера
это больше
чем
Шрифт
Шрифт
Шрифт
44.
«Этого не было
в макете»
Процессы дизайн — разработка
Трудности перевода #7
45.
Процессы дизайн — разработка
Если в дизайн-материалах не
хватает важных состояний —
скажите об этом, не
придумывайте свои
46.
«Покатимся в прод без
дизайн-ревью!»
Процессы дизайн — разработка
Трудности перевода #8
47.
Процессы дизайн — разработка
Работа дизайнера
заканчивается только после
проверки соответствия
реализации макету
48.
‘‘Интерфейс — это тонкая прослойка
между командой продукта и
пользователями.
Процессы дизайн — разработка
49.
Любите свою команду!
Процессы дизайн — разработка
50.
Rambler UI
Библиотека front-end
компонентов интерфейсов
Рамблера