11 Jan Be a Leader or Sit Back and Follow
Code Style Guidelines: documentation explaining how your code bridges the gap between designers, developers and clients. These set guidelines are meant to help everyone on your team to write consistent cohesive code. We recommend including Pattern Libraries within your code style guide. Pattern Libraries are the collections of your user interface (UI) components, navigation, buttons, drop downs, icons, product tiles, sidebar filers, etc. They will help articulate everything that goes into making up your user interface.
Atomic Design is composed of five distinct stages working together to create deliberate interface design systems. These five distinct stages listed below work together to produce effective user interface design systems.
Atoms: UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
Molecules: collections of atoms that form relatively simple UI components.
Organisms: relatively complex components that form discrete sections of an interface.
Templates: place components into a page layout and demonstrate the design’s underlying content structure.
Pages: apply real content to templates and articulate variations to demonstrate the final UI and test the resiliency of the design system.
Watch Brad Frost’s presentation to learn how to create a sound UI design system and visit patternlab.io, which provides open source tools that walk you through the process of creating Pattern Libraries.