Main Content
atomic web design

Advantages of Component-Based Web Design Systems

In the evolving world of web design and development, component-based design systems represent a revolutionary leap -- a previously missing link that replaces an environment of siloed functions and time-consuming complexities with high velocity capabilities that fuel flexibility, consistency, and collaboration.

Component-based design systems produce inherent efficiencies for designers and developers, and solve the challenges associated with duplication and inconsistency in applying themes, while driving the development of better quality, reusable components.  Clients gain the benefit of better brand management resulting from a simplified content editor experience that allows for bending as necessary, without breaking brand guidelines or page structures. 

As a thought leader on how humans interact with technology, Promet Source has enthusiastically pursued component-based design systems from the standpoint of both: 

  • Innovative design patterns that optimize UX and spark engagement, and 
  • Streamlined and simplified content editor experiences that allow for a wide range of page possibilities.

 

Powerful Partnership

As dedicated open source advocates, Promet has adopted Emulsify® as a tool to help us better organize, share, and reuse our custom design systems. Promet serves as both a user and contributor to its support and success. 

Emulsify is an open-source tool for creating design systems as a series of components that can be duplicated and easily manipulated within a set of clear guidelines for designers and developers. Promet is currently leveraging Emulsify on complex web development projects for government, healthcare, and higher education clients.
 

Advantages of Emulsify for Web Design Systems:

  • Integration with a starter library of Drupal-ready components with Storybook,
  • Portability across other CMS platforms and applications,
  • Open source, and
  • Compatibility with both WordPress and Drupal.

As Aaron Couch, director of technology solutions for Promet Source, recently pointed out: 


Emulsify has changed the way we deliver front-end experiences, making our work higher quality, more efficient to deliver, and more accessible, while creating a better user experience for our clients.

 

Join Promet’s Aaron Couch along with Emulsify contributors Brian Lewis and Evan Willhite on Fri., Sept. 25, 2020, at 3:30 p.m. EDT, during this year’s virtual Drupal GovCon, for “Component-Driven Theming with Storybook.” 

During this session, presenters from Promet and Emulsify will explain how a component-based approach offers greater consistency, flexibility, re-usability, and velocity for front-end development. 

 

Animated components moving into design
Component-based design systems allow for pattern flexibility within regions of a website.

 

AKA "Atomic Design" 

While metaphors for helping to explain component-based design systems abound, “Atomic Design” (and a book with the same title) authored by Brad Frost) is the one that has gained the most traction and has entered into the lexicon of component-based web design. 

Atomic design looks at a website’s user interface as the collection of five factors that roll up into each other:

  • Atoms,
  • Molecules,
  • Organisms,
  • Templates, and 
  • Pages.
     

Exponential Impact

Component-based design makes front-end web development up to four times faster. This translates into happier clients and the freeing up of resources to focus on fine tuning and providing greater functionality. 

For the content creator and editor, component-based web design provides the ability to edit and revise pages to fit evolving needs and new priorities. 

The new world of “drag and drop” content management is soon to set a new standard in which previous limitations will quickly come to be viewed as  unacceptable. Low code/no code web design is the future.

The four key advantages of Promet’s adoption of the open based tool for creating web design systems powered by Emulsify®:

  • Design systems that can flex, bend, and scale within and among complex web designs,
  • Powerful new possibilities resulting from enhanced consistency, flexibility, re-usability and velocity for front-end development,
  • Elimination of painstaking QA processes in favor of proven patterns and high-quality built-ins that get designers, developers on the same page, and
  • Assurance that non-technical content editors can make multiple changes to a web page without breaking layouts or straying from brand guidelines. 

Need help creating a Drupal design system for your complex website? Contact us today.