Main Content
Component based web design

Advantages of Component-Based Web Design Systems

Component-based design is becoming the new normal for both web developers and site administrators. It’s advantages run deep and wide, offering next-level, no-code empowerment for updating content, switching up layouts, adding functionality, and new creating pages.

 

What is Component-Based Web Design?

This new world of possibilities is built upon the realization that the pages of most websites consist of various combinations of the items such as media galleries, text blocks, call to action buttons, cards, “by the numbers,” calendars, “upcoming events,” etc. These items can be packaged into pre-coded mini-templates that are stored in a library and available for use and re-use by site administrators and content editors without a need for coding expertise or technical know-how. 

These components serve as ready-made web page building blocks that can effectively turn the keys to managing a site over to clients, who are able to draw upon a library of design assets when creating a new page or rearranging the layout of an existing page.

While components are pre-coded, they can be easily modified to fit the messaging requirements of a particular page. That is to say, the same component can be re-used multiple times throughout a site with out appearing repetitive, and the process of creating a new page is simply an exercise in drag-and-drop functionality

As IT and web development agencies are no longer needed to keep website up-to-date and regularly refreshed, component-based design drives new levels of cost efficiency and ownership. Plus, the removal of a few levels of middle-men (or women) from the process, contributes to the assurance that websites will be consistently updated, as needed.

 

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

 

Advantages of Component-Based Web Design

The most overarching advantage stems from streamlined and simplified content editor capabilities that allow for a wide range of page possibilities. In enabling content editors to reuse and reconfigure component building blocks without the help of developers, component-based design essentially turns front-end management over to the client post launch.

In a multi-site environment, varying permission levels enable departmental site administrators and content editors to exercise ownership over their sites, with accountability for ensuring content is kept up to date and various metrics are met. 

Surprising levels is simplicity and intuitiveness concerning components and their usage helps to guard against sites becoming static and stale. 

Component libraries also provide built-in design options from which content editors can draw to ensure a consistently high level of aesthetic appeal and that web pages do not become too text dense. 

 

Endless Unique Options

It’s important to emphasize, however, that component-based design does not lead to uniformity among websites.

Despite commonalities among websites, one truth we’ve discovered at Promet after 20 years in business is that all websites are unique. Components are customized for every site and simplicity drawing upon a library of components to create new pages or revise layouts occurs behind the scenes among site administrators and content editors. What site visitors experience on the site is beautiful, well-designed pages that are consistently up to date. 

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.

 

What is an Example of Component-Based Web Design?

Promet’s open source Provus® platform combines the latest drag-and-drop page building tools in Drupal with a curated library of design components, enabling content editors to easily layer designs, add functionality, and rearrange layouts.  

Promet Source created Provus® because we get it -- that within every organization's, priorities, perspectives, and products are constantly evolving, and that keeping Drupal sites updated at the same pace is a big challenge for fast-moving marketing teams.

An essential differentiator from other drag-and-drop tools is the degree to which Provus® empowers content creators, while at the same time adhering to an organization’s brand guidelines to ensure consistency and aesthetic alignment. 

Content editor empowerment, combined with the robust guidance and governance are key factors fueling the success of Provus®. More specifically:

  • Self-adjusting features within components create a foundation for both readability and ADA accessibility, by ensuring, for example, adequate contrast between fonts and background colors. 
  • Design governance, which offers the assurance that content editor empowerment does not translate into mismatched, crowded, or sub-par page designs. Customization options are presented within an expertly calibrated design framework for ensuring the highest quality designs and user experiences on all devices, without breaking layouts or straying from an organization’s brand guidelines. 
  • The ability for content editors seamlessly edit components and change patterns within the view mode, eliminating time-consuming processes of re-entering content and switching back and forth between edit and publish modes.
  • Design systems that can flex, bend, and scale within and among complex web designs.

 

A differentiator between Provus® and other component-based design tools is the assurance that  any combination of components within the library will be ADA accessible, adhere to brand standards, and look great. 

Clients working with Promet benefit from our design team customizing options for their site to ensure that the range of possibilities for reconfiguring the look and layout of a page is within a system of brand and accessibility guidelines. Plus, Provus® is open source and has the inherent benefits of an open source product. 

Provus® provides for game-changing advantages on multiple levels, and we’re  excited about the amazing new capabilities that we are now able to offer our clients.

In blending a formal design system that ensures brand consistency across the site with the flexibility of drag-and-drop site building tools within Drupal core, we are reducing the cost of ownership and empowering clients with a site that’s designed to flex and expand to fit evolving needs and new priorities. 

Interested in learning more about the advantages of component-based design systems? Contact us today.

 

Subscribe to Promet Source