Нет лучше для подборки темы,
чем тонна ссылок про дизайн-системы
1. SuperFriendly: Мини-книга «Design System in 90 Days», в дополнение к которой идут шаблоны для воркшопов. Стоит она прилично, $349. Но ребята — одни из лучших в теме.
2. Gabe Scholz: Годные советы по разработке компонентов. Многие из них полезны для управления процессом и дизайна.
3. Eric Bailey: Список всех возможных состояний компонентов интерфейса.
4. Adam Argyle: Все аспекты реализации кнопки в коде с учётом всех современных требований (состояния, accessibility, тёмная тема и т.п.).
5. Sehee Lee: Процесс добавления новых иконок в Material Design.
6. Shopify: Рассказ об обновлении дизайн-системы. Хотя компоненты были внедрены широко, покрытие токенами было сильно меньше и нужно было починить это.
7. Alex Bueno: Занятная концепция дизайн-систем в виде Евклидовой модели.
8. Storybook:
— Интерактивное тестирование компонентов.
— Автоматизированное тестирование accessibility.
— Переключатель темы оформления.
9. Dan Mall: Критика подхода, когда команда тратит слишком много сил на старте на определение «фундамента» — например, системы цветов и отступов. Для начинающих компаний проще взять хоть что-то, а потом дорабатывать — при правильной архитектуре дизайн-системы это быстро и недорого. Ну а вместо этого сфокусироваться на главном — покрытии в продуктах и вовлечении команд.
10. Nathan Curtis: Серия статей о процессе тестирования компонентов в Figma. Часть 2 и 3.
11. Nathan Curtis: Форматы общих библиотек в Figma. Как организовать команду и процесс обновления, а также разделить компоненты на отдельные частные библиотеки.
12. CSS-фреймворки и библиотеки:
— Коллекция компонентов интерфейса на чистом CSS.
— Spruce: Ещё один простой CSS-фреймворк.
13. Исследования рынка:
— Sparkbox: Опросили 219 специалистов на тему их главных задач и болей во внедрении.
— ZeroHeight: Опрос 500 специалистов, которые работают над дизайн-системами (как в коде, так и в дизайн-инструментах). Есть некоторое количество интересных моментов, хотя и ограниченное.
14. Примеры дизайн-систем:
— Gusto.
— Culture Amp.
15. Daniel Yuschick: Особенности нового свойства CSS color-contrast(), которое здорово поможет в повышении качества accessibility. Это позволит автоматически выбирать цвет шрифта для текущего фона из набора возможных.
16. UXPin: Новая функция управления компонентами в Merge позволяет импортировать реализацию в коде в инструмент дизайна, а дальше — собирать интерактивные прототипы.
17. Brad Frost: Беседа о текущем состоянии дизайн-систем и его работе со Storybook.
18. Цветовые палитры:
— WTTJ: Соответствие требованиям accessibility.
— Primer Prism: GitHub открыли наружу свой генератор цветовых палитр, который помогает создать тёмную тему оформления и другие темы, где основной цвет — не белый. Анонс и обзор.
— Adobe Spectrum: Очередное обновление, которое использует сотня приложений компании.
19. Рамблер: Тематизация виджета комментариев для разных сервисов. Как выделить общие и настраивающиеся элементы.
#designsystems
чем тонна ссылок про дизайн-системы
1. SuperFriendly: Мини-книга «Design System in 90 Days», в дополнение к которой идут шаблоны для воркшопов. Стоит она прилично, $349. Но ребята — одни из лучших в теме.
2. Gabe Scholz: Годные советы по разработке компонентов. Многие из них полезны для управления процессом и дизайна.
3. Eric Bailey: Список всех возможных состояний компонентов интерфейса.
4. Adam Argyle: Все аспекты реализации кнопки в коде с учётом всех современных требований (состояния, accessibility, тёмная тема и т.п.).
5. Sehee Lee: Процесс добавления новых иконок в Material Design.
6. Shopify: Рассказ об обновлении дизайн-системы. Хотя компоненты были внедрены широко, покрытие токенами было сильно меньше и нужно было починить это.
7. Alex Bueno: Занятная концепция дизайн-систем в виде Евклидовой модели.
8. Storybook:
— Интерактивное тестирование компонентов.
— Автоматизированное тестирование accessibility.
— Переключатель темы оформления.
9. Dan Mall: Критика подхода, когда команда тратит слишком много сил на старте на определение «фундамента» — например, системы цветов и отступов. Для начинающих компаний проще взять хоть что-то, а потом дорабатывать — при правильной архитектуре дизайн-системы это быстро и недорого. Ну а вместо этого сфокусироваться на главном — покрытии в продуктах и вовлечении команд.
10. Nathan Curtis: Серия статей о процессе тестирования компонентов в Figma. Часть 2 и 3.
11. Nathan Curtis: Форматы общих библиотек в Figma. Как организовать команду и процесс обновления, а также разделить компоненты на отдельные частные библиотеки.
12. CSS-фреймворки и библиотеки:
— Коллекция компонентов интерфейса на чистом CSS.
— Spruce: Ещё один простой CSS-фреймворк.
13. Исследования рынка:
— Sparkbox: Опросили 219 специалистов на тему их главных задач и болей во внедрении.
— ZeroHeight: Опрос 500 специалистов, которые работают над дизайн-системами (как в коде, так и в дизайн-инструментах). Есть некоторое количество интересных моментов, хотя и ограниченное.
14. Примеры дизайн-систем:
— Gusto.
— Culture Amp.
15. Daniel Yuschick: Особенности нового свойства CSS color-contrast(), которое здорово поможет в повышении качества accessibility. Это позволит автоматически выбирать цвет шрифта для текущего фона из набора возможных.
16. UXPin: Новая функция управления компонентами в Merge позволяет импортировать реализацию в коде в инструмент дизайна, а дальше — собирать интерактивные прототипы.
17. Brad Frost: Беседа о текущем состоянии дизайн-систем и его работе со Storybook.
18. Цветовые палитры:
— WTTJ: Соответствие требованиям accessibility.
— Primer Prism: GitHub открыли наружу свой генератор цветовых палитр, который помогает создать тёмную тему оформления и другие темы, где основной цвет — не белый. Анонс и обзор.
— Adobe Spectrum: Очередное обновление, которое использует сотня приложений компании.
19. Рамблер: Тематизация виджета комментариев для разных сервисов. Как выделить общие и настраивающиеся элементы.
#designsystems
Danmall
Design Systems, Design Process, and Design Leadership Products from Dan Mall
Courses, books, and tools to help you level up as a design leader.
Вал новостей по внедрению тёмной темы давно спал, но на пыльной полке завалялась эта мини-подборка и надо отпустить её на волю:
1. Brad Frost: Предлагает разделять тёмную тему и инвертированный режим в дизайн-системах. Они могут решать одинаковые задачи (например, смена цвета текста и иконок), но это вызвано разными ситуациями — общая настройка устройства пользователя или конкретный блок в интерфейсе.
2. Figma: Создание тёмной темы. Ещё один пример того, что этот переход — один из главных драйверов перехода к семантическим токенам.
3. Danny Banks: Инструкция по созданию тёмной темы на фреймворке Style Dictionary, облегчающем поддержку токенов.
4. Поддержка в вебе:
— Lea Verou: Как быстро реализовать тёмную тему через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.
— Chris Coyier: Проблема дёрганого автоматического переключения между обычной и тёмной темой в браузере.
— Bramus Van Damme: Переключение тёмной темы должно быть кнопкой в самом браузере, а не на конкретном сайте. Это сэкономит много лишнего кода. Он показывает своё предложение по реализации.
— Ryan Feigenbaum: Памятка по созданию переключателя тёмной темы на сайте.
5. Robin Rendle: Создание тёмной темы для сервиса Sentry.
Черновик подборки лежал аж с марта прошлого года, так что пшикните пару раз освежителем убрать запах нафталина.
#designsystems #darkmode
1. Brad Frost: Предлагает разделять тёмную тему и инвертированный режим в дизайн-системах. Они могут решать одинаковые задачи (например, смена цвета текста и иконок), но это вызвано разными ситуациями — общая настройка устройства пользователя или конкретный блок в интерфейсе.
2. Figma: Создание тёмной темы. Ещё один пример того, что этот переход — один из главных драйверов перехода к семантическим токенам.
3. Danny Banks: Инструкция по созданию тёмной темы на фреймворке Style Dictionary, облегчающем поддержку токенов.
4. Поддержка в вебе:
— Lea Verou: Как быстро реализовать тёмную тему через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.
— Chris Coyier: Проблема дёрганого автоматического переключения между обычной и тёмной темой в браузере.
— Bramus Van Damme: Переключение тёмной темы должно быть кнопкой в самом браузере, а не на конкретном сайте. Это сэкономит много лишнего кода. Он показывает своё предложение по реализации.
— Ryan Feigenbaum: Памятка по созданию переключателя тёмной темы на сайте.
5. Robin Rendle: Создание тёмной темы для сервиса Sentry.
Черновик подборки лежал аж с марта прошлого года, так что пшикните пару раз освежителем убрать запах нафталина.
#designsystems #darkmode
Brad Frost
"Dark Mode" vs "Inverted"
One thing we run into a fair amount in our design system work is the need to clarify the difference between "dark mode" and "components rendered on a dark background".
What is actual dark mode?
prefers-color-scheme is a CSS media feature that listens…
What is actual dark mode?
prefers-color-scheme is a CSS media feature that listens…
Ссылок о дизайн-системах новую пачку держите вы:
1. Salesforce: Новый язык анимации. Сам раздел и примеры. Как он внедряется на ключевых сайтах.
2. Nathan Curtis: Концепция субкомпонентов. Они полезны, если хочется дать командам возможность кастомизации типовых компонентов, но сделать её контролируемой.
3. Brad Frost: Подход к созданию тем оформления. В статье толковая классификация ситуаций, в которых тема нужна.
4. Gusto Workbench: Процесс создания нового компонента.
5. Storybook: Обзор обновлений интерфейса грядущей версии 7.0. В целом, конечно, требуется скорее качественный рывок вперёд.
6. Amy Hupe: Как правильно упоминать всех причастных к доработке дизайн-системы.
7. Shopify: Инициатива PolarisLab, которая призвана делать эксперименты с дизайн-системой вместе с продуктовыми командами.
#designsystems
1. Salesforce: Новый язык анимации. Сам раздел и примеры. Как он внедряется на ключевых сайтах.
2. Nathan Curtis: Концепция субкомпонентов. Они полезны, если хочется дать командам возможность кастомизации типовых компонентов, но сделать её контролируемой.
3. Brad Frost: Подход к созданию тем оформления. В статье толковая классификация ситуаций, в которых тема нужна.
4. Gusto Workbench: Процесс создания нового компонента.
5. Storybook: Обзор обновлений интерфейса грядущей версии 7.0. В целом, конечно, требуется скорее качественный рывок вперёд.
6. Amy Hupe: Как правильно упоминать всех причастных к доработке дизайн-системы.
7. Shopify: Инициатива PolarisLab, которая призвана делать эксперименты с дизайн-системой вместе с продуктовыми командами.
#designsystems
Medium
What You Need to Know About the New Salesforce Kinetics System
We developed an end-to-end motion language for Salesforce and its products.
Свежий мини-выпуск о дизайн-системах, которые цветут и пахнут — многие уже простудились на их похоронах:
1. Gov.uk: Переосмысление беклога. Как меняли ранжирование через опрос команд в организации.
2. Maximilian Speicher и Guido Baena Wehrmann: Формула расчёта ROI. Она достаточно сложная, но полезная точка зрения на проблему. Шаблон для расчётов.
3. Подкаст с Ben Callahan из Sparkox. Толковые мысли о их модели зрелости внедрения дизайн-системы и особенностях этого процесса.
4. Cole Peters: Разумные ограничения, реализованные через шкалы в токенах. Сказано не так много нового, но структурировано и подано удачно.
5. Salesloft: Адаптация под требования accessibility с помощью токенов.
6. Steve Dennis: Хорошие иллюстрации логики работы токенов. Он описывает только цвета, но общий подход понятен.
7. Docusaurus 2.0: Вышла вторая версия генератора сайтов-документаций и живых гайдлайнов. Много возможностей настройки, интеграция компонентов, тематизация и т.п.
8. Cloudscape: Команда Amazon Web Services опубликовала свою дизайн-систему.
9. System.css: Простой CSS-фреймворк, стилизованный под старые операционки MacOS.
#designsystems
1. Gov.uk: Переосмысление беклога. Как меняли ранжирование через опрос команд в организации.
2. Maximilian Speicher и Guido Baena Wehrmann: Формула расчёта ROI. Она достаточно сложная, но полезная точка зрения на проблему. Шаблон для расчётов.
3. Подкаст с Ben Callahan из Sparkox. Толковые мысли о их модели зрелости внедрения дизайн-системы и особенностях этого процесса.
4. Cole Peters: Разумные ограничения, реализованные через шкалы в токенах. Сказано не так много нового, но структурировано и подано удачно.
5. Salesloft: Адаптация под требования accessibility с помощью токенов.
6. Steve Dennis: Хорошие иллюстрации логики работы токенов. Он описывает только цвета, но общий подход понятен.
7. Docusaurus 2.0: Вышла вторая версия генератора сайтов-документаций и живых гайдлайнов. Много возможностей настройки, интеграция компонентов, тематизация и т.п.
8. Cloudscape: Команда Amazon Web Services опубликовала свою дизайн-систему.
9. System.css: Простой CSS-фреймворк, стилизованный под старые операционки MacOS.
#designsystems
designnotes.blog.gov.uk
How we prioritise additions to the GOV.UK Design System
The GOV.UK Design System have been looking at what their next priorities will be over the next financial year.
Свежий ссылочный выброс на тему дизайн-систем:
1. Material Design: Снова переработали сайт. Новый подход к подаче информации, навигации, описании стилей и т.п. Ну и активное использование принципов самой дизайн-системы. Сам сайт.
2. Knapsack: Калькулятор ROI на основе своих публикаций и исследований на тему. Он умеет считать по разным срезам — люди, компоненты, общий эффект.
3. Acronis: Плагины для Figma, которые помогают экспортировать макеты писем рассылки в HTML-код. Они нашли необычное решение — это не полноценный конвертер, а связка блоков в дизайне с мини-файлами HTML для каждого блока.
4. Square: Команда бренда вместе с агентством Athletics описала язык анимации, а потом создала свой инструмент Otto для работы с анимацией для маркетинга и интерфейсов.
5. Brad Frost: Опыт работы с веб-компонентами — он в целом топит за их использование. Он показывает их текущие ограничения и размышляет на тему их решения.
6. Societe Generale: Практика переиспользования бизнес-паттернов. Это целые сценарии из серии экранов.
7. Amplitude: Плагин для Figma помогает анализировать использование живого гайдлайна. Как сама компания анализирует свою дизайн-систему.
8. Lukas Oppermann: Памятка по дизайну тёмной темы оформления. Он проходится по основным аспектам: изображения, пиктограммы, тени, шрифты, цвета.
9. Token CSS (https://tokencss.com/): Генератор токенов. Описываете их в JSON, дальше он экспортирует их в разные форматы.
10. Storybook: Как сделать переключатель языков с помощью фреймворка i18next.
11. Примеры:
— DRUIDS: Дизайн-система сервисов компании Datadog.
— NewsKit: Дизайн-система британского подразделения компании News Corp.
#designsystems
1. Material Design: Снова переработали сайт. Новый подход к подаче информации, навигации, описании стилей и т.п. Ну и активное использование принципов самой дизайн-системы. Сам сайт.
2. Knapsack: Калькулятор ROI на основе своих публикаций и исследований на тему. Он умеет считать по разным срезам — люди, компоненты, общий эффект.
3. Acronis: Плагины для Figma, которые помогают экспортировать макеты писем рассылки в HTML-код. Они нашли необычное решение — это не полноценный конвертер, а связка блоков в дизайне с мини-файлами HTML для каждого блока.
4. Square: Команда бренда вместе с агентством Athletics описала язык анимации, а потом создала свой инструмент Otto для работы с анимацией для маркетинга и интерфейсов.
5. Brad Frost: Опыт работы с веб-компонентами — он в целом топит за их использование. Он показывает их текущие ограничения и размышляет на тему их решения.
6. Societe Generale: Практика переиспользования бизнес-паттернов. Это целые сценарии из серии экранов.
7. Amplitude: Плагин для Figma помогает анализировать использование живого гайдлайна. Как сама компания анализирует свою дизайн-систему.
8. Lukas Oppermann: Памятка по дизайну тёмной темы оформления. Он проходится по основным аспектам: изображения, пиктограммы, тени, шрифты, цвета.
9. Token CSS (https://tokencss.com/): Генератор токенов. Описываете их в JSON, дальше он экспортирует их в разные форматы.
10. Storybook: Как сделать переключатель языков с помощью фреймворка i18next.
11. Примеры:
— DRUIDS: Дизайн-система сервисов компании Datadog.
— NewsKit: Дизайн-система британского подразделения компании News Corp.
#designsystems
Material Design
Magic, utility, and redesigning Material.io
Pushing visual and interactive expression in design guidelines with Material Design 3
Кошечка говорит «мяу», собачка говорит «гав», дизайн-системы в дайджесте говорят «и снова здравствуйте»:
1. Romina Kavcic: Интерактивная мини-книга.
2. Опубликованы видео с конференции Figma Schema 2022 из Лондона, Токио и Нью-Йорка. А ещё черновик презентации Jacob Miller: он предлагает подходы к организации компонентов в дизайн-системе Figma, которые упростят управление большими проектами с разными темами оформления.
3. Erik D. Kennedy: Обзор гайдлайнов iOS 16 . Основные принципы и элементы, плюс пачка шаблонов.
4. Fox: Работа над двумя дизайн-системами медиахолдинга (для обычных пользователей и внутренних сервисов).
5. Alex Bueno: Правильная архитектура токенов, которая учитывает множество брендов.
6. Backlight: Платформа для работы над дизайн-системой, которая объединяет инструменты дизайна, разработки и тестирования. Многое встраивается через плагины/надстройки к уже известным вещам.
7. Nathan Curtis: Процесс рефакторинга токенов. Иногда они создаются и используются хаотично, что тормозит отдачу от них.
8. Henny Swan: Где и как описывать accessibility.
9. Ardena Flahavin: Советы по именованию токенов и компонентов.
10. Jan Klever: Процесс принятия решений по новым компонентам и токенам в дизайн-системе Zilla сервиса Quero Education. Он ссылается на полезную диаграмму процесса Vanilla Pattern.
11. Elena Searcy: Пример описания иконок и иллюстраций в дизайн-системе.
#designsystems
1. Romina Kavcic: Интерактивная мини-книга.
2. Опубликованы видео с конференции Figma Schema 2022 из Лондона, Токио и Нью-Йорка. А ещё черновик презентации Jacob Miller: он предлагает подходы к организации компонентов в дизайн-системе Figma, которые упростят управление большими проектами с разными темами оформления.
3. Erik D. Kennedy: Обзор гайдлайнов iOS 16 . Основные принципы и элементы, плюс пачка шаблонов.
4. Fox: Работа над двумя дизайн-системами медиахолдинга (для обычных пользователей и внутренних сервисов).
5. Alex Bueno: Правильная архитектура токенов, которая учитывает множество брендов.
6. Backlight: Платформа для работы над дизайн-системой, которая объединяет инструменты дизайна, разработки и тестирования. Многое встраивается через плагины/надстройки к уже известным вещам.
7. Nathan Curtis: Процесс рефакторинга токенов. Иногда они создаются и используются хаотично, что тормозит отдачу от них.
8. Henny Swan: Где и как описывать accessibility.
9. Ardena Flahavin: Советы по именованию токенов и компонентов.
10. Jan Klever: Процесс принятия решений по новым компонентам и токенам в дизайн-системе Zilla сервиса Quero Education. Он ссылается на полезную диаграмму процесса Vanilla Pattern.
11. Elena Searcy: Пример описания иконок и иллюстраций в дизайн-системе.
#designsystems
thedesignsystem.guide
The Design System Guide
Set Up a Design System. Guide, Resources, Useful Tools, Checklists
Пробка из непрочитанного свежего разбирается, но медленно. Выдам партию ссылок по дизайн-системам:
Derek Boman: Годнейшее мышление о модели зрелости дизайн-системы. Он взял за основу концепцию Джеффри Мура «преодоления пропасти» для стартапов и грамотно переложил на этапы внедрения дизайн-системы внутри организации.
Андрей Сундиев: Пилотный запуск в Beamery. Как выбрали часть продукта для него и упрощали процесс, чтобы не делать лишнего на раннем этапе.
Material Design: Все заметные обновления в 2022 году.
Storybook: Запускают свою конференцию Storybook Day. Первая 14 марта 2023 года в онлайне.
Они открыли бета-версию Storybook 7.0. Редизайн, новый формат описания компонентов, интеграции по API, документация через MDX 2, дополнительные возможности тестирования и многое другое.
Karat: Советы по менеджменту процесса. Пример плана.
Paavan Buddhdev: Канва. Она помогает описать цели, проблемы, команду и другие аспекты создания и внедрения.
Lukas Oppermann: Обзор черновика стандарта W3C для токенов. Как научить Style Dictionary понимать эту нотацию.
Alibaba: Перевод на дизайн-систему сервиса бронирования Atlas.
Kevin Muldoon: Интересный подход к описанию типографической сетки. Он ориентируется на ширину типовых колонок контента в разных состояниях адаптивности.
Wikimedia Codex (команда, которая делает Wikipedia). Как и зачем её создавали.
Amy Hupe: Дизайн-системы могут масштабировать как удачные, так и проблемные решения. И важно проверять это на берегу.
Mafs: Библиотека React-компонентов для визуализации данных.
#designsystems
Derek Boman: Годнейшее мышление о модели зрелости дизайн-системы. Он взял за основу концепцию Джеффри Мура «преодоления пропасти» для стартапов и грамотно переложил на этапы внедрения дизайн-системы внутри организации.
Андрей Сундиев: Пилотный запуск в Beamery. Как выбрали часть продукта для него и упрощали процесс, чтобы не делать лишнего на раннем этапе.
Material Design: Все заметные обновления в 2022 году.
Storybook: Запускают свою конференцию Storybook Day. Первая 14 марта 2023 года в онлайне.
Они открыли бета-версию Storybook 7.0. Редизайн, новый формат описания компонентов, интеграции по API, документация через MDX 2, дополнительные возможности тестирования и многое другое.
Karat: Советы по менеджменту процесса. Пример плана.
Paavan Buddhdev: Канва. Она помогает описать цели, проблемы, команду и другие аспекты создания и внедрения.
Lukas Oppermann: Обзор черновика стандарта W3C для токенов. Как научить Style Dictionary понимать эту нотацию.
Alibaba: Перевод на дизайн-систему сервиса бронирования Atlas.
Kevin Muldoon: Интересный подход к описанию типографической сетки. Он ориентируется на ширину типовых колонок контента в разных состояниях адаптивности.
Wikimedia Codex (команда, которая делает Wikipedia). Как и зачем её создавали.
Amy Hupe: Дизайн-системы могут масштабировать как удачные, так и проблемные решения. И важно проверять это на берегу.
Mafs: Библиотека React-компонентов для визуализации данных.
#designsystems
Derek Boman
Design System Maturity Levels — Derek Boman
Building a design system is not easy. It requires coordinating across multiple teams and their needs. Taking a scrappy, grassroots approach that follows a 5-level startup adoption model can be instructive for driving success within your organization.
Ежегодная конференция Google I/O 2023 прошла 10 мая в онлайне (в основном). Основная часть ставила рекорд по количеству повторений слова «AI», так что больших изменений в Android и Material Design кроме выхода телефона Pixel Fold с гибким экраном — нет. Но вот что накопалось:
MATERIAL DESIGN
Сильно обновили гайдлайны по поддержке больших экранов и планшетов (обзор и ещё один). Ещё про работу с ними
— Дизайн
— Разработка
— Тестирование
Расширяется набор компонентов Jetpack для Material 3. Один из необычных — карусель со своим флёром.
Более предсказуемая анимация для перемещения назад (ещё про это).
Контрастные темы оформления для поддержки accessibility. Есть даже полностью монохромный вариант
Обновили UI Kit для Figma.
Улучшенная работа с цветом и темами оформления на их основе.
Видео-презентация их видения «forms follows feelings» — они обосновывают логику Material You. Зачем-то оскорбляют изначальную концепцию Material Design (где этот термин имел смысл), не предлагая сопоставимой по силе метафоры.
Видео-презентация более мягкого языка анимации.
ANDROID 14
Новый сайт Design for Android собрал всё о работе над интерфейсами для любых веток ОС (обзор).
В Android Studio появился бот а-ля GitHub Copilot, который помогает писать код.
Появился визуальный линтинг для поиска проблем с accessibility.
Можно будет транслировать приложения с Android-телефона на Chromebook.
Более гибкая шкала масштабирования шрифтов.
Упрощение паролей через их менеджер и метод passkeys.
ANDROID AUTO
Получение и использование части данных о состоянии машины (например, уровень заправки).
Объединение всех экранов в машине (включая пассажирские).
Поддержка игр.
Как портировать планшетные приложения.
Текстовый обзор.
Раздел для дизайнеров и разработчиков.
К концу 2023 года Android Auto будет доступна в 200 млн машин
Вот вообще все видео выступлений конференции, если обзора мало.
В прошлом году я вообще пропустил традиционный обзор изменений в дизайне Android, потому что было негусто. Тут кой-чего есть, но тоже без революций. Посмотрим, что там будет на WWDC 5–9 июня.
#materialdesign #designsystems
MATERIAL DESIGN
Сильно обновили гайдлайны по поддержке больших экранов и планшетов (обзор и ещё один). Ещё про работу с ними
— Дизайн
— Разработка
— Тестирование
Расширяется набор компонентов Jetpack для Material 3. Один из необычных — карусель со своим флёром.
Более предсказуемая анимация для перемещения назад (ещё про это).
Контрастные темы оформления для поддержки accessibility. Есть даже полностью монохромный вариант
Обновили UI Kit для Figma.
Улучшенная работа с цветом и темами оформления на их основе.
Видео-презентация их видения «forms follows feelings» — они обосновывают логику Material You. Зачем-то оскорбляют изначальную концепцию Material Design (где этот термин имел смысл), не предлагая сопоставимой по силе метафоры.
Видео-презентация более мягкого языка анимации.
ANDROID 14
Новый сайт Design for Android собрал всё о работе над интерфейсами для любых веток ОС (обзор).
В Android Studio появился бот а-ля GitHub Copilot, который помогает писать код.
Появился визуальный линтинг для поиска проблем с accessibility.
Можно будет транслировать приложения с Android-телефона на Chromebook.
Более гибкая шкала масштабирования шрифтов.
Упрощение паролей через их менеджер и метод passkeys.
ANDROID AUTO
Получение и использование части данных о состоянии машины (например, уровень заправки).
Объединение всех экранов в машине (включая пассажирские).
Поддержка игр.
Как портировать планшетные приложения.
Текстовый обзор.
Раздел для дизайнеров и разработчиков.
К концу 2023 года Android Auto будет доступна в 200 млн машин
Вот вообще все видео выступлений конференции, если обзора мало.
В прошлом году я вообще пропустил традиционный обзор изменений в дизайне Android, потому что было негусто. Тут кой-чего есть, но тоже без революций. Посмотрим, что там будет на WWDC 5–9 июня.
#materialdesign #designsystems
io.google
Google I/O 2023
Tune in to watch the latest news and innovations from Google. Join I/O for livestreamed keynotes and helpful product updates on demand.
Сегодня — всё, что попадало в дайджест о дизайн-системах за последние месяцы:
1. Lukas Oppermann: Подробнейше разложил по полочкам системную работу с новыми токенами в Figma. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
2. Авито: Как визуально срифмовали набор иконок со шрифтом. Отличная пошаговая инструкция для важной задачи, до которой редко добираются команды.
3. Pinterest: Измерение «покрытия» продуктов на уровне Figma. Это главный показатель успеха внедрения и у них получился отличный и не сильно затратный подход.
4. Booking.com: Процесс работы над компонентом (он есть в Figma). И рассказывает о других инструментах в работе над ней.
5. Intuit: Работа над семантическими токенами. Как они пришли к их архитектуре и типизации.
6. Lyft: Процесс внедрения платформы для платежей. Самая ценная часть статьи — подход к оценке новых запросов в дизайн-систему.
7. Storybook: Дополнение, которое позволяет переключать тему оформления для любого фреймворка.
8. Wikipedia: Как искали единую сетку для редизайна.
9. Proportio: Сервис помогает построить пропорциональную систему размеров, которая объединяет шрифт, иконки и отступы. Обзор от автора. Правда, сейчас там есть странности типа размера иконок 23x23.
10. Stephanie Eckles: Все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
#designsystems
1. Lukas Oppermann: Подробнейше разложил по полочкам системную работу с новыми токенами в Figma. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
2. Авито: Как визуально срифмовали набор иконок со шрифтом. Отличная пошаговая инструкция для важной задачи, до которой редко добираются команды.
3. Pinterest: Измерение «покрытия» продуктов на уровне Figma. Это главный показатель успеха внедрения и у них получился отличный и не сильно затратный подход.
4. Booking.com: Процесс работы над компонентом (он есть в Figma). И рассказывает о других инструментах в работе над ней.
5. Intuit: Работа над семантическими токенами. Как они пришли к их архитектуре и типизации.
6. Lyft: Процесс внедрения платформы для платежей. Самая ценная часть статьи — подход к оценке новых запросов в дизайн-систему.
7. Storybook: Дополнение, которое позволяет переключать тему оформления для любого фреймворка.
8. Wikipedia: Как искали единую сетку для редизайна.
9. Proportio: Сервис помогает построить пропорциональную систему размеров, которая объединяет шрифт, иконки и отступы. Обзор от автора. Правда, сейчас там есть странности типа размера иконок 23x23.
10. Stephanie Eckles: Все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
#designsystems
Medium
Getting started with native design tokens in Figma
How to use Figma variables to implement different design token strategies
Обновление базы знаний по дизайн-системам, выпуск №40:
Lukas Oppermann: Карта лиц, принимающих решения, для дизайн-систем. Он собрал разные профили и роли таких людей, плюс методы коммуникации с ними.
NN/g: Причины выбора пользователями тёмной темы и реальный эффект от изначальных постулатов пользы от неё. А также собрали советы по внедрению, включая подсветку самых проблемных мест.
Zag: Коллекция API для дизайн-систем обещает решить проблему поддержки разных компонентных фреймворков типа React, Vue и Solid. Он даёт логику поведения, которая будет одинаково работать в любом из них.
Spotify: Следующее поколение их дизайн-системы Encore. Она объединяет 45 платформ вроде компьютеров, телефонов, планшетов, телевизоров и т.п. Со временем правила стали более жёсткими, чтобы сохранить целостность.
Captiv8: Внедрение цветовых семантических токенов на базе цветовой модели CIELAB.
Storybook: Плагин для визуального тестирования компонентов. Он автоматически сравнивает новую версию с предыдущей и показывает разницу.
Melissa McArthur: Пошаговая инструкция по созданию токенов с помощью новых переменных Figma.
Dave Rupert: Анализирует, почему потенциально годный стандарт веб-компонентов не шибко популярен. Полемика Nolan Lawson.
Radix UI: Фреймворк для простых дизайн-систем.
#designsystems
Lukas Oppermann: Карта лиц, принимающих решения, для дизайн-систем. Он собрал разные профили и роли таких людей, плюс методы коммуникации с ними.
NN/g: Причины выбора пользователями тёмной темы и реальный эффект от изначальных постулатов пользы от неё. А также собрали советы по внедрению, включая подсветку самых проблемных мест.
Zag: Коллекция API для дизайн-систем обещает решить проблему поддержки разных компонентных фреймворков типа React, Vue и Solid. Он даёт логику поведения, которая будет одинаково работать в любом из них.
Spotify: Следующее поколение их дизайн-системы Encore. Она объединяет 45 платформ вроде компьютеров, телефонов, планшетов, телевизоров и т.п. Со временем правила стали более жёсткими, чтобы сохранить целостность.
Captiv8: Внедрение цветовых семантических токенов на базе цветовой модели CIELAB.
Storybook: Плагин для визуального тестирования компонентов. Он автоматически сравнивает новую версию с предыдущей и показывает разницу.
Melissa McArthur: Пошаговая инструкция по созданию токенов с помощью новых переменных Figma.
Dave Rupert: Анализирует, почему потенциально годный стандарт веб-компонентов не шибко популярен. Полемика Nolan Lawson.
Radix UI: Фреймворк для простых дизайн-систем.
#designsystems
Medium
Stakeholder management for design systems
The success of a design system depends more on stakeholder management than on the quality of its components.
Большие и маленькие статьи о дизайн-системах за последние полтора месяца, ну и всякое такое на тему:
1. Brad Frost: Глоссарий терминов и понятий современной дизайн-системы в большой компании. Не везде нужно всё из описанного, но оно востребовано на масштабе. Его выступление на эту тему.
2. Josh Clark: Предлагает смириться с тем, что команда дизайн-системы не успевает за скоростью изменений в продуктах и пересмотреть её роль. Это инфраструктурная часть, которая должна быть надёжной и продуманной. Её роль ― не придумывать любые возможные решения, а курировать уже созданные в продуктовых командах. Сама мысль не новая, но предложение идти от этой реальности ― достаточно свежее и абсолютно разумное.
3. Material Web: Вышла первая версия библиотеки компонентов для веба.
4. Rama Krushna Behera: Памятка по созданию компонента. От проектирования логики работы до реализации и гайдлайнов. Шаблон в Figma.
5. Список конференций и митапов на тему в разных странах мира.
6. Wise: Доработка цветовой палитры под требования accessibility. Часть 2 говорит о типографике, иконках и других аспектах.
7. Deliveroo: Обновление цветовой палитры. Как она стала лучше в плане accessibility.
8. Odido: Запуск дизайн-системы (слияние голландских T-Mobile и Tele2). Как выбирали стратегию перехода на неё и организовали иерархию стилей.
9. zeroheight: Победители их награды этого года.
10. Jonathan Dallas: Советы по именованию переменных в CSS.
11. Netlify: Канонически обновили интерфейсы под ребрендинг через дизайн-систему с помощью инструментов Storybook.
12. Intuit: Инструкция по настройке синхронизации переменных в Figma и токенов их дизайн-системы.
13. Sam Gordashko: Шпаргалка по использованию токенов в Figma на основе множества сторонних материалов.
14. Вышел Storybook 7.5. На подходе версия 7.6 с развитием инструментов тестирования.
#designsystems
1. Brad Frost: Глоссарий терминов и понятий современной дизайн-системы в большой компании. Не везде нужно всё из описанного, но оно востребовано на масштабе. Его выступление на эту тему.
2. Josh Clark: Предлагает смириться с тем, что команда дизайн-системы не успевает за скоростью изменений в продуктах и пересмотреть её роль. Это инфраструктурная часть, которая должна быть надёжной и продуманной. Её роль ― не придумывать любые возможные решения, а курировать уже созданные в продуктовых командах. Сама мысль не новая, но предложение идти от этой реальности ― достаточно свежее и абсолютно разумное.
3. Material Web: Вышла первая версия библиотеки компонентов для веба.
4. Rama Krushna Behera: Памятка по созданию компонента. От проектирования логики работы до реализации и гайдлайнов. Шаблон в Figma.
5. Список конференций и митапов на тему в разных странах мира.
6. Wise: Доработка цветовой палитры под требования accessibility. Часть 2 говорит о типографике, иконках и других аспектах.
7. Deliveroo: Обновление цветовой палитры. Как она стала лучше в плане accessibility.
8. Odido: Запуск дизайн-системы (слияние голландских T-Mobile и Tele2). Как выбирали стратегию перехода на неё и организовали иерархию стилей.
9. zeroheight: Победители их награды этого года.
10. Jonathan Dallas: Советы по именованию переменных в CSS.
11. Netlify: Канонически обновили интерфейсы под ребрендинг через дизайн-систему с помощью инструментов Storybook.
12. Intuit: Инструкция по настройке синхронизации переменных в Figma и токенов их дизайн-системы.
13. Sam Gordashko: Шпаргалка по использованию токенов в Figma на основе множества сторонних материалов.
14. Вышел Storybook 7.5. На подходе версия 7.6 с развитием инструментов тестирования.
#designsystems
Brad Frost
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What's required and what's optional? Hold onto your butts, because we're…
Небольшая, но жирнючая, как приближающийся оливье, подборка нового о дизайн-системах:
1. Rosenfeld Media выпустили книгу Dan Mall «Design That Scales».
2. Атомаро: Ростелеком сделал отчуждаемую версию своей дизайн-системы. Можно поставить её себе и настроить свою тему оформления. Под капотом React с токенами.
3. Design Systems Database: Ещё один каталог дизайн-систем.
4. StyleX: Фреймворк для токенов Меты, который используют все их продукты (Facebook, Instagram, Whatsapp, THreads).
5. Figma: Свежие обновления переменных. Что уже внедрили и как планируют развивать.
6. Luis Ouriach: Подробная инструкция по созданию компонентов в Figma и организации дизайн-системы в инструменте в целом. Он стремится создавать их для реального и широкого использования. Рекомендации по организации библиотек.
7. Виталий Капустьянов: Подгонка толщины линий иконок под разные размеры шрифта.
8. Вышел Storybook 7.6. Но уже есть ранняя версия 8.0.
#designsystems
1. Rosenfeld Media выпустили книгу Dan Mall «Design That Scales».
2. Атомаро: Ростелеком сделал отчуждаемую версию своей дизайн-системы. Можно поставить её себе и настроить свою тему оформления. Под капотом React с токенами.
3. Design Systems Database: Ещё один каталог дизайн-систем.
4. StyleX: Фреймворк для токенов Меты, который используют все их продукты (Facebook, Instagram, Whatsapp, THreads).
5. Figma: Свежие обновления переменных. Что уже внедрили и как планируют развивать.
6. Luis Ouriach: Подробная инструкция по созданию компонентов в Figma и организации дизайн-системы в инструменте в целом. Он стремится создавать их для реального и широкого использования. Рекомендации по организации библиотек.
7. Виталий Капустьянов: Подгонка толщины линий иконок под разные размеры шрифта.
8. Вышел Storybook 7.6. Но уже есть ранняя версия 8.0.
#designsystems
Rosenfeld Media
Design That Scales | Free EBook with Purchase | Dan Mall
Perfect for creators seeking efficient design system practices—discover key takeaways for success in creation, management, and sustainability.
Первая в этом году мини-подборка о дизайн-системах:
1. Adobe Spectrum 2: Вышла вторая версия. Они добавили эмоциональности к визуальному языку, дополнили цветовые схемы, срифмовали иконки к фирменному шрифту. Также добавили коллекцию компонентов на react без стиля, но с трушной поддержкой accessibility. Angelie Herreria-Tagle рассказывает, чем занимается program-менеджер в команде.
2. Streamline: Шикарная методичка по работе с сеткой для пиктограмм. Как балансировать набор иконок с её помощью.
3. Storybook: Планы на 2024 год. Выйдет версия 8.0 и расширится поддержка фреймворков помимо React.
4. Razorpay Blade: Как команда дизайн-системы отслеживает её использование и в целом связывает дизайнеров и разработчиков через Figma.
5. Zach Saucier: Шпаргалка по container queries и единицам размеров в них.
6. Brad Frost: Рассуждает об инициативе универсального фреймворка, который могли бы использовать любые команды в мире. Если такое и возможно, то это будет путь длиной лет в десять.
7. Zara Soltani: Советы по именованию токенов.
8. Nathan Curtis: Десяток мифов.
#designsystems
1. Adobe Spectrum 2: Вышла вторая версия. Они добавили эмоциональности к визуальному языку, дополнили цветовые схемы, срифмовали иконки к фирменному шрифту. Также добавили коллекцию компонентов на react без стиля, но с трушной поддержкой accessibility. Angelie Herreria-Tagle рассказывает, чем занимается program-менеджер в команде.
2. Streamline: Шикарная методичка по работе с сеткой для пиктограмм. Как балансировать набор иконок с её помощью.
3. Storybook: Планы на 2024 год. Выйдет версия 8.0 и расширится поддержка фреймворков помимо React.
4. Razorpay Blade: Как команда дизайн-системы отслеживает её использование и в целом связывает дизайнеров и разработчиков через Figma.
5. Zach Saucier: Шпаргалка по container queries и единицам размеров в них.
6. Brad Frost: Рассуждает об инициативе универсального фреймворка, который могли бы использовать любые команды в мире. Если такое и возможно, то это будет путь длиной лет в десять.
7. Zara Soltani: Советы по именованию токенов.
8. Nathan Curtis: Десяток мифов.
#designsystems
Adobe
Spectrum 2
What’s next for Adobe’s design system: more modern, accessible, friendly, and enjoyable.
Нашёл несколько потеряшек про дизайн-системы в забытых вкладках, а то им было там одиноко:
1. Componly: Сервис помогает отслеживать покрытие продуктов. Это одна из главных метрик успешности, но сделать это по уму крайне сложно. Видео-презентация.
2. Ness Grixti: Методичка. Как создавать и поддерживать их.
3. Razorpay: Отличная памятка по организации дизайн-системы в Figma.
4. Storybook: Вышла бета 8 версии с улучшенной поддержкой мобильных, автоматизрованными визуальными тестами и в целом инструментами тестирования, серверными компонентами. Также обновилась версия для React Native.
#designsystems
1. Componly: Сервис помогает отслеживать покрытие продуктов. Это одна из главных метрик успешности, но сделать это по уму крайне сложно. Видео-презентация.
2. Ness Grixti: Методичка. Как создавать и поддерживать их.
3. Razorpay: Отличная памятка по организации дизайн-системы в Figma.
4. Storybook: Вышла бета 8 версии с улучшенной поддержкой мобильных, автоматизрованными визуальными тестами и в целом инструментами тестирования, серверными компонентами. Также обновилась версия для React Native.
#designsystems
Отложка неотложных новостей и свежих материалов про дизайн-системы:
1. Nathan Curtis: Новая серия статей посвящена смене поколения дизайн-системы. Первая часть даёт определение, вторая говорит о планировании, третья о выкатке, четвёртая о именовании и последняя о новом цикле.
2. Kevin Coyle: Собрал для Brad Frost примеры использования алгоритмических инструментов в дизайн-системах. Код компонентов, тестирование, документация. Его презентация на Smashing Conf.
3. Storybook 8 вышел из беты. Улучшенная поддержка мобильных, автоматизированные визуальные тесты и в целом улучшенные инструменты тестирования, серверные компоненты, отвязка привязки к React для других фреймворков. Также появилась бета-версия плагина Visual Tests для визуального тестирования компонентов.
4. Павел Киселёв: Подход к созданию дизайн-системы в Figma с гибкой тематизацией для разных брендов. Он сделал плагин Source Foundation, который помогает в этом, а также приложил кучу примеров.
5. VK для бизнеса: Генератор токенов и компонентов в коде на основе Figma.
6. Dave Rupert: Выделяет толковую мысль: настоящая ценность дизайн-системы проявляется в триггерные моменты. Он составил пример таких событий вроде обновления бренда.
7. Javier Cuello: Чеклист по дизайну и тестированию компонентов в Figma.
8. НЛМК: Дизайн-система металлургической компании. Есть компоненты в коде и Figma.
9. Supernova 2.0: Вышла вторая версия инструмента для описания дизайн-систем. Добавили совместную работу над документами и быстрый глобальный поиск.
#designsystems
1. Nathan Curtis: Новая серия статей посвящена смене поколения дизайн-системы. Первая часть даёт определение, вторая говорит о планировании, третья о выкатке, четвёртая о именовании и последняя о новом цикле.
2. Kevin Coyle: Собрал для Brad Frost примеры использования алгоритмических инструментов в дизайн-системах. Код компонентов, тестирование, документация. Его презентация на Smashing Conf.
3. Storybook 8 вышел из беты. Улучшенная поддержка мобильных, автоматизированные визуальные тесты и в целом улучшенные инструменты тестирования, серверные компоненты, отвязка привязки к React для других фреймворков. Также появилась бета-версия плагина Visual Tests для визуального тестирования компонентов.
4. Павел Киселёв: Подход к созданию дизайн-системы в Figma с гибкой тематизацией для разных брендов. Он сделал плагин Source Foundation, который помогает в этом, а также приложил кучу примеров.
5. VK для бизнеса: Генератор токенов и компонентов в коде на основе Figma.
6. Dave Rupert: Выделяет толковую мысль: настоящая ценность дизайн-системы проявляется в триггерные моменты. Он составил пример таких событий вроде обновления бренда.
7. Javier Cuello: Чеклист по дизайну и тестированию компонентов в Figma.
8. НЛМК: Дизайн-система металлургической компании. Есть компоненты в коде и Figma.
9. Supernova 2.0: Вышла вторая версия инструмента для описания дизайн-систем. Добавили совместную работу над документами и быстрый глобальный поиск.
#designsystems
Medium
Design System Generations
How to discuss and describe a design system’s biggest changes
Только я собрался собрать мини-подборку о дизайн-системах, как Figma провела мини-конференцию Framework на тему 16 апреля (и сделает ещё пару доп.событий 18 и 23 числа).
Во-первых, запустили много фешенебельных новых функций: шрифтовые и градиентные токены, аналитика использования библиотек. И, самое главное — родная связка с реальным кодом компонентов через Code Connect, благодаря которой разработчики могут получить его прямо из макета (причём это не мусорная автогенерация).
Во-вторых, выпустили серию кейсов о командах дизайн-систем:
— Компонентный спринт в Washington Post. Дизайнер и разработчик в паре про прорабатывают все вопросы в течение 10 дней.
— Как переезжали на Figma в Carvana и Alaska Airlines.
Была ещё пара общепроцессных статей, но они водянистые. Зато неплохой обзор плагинов для связки кода и дизайна в Dev Mode.
Бонус — несколько статей о новых возможностях переменных в CSS:
1. Michelle Barker: Относительно новая функция color-mix(), которая помогает делать вариации цветов в токенах.
2. Bramus van Damme: Функция light-dark(), которая позволяет задавать цвета для обычной и тёмной темы оформления.
3. Lea Verou: Предлагает отличную идею групп для переменных. Они могли бы упростить описание шрифтовых наборов, цветовых градаций и других связанных токенов.
#designsystems
Во-первых, запустили много фешенебельных новых функций: шрифтовые и градиентные токены, аналитика использования библиотек. И, самое главное — родная связка с реальным кодом компонентов через Code Connect, благодаря которой разработчики могут получить его прямо из макета (причём это не мусорная автогенерация).
Во-вторых, выпустили серию кейсов о командах дизайн-систем:
— Компонентный спринт в Washington Post. Дизайнер и разработчик в паре про прорабатывают все вопросы в течение 10 дней.
— Как переезжали на Figma в Carvana и Alaska Airlines.
Была ещё пара общепроцессных статей, но они водянистые. Зато неплохой обзор плагинов для связки кода и дизайна в Dev Mode.
Бонус — несколько статей о новых возможностях переменных в CSS:
1. Michelle Barker: Относительно новая функция color-mix(), которая помогает делать вариации цветов в токенах.
2. Bramus van Damme: Функция light-dark(), которая позволяет задавать цвета для обычной и тёмной темы оформления.
3. Lea Verou: Предлагает отличную идею групп для переменных. Они могли бы упростить описание шрифтовых наборов, цветовых градаций и других связанных токенов.
#designsystems
Figma
Join Us for Framework by Figma: Our Global Design Systems Event | Figma Blog
We’re bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next.
Мини-подборки тема — ваша дизайн-система:
1. Brad Frost: Концепция «рецептов». Это специфичные компоненты, которые нужны конкретному продукту в частной ситуации и добавлять их в общий каталог нет смысла. Хотя они должны строиться по тем же принципам.
2. Lukas Oppermann: Платиновая памятка по организации работы над дизайн-системой в Figma. Как вести версионирование, обновление компонентов, историю изменений — дотошно и основательно.
3. Завтра стартует ежегодная презентация Google I/O о будущем Android и Material Design. Liam Spradlin тизерит толковые рассказы от дизайнеров, James Williams показывает обновления компонентов для Android, а Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета).
4. Автомобильный интерфейс Snapp Automotive может иметь разные темы оформления для разных автопроизводителей. Casper Kessels рассказывает об архитектуре токенов и компонентов в Figma для этого.
5. Brad Frost: Мусор в дизайн-системе неизбежен из-за природы продуктовой работы. Но его можно минимизировать.
6. Andrea Zilibotti: Создание дизайн-системы Ritmo для музыкального сервиса Musixmatch.
7. Subframe: Инструмент позволяет собирать интерфейс из компонентов в коде, а потом докручивать его под себя.
8. Supernova: Опрос около 200 дизайнеров и разработчиков о том, как они используют токены.
#designsystems
1. Brad Frost: Концепция «рецептов». Это специфичные компоненты, которые нужны конкретному продукту в частной ситуации и добавлять их в общий каталог нет смысла. Хотя они должны строиться по тем же принципам.
2. Lukas Oppermann: Платиновая памятка по организации работы над дизайн-системой в Figma. Как вести версионирование, обновление компонентов, историю изменений — дотошно и основательно.
3. Завтра стартует ежегодная презентация Google I/O о будущем Android и Material Design. Liam Spradlin тизерит толковые рассказы от дизайнеров, James Williams показывает обновления компонентов для Android, а Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета).
4. Автомобильный интерфейс Snapp Automotive может иметь разные темы оформления для разных автопроизводителей. Casper Kessels рассказывает об архитектуре токенов и компонентов в Figma для этого.
5. Brad Frost: Мусор в дизайн-системе неизбежен из-за природы продуктовой работы. Но его можно минимизировать.
6. Andrea Zilibotti: Создание дизайн-системы Ritmo для музыкального сервиса Musixmatch.
7. Subframe: Инструмент позволяет собирать интерфейс из компонентов в коде, а потом докручивать его под себя.
8. Supernova: Опрос около 200 дизайнеров и разработчиков о том, как они используют токены.
#designsystems
Big Medium
The Art of Design System Recipes | Big Medium
Recipes take a design system’s components and make delicious, product-specific compositions out of them. Brad Frost breaks down the art of wielding recipes for digital UI success.
Ежегодная конференция Google I/O 2024 прошла 14 мая в онлайне (в основном). Как и в прошлый раз, всё внимание ушло на битву ИИ-вооружений — выше крыши новостной пищи про Gemini, маловато про Android и Material Design. Но чуток есть:
ANDROID 15
Детальный обзор экранов и функций. Самое заметное:
— Визуальное облегчение статусной строки
— Можно делиться не всем экраном, а его частью
— Обновление интерфейса камеры
— Постоянная панель приложений на больших экранах
— Предиктивная логика возврата назад в истории навигации
— Пары приложений, которые сразу запускаются с разделением экрана
— Насильное включение тёмной темы даже для приложений, которые её не поддерживают
Что нового по функциям:
— Приватный раздел, где можно спрятать приложения под пароль.
— Защита данных от воровства (телефон определит, если его вырвали из рук и побежали наутёк).
— Отслеживание вредоносных приложений в реальном времени.
— Можно сфотографировать билет или карту лояльности -- Google Wallet отсканирует её и добавит в коллекцию.
— ИИ будет анализировать телефонный разговор в реальном времени, чтобы словить типичные вопросы мошенников и предупредить пользователя.
— Project Gameface позволяет управлять телефоном глазами и мимикой людям с ограниченными возможностями.
Gemini полностью встроен в Android. Он запускается как слой поверх текущего приложения. Можно обвести что-то на экране телефона и получить ответ. Можно задать вопрос о видео с YouTube или PDF. Ещё он будет искать внутри Google Photos, объяснять решение проблемы из видео-ролика.
Обновления компонентов Material Design.
Бета-версию уже можно поставить себе.
Немного новостей по другим платформам
— Анонсировали раннюю версию WearOS 5. Расширение возможностей для сторонних циферблатов и API для отслеживания здоровья, повышение энергоэффективности.
— Обновление Android Auto (платформа доступна уже на 200 млн машинах). Можно передавать медиа с телефона через Google Cast, есть новые приложения.
— Google Home открывает свою платформу для сторонних продуктов.
Другие новости про Gemini
— Новые версии модели Gemini 1.5: более компактная Flash и совсем портативная Nano для запуска на устройстве.
— Обновились модели Imagen и Veo для генерации картинок и видео.
— В Gmail и Docs появится боковая панель для работы с Gemini.
— Project Astra использует камеру телефона для анализа того, что видит пользователь. Они сделали демо с очками дополненной реальности.
— Gemini Live поможет подготовиться к презентации или собеседованию — с ним можно вести диалоги. Виртуальный коллега в Google Workspace сможет мониторить статус проектов, поможет раскопать контекст из предыдущей переписки, анализировать тренды и организовывать информацию.
— Генеративные ответы в результатах поиска Google теперь доступны в США.
— Цифровые водяные знаки для сгенерированного видео.
Полезные выступления (Liam Spradlin выделил толковые для дизайнеров):
— Адаптивность между разными устройствами в дизайне, на базе Material 3 и разработке
— Поддержка accessibility
— Новые возможности работы с Material Design на Compose
— Оптимизация интерфейсов для больших экранов
— Android Auto
— Нюансы реализации хорошего UX
— Работа с генеративным ИИ на телефонах
Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета).
Вот такая окрошка новостей на тархуне (такая вся неоднородная), отправленная со смартфона Vivo (меметичная аналогия навязчивости Gemini). 10 июня сравним всё это с обновлением iOS.
#materialdesign #designsystems
ANDROID 15
Детальный обзор экранов и функций. Самое заметное:
— Визуальное облегчение статусной строки
— Можно делиться не всем экраном, а его частью
— Обновление интерфейса камеры
— Постоянная панель приложений на больших экранах
— Предиктивная логика возврата назад в истории навигации
— Пары приложений, которые сразу запускаются с разделением экрана
— Насильное включение тёмной темы даже для приложений, которые её не поддерживают
Что нового по функциям:
— Приватный раздел, где можно спрятать приложения под пароль.
— Защита данных от воровства (телефон определит, если его вырвали из рук и побежали наутёк).
— Отслеживание вредоносных приложений в реальном времени.
— Можно сфотографировать билет или карту лояльности -- Google Wallet отсканирует её и добавит в коллекцию.
— ИИ будет анализировать телефонный разговор в реальном времени, чтобы словить типичные вопросы мошенников и предупредить пользователя.
— Project Gameface позволяет управлять телефоном глазами и мимикой людям с ограниченными возможностями.
Gemini полностью встроен в Android. Он запускается как слой поверх текущего приложения. Можно обвести что-то на экране телефона и получить ответ. Можно задать вопрос о видео с YouTube или PDF. Ещё он будет искать внутри Google Photos, объяснять решение проблемы из видео-ролика.
Обновления компонентов Material Design.
Бета-версию уже можно поставить себе.
Немного новостей по другим платформам
— Анонсировали раннюю версию WearOS 5. Расширение возможностей для сторонних циферблатов и API для отслеживания здоровья, повышение энергоэффективности.
— Обновление Android Auto (платформа доступна уже на 200 млн машинах). Можно передавать медиа с телефона через Google Cast, есть новые приложения.
— Google Home открывает свою платформу для сторонних продуктов.
Другие новости про Gemini
— Новые версии модели Gemini 1.5: более компактная Flash и совсем портативная Nano для запуска на устройстве.
— Обновились модели Imagen и Veo для генерации картинок и видео.
— В Gmail и Docs появится боковая панель для работы с Gemini.
— Project Astra использует камеру телефона для анализа того, что видит пользователь. Они сделали демо с очками дополненной реальности.
— Gemini Live поможет подготовиться к презентации или собеседованию — с ним можно вести диалоги. Виртуальный коллега в Google Workspace сможет мониторить статус проектов, поможет раскопать контекст из предыдущей переписки, анализировать тренды и организовывать информацию.
— Генеративные ответы в результатах поиска Google теперь доступны в США.
— Цифровые водяные знаки для сгенерированного видео.
Полезные выступления (Liam Spradlin выделил толковые для дизайнеров):
— Адаптивность между разными устройствами в дизайне, на базе Material 3 и разработке
— Поддержка accessibility
— Новые возможности работы с Material Design на Compose
— Оптимизация интерфейсов для больших экранов
— Android Auto
— Нюансы реализации хорошего UX
— Работа с генеративным ИИ на телефонах
Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета).
Вот такая окрошка новостей на тархуне (такая вся неоднородная), отправленная со смартфона Vivo (меметичная аналогия навязчивости Gemini). 10 июня сравним всё это с обновлением iOS.
#materialdesign #designsystems
Новая серия про дизайн-системы готова к прочтению:
1. Sjoerd Beentjes: Предлагает использовать концепцию «аффорданса» для создания и описания компонентов дизайн-системы. Идея отличная — это поможет внутренним пользователям правильно использовать их.
2. Storybook 8.1: Можно создавать компоненты визуально из самого живого гайдлайна, не заходя в редактор кода. Конечно, это работает только для простого описания состояний, а не сложной логики, но уже упрощает работу.
Также вышел плагин для визуального тестирования компонентов, который сильно упрощает процесс.
3. Конференция по дизайн-системам Converge от сервиса ZeroHeight пройдёт 2–4 октября в Брайтоне (Великобритания).
4. Lukas Oppermann: Подробная памятка по грамотной организации переменных и компонентов в Figma.
5. Michelle Barker: Как сделать систему серых цветов разной насыщенности с помощью функции CSS color-mix().
6. Fumadocs: Фреймворк для создания сайтов документаций и живых гайдлайнов на платформе Vercel.
7. Каталог шведских дизайн-систем.
#designsystems
1. Sjoerd Beentjes: Предлагает использовать концепцию «аффорданса» для создания и описания компонентов дизайн-системы. Идея отличная — это поможет внутренним пользователям правильно использовать их.
2. Storybook 8.1: Можно создавать компоненты визуально из самого живого гайдлайна, не заходя в редактор кода. Конечно, это работает только для простого описания состояний, а не сложной логики, но уже упрощает работу.
Также вышел плагин для визуального тестирования компонентов, который сильно упрощает процесс.
3. Конференция по дизайн-системам Converge от сервиса ZeroHeight пройдёт 2–4 октября в Брайтоне (Великобритания).
4. Lukas Oppermann: Подробная памятка по грамотной организации переменных и компонентов в Figma.
5. Michelle Barker: Как сделать систему серых цветов разной насыщенности с помощью функции CSS color-mix().
6. Fumadocs: Фреймворк для создания сайтов документаций и живых гайдлайнов на платформе Vercel.
7. Каталог шведских дизайн-систем.
#designsystems
www.voorhoede.nl
Affordance in Design System Components | De Voorhoede
By using affordance principles, design systems become easier to use and more flexible, making it simpler for developers to build web applications. Discover how.
Летом авторы статей чилят, поэтому мини-подборки реально мини. Ну и вы не перестарайтесь читать эту малютку о дизайн-системах:
1. Adobe: Канонический подход к обновлению пиктограмм. Isabelle Hamlin рассказывает о процессе и всех важных нюансах.
2. Decathlon: Отличная памятка о том, как наладить связь между дизайн-системой в Figma и коде. Он советует начинать с простых вещей и постепенно усиливать взаимодействие между дизайнерами и разработчиками.
3. Lyft: Как происходит процесс добавления компонента.
4. Storybook 8.2. Там же тизернули то, что войдёт в версию 8.3.
#designsystems
1. Adobe: Канонический подход к обновлению пиктограмм. Isabelle Hamlin рассказывает о процессе и всех важных нюансах.
2. Decathlon: Отличная памятка о том, как наладить связь между дизайн-системой в Figma и коде. Он советует начинать с простых вещей и постепенно усиливать взаимодействие между дизайнерами и разработчиками.
3. Lyft: Как происходит процесс добавления компонента.
4. Storybook 8.2. Там же тизернули то, что войдёт в версию 8.3.
#designsystems
adobe.design
Designing design systems: Constructing an icon system
A process for creating a unified brand experience through iconography