Component-Based Web Design

Approaching web builds at the component level is a great way for design and development to meet in the middle.

A Guide to Effective Design Planning

Every web project starts by examining the brand’s story.

What are we trying to communicate? To whom? What is most important? These answers are what inform work like the sitemap, navigation, site-wide CTAs, information architecture and overall content strategy. Considering and empathizing with your user and aligning their needs with the goals of a project, can help determine what needs to be said as well as where and how to say it.

A Blueprint for Success

The content outline deliverable is what summarizes the site’s narrative. It’s a document that defines content needs and informs the wireframe work to come. This Google doc may not look like much, but thoughtful content work in the beginning of a project is what essentially shapes the entire website.

Once we have a content outline in place, we let that drive layout decisions and determine component, UI and content needs from there.

If the content strategy and outlining work is the blueprint, the wireframes become the foundation, structure and support for the eventual build. We’re not shopping shutters just yet, we’re making sure the house can stand the test of time.

Achieving Consistency and Cohesion through Componentry

Now for an interface inventory. We start by breaking out each element from wireframes into categories - UI, cards, menus, lists etc. to determine the needs for a project.

Components are what become the “building blocks” for your site. Once you have a library outlined, you can begin to infuse the brand. Component by component, leveraging a brand’s personality and starting to establish a style guide foundation - Colors, heading styles, underlying grid, spacing etc.

Then, taking things a step further by setting styles and effects. This is where it’s important to have fun and flex the brand, but also be mindful of rules, consistency and feasibility. Applying design to each component, 1 by 1, allows you to experiment, feel out what’s working, what isn’t and create patterns through properties that carry throughout the design and ensure consistency, trust and cohesion for the entire site experience.

Have fun with it!

Tweak, iterate, test and finesse. Designing components is the fun part. And once you build a core set, you’re on your way to being the proud new owner of a scalable, design system. The component library that you establish is a subset of the full system. The library is essentially a repository of reusable modules that developers, or the admin can then utilize when building pages. And guess what? It doesn’t have to end there! Design systems provide a flexible framework that allow you to easily grow your library of core components at any time. This provides your website with the capacity to scale and evolve without compromising on consistency or quality.

For a more comprehensive look at creating a full design system, check out this post:

Creating a Design System in Figma

Introduction to Design Systems

A set of rules and guidelines that act as a single source of truth for digital interpretation of your brand. A design system is essentially a complex digital brand guide. The building blocks for any web work.

Read Creating a Design System in Figma

Helpful Component Design Resources:

Here are a few examples of open source component libraries to pull inspiration from:

• https://tailwindui.com/components
• https://m3.material.io/components
• https://daisyui.com/components/
• https://evergreen.segment.com/components