Share

LinkedIn

The Art of Designing for Componentization

A few years ago I wrote a series of blog posts about “Designing for Content Management Systems.”

The series outlined a few of the pitfalls I’d witnessed when creating the ultimate “content manageable” layout to accommodate all worst-case content scenarios. But this was before the era of the “mobile first” approach or responsive sites, which have both become closer to being industry standards rather than trends., and by their very nature have shaped the way we present content on the web.  So, while the concepts of designing for Flexibility, Manageability, Reusability, and Compartmentability still apply, I feel the topic needs to be re-addressed. An additional word  that better illustrates how to design for Sitecore (and other content management systems) should be included. 

Componentization 
The world of content management has slowly been moving toward a componentized approach to page layout rather than full-blown templates that try to address specific content requirements. For example, instead of designing an entire page layout to accommodate a news article format that may require specific fields and supporting elements, we instead build a system of page components that can then be combined to create a news article page – a Page Title component for the article title; a Rich Text Block component for the article itself; a Sibling Page Paginator component to navigate between articles; an Ancillary Listing component to offer additional resources; an Author Bio component; and so on. These components can then be reused on other pages.

The idea of designing for Componentization dovetails with my original recommendation of striving for Flexibility and Reusability within content-managed layouts, but moves those concepts a few steps ahead by subdividing page elements into smaller components and reusable elements. The design of these components needs to be conceived in advance to ensure they can accommodate a multitude of uses, thereby maximizing flexibility and reusability.

Even though this approach seems granular, the basic concept requires a designer to think about a site holistically rather than at the page level. How will this element look on other pages? What if this component I’ve designed is placed within in a wider column? In what other ways can this component be used? What visual systems can I design to unite all these components visually, regardless of how and when they will be used? How do I create a layout plan for these components when I can never be sure which component will be used where?

To answer these questions, it helps to break down your concept of a page design into smaller distinct elements and then rebuild your page layout from there. Atomic Design is a methodology that can help you recognize repeatable elements and patterns that begins in a granular way but then guides you to a holistic approach.

As for a framework to accommodate it all, don’t reinvent the wheel. Responsive frameworks like Bootstrap, Foundation, and Skeleton are built for accommodating componentized sites due to their grid-based structures. Plus, a responsive layout practically requires the ability to easily compartmentalize content. Sure, you could probably code a more efficient base framework to suit your specific requirements, but the lifespan of today’s typical website might make this task not worth the effort.

Here is a simple, step by step approach for devising a componentized site.

  1. Define your required page types (e.g. News Article, Category Landing, General Content).
  2. Break these page types down into more general components that aren’t specific to the page they are on (e.g. Rich Text Component, Title Component, Listing Component, Tabs, Subnavigation Component).
  3. Compare your lists of components for the different page types to see which ones can be combined or reused across multiple layouts and in various presentations. 
  4. Implement or devise a grid-based responsive framework to determine some standard column structure to be used across your pages. Start simple, knowing any site will probably need options for one-, two-, and three-column layouts.
  5. Start to imagine your defined components within these columns, and how their specific styles can change based on placement with properly structured CSS.
  6. Begin some actual design: apply visual styling to each defined component making sure you keep your styling consistent between similar elements as well as for all elements placed in specific columns.
  7. Rebuild your initial page types by combining your generalized components with some more page-specific content.
  8. Watch it all come together as you design a full set of site components that are consistently styled and which can be used and re-used seamlessly across an entire web ecosystem. 

This approach will ensure your site is optimized for the ultimate flexibility within a content management system. Luckily, Sitecore plays wells with the concept of componentized websites. It’s a shift from the templated pages we relied on in the past, but sharing components between pages and layouts is the essence of effective content management. As designers, we just need to think on a granular and holistic level at the same time. Start with the small pieces and then imagine how they all contribute to the whole picture.

designing for content management system, website design templates, website design layout, Atomic Design

Comments

Add a Comment

*
*

Please confirm you are human by typing the text you see in this image: