Curso Figma: 25. Proyecto Final: Atomic Design - #jonmircha

Introduction to Atomic Design

Overview of the Course and Engagement

• Jonathan Marcha welcomes viewers to class 25 of the course on design, encouraging sharing, commenting, liking videos for better visibility, and subscribing for notifications.

Transition to Project Final

• The previous class introduced a new phase focused on the final project, emphasizing the importance of user interface (UI) design processes.

Understanding Atomic Design

Concept Introduction

• Jonathan introduces "Atomic Design," a methodology by Brad Frost that draws parallels with the periodic table of elements in chemistry.

Visual Representation

• He presents an image comparing HTML elements to a periodic table, highlighting how different classifications exist within web design similar to chemical elements.

Elements of Atomic Design

Classification of HTML Elements

• Different colors in the visual representation categorize HTML tags:

• Blue for metadata tags,

• Yellow for text formatting tags,

• Purple for non-textual elements like images and audio.

Importance of Grouping

• The grouping helps understand how various HTML elements function together in web design systems.

Methodology Breakdown

Five Levels of Atomic Design

• Brad Frost's atomic design consists of five levels: atoms, molecules, organisms, templates, and pages. This structure aids in creating organized design systems.

Application in Projects

• Jonathan reflects on his experience using atomic design principles while working with "firma," noting its effectiveness in maintaining order and reusability within projects.

Detailed Explanation of Levels

Atoms as Basic Units

• Atoms represent individual HTML tags; they are fundamental building blocks like input fields or buttons used separately or combined into more complex structures.

Molecules Forming Functional Structures

• Molecules consist of combinations of atoms that create functional UI components. For example, a search form can be seen as a molecule formed from multiple simple tags.

Complexity with Organisms

Understanding Organisms

Understanding Atomic Design

What is an Organism in Atomic Design?

• An organism is defined as a complex structure made up of simpler components, referred to as molecules. This concept is illustrated by Brad Frost using the example of a typical header, which can vary in complexity based on the site's functionality.

• In the context of a header, it consists of three main molecules: the logo, the menu, and a search form molecule. These elements work together to create a cohesive user interface.

Templates and Wireframes

• The fourth step in atomic design involves templates, which are akin to wireframes that serve as visual guides for layout without detailed content. They consist of geometric shapes and descriptive text indicating where elements will be placed.

• Templates provide a clearer representation than wireframes by suggesting what type of content (like videos or text) will occupy certain areas within the layout. This makes them more intuitive for designers and stakeholders alike.

Pages: The Final Level

• The fifth level in atomic design is pages, which represent complete layouts with real or simulated content. At this stage, all elements come together visually to reflect the intended design identity and structure based on previous levels (atoms, molecules, organisms, templates).

• Pages can include either finalized images and texts provided by clients or placeholder content that simulates how the final product will look once completed. This allows for testing designs before full implementation.

Resources for Further Learning

• Brad Frost has created resources such as Pattern Lab that support his atomic design methodology; links to these resources are available in the video description for those interested in deeper exploration or practical application of these concepts.

• While following Frost's methodology closely may not be necessary, understanding its five levels—atoms through pages—can significantly enhance one's approach to UI/UX design projects across various platforms and frameworks like React or Angular.

Application in Coding

• Atomic design principles extend into coding practices where components are created using HTML/CSS frameworks like Bootstrap or Tailwind CSS; each component represents visual elements essential for building user interfaces effectively.

Understanding Atomic Design in Web Projects

Introduction to Atomic Design

• The concept of atomic design is introduced, emphasizing its application in web projects. It involves breaking down components into atoms, molecules, organisms, templates, and pages.

Atoms: Fundamental Elements

• Atoms are the basic building blocks of design. Examples include typography selection, color palettes, and individual UI elements like buttons and inputs.

• These foundational elements are akin to style guides that can be created using tools like Figma.

Molecules: Combinations of Atoms

• Molecules consist of well-defined blocks made from atoms. An example provided is a search form which combines various input elements.

• A "page" is described as a collection of links and elements that depend on the number of items displayed.

Organisms: Complex Structures

• Organisms are more complex structures that combine multiple molecules. An example includes a grid layout displaying several items in columns and rows.

• Another example given is a media list section featuring cards with images and content.

Templates: Layout Frameworks

• Templates represent typical layouts for pages such as blog homepages. They include headers, menus, search forms, titles, and sample content (e.g., placeholder text).

Pages: Finalized Content

• Pages replace placeholder content with real data. For instance, a blog index page shows actual titles and images instead of dummy text.

Application in Projects

• The speaker emphasizes applying atomic design principles throughout the creative process for projects like portfolio or resume landing pages.

Encouragement for Learners

• The course aims to help both beginners and experienced individuals revamp their resumes or portfolios effectively using atomic design methodologies.

Conclusion & Next Steps

• Future videos will continue exploring these steps within the user experience (UX) process while applying atomic design principles.