Component-Based Design for Marketers

See how component-based design can help digital marketers achieve better UX, CX and brand consistency at scale.

digital design for marketers

Design consistency is becoming increasingly difficult to achieve with the volume and complexity of today’s marketing and product design requirements. Yet, it is an important technique to achieve good UX and CX. In the past, a business had only a limited number of “designs” to create. Typically, you might have developed a small number of print ads and/or direct mail, some customer communications or point of sale but in all cases the volume was limited, so designing to individual requirements worked. Brand guidelines were enough to make sure there was consistency across different designers, partners or regions. 

Then along came digital, and design changed. There was a lot more design to do and the need for speed became more acute. These changes have not stopped – channels continued to proliferate, responsive design added complexity, optimization became a core business challenge, etc. The response to this change has mostly been to hire more people, design faster or compromise on what you deliver. None of these options scale into the future.

So, design today is struggling to scale with the applications it supports because design is still bespoke – tailor-made solutions for individual problems. Design consistency is becoming increasingly difficult to achieve with the volume and complexity of today’s marketing and product design requirements, yet it's increasingly important for good UX and CX.

The Evolution of Design Systems

Let’s take a step back in time and look at how and why component-based design emerged as the answer to the challenges of agile organizations to deploy great customer experiences online at a speed and scale that matches customer and business demands.

In the 1960s, computer technology began outpacing the speed of software programming. Computers became faster and cheaper, but software development remained slow, difficult to maintain and prone to errors. This gap became known as the “software crisis.”

At a NATO conference in 1968 on software engineering, Douglas McIlroy presented component-based development as a possible solution to the dilemma. Component-based development provided a way to speed up programming’s potential by making code reusable, thus making it more efficient and easier to scale. This lowered the effort and increased the speed of software development, allowing software to better utilize the power of modern computers. Fast-forward to the rise of design systems today. By taking the same approach to design and creating a visual language for your business that is based on best practice principles, you could make design both reusable and accessible to a much wider team.

Definitions of Modern Design Thinking

Before we look at how marketers benefit from being able to work with design patterns, here are some definitions you might find useful.

A design system is a collection of reusable design components, guided by clear standards, that can be assembled together to build any number of applications. In essence, a design system unites teams around a common visual language. It reduces design debt, accelerates the design process and builds bridges between teams working in concert to bring digital products to life.

There are lots of approaches to building design systems and no single right answer, but here are some great examples we rather like:

At a simplistic level, atomic design is the creation of the individual design components that sit within your design system to meet your brand guidelines and follow best practice for UX and CX.

Design patterns are collections of the components in your design system that can quickly be deployed to build out the visual layer. 

The important thing to remember here is that a well-constructed design system, usually developed by experienced designers within agencies, can then be used to build design patterns that can be deployed easily by teams with less design experience without affecting the overall quality of delivery.

An example of a design pattern to display content cards (Pinterest)
An example of a design pattern to display content cards (Pinterest)

Why Does This Matter to Marketers?

Most forward-thinking marketing teams are focused on creating and delivering customer value and understand that experience is a vital part of that value creation (rather than just thinking in terms of product or services sold). They also understand that customer expectations are continuing to rise and that modern marketing is therefore about delivering a seamless, crafted digital experience at every customer touchpoint.

  1. By developing design pattern working practices, marketers can deliver more without compromising on quality or experience:
  2. Conformity not rigidity: Conformity to brand guidelines is essential but usually this has come at the cost of rigid templates.Design patterns allow for flexible design within the construct of your brand guidelines.
  3. Built for an agile world: Responsiveness to opportunities as they arise is vital. Waiting for design teams to develop bespoke designs or for IT teams to implement CMS changes is no longer good enough.
  4. Democratized UX and CX: Investing in great UX and CX are vital, but you don’t want to reinvent the wheel each time. Design pattern thinking allows a much wider team to create content without compromising on UX and CX.

The more agile you need to be (and who doesn’t), the larger your team. And the larger your site or number of sites, the more efficiency design patterns bring.

Cohesion and Design Systems

Acquia Cohesion is a tool that provides your agency with the capability to efficiently build design components and design patterns already optimized to be fully responsive and then make them available to the wider business. Cohesion then allows marketers to deploy these design patterns quickly and efficiently from a pre-existing library enabling them to create a multitude of page layouts knowing they will work seamlessly together, follow your brand guidelines and deliver a great UX.


DX8 design

This way of working also allows for much quicker iteration of your designs if needed:

  • change a brand color - just change once and update across all pages or websites
  • update a “design element” - such as a button after a test, then deploy universally
  • add content to an existing page - just drag and drop the required design pattern on to the layout canvas and deploy

Finally, Cohesion allows you and your agency to think beyond responsive. 

With the ability to create design pattern variations by breakpoint you can now introduce elements of adaptive design where it’s needed. One example might be a purchase Call To Action (CTA) on your website. While responsive design will resize for each screen, adaptive allows you to choose a different design pattern for mobile that is perhaps a different color or font size because that will offer a better, clearer experience for mobile users.

Design system thinking and its offspring (atomic design and design patterns) go to the heart of how we think about design in a digital age.

Featured Resources

View More Resources