Научившись выделять и использовать дизайн-системы, вы сможете:
- Быстрее собирать большие проекты
- Повысить скорость развития продукта в целом
- Проще вносить изменения в созданные проекты
- Сократить время внедрения новых фич
После прохождения курса вы сможете:
- Отличать UI-кит от дизайн-системы и правильно выбирать их под задачу
- Выделять системы из существующего дизайна
- Выделять компоненты и правильно использовать переменные
- Строить дизайн-системы в коде с нуля
- Эффективнее организовывать процесс работы с дизайнерами
- Документировать дизайн-систему
- Публиковать дизайн-систему и вносить в неё изменения
Программа курса:
Мы начнём с изучения дизайн-систем и их принципов, и постепенно перейдём к особенностям технической реализации. Наша задача --- понять все принципы и философию дизайн-систем.
Раздел 1
Введение
— Что такое дизайн-система?
— Какие существуют дизайн-системы?
— Отличие дизайн-систем от UI-китов
— Плюсы и минусы использования дизайн-систем
Раздел 2
Декомпозиция
— Принципы декомпозиции дизайна и кода
— Вынесение переменных из дизайна
— Вынесение компонентов из дизайна
— Вынесение составных блоков
— Вынесение сеток и лейаутов
Раздел 3
Техническая реализация
— Перенос сформированной системы из дизайна в код
— Перенос переменных
— Построение компонентов и блоков
— Построение сеток и лейаутов
Раздел 4
Связка с дизайном
— Принципы организации эффективного воркфлоу с дизайнерами при создании дизайн-систем
— Коммуникация с дизайнерами на этапе создания и поддержки дизайн-систем
— Внесение изменений в существующую дизайн-систему.
Раздел 5
Командная работа, публикация и документация
— Принципы организации дизайн-системы
— Описание и документирование частей дизайн системы
— Особенности публикации открытых и закрытых дизайн-систем
Скачать [HTML Academy] Дизайн-системы для фронтендеров (2022)
Чтобы скачать курс, новым пользователям, необходимо Пройти Регистрацию
Если у вас уже есть аккаунт Войти на Форум
Симпатии:
Это понравилось Bettyna, wersus2k и Jony