Дизайн-система. В поисках «идеального компонента»

Роман Ганин, @realetive

Внимание на экран

О себе

О докладе

«Инлайновый контекст форматирования» — http://bit.ly/inline-context

Максим Усачёв aka psywalker и Илья Стрельцын aka SelenIT

О дизайне

Отличительная особенность интерфейсов — высокая «вариативность», т. е. зависимость от их контента.

Самый распространённый тип контента — текст.

Параметры текста

See the Pen Baseline Grid Demonstration by David Khourshid (@davidkpiano) on CodePen.

Заголовок

Модульная шкала – увеличение шрифта строится на известном множителе:

Заголовок

Инструменты:

Заголовок

Заголовок

Список

  1. нумерованный;
определений
Особый тип списка, представляющий структурированный тип данных вида «значение-свойство».

Текст

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие ( внешние) документы, выполнять какие-то и получать
от пользователя.

Текст

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие ( внешние) документы, выполнять какие-то и получать
от пользователя.

Ссылка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие ( внешние) документы, выполнять какие-то и получать
от пользователя.

Ссылка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие ( внешние) документы, выполнять какие-то и получать
от пользователя.

Ссылка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие ( внешние) документы, выполнять какие-то и получать
от пользователя.

Кнопка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие ( внешние) документы, выполнять какие-то и получать
от пользователя.

Кнопка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие ( внешние) документы, выполнять какие-то и получать
от пользователя.

Иконка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие (внешние) документы, выполнять какие-то и получать
от пользователя.

Иконка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие (внешние) документы, выполнять какие-то и получать
от пользователя.

Иконка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие (внешние) документы, выполнять какие-то и получать
от пользователя.

Иконка

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие (внешние) документы, выполнять какие-то и получать
от пользователя.

Поле ввода

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие (внешние) документы, выполнять какие-то и получать
от пользователя.

Текстовая область

Давайте возьмём «сферический текст в вакууме» и наделим его основными интерфейсными свойствами: возможностью ссылаться на другие (внешние) документы, выполнять какие-то и получать
от пользователя.

Раскладка блоков

Модульная сетка

«Гибкая раскладка»

Отступы и цвета

Спасибо за внимание. Вопросы?

Вместо послесловия: