Когда я только начала изучать дизайн-системы, то столкнулась с большим количеством информации. В этой статье собрала полезные ссылки, с которых легко начать погружение в мир визуального языка.
Что же это такое и для чего нужно? Дизайн-системы создаются с целью повышения узнаваемости бренда, автоматизации процессов и экономии времени дизайнеров и разработчиков. Состоит из UI-kit, гайдлайнов и готовых элементов интерфейса в коде.
Статьи о дизайн-системах
Для общего понимания при первом погружении.
Что такое ДС от Tilda.education читать
Дизайн-системы для чайников: статьи, книги, примеры, инструментарий от Awdee читать
Дизайн-система: что это, кому нужно и как её создать от Skillbox читать
Базовые дизайн-системы от Google и Apple
Это основные гайдлайны, которые необходимо знать и уметь ими пользоваться.
Material Design читать сайт. Готовые стили и компоненты в фигме открыть
Human Interface Guidelines читать сайт. Готовые стили и компоненты в фигме открыть
Design tokens
Дизайн-токены — это набор базовых переменных визуального языка — отступы, цвета, типографика, стили объектов, анимация — представленный в виде данных (источник).
Ультимативный гайд по дизайн-токенам от Usetech читать
Design tokens от Adobe читать на английском, но понятно написано
Дизайн-токены способны на большее: создаем единый источник информации о компонентах UI от frontendj читать
Дизайн-системы компаний в общем доступе
ДС компаний в общем доступе + много полезной информации открыть
50 примеров дизайн-систем для вдохновения открыть
Проектирование интерфейсов для госсервисов РФ открыть
Система отступов, размеров и сетки
Пространственные системы, сетки и лейауты предоставляют правила, которые дают дизайнам постоянный ритм, ограничивают принятие решений и помогают командам оставаться на одном уровне (источник).
Отступы в дизайне читать (листаем до середины)
The 8-Point Grid читать
Прощай, сетка 8-pt, привет, сетка 4-pt читать
Accessibility
Доступность — это концепция создания веб-контента, адаптированного под людей с ограниченными возможностями. Для проверки цветового контраста в фигме я использую плагин Able - Friction Free Accessibility.
Принципы доступности читать
Руководство по обеспечению доступности веб-контента (WCAG) 2.0 читать
Основы доступности (Accessibility) дизайна читать
Accessibility is the new black: 5 принципов доступного веб-дизайна читать
Есть чат в телеграмме, полностью посвященный обсуждению дизайн-систем.