#анонс 4
Друзья, мы начинаем череду больших обновлений в Дизайн-Системе. Все изменения для вас не будут сюрпризом, там, где они могут затронут ваши макеты, скорее всего мы уже приходили и общались с вами)
Вот примерный план обновлений:
3.04 Пт. Метрика тех.долга;
7.04 Вт. Новые цвета и описание;
8.04 Ср. Типографика;
9.04 Чт. Новые компоненты (Инпуты, ввод телефона, редактируемое поле, коммент, функц. кнопка, заголовок с навигацией, лейбл);
10.04 Пт. Принципы респонсива;
13.04 Пн. Новые компоненты (обновленные кнопки, контролы, дропдаун, скролл, мультиселект);
15.04 Ср. Принципы валидации полей (Первая статья в дизайн-принципах).
Друзья, мы начинаем череду больших обновлений в Дизайн-Системе. Все изменения для вас не будут сюрпризом, там, где они могут затронут ваши макеты, скорее всего мы уже приходили и общались с вами)
Вот примерный план обновлений:
3.04 Пт. Метрика тех.долга;
7.04 Вт. Новые цвета и описание;
8.04 Ср. Типографика;
9.04 Чт. Новые компоненты (Инпуты, ввод телефона, редактируемое поле, коммент, функц. кнопка, заголовок с навигацией, лейбл);
10.04 Пт. Принципы респонсива;
13.04 Пн. Новые компоненты (обновленные кнопки, контролы, дропдаун, скролл, мультиселект);
15.04 Ср. Принципы валидации полей (Первая статья в дизайн-принципах).
#обновление 3
Новая система цветов
Друзья, вы наверняка видели и пользуетесь цветами из Global Style.
Нам цвета не очень нравились, потому что на этапе старта работ по Дизайн-системе мы перенесли цвета из брендбука, тогда это казалось правильным. Но они, мягко говоря, не очень подходят для интерфейсов. Плюс, для темной темы оформления не у всех цветов были пары, а у тех что были, собственно и не предусматривались для тёмной темы. И это вызывало множество проблем.
Мы проработали новую цветовую схему, в которой все цвета присутствуют для обоих тем оформления, и они прекрасно между собой сочетаются. Цвета выверены по яркости и насыщенности с учётом особенностей восприятия тёмного интерфейса. Также мы проработали черно-белую палитру и выровняли оттенки. Бренд палитру тоже оставили.
Написали подробный гайд, как этим пользоваться.
Таблица изменений в цветах.
Новая система цветов
Друзья, вы наверняка видели и пользуетесь цветами из Global Style.
Нам цвета не очень нравились, потому что на этапе старта работ по Дизайн-системе мы перенесли цвета из брендбука, тогда это казалось правильным. Но они, мягко говоря, не очень подходят для интерфейсов. Плюс, для темной темы оформления не у всех цветов были пары, а у тех что были, собственно и не предусматривались для тёмной темы. И это вызывало множество проблем.
Мы проработали новую цветовую схему, в которой все цвета присутствуют для обоих тем оформления, и они прекрасно между собой сочетаются. Цвета выверены по яркости и насыщенности с учётом особенностей восприятия тёмного интерфейса. Также мы проработали черно-белую палитру и выровняли оттенки. Бренд палитру тоже оставили.
Написали подробный гайд, как этим пользоваться.
Таблица изменений в цветах.
Вы можете посмотреть новые цвета непосредственно в библиотеке. Там же рядом лежит и гайд, для удобства.
#обновление 4
Типографика!
Обновили текстовые стили, что нового:
Выровняли размерность у большинства стилей, теперь они органичнее и правильнее работают в адаптиве.
Сделали это, переназначив текущие стили, например в десктопе H2 часто применялся как H1, мы его таким и сделали. Так что в целом в макетах ничего не сломается и не поедет.
H1 который почти нигде не применялся, переименовали в Mega и прописали ему правила использования.
Жирные боди теперь H3 и H4, что логично, т.к. везде применяются как заголовки.
Button как бесполезный стиль, превращаем в Accent, который можно использовать в ценниках, карточках с инфой и т.д.
Гайд в витрине. А также большая подробная таблица изменений старых стилей на новые. Вместе со стилями прилетит и обновление кнопок и инпутов, потому что в них тоже изменятся стили текста, не пугайтесь, это нормально:)
Типографика!
Обновили текстовые стили, что нового:
Выровняли размерность у большинства стилей, теперь они органичнее и правильнее работают в адаптиве.
Сделали это, переназначив текущие стили, например в десктопе H2 часто применялся как H1, мы его таким и сделали. Так что в целом в макетах ничего не сломается и не поедет.
H1 который почти нигде не применялся, переименовали в Mega и прописали ему правила использования.
Жирные боди теперь H3 и H4, что логично, т.к. везде применяются как заголовки.
Button как бесполезный стиль, превращаем в Accent, который можно использовать в ценниках, карточках с инфой и т.д.
Гайд в витрине. А также большая подробная таблица изменений старых стилей на новые. Вместе со стилями прилетит и обновление кнопок и инпутов, потому что в них тоже изменятся стили текста, не пугайтесь, это нормально:)
#анонс 5
Друзья, мы добавляем в Дизайн-систему новые компоненты:
Лейбл
Удобный компонент, которым можно показывать статусы в интерфейсе.
Редактируемый текст
Когда нужно добавить возможность редактирования текста, но инпут для этого не подходит.
Функциональная кнопка
Полезная служебная кнопочка с иконкой.
Заголовок с кнопкой назад
Основа простой навигации, это молекула в составе которой заголовок и функциональная кнопка. Компонент адаптивный, в мобильном виде сокращается до заголовка + иконка. Планируем для десктопа еще добавить вариант с хлебными крошками.
Инпут с маской мобильного телефона
Добавляем компонент поля ввода мобильного телефона. А также наши рекомендации к оформлению и валидации этого поля.
Друзья, мы добавляем в Дизайн-систему новые компоненты:
Лейбл
Удобный компонент, которым можно показывать статусы в интерфейсе.
Редактируемый текст
Когда нужно добавить возможность редактирования текста, но инпут для этого не подходит.
Функциональная кнопка
Полезная служебная кнопочка с иконкой.
Заголовок с кнопкой назад
Основа простой навигации, это молекула в составе которой заголовок и функциональная кнопка. Компонент адаптивный, в мобильном виде сокращается до заголовка + иконка. Планируем для десктопа еще добавить вариант с хлебными крошками.
Инпут с маской мобильного телефона
Добавляем компонент поля ввода мобильного телефона. А также наши рекомендации к оформлению и валидации этого поля.
#анонс 6
Друзья, мы наконец прописали глубже и полнее принципы респонсива в Дизайн-системе.
Состоят из двух разделов, это конечно же брейкпойнт-фреймы с сеткой и адаптивная система отступов в контенте.
Добавились новые брейкпойны и сетки к ним, это 768 и 1920, а 1280 эволюционировал в 1440.
Новые отступы заложены в виде компонентов, их можно вставлять в макеты, чтобы сверяться с системой и показать разработчику.
Пишите в чат, если что непонятно, всем хорошего дня!
Друзья, мы наконец прописали глубже и полнее принципы респонсива в Дизайн-системе.
Состоят из двух разделов, это конечно же брейкпойнт-фреймы с сеткой и адаптивная система отступов в контенте.
Добавились новые брейкпойны и сетки к ним, это 768 и 1920, а 1280 эволюционировал в 1440.
Новые отступы заложены в виде компонентов, их можно вставлять в макеты, чтобы сверяться с системой и показать разработчику.
Пишите в чат, если что непонятно, всем хорошего дня!
#анонс 7
Привет. С Дизайн-системой работает всё больше новых людей. И чтобы упростить знакомство с системой, мы собрали актуальную презентацию с подробным рассказом о её структуре, принципах и планах развития. И конечно всегда можно задать вопрос в чат:)
Привет. С Дизайн-системой работает всё больше новых людей. И чтобы упростить знакомство с системой, мы собрали актуальную презентацию с подробным рассказом о её структуре, принципах и планах развития. И конечно всегда можно задать вопрос в чат:)
Что обновили:
Кнопки
Перевели на автолэйаут. Теперь кнопки содержат в себе иконки, их можно включать и выключать, отдельную кнопку с иконкой снесли.
Выровняли высоту средней кнопки с высотой инпутов.
Добавили новую мелкую кнопку Small.
Чекбокс
Уменьшили квадрат до 20×20, при этом контейнер остался прежний 24×24.
Дефолтный чекбокс сделали серым, теперь не так ядерно выглядит.
Добавили ховер.
Радиокнопки
По аналогии с чекбоксами сделали и радиокнопки, у них уменьшились кружки, и дефолтное состояние сделали серым.
Свитч
Подкоротили, они были длинные.
Теги
Перевели на автолэйаут, добавили мелкие теги, добавили новых состояний.
Чипсы
Перевели на автолэйаут, добавили новых состояний.
Инпуты
Уменьшили высоту контейнера инпута, он был больше видимой части, что вызывало вопросы. Пояснительный текст (Assistive text) под полем остался, но скрыт по умолчанию. Теперь удобнее пользоваться компонентом: не нужно каждый раз скрывать пояснительный текст (в большинстве случаев он не нужен). (в макетах придется вручную поджать размеры инпутов по высоте, к сожалению, избежать этой проблемы никак не получилось)
Дропдаун
Добавили к дропдаунам наконец выпадающий список со скроллом и без.
Кнопки
Перевели на автолэйаут. Теперь кнопки содержат в себе иконки, их можно включать и выключать, отдельную кнопку с иконкой снесли.
Выровняли высоту средней кнопки с высотой инпутов.
Добавили новую мелкую кнопку Small.
Чекбокс
Уменьшили квадрат до 20×20, при этом контейнер остался прежний 24×24.
Дефолтный чекбокс сделали серым, теперь не так ядерно выглядит.
Добавили ховер.
Радиокнопки
По аналогии с чекбоксами сделали и радиокнопки, у них уменьшились кружки, и дефолтное состояние сделали серым.
Свитч
Подкоротили, они были длинные.
Теги
Перевели на автолэйаут, добавили мелкие теги, добавили новых состояний.
Чипсы
Перевели на автолэйаут, добавили новых состояний.
Инпуты
Уменьшили высоту контейнера инпута, он был больше видимой части, что вызывало вопросы. Пояснительный текст (Assistive text) под полем остался, но скрыт по умолчанию. Теперь удобнее пользоваться компонентом: не нужно каждый раз скрывать пояснительный текст (в большинстве случаев он не нужен). (в макетах придется вручную поджать размеры инпутов по высоте, к сожалению, избежать этой проблемы никак не получилось)
Дропдаун
Добавили к дропдаунам наконец выпадающий список со скроллом и без.
Что добавили:
Мультиселект
Дропдаун с возможностью выбора тегов из выпадающего списка.
Поле комментария
Скролл
У большинства старых компонентов мы убрали слой BG, за ненадобностью. Теперь цвет фона в компонентах мы задаём полупрозрачными стилями из Global библиотеки, а скругления ставим у фрейма, т.к. стили графики у нас в целом идут из коробки. Сами компоненты BG при этом никуда пока не деваются, их можно использовать для больших плашек и фонов.
История
Мы добавили новый раздел, в котором подробно описываем каждую обнову и анонс, там всегда можно посмотреть что изменилось в Дизайн-системе. Об этом обновлении
Мультиселект
Дропдаун с возможностью выбора тегов из выпадающего списка.
Поле комментария
Скролл
У большинства старых компонентов мы убрали слой BG, за ненадобностью. Теперь цвет фона в компонентах мы задаём полупрозрачными стилями из Global библиотеки, а скругления ставим у фрейма, т.к. стили графики у нас в целом идут из коробки. Сами компоненты BG при этом никуда пока не деваются, их можно использовать для больших плашек и фонов.
История
Мы добавили новый раздел, в котором подробно описываем каждую обнову и анонс, там всегда можно посмотреть что изменилось в Дизайн-системе. Об этом обновлении
#вводная
Всем привет! Сейчас пришло много новых людей в разные команды — дизайнеры, менеджеры, фронтендеры, аналитики, и все так или иначе будут пользоваться Дизайн-системой. Поэтому мы решили на всех провести краткую вводную. Сегодня в 17:00 расскажем, что есть в Системе сейчас, и как с ней работать. Подключайтесь все, кому интересно.
Всем привет! Сейчас пришло много новых людей в разные команды — дизайнеры, менеджеры, фронтендеры, аналитики, и все так или иначе будут пользоваться Дизайн-системой. Поэтому мы решили на всех провести краткую вводную. Сегодня в 17:00 расскажем, что есть в Системе сейчас, и как с ней работать. Подключайтесь все, кому интересно.
#голосование 2
Друзья, вы не раз просили более классический вариант иконки настроек, и мы подумали провести голосование за лучший вариант.
Друзья, вы не раз просили более классический вариант иконки настроек, и мы подумали провести голосование за лучший вариант.
#обновление 6
Друзья, у нас добавилось немного новых иконок! А также, мы обновляем иконку настроек, после голосования на прошлой неделе вы проголосовали за третий вариант.
Также меняем иконку геопозиции на новую в двух размерах, более понятную. Старая просто нигде не использовалась, и тем более у нас есть простая иконка пина, которая имеет тот же смысл.
Друзья, у нас добавилось немного новых иконок! А также, мы обновляем иконку настроек, после голосования на прошлой неделе вы проголосовали за третий вариант.
Также меняем иконку геопозиции на новую в двух размерах, более понятную. Старая просто нигде не использовалась, и тем более у нас есть простая иконка пина, которая имеет тот же смысл.
#совет 1
Здравствуйте друзья, и вот настало время первого совета по использованию Дизайн-системы.
Сегодня мы кратенько расскажем про особенности цветовых стилей и прозрачность.
Дизайнеры привыкли задавать цвет объекту и прозрачность отдельно. Получается что это разные атрибуты одного объекта. Однако это не совсем удобно для фронтендеров.
Здравствуйте друзья, и вот настало время первого совета по использованию Дизайн-системы.
Сегодня мы кратенько расскажем про особенности цветовых стилей и прозрачность.
Дизайнеры привыкли задавать цвет объекту и прозрачность отдельно. Получается что это разные атрибуты одного объекта. Однако это не совсем удобно для фронтендеров.
В вёрстке удобнее и правильнее использовать именно стили в RGBa, когда прозрачность не является отдельным атрибутом, а входит в сам стиль. RGBa — где «red, green, blue» цвета соответственно, а «a» это альфа-канал, он же прозрачность. Таким образом уровень прозрачности задаётся глобально на всём проекте и становится меньше вероятностей для ошибок.
Мы заложили и систематизировали палитру Transparent с прозрачными стилями тёмной и светлой градации. Именно эти стили используются как фоны во всех наших компонентах
Мы заложили и систематизировали палитру Transparent с прозрачными стилями тёмной и светлой градации. Именно эти стили используются как фоны во всех наших компонентах
#обновление 7
Добавляем ещё новых иконок и меняем некоторые существующие. Обновляем мастеркард, маэстро и визу, иконку книжки сделали более узнаваемой, а также добавили замочные скважины в иконках замков.
Новые:
Добавляем ещё новых иконок и меняем некоторые существующие. Обновляем мастеркард, маэстро и визу, иконку книжки сделали более узнаваемой, а также добавили замочные скважины в иконках замков.
Новые:
• Flag • Voice • Unlimited • Game • Drop • Set of minutes • Subscription • Console • Socket • Motion • Fire • Light bulb • Viber Stroke • WhatsApp Stroke • TamTam Stroke • Office 366 • Licey Fill • Licey Stroke • Eset Nod + две цветных • Dr. Web + цветная • JCBThis media is not supported in your browser
VIEW IN TELEGRAM
#анонс 8
Друзья, мы написали важный текст под названием «Принципы валидации» (ссылка раз, ссылка два).
Этот короткий документ описывает верхнеуровнево наши рекомендации к оформлению полей и отработке форм на ошибки и действия пользователя.
А вот«Валидация полей», (раз, два) — это уже гайд, соблюдение которого, поможет выровнять UX в продуктах и проектах Ростелекома
Друзья, мы написали важный текст под названием «Принципы валидации» (ссылка раз, ссылка два).
Этот короткий документ описывает верхнеуровнево наши рекомендации к оформлению полей и отработке форм на ошибки и действия пользователя.
А вот«Валидация полей», (раз, два) — это уже гайд, соблюдение которого, поможет выровнять UX в продуктах и проектах Ростелекома