Page-centric design vs. component-centric design

What comes first the design or the elements?

It’s the design version of the chicken and egg question. Creatives can debate for hours over how to create a design, whether it is based on an idea that is completely drawn out or a “bucket of parts” that can be mixed and matched throughout the design.

The latter is steadily becoming the go-to option for complex websites and small design projects alike. This concept, known as component-centric design, makes it easy to create a design system that’s flexible and can grow with your content and website over time.

The former, page-centric design, is a holdover from print design. It, too, has some value but isn’t the go-to model that it once was. Here’s a comparison of the two design philosophies.

Page-centric design

If you come from print design — as many web designers have — then you already know a lot about page-centric design. You’re probably comfortable building out an entire page layout first and then working backward to fine-tune the pieces.

Because so many web designers (particularly some of us who have been around for a while) started with print, this trend and method of creating layouts is used for digital projects as well. And there’s nothing wrong with it. Working in this manner might be the most comfortable, help you create web pages faster and feel more confident deploying the design. This is even more true for designers who tend to work on related print and web projects at the same time.

Print design is limited to space, so wireframing an entire page and then working backward on the details makes a lot of sense. However, on the web, space is a much different beast, and most considerations you have in print don’t really apply. You aren’t limited to a specific shape and size. The canvas is as open as you allow. And extra pages don’t increase cost, so worries about printing and paper costs go out the window.

And then there are the needs of web-based projects. They are often quite different than print.

Changing design needs

The discussion about page-centric design centers on “the fold” or the scroll. The fold is a term from print design and refers to the top half of a newspaper page that readers could see before opening the paper. The fold of a website is the part of the homepage a user can see without scrolling. (Most designers call it the scroll these days.)

The argument for designing for the scroll has been around since the first days of the web. But there is endless below the fold (scroll) potential, and it’s not something you really need to worry about anymore.

A look at the metrics of the fold by Kissmetrics, an authority on website marketing, showed that a call to action below the fold can actually be more effective: “Higher conversion rates have nothing to do with whether the button is above the fold, and everything to do with whether the button is below the right amount of good copy.” The post goes on to call the fold a myth. (And I tend to agree.)

The idea that you know what the “fold” looks like for each user is an out-of-date concept. With so many devices and a responsive design as the dominant way to manage multiple sizes, the fold is an ever-changing canvas. It’s horizontally oriented on some devices and vertically oriented on others. What this means is that building full mockups helps for the desktop UI only, which accounts for increasingly less overall traffic.

Finally, content management system functionality has matured to the point where users want the ability to create any number of unknown complex layouts. Yes, the user wants the ability to create layouts. For most creatives and agencies that means you will create a website and design template but the client will function as webmaster and editor for future content design and development. And today’s popular CMS options allow for that functionality.

Component-centric design

They want options. You want to control brand.

The answer is component-centric design.

Component-centric design is building the elements from the smallest level up, ensuring that every piece can exist among other components whether stacked or inline. Think of component-centric design as the Lego blocks of websites. Everything locks and links together to create a unified layout. (Some designers and developers call this “modular design.”)

More designers and developers are approaching website design in this way and for good reason. It can make the design process a little less clunky because there isn’t so much backward work and it makes it easier for the user to continue to add pages and content after you hand off the design.

The idea behind component-centric design isn’t all that new. Brad Frost — you might know him as the author of “Atomic Design” — has been talking about it since at least 2013.

“A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately, they are and will always be subjective. Lately, I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way. …

“Interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there.”

It’s not just Frost that advocates this type of design system either. Many of the design “kits” you see from online shops are betting on a component-centric design model for your projects. If you aren’t sold on how the component-centric model works, a kit is a pretty good place to start. Download one and pick it apart; look at the pieces and how they fit together. Then imagine creating a design using that same format.

So, how does a component-centric design look?

• It includes standardized design components.
• Code is standardized as well. (You don’t need unique code to reuse an element.)
• Formatting is predefined.
• Customizations are functional and occur within the CMS.

Conclusion

There’s no right or wrong answer when it comes to selecting a page-centric or component-centric design. They are just different options that are born from different ways of thinking. But they are linked. Think about it like this: Component-centric design is similar to working with libraries on print projects in Adobe Creative Suite. Just move and marry pieces until you get the design you want.

The best option for your team depends on the project and demands of the design work. A best practice would be to understand both ways of thinking about layouts, talk about the options and pick the solution that is best for the team tackling the design challenge.