Ребята из соседней команды запилили мерч для наших дизайнеров и написали статью как они это делали.

Ссылка на статью

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

Вообще сделать интересный мерч — это всегда очень сложно, я делал несколько раз мерч своего продукта и знаю какая это боль.

Во-первых дизайн. Никто не любит быть ходячей рекламой, если вы печатаете футболки с логотипом, то люди наденут её в офис или на конференцию, это окей, но не более. Так, чтобы по-кайфу было носить — это надо ещё постараться и соблюсти баланс между стилем для ежедневной носки и задачами брендинга.
Во-вторых менеджмент — много его, это и дизайн-менеджмент и производственный менеджмент. Не бывает такого, чтобы вы придумали дизайн, и кто-то другой занялся его производством, нет) Это всегда ляжет на вас)
Это вам придётся договариваться с поставщиками, ездить на производство, выбирать материалы, и контролировать качество.
В-третьих, этому особо не учат. Если вы делаете мерч для своей команды или проекта, то вы скорее всего вообще никак не связаны с производством одежды и аксессуаров. Вы ui-ux дизайнер, продакт, маркетолог, или разраб, и т.д. Эта работа для вас скорее разовая, чем постоянная, вы с ней столкнетесь в первый раз, и конечно будете неподготовленны. И в начале этой истории у вас с высокой вероятностью не будет соотв. знаний о шитье, материалах, особенностях производства и т.д.

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

Т.к. я тоже получал этот мерч, то хотел бы отметить пару интересных моментов, которые мои коллеги не учли в статье.
Очень круто получился эффект подарка. Помните эти ощущения, когда вы распечатываете технику apple, набор lego, или посылку из интернет-магазина с ништяками? Вот у девочек получилось создать такие же чувства. Они красиво завернули и упаковали мерч и раскрывать его было одно удовольствие. Вспомните типичный мерч в бумажном пакете: кружка с логотипом, блокнот и футболка. Тут же совсем другое.
Второй момент, что девочкам удалось соблюсти баланс дизайн-брендинг. Т.е. мерч не выглядит как реклама, он удобный, но при этом брендинг явно считывается. О дизайне можно спорить бесконечно, но баланс соблюдён и это круто. Третий момент: главная задача выполнена, все получатели довольны и даже спустя полгода продолжают использовать мерч, вот за это вообще респект.

Если вам интересны подробности или вы хотите посоветоваться с авторами, пишите Мэгги @MaggyGolomonosova

Приветы, у нас обновления в библиотеках.

Что там по новинкам в Atomaro Icons?
— Добавили новые иконки 16×16, 24×24
— Обновили несколько имеющихся иконок
— Добавили варианты курсора

Что нового в Atomaro Icons RTK?
— Логотип Ростелекома в вариантах, теперь можно выбрать сегмент, ориентацию, наличие слогана, английскую версию, монохромную версию, тёмную тему
— Добавили несколько логотипов продуктов Ростелекома с возможностью включить тёмную тему для них

Чуток багфиксов в Atomaro Web
— В некоторых состояниях RadioButton толщина обводки осталась 1.5px, исправлено на 2px
— IconButton, size:small, исправлен размер на 32×32 (было 36×36, что некорректно)
— В Breadcrumbs исправлено дропдаун меню (был некорректный стиль шрифта у пунктов меню)
— Исправлена высота SegmentedControl accent, size:medium. Высота сегмента в этом размере была меньше, чем нужно.

Смотрите полный список изменений и новые иконки на сайте

Обнимаем 💚

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

- Подготовили изменения в коде в связи с новыми библиотеками в Фигма;
- Переезжаем в свой репозиторий. Мы переезжаем из Nexus, в рамках уменьшения зависимостей от других систем и структур;
- Оптимизируем таблицы. Благодаря тем, кто пользовался на ранней стадии нашими таблицами, были выявлены критические непладки с производительностью. Разбили работы на несколько задач. Пока таблицы ещё в закрытой альфа-версии, но вы можете нам написать, если хотите получить ранний доступ;
- Обновление реакта 18 и других зависимостей;
- Разрабатывали новую архитектуру тарифов и разделения на пакеты. Да, у дизай-системы появится платный функционал для внешних клиентов;
- Переезжаем в свой новый namespace в gitlab;
- Переезжаем из okd3 в okd4;
- Баги по селектам;
- Готовим обновленный пакет с иконками;
- Пишем лекторий:)
- Дописываем инструкции для контрибьюторов;
- Добавили в библиотеки в Figma инструкции по перелинковке стилей со старой версии (DS RT Global Style) на новую (Atomaro Style);
- Обновили библитеки в Figma с иконками и логотипами, пофиксили несколько багов в Web библиотеке;
- Переработали в Figma компонент Tree (иерархический список) под новые возможности варианта (релизнем как только допишем тесты для компонента в коде);
- Скоро так же обновим под новые варианты компонент TableGrid.
- Готовим крупный релиз в новом репозитории.

Будем регулярно держать вас в курсе того, что мы делаем, на скриншоте роадмап)

Портфолио

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

37 проектов клиентских, 29 профессиональных интерфейсов, 5 мобильных приложений и ещё около 40 проектов, до которых мы не добрались:)

Изначально мы делали дизайн-систему с закосом под клиентские красивые интерфейсы, но видно, что на ДС сделано много профессиональных интерфейсов — админки, crm-ки, erp системы. И потребность только растёт.

Поэтому мы берём курс на поддержку таких проектов:
1. Больше компонентов в маленьком размере, чтобы делать плотные высоконагруженные системы;
2. Бо́льшая кастомизация системы в сторону контрастности компонентов для читабельности (обводки, меньше прозрачных текстов и т.д.);
3. Паттерны в коде как контейнеры — дашборды, боковые меню, хэдеры, и т.д.;
4. Готовые шаблоны для быстрого запуска проекта.

Привет друзья. Написали на хабре статью про дизайн-системы, поддержите лайком, пишите сюда комменты, вопросики
https://habr.com/ru/company/rostelecom/blog/684816/

Рассказываем чем занимались

- Заканчиваем оптимизацию таблиц
- Начинаем доработку Select и Multiselect по асинхронной загрузке
- Доработка Select и Multiselect по виртуальному скроллу
- Переделали Tooltip
- Сделали новый компонент Popover
- Продолжаем готовить большой релиз
- Инфрастуктурно готовим репозиторий
- Заканчиваем переезд на новый namespace в гитлабе и okd
- Немного причесываем ARTi

#дайджест_технологий

В нашей команде появилось новое регулярное мероприятие, в рамках которого разработчики обсуждают одно или несколько решений/инструментов, которые могут быть применимы для Дизайн-Системы или других наших сайд-проектов. По итогу нашей встречи мы резюмируем результат в короткий отчет, который будем публиковать сюда. Первым инструментом для обзора стал Blitz.JS. Вся команда очень вдохновилась представленным решением и нам захотелось поскорей его опробовать в бою. Возможно до конца года нам это удастся 🤞

#дайджест_технологий

Blitz.JS — полноценный fullstack-toolkit для Next.JS. Эквивалент Ruby on Rails, но для JavaScript и React. Вы получаете все самое лучшее от Next.js и все, что нужно для создания полнофункционального приложения.

Плюшки Blitz.JS:
- в новых проектах по дефолту настроены все скучные вещи по типу Prettier, Eslint и Jest
- Zero-API — собственный транспортный протокол, основаный на удаленном вызове процедур, который абстрагирует уровень API. Разработчику не нужно возиться с REST или GraphQL API. Blitz позволяет писать функции, которые запускаются на сервере и импортировать их в ваши компоненты React
- Authentication — из коробки в Blitz.JS есть функционал для управления сессиями пользователей. Авторизация, аутентификация, сбор пароля и восстановления пароля, всё есть. Также можно с легкостью добавить авторизацию через социальные сети и сторонние сервисы, используя стратегии Pasport.JS
- Data Layer — для работы с данными в Blitz.JS используется Prisma 2. Prisma — Это современная ОРМ для Node.JS и Typescript. Она упрощает подключение к БД, выполнение запросов, миграции и моделирование БД

Blitz.JS — очень мощный, многогранный инструмент, который делает за нас большую часть работы. Позволяет быстро и качественно создавать приложения, где в основе будут заложены современные подходы и решения. Немаловажно отметить возможность легкого масштабирования приложения — важный, но зачастую пропущенный параметр, особенно при быстрой разработке и создании MVP

Релиз 7.0.0

Аллоха! Мы обновили версию React, выкатили множество багфиксов и доработок, внимательно почитайте анонс

Изменения:

— React. Обновлена версия react на 18.2.0 и другие зависимые библиотеки. Ко многим компонентам добавлен в явном виде параметр children.

— Checkbox. Отступы приведены к макетам в фигме. Толщина линий теперь всегда 2px. Переделаны ховеры

— RadioButton. Отступы приведены к макетам в фигме. Толщина линий теперь всегда 2px

— Breadcrumbs. Добавлен ховер, дропдаун с крошками заменен на размер small

— TextArea. Изменен отступ от хинта до счетчика, добавлены параметры: hideLabel, placeholder, size

— Switch. Исправлена центровка текста для размера small

— Input. Для всех видов инпутов изменен цвет текста плейсхолдера на transparent 10. Изменены дефолтный лейблы InputEmail: Электронная почта, InputPhone: Номер телефона

— Stepper. Изменен отступ от текста до кнопок: для medium 4, для small 2

— InputNumberStepper. Исправлено отображение длинных чисел

— Select. Исправлены ошибки: при включенном автокомплите первый клик открывает список и только второй даёт вводить текст, лейбл дергается при клике по селекту, состояние открытого селекта теперь соответствует состоянию инпута в фокусе, открытый дропдаун теперь перекрывает хинт, добавлено описание параметра icon

- EditableText. Исправлена работа параметра value

BREAKING CHANGE В ВЕРСИИ 7.0.0

— Tooltip. Убраны параметры hint, hintSide, image, imageSide. Добавлен размер small. Параметры приведены к единому формату нейминга по компонентам header -> title, text -> subtitle

— TabsClassic переименован в Tabs. Внутренние компоненты, соответственно: TabsClassicGroup -> TabsGroup, TabsClassicItem -> TabsItem, TabsClassicPanel -> TabsPanel. Изменен отступ между табами в размере medium на 40px, добавлены параметры icon и iconPosition

— TabsItem. Добавлен параметр dotEnabled для отображения точки рядом с табом

— Chip. Изменен фон выбранного задизейбленного чипа, отступы в группе чипсов, значения параметра view теперь default и contrast

— TagItem переименован в Tag

Новый компонент

— Popover. Как и тултип, всплывает в указанную сторону при ховере или клике, но может содержать любой контент. Внутренние отступы настраиваются, стрелку-указатель можно скрывать

Изменения в версии 6.3.0 (Выходила ранее, в канале не публиковали, исправляемся)

— DropdownMenu. Добавлены параметры: isOpen по аналогии с Dropdown; isMultiselect и колбэк-функция onMultiselect, которые отвечают за возможность множественного выбора; icon для добавления одинаковой иконки для всех опций; isSelectedTextColored, который отвечает за выделение текст элемента при выборе

— Select, Multiselect. Добавлен параметры: virtualScroll — включает виртуальный скролл; autocomplete — внутри передается колбэк onChange, который принимает поисковую строку из инпута. Добавлена возможность асинхронной загрузки данных

— TagGroup. Добавлен параметр showOnlyInput — отвечает за отображение в конце группы тегов инпута для ввода текста. Добавлена колбек-функция onChangeInput, вызываемая при введении данных в инпут

Привет! Сегодня немного обновили библиотеку Atomaro Web

Изменения:

— Popover готов в коде и вышел из статуса «В разработке», можно смело использовать в проектах

— Компоненты InputEmail и InputPhone удалены из дизайн-библиотеки — они, по сути, дублируют компонент Input и редко используются дизайнерами.

— В Tooltip название параметра header переименовано в title, а text в subtitle для единобразия названий параметров в похожих компонентах (например в Notification)

Релиз 7.1.0

И выпустили пачку горячих обновлений для разработчиков

Изменения:

— Checkbox. Добавили новый параметр labelColor, который позволяет задавать цвет лейбла

— InputDate. Добавили возможность задавать начало периода в одном году, а конец в другом (оказалось, что раньше так не срабатывало, все починили). Исправили отображение дат с заданными minDate/maxDate и прочие неприятные баги отображения

— PickerDate. Добавили callback-функции onChangeMonth, onChangeYear, которые возвращают соответствующие значения при выборе месяца или года

Новый компонент:

— InputTime. Похож на InputDate, только для ввода времени

А вы используете наш аватар мэйкер?
https://design.rt.ru/tools_public/avatarmaker/

Салют! Парочка нанорелизов с быстрыми фиксами

Релиз 7.1.2, 21 0ктября

— InputTime. Добавлен раздел Basic в сторибук, убраны лишние пропсы

— InputDate. Исправлена работа компонента с включенным пропсом isRange при выборе одинаковых дат

— Select. Добавлен ререндер при изменении options

Релиз 7.1.1, 19 0ктября

— Checkbox. Исправлен импорт внутри компонента, из-за него возникала ошибка всего кита

Друзья, в Arti режим совместного редактирования работает сейчас некорректно. Это связано с новыми сертификатами от правительства, которые внедрили в ПЦП. Сертификаты лучше в плане инфо-беза и защищенности данных. Но проблема в том, что все современные браузеры эти сертификаты не знают. Чтобы сайт работал корректно, сертификат нужно устанавить себе на компьютер. Единственный браузер в котором этот сертификат стоит по-умолчанию — Яндекс браузер, то бишь отечественный, в нём всё работает норм. Мы понимаем что это неудобно.
В ближайшее время мы обновим Арти, чтобы он работал стабильно на всех браузерах, без лишних телодвижений.

Апдейт ARTi

Починили совместное использование, доски снова открываются быстро.
Попробовать бесплатно без регистрации и смс https://design.rt.ru/tools_public/arti