Components, Patterns, & Page Layouts

Components, also referred to as atoms in the Atomic Design System, are the simplest expression of combining colors, shapes, and fonts into an element that has a singular purpose and generally one type of interaction. This includes things like Buttons, and Checkboxes, where the element cannot be broken down to a simpler form.

Simple patterns, also referred to as molecules in the Atomic Design System, can include multiple types of components in their construction. For example, while an icon can be a stand-alone representation, it can also be added to number of components, including DateRangeInput, Paginator, Modal, and many others, creating a richer element. However, it is still a “simple pattern” because it only supports a single interaction type (e.g. clicking, showing/hiding, and so on). As such, the concept of a simple pattern will be combined with that of component, and they will be referred to collectively as “component” for the remainder of this page, as well as throughout the Forge Design System.

Complex patterns, also called organisms in the Atomic Design System, (referred to simply as “patterns” for the remainder of this page and throughout Forge) are higher order elements. Instead of being constructed to perform a singular form of interaction, they can support multiple related interactions that address user objectives. It is this focus on objectives, rather than interactions, that distinguishes them from components. The objectives of these patterns are common enough throughout an application that their representation as a reusable element is paramount to design efficiency and consistency, mitigating the need for multiple designers to reinvent them each time. An example of this is FileUpload.

Put more broadly, patterns give components meaning. Patterns are also discrete moments within a larger workflow, where patterns are chained together to perform more complex tasks. Page layouts, called templates in the Atomic Design System, are constructed of patterns, each supporting interaction needs related to a specific user objective and contextually associated to everything else on the page. Like components and patterns, page layouts are often seen many times in an application, making the creation of them as repeatable assets within Forge valuable. An example of a repeatable page layout found in athenaOne is the Admin Page.

Whether you need a component, a pattern or a page layout, you should always familiarize yourself with what is already available in Forge before starting. This will allow all of us to maximize the investments of what is already built and save you time to focus on the more interesting or complex aspects of what you do.

All components, patterns, and page layouts can be found on the Components page in Forge. There are also new assets being added to Forge each release.

• Design Systems vs Pattern Libraries vs Style Guides (uxpin.com)
   
• Atomic Design Methodology | Atomic Design by Brad Frost