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

#обновление 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 + цветная
• JCB

P.S. Собственно новые и обновленные иконки

#анонс 8

Друзья, мы написали важный текст под названием «Принципы валидации» (ссылка раз, ссылка два).
Этот короткий документ описывает верхнеуровнево наши рекомендации к оформлению полей и отработке форм на ошибки и действия пользователя.
А вот«Валидация полей», (раз, два) — это уже гайд, соблюдение которого, поможет выровнять UX в продуктах и проектах Ростелекома

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

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

Новые:

Поле ввода E-mail. Инпут для адреса электронной почты с маской и валидацией, ссылка раз, ссылка два

Поле ввода суммы. Еще один инпут с маской, используйте, когда нужно ввести значение в рублях и копейках, раз, два

Степпер. Полезный контрол для пошагового изменения параметра, раз, два

Поле ввода числа со степпером. Удобный инпут с кнопками плюс/минус для чисел, раз, два

Табы-кнопки / Радиогруппа. Два типа табов с кнопками. Акцентный привлекает внимание пользователя и пригодится на промо-сайтах. Стандартный подойдёт для интерфейсов и может использоваться как контрол для переключения состояния (радиогруппа), раз, два


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

Обновленные классические табы. Перевели табы на Auto Layout. Используйте табы с прокруткой для контента с множеством вкладок. Табы фиксированной ширины хорошо подойдут для 2-3 вкладок в ограниченном пространстве, раз, два

К заголовку с кнопкой «Назад» добавилась версия для планшетов с горизонтальным размещением. Как и для десктопа, в этой версии кнопка «Назад» слева, заголовок у пятой колонки в сетке для 1024, раз, два

И мы удалили устаревшие кнопки с иконками, они были без автолэйаута, ими никто не пользовался, да и вообще иконки сейчас встроены во все кнопки)


P.S. как вы могли заметить, теперь мы указываем по две ссылки на каждый компонент — одна ссылка доступна из капсюля, а вторая из впн. Сайт идентичен по обеим ссылкам, отличается только домен. Таковы технические ограничения :) но они временные. Напишите в чат, если у вас есть сложности с доступом к сайту:)

Друзья, у нас пополнение инструментария! А именно внутренние контентные сетки. Звучит страшно, но работать с этим реально удобно. Они помогут вам быстро и просто разместить контент на странице с учётом адаптива. Описание раз, два
P.S. Также прилетит апдейт на кнопки, инпуты и лейблы, не переживайте, это техническое обновление, в макетах ничего не изменится

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

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

1) Мы не добавляем новые компоненты, а используем текущие полные кнопки, в которых благодаря автолэйауту выключаем текст и оставляем одну иконки. Это работает, но кнопки продолговатые получаются, из-за боковых отступов

2) Второй вариант — мы добавляем новые компоненты, конкретно укороченные кнопки, и они квадратные.

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

P.S. Народ, хочу еще раз уточнить, что у кнопок колбаской больше площадь нажатия для пальца, и проще библиотека. А квадратные эстетичнее, но надо плодить новых компонентов

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

Rounded Small → Rounded;
Rounded Large → Circular.

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

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

#анонс 11

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

Глубина в интерфейсе;

Нулевой уровень;

Уровни и тени;

Затемняющий слой;

Визуальная иерархия;

Уровни при взаимодействии;

Уровни типовых элементов.

Совет #2

У нас есть чат! В чате можно спросить совета, поделиться наработками, болями или подискутировать. Велкам. @chat_ds

Совет #3

У нас на сайте дизайн-системы есть потрясающий гайд Культура ведения сценариев. Там подробно и с примерами описано то, что мы вчера рассказывали на лектории. Как оформлять сценарии, чтобы взаимодействовать с ними было удобно всей команде: аналитикам, фронтендерам, менеджерам, руководителям. Как навести порядок в файлах фигмы и не погрязнуть в хаосе. Все советы в гайде позволят вам стать прозрачнее для команды и поднять эффективность всего проекта в целом.

#анонс 12

Друзья, мы продолжаем наполнять библиотеку компонентов.

Добавили поле ввода даты с масками и календарём.

И сам календарь, Date Picker, с выбором дня, периода, месяца и года.

Новые квадратные/круглые кнопки-иконки. Пригодятся для компактного размещения кнопок действия.

Плавающая кнопка, аналог Floating Action Button, с возможностью выбора дополнительных действий.

Обновление 9

Друзья, сегодня очередное обновление. Мы немного изменили контраст лейблов и ошибок в инпутах и дропдаунах, чтобы сделать наши интерфейсы доступнее для пользователей со слабым зрением. Что изменилось:
• текст ошибок и лейблы инпутов при ошибке сделали контрастнее;
• лейбл незаполненного поля ввода и инпутов так же стал контрастнее;
• в полях ввода геометрического стиля лейблы при фокусе теперь акцентного цвета, при ошибке красного.

Также, по вашей просьбе, мы добавили ко всем инпутам и дропдаунам состояние «Неактивный заполненный» Disabled Filled.

И, конечно, новые компоненты!

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

Новый контрол — ползунок Slider для быстрой настройки или выбора значения одним жестом.

С сегодняшнего дня доступ на просмотр библиотек дизайн-системы открыт для всех из команды RTK IT, а не только по инвайту