HTML Academy - Дизайн-системы для фронтендеров

Научившись выделять и использовать дизайн-системы, вы сможете:

• Быстрее собирать большие проекты
• Повысить скорость развития продукта в целом
• Проще вносить изменения в созданные проекты
• Сократить время внедрения новых фич

После прохождения курса вы сможете:

• Отличать UI-кит от дизайн-системы и правильно выбирать их под задачу
• Выделять системы из существующего дизайна
• Выделять компоненты и правильно использовать переменные
• Строить дизайн-системы в коде с нуля
• Эффективнее организовывать процесс работы с дизайнерами
• Документировать дизайн-систему
• Публиковать дизайн-систему и вносить в неё изменения

Программа курса:

Мы начнём с изучения дизайн-систем и их принципов, и постепенно перейдём к особенностям технической реализации. Наша задача --- понять все принципы и философию дизайн-систем.

Раздел 1

Введение
— Что такое дизайн-система?
— Какие существуют дизайн-системы?
— Отличие дизайн-систем от UI-китов
— Плюсы и минусы использования дизайн-систем

Раздел 2

Декомпозиция
— Принципы декомпозиции дизайна и кода
— Вынесение переменных из дизайна
— Вынесение компонентов из дизайна
— Вынесение составных блоков
— Вынесение сеток и лейаутов

Раздел 3

Техническая реализация
— Перенос сформированной системы из дизайна в код
— Перенос переменных
— Построение компонентов и блоков
— Построение сеток и лейаутов

Раздел 4

Связка с дизайном
— Принципы организации эффективного воркфлоу с дизайнерами при создании дизайн-систем
— Коммуникация с дизайнерами на этапе создания и поддержки дизайн-систем
— Внесение изменений в существующую дизайн-систему.

Раздел 5

Командная работа, публикация и документация
— Принципы организации дизайн-системы
— Описание и документирование частей дизайн системы
— Особенности публикации открытых и закрытых дизайн-систем

Авторы курса