+1 (925) 943-5558

Is Your Style Guide Ready to Grow Up Into a Creative Design System?

December 18, 2018


Katie Moon

Most likely your company has a style guide. Even if it’s not updated regularly or adhered to religiously, there is probably a set of standards for the writing and designing of documents in the hopes of establishing consistency and improving communication.

However, when a company establishes itself with an e-commerce presence, the need for consistency and effective communication increases exponentially. And suddenly, the rules for logo placement and font selection are not nearly enough to cover all of the pieces and parts that make up a robust e-commerce site. Enter the need for a creative design system.

A creative design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications and ultimately form your digital brand and beyond.

Atomic Design Systems methodology

One of the most comprehensive and effective versions of this concept is the Atomic Design Systems methodology. This approach considers all of the details that go into creating and maintaining robust design systems while providing a precise way of explaining itself using well-known chemistry properties. Brad Frost explains it this way, “All matter in the universe can be broken down into a finite set of atomic elements. As it happens, our interfaces can be broken down into a similar finite set of elements.”

What are elements of an Atomic Design System?

  •   Atoms
  •   Molecules
  •   Organisms
  •   Templates
  •   Pages

“In a Creative Design System, the design is the ‘what’. The system is the combination of who, when, where, why and how the design is intended,” explained Roger Rohatgi, Creative Director at Object Edge.

“However, it’s not simply the creation of a Design System that will improve your e-commerce site, it’s the process of how you implement, utilize, and maintain that design system that leads to customer success,” he continued. “It is this process that separates us from our competitors.”

Benefits of a Creative Design System:

  1.    Build better solutions
  2.    Build better solutions faster
  3.    Establish consistency across all touch points
  4.    Create + Govern + Expand

The ultimate goal is that the design is defined for not only the designers, but also the developers. When your Creative Design System addresses every element of design (i.e. layout, spacing, typography, photography, iconography, etc.), it goes beyond how the designers use it to become documentation to direct the developers in creating code.

Sample Design Systems

Lightning Design System

Carbon Design System

To connect with a member of the Object Edge team to evaluate your current style guide, design system, and process, click here.

Related Posts

Ready to start your project?

Start by doing what's necessary, then do what's possible.

Schedule a Consultation Call