What is Component Design, and How is it Changing the Way We Build Digital Products?
We take a look at the definition of component design (under the umbrella of user interaction design) and its benefits in today’s multi-device world.
Editor’s note: This piece was originally published in 2015. It’s been so popular that we updated it in 2020.
The web has evolved a lot since it started. While designing for the web used to involve a single screen, in today’s world it means anything but. The reality of today’ web is tons of devices, with all different systems, screen sizes, input types, and form factors. Not only that, websites and mobile applications are even beginning to merge. What this all means is that the previous idea of a static web page just isn’t practical anymore.
So, how are designers working with our multi-device reality? How are we avoiding designing mockups for a large home page on a desktop, a medium-sized home page on a desktop, an iPad version in landscape format, an iPad version in portrait mode, AND a small or mobile version?
By implementing something called component design.
What is Component Design?
Also referred to as atomic design (we prefer “Component design” here at Praxent), component design’s definition refers to the process of building a digital product or website in pieces. The pieces are the page elements like the header, the search form, and the sidebar call to action, etc.. You can think of it in terms of Legos, where you’re able to construct things with a box of common and consistent pieces.
Component-based design falls under the larger umbrella of interaction design, which the Interaction Design Foundation defines as follows:
Interaction design can be understood in simple (but not simplified) terms: it is the design of the interaction between users and products. Most often when people talk about interaction design, the products tend to be software products like apps or websites. The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible.
Interaction design is closely related to UX, and has big implications not only for developers and designers, but also for end-users (more on this to come). While conceptually the process of designing a system with components to assemble a website made perfect sense, knowing where to start was a challenge. It turns out it’s pretty hard to shift thinking from designing a web page to its individual parts. After some extensive research and updating to our current system here at Praxent, though, we made the switch and the benefits we realized are huge.
Benefits of Component-Based Web Design
There are many benefits of component-based design, for designers, developers, and end users alike. Some of these include consistency and flexibility, both throughout development and across devices.
- Developers have a reliable set of building blocks with which to create digital products, and time is saved with clean and organized styling code
- Designers save time with mockups in Photoshop or Sketch. They also have the option to design in parts, getting approval on designs quickly and iteratively (this also fits in great with the agile process)
- Clients get a front-end system that can easily scale as their business grows
- Users benefit greatly from interaction design, as it offers a seamless and approachable experience
With user interaction design, everyone experiences products that are faster, more consistent, and more enjoyable. In today’s world, it’s a no-brainer.
What is the Component-Based Design Process Like?
There are two processes or workflows for designing by component – a traditional, or linear, approach and an iterative approach.
The Traditional Approach
A visual mockup of a page or pages is designed and handed off to a front-end developer. The developer reviews the designs and identifies all the components, or the Legos, that make up the website. The developer then writes code that creates the components at their most basic elements first, continuing until all the components are complete. The pieces can then be assembled and arranged in a grid to form different layouts and pages.
The Iterative Approach
In this approach, a designer can create and receive client approval on each of the components separately, rather than on the entire “page” at once. For example, the designer could simply design a header and present that component’s design for approval before coding. Once the component’s design is approved, it can be coded and design work on the next component begins. This process is repeated until all the pieces are finished and “pages” can be assembled. It’s especially useful if a different person is designing and coding the component, as they can work in tandem for high efficiency.
3 Common Questions About Component-Based Web Design
What is the Deliverable?
Visually, the deliverable is the same as it was before – a website, or a digital product. The difference is in what’s going on in the background; there’s an organized system that is built to last, allowing for flexible products that can easily grow. Front-end code is organized and built holistically.
Does Component-Based Design Take More Time?
Yes, but not a substantial amount. When the design is translated and delivered as an interactive user interface, so is its accompanying front-end style guide – the library of components that make up the digital product. The style guide takes some time to manage and update as the pieces get built, but once they are built creating pages is quick and easy.
Will My Site Still Be Responsive?
Absolutely. One of the primary reasons for component design is flexibility! The design considers how components flex or stretch individually, ensuring they fit well when put together.
—