Дизайн-системы для фронтендеров
Год издания: 2022
Автор: HTML Academy
Издательство: HTML Academy
Язык: Русский
Формат: PDF/EPUB
Качество: Издательский макет или текст (eBook)
Интерактивное оглавление: Да
Количество страниц: 259
Описание: Умение выделять систему из дизайна и переносить её в код сокращает время на создание новых частей больших продуктов. Даже на небольших проектах такие системы упрощают процесс разработки и поддержки.
После прохождения курса вы сможете:
-Отличать UI-кит от дизайн-системы и правильно выбирать их под задачу
-Выделять системы из существующего дизайна
-Выделять компоненты и правильно использовать переменные
-Строить дизайн-системы в коде с нуля
-Эффективнее организовывать процесс работы с дизайнерами
-Документировать дизайн-систему
-Публиковать дизайн-систему и вносить в неё изменения
Примеры страниц (скриншоты)
Оглавление
1. Введение
1.1. Термин — основа всего
1.2. Вопросы и детали
1.3. Разные дизайн-системы
1.4. Тест по разделу
1.4. Тест по разделу (Ответы)
1.5. Каталог российских дизайн-систем
1.6. Каталог зарубежных дизайн-систем
1.7. Обзор интерфейса Figma
1.8. Навигация, инструменты, настройки Figma
1.9. Содержание и возможности Figma
1.10. Словарь терминов
1.11. Практика работы в Figma
2. Декомпозиция
2.1. От страниц к компонентам
2.2. Введение в токены
2.3. Сравнение или семантика
2.4. Как это работает
2.5. Задание 1. Выделение токенов
2.6. Разбор: выделение токенов
2.7. Промежуточный тест по токенам
2.7. Промежуточный тест по токенам (Ответы)
2.8. Лейаут
2.9. Компоненты и элементы управления
2.10. Блоки контента
2.11. Результат
2.12. Задание 2. Выделение компонентов
2.13. Разбор: выделение компонентов
2.14. Тест по разделу
2.14. Тест по разделу (Ответы)
3. Техническая реализация
3.1. Подготовка
3.2. Токены и текст
3.3. Сетка, иконки и логотип
3.4. Кнопка, чипс и чекбокс
3.5. Поле ввода, ссылка и карточка подарка
3.6. Задание 1. Токены, текст и шапка
3.7. Разбор: токены, текст и шапка
3.8. Задание 2. Лейаут, подвал, иконки
3.9. Разбор: лейаут, подвал, иконки
3.10. Задание 3. Логотип, поле поиска и кнопка
3.11. Разбор: логотип, поле поиска и кнопка
3.12. Задание 4. Горизонтальный переключатель, боковая навигация, ссылка
3.13. Разбор: горизонтальный переключатель, боковая навигация, ссылка
3.14. Задание 5. Карточка и коллапс
3.15. Разбор: карточка и коллапс
3.16. Тест по разделу
3.16. Тест по разделу (Ответы)
3.17. Способ организации css: atomic css (eng)
3.18. Способ организации css: rscss (eng)
3.19. Способ организации css: oocss (eng)
3.20. Канареечные релизы
3.21. Советы по улучшению опыта разработки (eng)
4. Расширение дизайн-системы
4.1. Как происходит расширение?
4.2. Пройдёмся по новым макетам
4.3. Табы и карточка вишлиста
4.4. Баннер и карточка подарка. Релиз.
4.5. Задание
4.6. Разбор задания
5. Дизайн-система и командная работа
5.1. Важное о коммуникации
5.2. Важное о документации
5.3. Разбор бэклога
5.4. Тест по разделу
5.4. Тест по разделу (Ответы)
6. Заключение
6.1. Заключение
6.2. Финальный тест по курсу
6.2. Финальный тест по курсу (Ответы)
