Eli Levine Goldberg — UX/UI Designer based in New York, NY

Design System - Envrmnt Creator

UI Design

Design system

Is design system considered a project? Definitely. Setting a consistent and clear style guide is a crucial element in creating an effective workflow and a professional, cohesive product.
During the process of creating Envrmnt Creator app, I collaborated with other designers and developers. A design system allows the team to use the same assets and symbols, styles, margins and typography, to prototype faster, easily communicate with developers and monitor the quality of the outcome.
Following the “Atomic Design” rules by Brad Frost, allowed me to approach the app’s building blocks step by step, from the tiniest icons, all the way up to fully designed pages.

RoleLead UI Design ForVerizon

What is atomic design?

“Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are: Atoms, Molecules, Organisms, Templates and Pages”

Brad Frost, Atomic Design

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems. From “Atomic Design” by Brad Frost

The atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.