🎨 Дизайн [Stepik] Атомарный дизайн в Figma. Методология проектирования интерфейсов (2024)

[Gatsby]

Автор: Stepik
Название: Атомарный дизайн в Figma. Методология проектирования интерфейсов (2024)




Описание

Добро пожаловать на курс по атомарному дизайну Figma. В этом курсе, вы узнаете все о атомарном дизайне, систематическом и иерархическом подходе к созданию дизайн-систем, который помогает дизайнерам и разработчикам создавать согласованные, масштабируемые и эффективные пользовательские интерфейсы.

Чему вы научитесь:

• Основам атомарного дизайна: Вы ознакомитесь с концепцией атомарности, пониманием того, что атомарные компоненты должны быть неделимыми и масштабируемыми. Вы узнаете, как создавать и организовывать атомарные компоненты, чтобы обеспечить их повторное использование в разных проектах.
• Систематическому подходу к созданию дизайн-систем: Вы узнаете, как разрабатывать систематический подход к созданию дизайн-систем, основанный на атомарном дизайне. Это позволит вам создавать согласованные и единообразные пользовательские интерфейсы.
• Созданию библиотек атомарных компонентов: Вы изучите методики и инструменты для создания библиотек атомарных компонентов, которые помогут вам легко переиспользовать и масштабировать компоненты в ваших проектах. Вы узнаете о лучших практиках организации и документирования библиотек компонентов.
• Принципам согласованности и независимости: Вы познакомитесь с принципами согласованности и независимости атомарных компонентов в рамках дизайн-системы. Вы узнаете, как обеспечить согласованность визуального стиля, поведения и взаимодействия компонентов.
• Инструментам и методам работы с атомарным дизайном: Вы ознакомитесь с различными инструментами и методами, используемыми в работе с атомарным дизайном, такими как Sketch, Figma, Adobe XD и другими. Вы узнаете, как эффективно работать с атомарными компонентами, создавать стайлгайды и проводить тестирование.

В целом, данный курс поможет вам освоить принципы и практики атомарного дизайна, которые позволят вам создавать согласованные, масштабируемые и эффективные пользовательские интерфейсы. Вы получите практические навыки, которые сможете применить в своей работе в области дизайна и разработки.

О курсе:
В рамках этого курса вы будете изучать систематический и иерархический подход к созданию дизайн-систем, основанных на принципах атомарного дизайна. Вы познакомитесь с концепцией атомарности, которая предполагает создание элементов дизайна, делимых на более мелкие части, что обеспечивает их повторное использование и масштабируемость. Вы также изучите принципы согласованности и независимости атомарных компонентов в рамках дизайн-системы.
Кроме того, вы узнаете о создании библиотек атомарных компонентов, которые помогают обеспечить единообразный внешний вид и поведение элементов интерфейса. Вы познакомитесь с инструментами и методиками, используемыми при работе с атомарным дизайном, такими как Sketch, Figma, Adobe XD и другими.
В результате прохождения курса вы сможете применять принципы атомарного дизайна для создания эффективных, согласованных и масштабируемых пользовательских интерфейсов. Это поможет вам улучшить работу в области дизайна и разработки, а также повысить качество ваших проектов.
Удачи в изучении курса Атомарный дизайн в Figma. Методология проектирования интерфейсов!

Программа
В курс входят 27 уроков 23 теста
Последнее обновление 22.12.2024

Введение в атомарный дизайн

1. Атомарный дизайн: предыстория
2. Основы атомарного дизайна и его преимущества
3. Для чего нужен атомарный дизайн

Структура дизайн-системы

1. Дизайн-система
2. Преимущества дизайн-системы

Методология атомарного дизайна

1. Методология
2. Атомы
3. Молекулы
4. Организмы
5. Шаблоны
6. Страницы
7. Краткое резюме

Разработка библиотеки паттернов

1. Введение в
2. Библиотека паттернов
3. Применение паттернов для быстрой разработки дизайна интерфейсов

Атомарный дизайн на практике

1. Основные шаги при работе с Pattern Lab
2. Как это может выглядеть
3. Отличия атомарного дизайна от UI-kit

Расширенные возможности атомарного дизайна

1. Адаптивный атомарный дизайн
2. Тестирование и оптимизация производительности атомов и молекул

Совместное использование атомов и молекул в проекте

1. Совместное использование атомов

Применение атомарного дизайна в веб-разработке.

1. Применение атомарного дизайна в веб-разработке.
2. Применение атомарного дизайна в мобильной разработке.

Работа в проекте

1. Коллаборация и совместная работа в Figma.
2. Управление библиотекой атомов и молекул.

Заключительный проект

• ТЗ на разработку атомарного дизайна для приложения "Доктор24"

Тест для получения сертификата

Подробнее:

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.