Дизайн-системы, которые говорят с продуктом — Андрей Волгин — Дизайн-кабак

  В AI-ready дизайн-системе библиотека компонентов дополняется знаниями о том, как из них складывается продукт. Инструкции объясняют устройство и поведение компонентов, а рекомендации помогают выбрать подходящие для конкретного сценария. Отдельные правила связывают эти решения в последовательность действий, понятную пользователю. Всё это можно назвать статичной частью системы – зафиксированными знаниями о том, что и почему в ней устроено именно так. Но эти…

от «цифровой бумаги» до готовой дизайн-системы — серия из 6 частей — Роман Гигола — Дизайн-кабак

Сегодня я запускаю серию статей, которая станет самым полным русскоязычным руководством по Material Design 2. Мы начнём с философских основ, чтобы понять не просто «как делать», а «почему именно так». Это знание поможет вам создавать лучшие интерфейсы, даже если вы никогда не будете использовать Material Design напрямую. Зачем эта серия? За годы работы с дизайн-системами…

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

Статьи 9 мин на чтение 9 В дизайн-системах дизайнеры, разработчики и другие члены команды ориентируются на документацию. Она содержит пошаговые инструкции о том, как внедрять руководства по доступности в дизайн. Более того, качественная документация позволяет учесть и эффективно реализовать все ключевые аспекты доступности. Тем самым она способствует сотрудничеству и последовательности в работе. В этой статье…

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

Статьи 17 мин на чтение 66 Что такое цветовая палитра? Цветовая палитра, также известная, как цветовая шкала, — неотъемлемая часть любого дизайн-проекта. Она включает набор оттенков и теней, которые определяют его концептуальные цвета. В дальнейшем их используют для создания внешнего вида компонентов интерфейса, состояний, иллюстраций и общего стиля дизайна. Тщательно разработанная цветовая палитра — сбалансированный…

Создание дизайн-системы от А до Я: опыт компании QWERTY.Software. Часть 1 | by Victor Zhitomirskiy

Как возникла необходимость в дизайн системе Немного контекста: моя команда работает над продуктом с рядом отдельных независимых друг от друга сайтов, где клиенты могут ознакомиться с нашими услугами, сделать заказ и потом управлять своими заказами. Дизайн каждого из наших сайтов на 90% уникален (за исключением некоторых важных шагов воронки). На определенном этапе мы столкнулись с…

Где вы размещаете интервалы между компонентами дизайн-системы? — Эрик Бейли

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

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

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

Как я программно создал в Figma 256 новых компонентов дизайн-системы

Дизайна-cистема Uber Base предлагает набор компонентов маркеров карты, которые широко используются в наших продуктах и ​​отображаются всякий раз, когда мы показываем карту пользователю. Недавно мы столкнулись с необходимостью показать дополнительный контекст и решили добавить для этого бейджи – существующий базовый компонент. Проблема заключалась в том, что и маркеры карты, и бейджи имели несколько вариантов. Маркеры можно настроить по…

Энциклопедия дизайн-системы. Полная визуальная энциклопедия пользовательского интерфейса… | Джон Мур | Электроинструменты UX | Август, 2020

Компоненты — это сложные элементы пользовательского интерфейса, состоящие из нескольких токенов пользовательского интерфейса. Это молекулы атомной конструкции, поскольку они состоят из нескольких атомов. Панель действий Панель действий — это группа инструментов для управления объектами или выполнения действий. https://dribbble.com/shots/11116878-Hiring-Platform-Messages-Chat Лента активности Лента активности представляет собой хронологическую запись системных событий или действия пользователя. https://dribbble.com/shots/7090382-Concept-Design-Activity-History Avatar Group An…

Что такое дизайн-системы и почему их используют

Дизайн-системы можно найти везде и практически во всем. Они находятся в операционной системе вашего смартфона, ноутбука, который вы используете для работы, и даже на посещаемых вами веб-сайтах. Но что такое дизайн-система? Что в нее входит? Зачем их использовать? Мы собираемся ответить на эти вопросы в данной статье, более подробно рассмотрев дизайн-системы, а также их важность.…