Вот и подъехало #обновление 2

Друзья, мы постепенно закрываем ваши потребности и сегодня добавили в библиотеку новые иконки:

1. Seiling camera
2. Barrier
3. Counter, Meter

А также обновили угол скругления у «Street camera», после госолования на прошлой неделе. Половина дизайнеров проголосовала за скругленный угол — мы такой и сделали:)

Тикет https://trello.com/c/j8CyFg6o/19-иконки-для-видео

#анонс 2

Друзья, анонсируем гайд-процесс, по которому мы будем обновлять и вносить изменения в библиотеки.
Знаю, вас это очень волнует, и нас тоже. Не хочется, чтобы после обновления в макетах всё поехало и сломалось.
Полный гайд в витрине http://design-system.docs.restr.im/library_update_process/

Кратко:
1. Компоненты проверяем по чек-листу;
2. Тестируем и проверяем, где и в каких проектах могут быть проблемы в макетах и в коде;
3. Описываем;
4. Обновляем;
5. Анонсируем;
6. ??????
7. PROFIT!!!!!

#анонс 4

Друзья, мы начинаем череду больших обновлений в Дизайн-Системе. Все изменения для вас не будут сюрпризом, там, где они могут затронут ваши макеты, скорее всего мы уже приходили и общались с вами)

Вот примерный план обновлений:

3.04 Пт. Метрика тех.долга;
7.04 Вт. Новые цвета и описание;
8.04 Ср. Типографика;
9.04 Чт. Новые компоненты (Инпуты, ввод телефона, редактируемое поле, коммент, функц. кнопка, заголовок с навигацией, лейбл);
10.04 Пт. Принципы респонсива;
13.04 Пн. Новые компоненты (обновленные кнопки, контролы, дропдаун, скролл, мультиселект);
15.04 Ср. Принципы валидации полей (Первая статья в дизайн-принципах).

#обновление 3

Новая система цветов

Друзья, вы наверняка видели и пользуетесь цветами из Global Style.
Нам цвета не очень нравились, потому что на этапе старта работ по Дизайн-системе мы перенесли цвета из брендбука, тогда это казалось правильным. Но они, мягко говоря, не очень подходят для интерфейсов. Плюс, для темной темы оформления не у всех цветов были пары, а у тех что были, собственно и не предусматривались для тёмной темы. И это вызывало множество проблем.
Мы проработали новую цветовую схему, в которой все цвета присутствуют для обоих тем оформления, и они прекрасно между собой сочетаются. Цвета выверены по яркости и насыщенности с учётом особенностей восприятия тёмного интерфейса. Также мы проработали черно-белую палитру и выровняли оттенки. Бренд палитру тоже оставили.
Написали подробный гайд, как этим пользоваться.
Таблица изменений в цветах.

Вы можете посмотреть новые цвета непосредственно в библиотеке. Там же рядом лежит и гайд, для удобства.

#обновление 4

Типографика!

Обновили текстовые стили, что нового:
Выровняли размерность у большинства стилей, теперь они органичнее и правильнее работают в адаптиве.
Сделали это, переназначив текущие стили, например в десктопе H2 часто применялся как H1, мы его таким и сделали. Так что в целом в макетах ничего не сломается и не поедет.
H1 который почти нигде не применялся, переименовали в Mega и прописали ему правила использования.
Жирные боди теперь H3 и H4, что логично, т.к. везде применяются как заголовки.
Button как бесполезный стиль, превращаем в Accent, который можно использовать в ценниках, карточках с инфой и т.д.
Гайд в витрине. А также большая подробная таблица изменений старых стилей на новые. Вместе со стилями прилетит и обновление кнопок и инпутов, потому что в них тоже изменятся стили текста, не пугайтесь, это нормально:)

#анонс 5

Друзья, мы добавляем в Дизайн-систему новые компоненты:

Лейбл
Удобный компонент, которым можно показывать статусы в интерфейсе.

Редактируемый текст
Когда нужно добавить возможность редактирования текста, но инпут для этого не подходит.

Функциональная кнопка
Полезная служебная кнопочка с иконкой.

Заголовок с кнопкой назад
Основа простой навигации, это молекула в составе которой заголовок и функциональная кнопка. Компонент адаптивный, в мобильном виде сокращается до заголовка + иконка. Планируем для десктопа еще добавить вариант с хлебными крошками.

Инпут с маской мобильного телефона
Добавляем компонент поля ввода мобильного телефона. А также наши рекомендации к оформлению и валидации этого поля.

#анонс 6

Друзья, мы наконец прописали глубже и полнее принципы респонсива в Дизайн-системе.
Состоят из двух разделов, это конечно же брейкпойнт-фреймы с сеткой и адаптивная система отступов в контенте.
Добавились новые брейкпойны и сетки к ним, это 768 и 1920, а 1280 эволюционировал в 1440.
Новые отступы заложены в виде компонентов, их можно вставлять в макеты, чтобы сверяться с системой и показать разработчику.
Пишите в чат, если что непонятно, всем хорошего дня!

#анонс 7

Привет. С Дизайн-системой работает всё больше новых людей. И чтобы упростить знакомство с системой, мы собрали актуальную презентацию с подробным рассказом о её структуре, принципах и планах развития. И конечно всегда можно задать вопрос в чат:)

#обновление 5

Привет! выкатываем новые компоненты и обновления старых.

Что обновили:

Кнопки
Перевели на автолэйаут. Теперь кнопки содержат в себе иконки, их можно включать и выключать, отдельную кнопку с иконкой снесли.
Выровняли высоту средней кнопки с высотой инпутов.
Добавили новую мелкую кнопку Small.

Чекбокс
Уменьшили квадрат до 20×20, при этом контейнер остался прежний 24×24.
Дефолтный чекбокс сделали серым, теперь не так ядерно выглядит.
Добавили ховер.

Радиокнопки
По аналогии с чекбоксами сделали и радиокнопки, у них уменьшились кружки, и дефолтное состояние сделали серым.

Свитч
Подкоротили, они были длинные.

Теги
Перевели на автолэйаут, добавили мелкие теги, добавили новых состояний.

Чипсы
Перевели на автолэйаут, добавили новых состояний.

Инпуты
Уменьшили высоту контейнера инпута, он был больше видимой части, что вызывало вопросы. Пояснительный текст (Assistive text) под полем остался, но скрыт по умолчанию. Теперь удобнее пользоваться компонентом: не нужно каждый раз скрывать пояснительный текст (в большинстве случаев он не нужен). (в макетах придется вручную поджать размеры инпутов по высоте, к сожалению, избежать этой проблемы никак не получилось)

Дропдаун
Добавили к дропдаунам наконец выпадающий список со скроллом и без.

Что добавили:

Мультиселект
Дропдаун с возможностью выбора тегов из выпадающего списка.

Поле комментария

Скролл

У большинства старых компонентов мы убрали слой BG, за ненадобностью. Теперь цвет фона в компонентах мы задаём полупрозрачными стилями из Global библиотеки, а скругления ставим у фрейма, т.к. стили графики у нас в целом идут из коробки. Сами компоненты BG при этом никуда пока не деваются, их можно использовать для больших плашек и фонов.


История

Мы добавили новый раздел, в котором подробно описываем каждую обнову и анонс, там всегда можно посмотреть что изменилось в Дизайн-системе. Об этом обновлении

#вводная

Всем привет! Сейчас пришло много новых людей в разные команды — дизайнеры, менеджеры, фронтендеры, аналитики, и все так или иначе будут пользоваться Дизайн-системой. Поэтому мы решили на всех провести краткую вводную. Сегодня в 17:00 расскажем, что есть в Системе сейчас, и как с ней работать. Подключайтесь все, кому интересно.

#голосование 2

Друзья, вы не раз просили более классический вариант иконки настроек, и мы подумали провести голосование за лучший вариант.

#обновление 6

Друзья, у нас добавилось немного новых иконок! А также, мы обновляем иконку настроек, после голосования на прошлой неделе вы проголосовали за третий вариант.
Также меняем иконку геопозиции на новую в двух размерах, более понятную. Старая просто нигде не использовалась, и тем более у нас есть простая иконка пина, которая имеет тот же смысл.

Что добавилось:
• SIM
• Phone
• Flickr
• Умный дом в двух вариантах
• Ключ в двух вариантах + цветная 32×32
• VIP
• Mobile refresh
• TV control
• Invoice
• Maestro цветная 32×32

#совет 1

Здравствуйте друзья, и вот настало время первого совета по использованию Дизайн-системы.
Сегодня мы кратенько расскажем про особенности цветовых стилей и прозрачность.
Дизайнеры привыкли задавать цвет объекту и прозрачность отдельно. Получается что это разные атрибуты одного объекта. Однако это не совсем удобно для фронтендеров.

В вёрстке удобнее и правильнее использовать именно стили в RGBa, когда прозрачность не является отдельным атрибутом, а входит в сам стиль. RGBa — где «red, green, blue» цвета соответственно, а «a» это альфа-канал, он же прозрачность. Таким образом уровень прозрачности задаётся глобально на всём проекте и становится меньше вероятностей для ошибок.
Мы заложили и систематизировали палитру Transparent с прозрачными стилями тёмной и светлой градации. Именно эти стили используются как фоны во всех наших компонентах

Стили RGBa мы рекомендуем использовать для типографики и для фонов плашек и блоков. Тогда у вашего фронтендера на проекте не будет больше проблем. Чуть позже мы выпустим более подробный гайд про черную и светлую темы оформления, где расскажем как использовать и эти стили в том числе.