Open source-стратегии: с чего начать в открытом формате — дизайн-система телекома и мобильного оператора T2

На днях делился подборкой научных статей по open source — одна из них предлагает обращать внимание на определенные управленческие моменты при участии компаний в открытой разработке. Сегодня продолжим обсуждать тему, но в менее академическом ключе и сфокусируемся на примечательном практическом кейсе. В центре внимания — открытая дизайн-система Т2. Как уточняет Сергей @OsipovSV лид данного направления в Т2, разговором с которым я делюсь далее, новую дизайн-систему пока сложно считать полноценным open source-продуктом. Однако для меня этот кейс интересен с точки зрения первых шагов компании в данном направлении.

https://habr.com/ru/articles/959226/

#open_sourceстратегии #открытая_дизайнсистема #ui_kit #интерфейсы #дизайнсистема

[Перевод] Как использовать любой CSS-фреймворк в вашем проекте — Часть 2

Переменные Bootstrap — мощный инструмент для управления стилями , но без правильной структуры их тяжело использовать. В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.

https://habr.com/ru/articles/918770/

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss #less

Как мы разработали дизайн-систему и победили хаос во внутреннем продукте

Меня зовут Света, я дизайнер интерфейсов в DNS. В этой статье хочу рассказать про то, как мы за 6 месяцев прошли путь от интерфейсного хаоса до целостной дизайн-системы, которая изменила не только продукт, но и процессы внутри команды.

https://habr.com/ru/articles/949040/

#дизайн #дизайнсистема #продуктовый_дизайн #процессы_в_командах #дизайн_интерфейсов #компоненты_figma #внутренний_продукт #b2b_дизайн

Дизайн-система как тюрьма

Зачем вообще нужна дизайн-система? В первую очередь, для стабилизации и ускорения проектирования с разработкой. Затем — для унификации пользовательского опыта. Идея хорошая, однако иногда вместо этого мы просто получаем барьер на каждом шаге. Перекрасить кнопку? Согласование. Новый элемент или паттерн? Дизайн-комитет. А/В-тест? Сначала в ДС. Команда учится делать не «лучше», а «правильнее». Развитие продукта замирает, потому что «в системе так не принято». Это и есть ДС-тюрьма: удобно сторожам, плохо заключённым.

https://habr.com/ru/articles/947160/

#дизайнсистема

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

Что, если бы дизайн-система умела не просто менять язык, а адаптироваться под культуру, направление чтения, шрифты и даже знаки препинания? А если бы она делала это автоматически — без боли, костылей и ручной работы? В этой статье я расскажу, как мы внедрили поддержку арабского языка, автоматизировали локализацию и сделали так, чтобы переключение языка, направления и шрифта стало делом одного клика.

https://habr.com/ru/companies/2gis/articles/939490/

#дизайнсистема #мультиязычность #арабский_язык #rtl #figma_plugin #ai #арабские_интерфейсы

Как мы переделали дизайн-ревью: от узкого горлышка к масштабируемой системе

В Точка Банк нет арт-директоров или лидов, которые принимают финальные решения по дизайну. Мы верим, что сильный дизайн рождается в совместной работе, а не в «указах сверху». Чтобы сохранять консистентность и высокое качество в экосистеме продуктов, нам нужен был процесс: как переопыляться, делиться хорошими решениями и держать планку. Так появилось дизайн-ревью — одни дизайнеры отсматривают макеты других и предлагают идеи по улучшению. На старте небольшой команде хватало нескольких ревьюеров. Но когда команда выросла до 50+ дизайнеров, процесс начал буксовать. Ревью из помощника превратилось в узкое горлышко: сроки срывались, ревьюеры выгорали, качество проседало. Мы прошли через это и перестроили процесс так, чтобы он масштабировался на десятки кейсов, прокачивал команду — и при этом не тормозил работу. Рассказываем, как.

https://habr.com/ru/companies/tochka/articles/943492/

#дизайнревью #ревью #figma #процессы #дизайн #дизайнсистема

Как создать дизайн-систему для сайта, если ты не дизайнер

Дизайн-система — это набор правил, компонентов и инструментов, который помогает дизайнерам и разработчикам программного обеспечения работать наиболее эффективно и согласованно. Она включает в себя всё: от цветовых палитр и шрифтов до кнопок, форм и правил взаимодействия с ними. Когда в проекте есть своя дизайн-система, команды могут быстро создавать новые элементы и страницы, избегая неразберихи и повышая качество своего продукта, а пользователи в свою очередь получают интуитивно понятный интерфейс, с которым приятно иметь дело. Я разработчик в компании bpm (ранее “ЛАНИТ - Би Пи Эм”). Столкнувшись с хаосом в интерфейсах и постоянными правками, я решила изучить, как можно организовать процесс создания дизайн-системы самостоятельно. Результат вы видите в этой статье. Очень надеюсь, что описанные правила помогут вам сделать первые шаги в создании дизайна для вашего проекта.

https://habr.com/ru/companies/lanit/articles/938734/

#ланит #ланитби_пи_эм #дизайн_интерфейсов #дизайнсистема #компания_bpm #uxui #интерфейс #юзабилити

Как мы строим дизайн-культуру в InfoWatch

Привет! Меня зовут Вадим, я проектирую интерфейсы в InfoWatch. Но сейчас не о том, как мы строим интерфейсы, а о том, как мы строим дизайн-культуру. Я расскажу о нашем двухлетнем пути, полном ошибок и открытий, который привел к реальным изменениям в продуктах и работе команды. В этой статье расскажу: - как мы за два года прошли путь от оформительства до полноценного дизайн‑процесса; - какие грабли собрали; - что реально изменилось в продуктах и в работе команды; - как убедить коллег, что дизайн — это важно (спойлер: надо говорить на языке бизнеса). Это не будет очередной теоретической статьей про «как надо». Только реальный опыт и — самое главное — конкретные примеры того, что сработало именно у нас.

https://habr.com/ru/companies/infowatch/articles/938246/

#дизайн_интерфейсов #дизайнкультура #дизайн_в_B2B #пользовательский_интерфейс #UX #UI #дизайнревью #дизайнсистема

Вёрстка не поехала: как тестировать интерфейсы без боли

Привет, Хабр! Мы — Алевтина Чугунова (владелец продукта дизайн‑системы) и Дарья Каткова (QA‑инженер). В этой статье расскажем, как создаём и тестируем дизайн‑систему, с какими проблемами сталкивались и какие инструменты разработали, чтобы упростить жизнь себе и командам. Вы узнаете: - Что такое дизайн‑система и зачем она нужна. - Как тестировать интерфейсы без боли. - Какие инструменты помогают автоматизировать проверки.

https://habr.com/ru/companies/sberbank/articles/931210/

#дизайнсистема

Почему работать эскортницей лучше, чем дизайнером?

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

https://habr.com/ru/articles/934126/

#Дизайн #дизайн_интерфейсов #дизайнеры #дизайнеру #дизайн_сайтов #дизайн_студия #дизайнсистема #дизайн_сайта #ux

Джун, ты просто не жил без автолэйаута

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

https://habr.com/ru/articles/933648/

#ux #ui #дизайнсистема #дизайн_интерфейсов #дизайн_сайтов #дизайн_сайта #дизайн #дизайнеру #продуктовый_дизайн #продуктовый_дизайнер

Как мы создали UI-kit состояний интерфейса и «навели порядок» в продукте

О чем статья: ⚪что такое UI-kit состояний интерфейса и какие компоненты в него входят (экраны успеха, ошибок, пустых состояний и т.д.), ⚪зачем команде его поддерживать, ⚪как собрать и поддерживать UI-kit. Кому будет полезна статья: ⚪UX-редакторам в растущих продуктах, где нет правил написания текстов и редполитики, ⚪UX-редакторам, которые пришли в давно живущий продукт без налаженных текстов и голоса (англ. «Tone of Voice»), ⚪команде UX-редакторов, которые начали или давно ведут редполитику, но пока не договорились, как должен отзываться продукт в разных состояниях, ⚪дизайнерам, которые работают над одним продуктом, но без UX-редактора в штате.

https://habr.com/ru/articles/925688/

#интерфейс #отзывчивость_интерфейса #юзабилити_интерфейсов #редполитика #tone_of_voice #дизайнсистема #uxредактор #uxредактура #тексты_интерфейсов #ux_дизайн

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

Как говорил дядя Бен, большие продукты — это большая ответственность. И без сложных интерфейсов тут никуда: а с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций. Для МойОфис как мультипродуктовой экосистемы со сквозными сценариями — все эти вопросы очень актуальны! Поэтому на прошлой неделе JS-еры, дизайнеры и UX-исследователи нашей и других компаний собрались на митапе под названием Frontend&UX Talks, чтобы обсудить эти и другие проблемы современного веба. Получилось интересно, драйвово и даже сказочно! (и я в прямом смысле этого слова :)) Под катом расскажем в 7 тезисах, к каким выводам пришли и как именно: поехали! О фронтенде в 2025-м году мы поняли, что... Понятный и простой код — куда важнее, чем кажется Примитивы это сказка! (причем буквально...) Реактивное программирование актуальное и удобное! Но не для всех... Следить за CSS обновлениями каждый квартал – базовый минимум Темизация это нелегко, но есть лазейки! Редизайны продуктов – это не страшно! (ну почти...) За сложными интерфейсами – глаз да глаз...

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

Как говорил дядя Бен, большие продукты — это большая ответственность. И без сложных интерфейсов тут никуда: а с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций. Для

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Как стать дизайнером в IT и сохранить баланс между креативом и технологиями

Сегодня обсудим, как работать с цифровыми продуктами, и почему дизайн — это не только про красоту, но и про удобство, структуру и командную работу. Будет немного практики и советов для тех, кто задумывается о карьере дизайнера в IT. Поехали! Меня зовут Яна — и я Тeam Lead Designer в компании «Оптимакрос». Я начинала как дизайнер в рекламных агентствах и типографиях, занималась графикой, брендингом и оформлением различных объектов, работая с каждым клиентом индивидуально. Со временем мне захотелось более масштабных и технологичных задач, поэтому я решила попробовать себя в IT.

https://habr.com/ru/articles/922486/

#дизайн #дизайн_интерфейсов #дизайнеру #дизайнсистема #дизайн_сайта #разработка #ux #ux_дизайн #ui

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

Приветствую! Меня зовут Борис, я руководитель отдела фронтенд-раработки в ЮМoney и продакт-менеджер платформенной команды. О сложностях управления подобными командами и проблемах, которые иногда возникают, уже рассказывал в своей предыдущей статье. Сегодня хочу поделиться историей о том, как в условиях ограниченных ресурсов нам удалось выстроить консистентность пользовательского интерфейса в сервисе, который состоит более чем из 70 микросервисов и охватывает разные направления бизнеса.

https://habr.com/ru/companies/yoomoney/articles/920994/

#фронтендразработка #дизайнсистема #разработка_интерфейсов #mui #консистентность

[Перевод] Практическое руководство по иконкам в веб-проектах — Часть 1

Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать ?

https://habr.com/ru/articles/919516/

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss

Психологический дизайн в брендинге: как микровзаимодействия формируют восприятие

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

https://habr.com/ru/articles/915852/

#микровзаимодействия #дизайн #дизайнсистема

Горизонты развития продуктового дизайнера: взлеты, плато и новые пути

Застрял между макетами и расплывчатым фидбеком вроде «что-то не то»? В этой статье — почему это нормально, как выглядит кривая развития дизайнера, чем полезен T-shaped подход и что помогает выйти за рамки интерфейсов, чтобы по-настоящему влиять на продукт.

https://habr.com/ru/articles/914592/

#дизайн #дизайн_интерфейсов #дизайн_сайтов #дизайнеры #дизайнсистема #продукт_менеджмент #продуктивная_работа #продуктивная_деятельность #интерфейсы #интерфейсы_и_юзабилити

Дизайн за 5 минут. Дайджест мая

Привет, Хабр! Это Андрей, продуктовый дизайнер Погнали

https://habr.com/ru/companies/garage8/articles/914066/

#config #Microsoft #Material_Design #дизайнсистема #google #редизайн #Codex #openai