Программирование [HTML Academy] Дизайн-системы для фронтендеров (2022)

  • Автор темы Админ
  • Дата начала
Админ

Админ

Администратор
Регистрация
12.11.15
Сообщения
35,803
Реакции
224,562
Автор: HTML Academy
Название: Дизайн-системы для фронтендеров



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

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

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

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

Раздел 1

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

Раздел 2

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

Раздел 3

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

Раздел 4

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

Раздел 5

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

Подробнее:

Скачать: