Mastodon on ZHub

0 posts0 participants0 posts today

Habr«Да будет свет!», — подумали мы. И стал свет. Краткая история обучения нейросветодизайнера нейросветодизайнуДавным-давно, скажем, этим летом, нас посетила удачная мысль включить повсюду свет и озарить ночные города. Так родился проект по обучению нейросети сложному искусству светодизайна. Разумеется, мы были не первыми, кто до этого додумался, но поскольку бум ИИ удачно наложился на развитие инфраструктуры и появление новых зданий в разных городах РФ (а еще осень, темно, холодно) – было решено взяться за дело. Светодизайн зданий – сложная область, которая удачно сочетает в себе архитектурное проектирование, инженерные достижения, дизайн и человеческий гений. В помощь последнему мы решили добавить искусственный интеллект. Оказалось, что после долгих тренировок он способен:<a href="https://habr.com/ru/articles/853552/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/853552/</a><a href="https://zhub.link/tags/ml" class="mention hashtag" rel="tag">#ml</a> <a href="https://zhub.link/tags/stablediffusion" class="mention hashtag" rel="tag">#stablediffusion</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/%D0%BD%D0%B5%D0%B9%D1%80%D0%BE%D1%81%D0%B5%D1%82%D0%B8" class="mention hashtag" rel="tag">#нейросети</a>

HabrМультипродуктовая дизайн-система: как сделать так, чтобы она реально работалаМультипродуктовая дизайн-система должна обеспечивать консистентность всех продуктов компании, а также ускорять и удешевлять их разработку. Однако в реальной жизни мы видим другое: мультипродуктовые дизайн-системы лишь отчасти выполняют свои функции и, помимо плюсов, имеют ряд существенных минусов. Главный минус — невозможность удовлетворить все потребности всех продуктов (особенно если речь идет о десятках и сотнях), в результате чего неизбежно возникают форки, собственные разработки и другие расхождения, постепенно отдаляющие продукты от единой дизайн-системы. Выходит, что мультипродуктовые дизайн-системы работают, но с большими оговорками. Можно ли сделать так, чтобы они работали лучше? Меня зовут Анастасия Кабалкина, я руковожу дизайном направления FinOps в VK Tech. В этой статье мы с вами разберем проблемы мультипродуктовых дизайн-систем и попробуем их решить небольшой доработкой архитектуры. А если не решить, то хотя бы минимизировать :)<a href="https://habr.com/ru/companies/vk/articles/842412/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/companies/vk/articles/842412/</a><a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="tag">#дизайнсистема</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/designsystem" class="mention hashtag" rel="tag">#designsystem</a>

Habr[Перевод] Фиаско Фигмы или тёмная сторона последних апдейтовЭтот пост в оригинале (eng) <a href="https://www.setproduct.com/blog/dark-side-of-figmas-updates" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.setproduct.com/blog/dark-side-of-figmas-updates</a> Глава 1: В какой‑то момент всё пошло не так Смотря недавнюю конференцию CONFIG24 , я не мог избавиться от неприятного зуда. Чем сильнее зуд одолевал меня, тем больше приходило осознание – приоритеты Figma сместились с улучшения сервиса на увеличение прибыли. Я неустанно задавал вопросы: Что произошло с Figma, которую мы все так горячо любили? Почему в приоритете деньги, а не список фич от пользователей, которые мы просим? И если Фигма - ФСЁ, то что это сулит дизайн-инструментам в будущем? Провал сделки с Adobe, похоже, стал переломным моментом. Фокус Figma на создании функций с использованием искусственного интеллекта для увеличения количества пользователей - крутой поворот от первоначальной концепции сервиса. Не подумайте, я не против использования искусственного интеллекта, но больш усилий, похоже, затрачивается на что-то "модное", но не особо нужное. Функция автоматического переименования слоев была изюминкой Figma, но ее недостаточно, чтобы компенсировать недостаток внимания к запросам пользователей.<a href="https://habr.com/ru/articles/839888/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/839888/</a><a href="https://zhub.link/tags/figma" class="mention hashtag" rel="tag">#figma</a> <a href="https://zhub.link/tags/ui_kit" class="mention hashtag" rel="tag">#ui_kit</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="tag">#дизайн_система</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/ui3" class="mention hashtag" rel="tag">#ui3</a> <a href="https://zhub.link/tags/%D0%BE%D0%B1%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F" class="mention hashtag" rel="tag">#обновления</a> <a href="https://zhub.link/tags/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81" class="mention hashtag" rel="tag">#интерфейс</a> <a href="https://zhub.link/tags/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D1%8B" class="mention hashtag" rel="tag">#интерфейсы</a> <a href="https://zhub.link/tags/%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82" class="mention hashtag" rel="tag">#инструмент</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" class="mention hashtag" rel="tag">#дизайн</a>

HabrБольшое UX/UI исследование мобильных приложений аптекHola, Amigos! На связи Вадим Кононенко и Станислав Дмитриев, руководители проектов агентства продуктовой разработки Amiga. Собрали в одной статье тренды и решения, которые следует учесть при разработке приложений аптек и e-com в целом.<a href="https://habr.com/ru/articles/838726/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/838726/</a><a href="https://zhub.link/tags/flutter" class="mention hashtag" rel="tag">#flutter</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" class="mention hashtag" rel="tag">#дизайн</a> <a href="https://zhub.link/tags/ux" class="mention hashtag" rel="tag">#ux</a>/ui <a href="https://zhub.link/tags/ux_design" class="mention hashtag" rel="tag">#ux_design</a> <a href="https://zhub.link/tags/ux%D0%B8%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F" class="mention hashtag" rel="tag">#uxисследования</a> <a href="https://zhub.link/tags/%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5" class="mention hashtag" rel="tag">#мобильное_приложение</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9" class="mention hashtag" rel="tag">#дизайн_приложений</a> <a href="https://zhub.link/tags/%D0%B8%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%80%D1%8B%D0%BD%D0%BA%D0%B0" class="mention hashtag" rel="tag">#исследование_рынка</a> <a href="https://zhub.link/tags/%D0%B8%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%B9" class="mention hashtag" rel="tag">#исследование_пользователей</a>

HabrUI-дзен: как мы познали гармонию, обновив библиотеку компонентов для дизайн-системы ShoelaceКазалось бы, дизайн-система — это инструмент, который помогает ускорить процесс разработки продуктов, облегчает масштабирование и обновление, обеспечивает единообразие дизайна и пользовательского опыта на всех платформах. Однако мы убедились на собственном опыте, что это не панацея, и если все связанные с дизайн-системой процессы не будут налажены, то для компании она станет ахиллесовой пятой. Привет, Хабр! Меня зовут Виктория Марухняк, я дизайнер интерфейса продукта Polymatica Dashboards. Мы разрабатываем BI-платформу, и нам критически важно проектировать простой и удобный интерфейс, чтобы пользователи могли легко строить и читать аналитические отчеты. В этой статье поделюсь своим первым опытом рефакторинга и обновления дизайн-системы и тем, как это помогло нам наладить общение между дизайнерами и разработчиками. Без прикрас и розовых пони. Дальше много букв и картинок<a href="https://habr.com/ru/companies/slsoft/articles/816289/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/companies/slsoft/articles/816289/</a><a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="tag">#дизайнсистема</a> <a href="https://zhub.link/tags/ui" class="mention hashtag" rel="tag">#ui</a>/ux <a href="https://zhub.link/tags/uikit" class="mention hashtag" rel="tag">#uikit</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/figma" class="mention hashtag" rel="tag">#figma</a> <a href="https://zhub.link/tags/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D1%8B" class="mention hashtag" rel="tag">#интерфейсы</a> <a href="https://zhub.link/tags/polymatica" class="mention hashtag" rel="tag">#polymatica</a>

HabrАвтостопом по дизайн-системе. Путеводитель с оглавлениемЭта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы. - Делать свою или взять готовую? Прыг. - Платформенная или универсальная? Прыг. - Версионировать компоненты или всю библиотеку? Прыг... И ещё много таких «прыгов». Давайте подготовимся к сложному контенту. Закроем глаза, успокоимся и представим идеальную дизайн-систему. Представили? Умные компоненты, продуманные паттерны, подробная документация. Автоматическая генерация кода. Кайф? А то! Только такая дизайн-система оставит нас без работы. Сидит себе бизнес, кормит нейросетевой движок дизайн-системы джобс-ту-би-данами да си-джи-эмами и на выходе получает готовые экраны. Ни дизайнеров, ни фронтов нанимать не нужно. DON'T PANIC!<a href="https://habr.com/ru/companies/ozontech/articles/797311/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/companies/ozontech/articles/797311/</a><a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="tag">#дизайнсистема</a> <a href="https://zhub.link/tags/ui" class="mention hashtag" rel="tag">#ui</a>/ux <a href="https://zhub.link/tags/uikit" class="mention hashtag" rel="tag">#uikit</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/figma" class="mention hashtag" rel="tag">#figma</a> <a href="https://zhub.link/tags/figma_plugin" class="mention hashtag" rel="tag">#figma_plugin</a> <a href="https://zhub.link/tags/ozon_tech" class="mention hashtag" rel="tag">#ozon_tech</a>

HabrГайд по работе с ветками (Figma Branch)Figma Branch (или «ветка») — это функционал, который позволяет создать копию проекта и изменять его независимо от основной версии. Когда работа завершена и нужно внести изменения в основной проект — ветка сливается с master-версией. Всё как у разработчиков. Но чтобы использовать Branch, ваш тариф должен быть Organization или Enterprise. Предпосылки При коллективной работе над проектом, всегда встречаются классические проблемы: что/когда/кем было добавлено в проект и почему компоненты сломались. Я часто видел костыльное решение — складывать готовые экраны и компоненты куда-то в угол канваса, тегать лида комментом, а после ревью — чистить за собой, мрак. Проще, быстрей, дешевле использовать функционал Branch, тем более они идеально подходят для следующих сценариев:<a href="https://habr.com/ru/articles/793772/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/793772/</a><a href="https://zhub.link/tags/figma" class="mention hashtag" rel="tag">#figma</a> <a href="https://zhub.link/tags/branch" class="mention hashtag" rel="tag">#branch</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/designer" class="mention hashtag" rel="tag">#designer</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80%D1%83" class="mention hashtag" rel="tag">#дизайнеру</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0%BE%D0%B2" class="mention hashtag" rel="tag">#дизайн_интерфейсов</a> <a href="https://zhub.link/tags/%D1%84%D0%B8%D0%B3%D0%BC%D0%B0" class="mention hashtag" rel="tag">#фигма</a> <a href="https://zhub.link/tags/%D0%B2%D0%B5%D1%82%D0%BA%D0%B8" class="mention hashtag" rel="tag">#ветки</a>

HabrПодбор цветов для палитры визуализации данныхДля того чтобы упростить восприятие данных в интерфейсе используются инструменты, вроде графиков и диаграмм. Но используя такие элементы практически сразу встает вопрос, а в какие цвета красить тренды графиков и столбики в диаграммах? Эта статья поможет вам решить эту проблему.<a href="https://habr.com/ru/companies/bimeister/articles/785272/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/companies/bimeister/articles/785272/</a><a href="https://zhub.link/tags/%D0%B2%D0%B8%D0%B7%D1%83%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85" class="mention hashtag" rel="tag">#визуализация_данных</a> <a href="https://zhub.link/tags/%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B8" class="mention hashtag" rel="tag">#графики</a> <a href="https://zhub.link/tags/%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%B0%D0%BB%D0%B8%D1%82%D1%80%D0%B0" class="mention hashtag" rel="tag">#цветовая_палитра</a> <a href="https://zhub.link/tags/ux" class="mention hashtag" rel="tag">#ux</a>/ui <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/uikit" class="mention hashtag" rel="tag">#uikit</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="tag">#дизайн_система</a> <a href="https://zhub.link/tags/%D0%BF%D1%80%D0%BE%D0%BC%D1%8B%D1%88%D0%BB%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F_%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F" class="mention hashtag" rel="tag">#промышленная_автоматизация</a> <a href="https://zhub.link/tags/it%D0%BA%D0%BE%D0%BC%D0%BF%D0%B0%D0%BD%D0%B8%D0%B8" class="mention hashtag" rel="tag">#itкомпании</a>

HabrКак сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн системыПривет! Меня зовут Ксения Гаврилова, я дизайн-менеджер в Selectel . Определяю, поддерживаю процесс и качество дизайна продуктов в компании, занимаюсь поиском и онбордингом людей в команду, помогаю дизайнерам развиваться. В 2022 году мы создали свою дизайн-систему. Это был сложный и интересный путь. Вместе с командой мы прошли через многое и решили несколько ключевых проблем: наладили коммуникацию между дизайнерами и разработчиками так, чтобы все говорили на одном языке, сделали опыт пользователя в ключевых сценариях консистентным и обновили устаревший фреймворк. В этом тексте я хочу поделиться главными уроками, которые извлекла в процессе. Они будут полезны дизайнерам и разработчикам, лидам и линейным специалистам. Надеюсь, мой опыт поможет вам при создании вашей дизайн-системы и в работе над ней, и вы не допустите моих ошибок.<a href="https://habr.com/ru/companies/selectel/articles/782422/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/companies/selectel/articles/782422/</a><a href="https://zhub.link/tags/selectel" class="mention hashtag" rel="tag">#selectel</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="tag">#дизайнсистема</a> <a href="https://zhub.link/tags/design" class="mention hashtag" rel="tag">#design</a> <a href="https://zhub.link/tags/ux_design" class="mention hashtag" rel="tag">#ux_design</a> <a href="https://zhub.link/tags/%D0%BA%D0%B5%D0%B9%D1%81" class="mention hashtag" rel="tag">#кейс</a>

Habr[Перевод] Анатомия shadcn/uiЕсли вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui . Вместо того, чтобы распространяться в виде пакета npm , компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui . "Почему код для копирования/вставки, а не библиотека? Идея заключается в том, что вы полностью владеете и контролируете код. Это позволяет вам решать, как именно будут построены и оформлены ваши компоненты. Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды. Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации". На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода. Цель этой статьи — немного изучить архитектуру и реализацию shadcn/ui . Если вы еще не использовали shadcn/ui , я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.<a href="https://habr.com/ru/companies/timeweb/articles/781346/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/companies/timeweb/articles/781346/</a><a href="https://zhub.link/tags/timeweb_%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8_%D0%BF%D0%B5%D1%80%D0%B5%D0%B2%D0%BE%D0%B4" class="mention hashtag" rel="tag">#timeweb_статьи_перевод</a> <a href="https://zhub.link/tags/shadcn" class="mention hashtag" rel="tag">#shadcn</a>/ui <a href="https://zhub.link/tags/tailwindcss" class="mention hashtag" rel="tag">#tailwindcss</a> <a href="https://zhub.link/tags/react_table" class="mention hashtag" rel="tag">#react_table</a> <a href="https://zhub.link/tags/react_hook_form" class="mention hashtag" rel="tag">#react_hook_form</a> <a href="https://zhub.link/tags/radix_ui" class="mention hashtag" rel="tag">#radix_ui</a> <a href="https://zhub.link/tags/reactjs" class="mention hashtag" rel="tag">#reactjs</a> <a href="https://zhub.link/tags/reactjs" class="mention hashtag" rel="tag">#reactjs</a> <a href="https://zhub.link/tags/react" class="mention hashtag" rel="tag">#react</a> <a href="https://zhub.link/tags/js" class="mention hashtag" rel="tag">#js</a> <a href="https://zhub.link/tags/css" class="mention hashtag" rel="tag">#css</a> <a href="https://zhub.link/tags/design_system" class="mention hashtag" rel="tag">#design_system</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="tag">#дизайнсистема</a>

Recent searches

Search options

Administered by:

Server stats:

#design_system