Re:Design Blog

The Lenoir-Rhyne University Web Redesign Project

Modular or Component-Driven Web Design

Student writing on a whiteboard

One requirement for the web redesign project is to design and build a site that has an ultra-flexible design framework consisting of a large number of modules or components. Instead of thinking of our website as a number of page templates, we think of it as a series of parts, which when combined create a variety of page layouts and designs.

This kind of site development is referred to as modular or atomic design or component-driven design.

Looking to LEGO for Inspiration

Perhaps the easiest analogy are LEGOS… they come in a variety of sizes—one, two, three, four, six. etc.; in thin pieces, in blocks and in many colors. LEGOS can be laid out in a nearly infinite number of different combinations to suit any build project or builder.

A variety of lego sizes and colors
LEGOS can be built out in an infinite number of combinations. A modular or component-driven design and content strategy provides a more flexible and adaptable website that is nimble enough to address changing institutional and visitor needs.

When modular or atomic design is applied to content types, e.g., student testimonials, program highlights, brand messaging, content featurettes, videos, images, lists, events, among others, an infinite number of combinations of page layouts can be built—across one column, two columns, four columns, six columns or more.

We change our focus in page design from whole pages into content parts, making it possible for our website to combine content and design, but also allowing our content management system (CMS)—what we use to manage website content—more control. This will allow us to build out pages in ways that make sense from a visual, marketing and business perspective. A modular or atomic approach to design and populating content will offer us a more flexible and adaptable website that is nimble enough to address changing institutional and visitor needs.

Multiple page components or modules combined on a webpage in a infinite number of combinations—videos, images, text, lists, etc.
In this example, you can see how specific content types can be used in a variety of ways in many different design layouts. Image from New Possibilities Group

You might be interested in …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.