Browning Environmental Communications

Visual Design System Development

My Role

Through close collaboration and creative thinking, I developed design principles, patterns, constraints, and documentation using the Atomic Design Method. By establishing a foundation of design principles, I ensured consistency and created an intuitive design system that facilitated a smooth user experience across Browning Environmental Communications' new platform.

Atomic design

A method for making design systems. It's not a step-by-step process, but a way of thinking about our user interfaces as a complete unit and individual pieces simultaneously.

Atoms

Atoms are the basic building blocks of Product Design. In product design, atoms are the essential elements like labels, input fields, and buttons. They can also include intangible elements like color palettes and fonts. Atoms are useful for creating a pattern library where you can see all your overall styles in one place.

Molecules

Molecules are groups of atoms stuck together and are the tiniest parts of a compound. These molecules have their qualities and are the foundation of our design systems.

Compounds

Molecules are like building blocks that we can combine to make compounds. Compounds are groups of molecules joined together to create a distinct section of an interface. Compounds can be made up of the same or different types of molecules.

Organisms

Organisms (possible high-fidelity wireframes) are primarily made up of compounds joined together to create pages. This is the stage where the design begins to take shape and elements like layout come into play. Organisms are tangible and give meaning to the more conceptual atoms and molecules. They are also when clients start to see the final design come together.