Day 16: Modular Design

Large websites are built with a set of page modules that hold different types of content. Instead of designing a website with the finalized content, product designers have to think about where future content will go, and design container to hold it.

What it is.

Page templates that can be used over and over to hold content that is refreshed weekly, daily or sometimes by the minute.

How it’s used.

Templates tell the engineers what kind of content will be pulled from the database, and they tell the content creators (writers, marketers, advertisers) what kind of content they’re allowed to fill it with.

Discussion.

Website like CNNMoney.com, where content is refreshed constantly throughout the 24/7 news cycle, can’t hard code each and every page. That would require too much maintenance and engineering time. It wouldn’t be scaleable since the number of engineers required to build new pages day and night would be astronomical.

Instead, websites like this use modular pages and content management systems. Each webpage is built on the fly, as the content is refreshed.

The designers of these sites don’t have the luxury of knowing exactly what will be on the pages they design. Instead, they must think about the kinds of copy, images and ads will be in each page. They design a module that fits that kind of copy, and arrange the modules together into a layout for sections of the website.

Her’s an example of what a rough modular design for a news website might look like:

Notice that instead of copy or product images, or ads, the designs simply show boxes where that content will be shown. In each box is a short description of the content.

In the example above, the designer is thinking about layout, hierarchy (which kinds of content should be at the top of the page, and which lower down), margins and spacing between modules. But she isn’t concerned with what goes inside the boxes — yet.

Module templates like these aren’t just a way to smooth the workflow on a big website, but also ensure that all your pages have similar layouts. That you’re being consistent with where you place the logos, the navigation, the content and the advertising. Though the layout might change from section to section, within each they are the same.

Your Assignment

Identify the modular designs for your favorite news website.

Click over to a news website that you like, and sketch the modular design for 3–5 pages.

• Identify the spaces where ads load
• Identify where the masthead will be, and where other content around the masthead is loaded
• Think in terms of “types” of content, rather than the actual content you see at this moment
• See if you can identify what kinds of news goes in each column or news module

Deliverables

Create a pdf and share your modules in the comments and/or on Dribbble and Twitter #100daysdesign.

Originally published at 100days.design on July 29, 2017.