Build systems, not sites and other ways to designs for flexibility

Michael Martin, managing partner for Code and Theory, talks about the difference in module libraries and templates.

It’s no surprise that technology is constantly changing. With Apple and other mobile companies launching newer devices every year, how do you design for maximum flexibility?

As technology evolves, storytelling techniques continue to diversify to meet these changes. News outlets and sites need platforms that allow them to accommodate the newest developments while serving the user’s needs. The industry will continue to change, but the basic understandings of user experience will remain relatively the same.

The key is to design for transition, keeping in mind every platform where content is accessible.

Francisco Tavares, design director at Code and Theory, Michael Martin, managing partner, and Silvan Reinhold, engineer, shared three ways to design for flexibility.

The theory

The goal is to create a system that is not an editorial burden or over-engineered. This means approaching projects conceptually and finding the best ways to involve editorial teams, designers and developers.

When building systems, it is important to create a variety of modules that can be used for different purposes to best present the content. They look at everything from an “atomic” level — text, photos, videos and other multimedia elements.

“It’s like in your closet, you have ten pairs of pants and shirts, but not every pair of pants is going to look good with every shirt,” Martin said.

Like combining outfits, the goal is to define universal modules, establish rules to see how potential module combinations work, and create a library of all these outfits for future use.

How to design it

At Code and Theory, they are building systems, not sites.

The modules are flexible but also offer a range of variety formats. Content priority determines the overall layout of the modules. These modules can include sections about related topics or multiple types of content grouped together.

This isn’t like the inverted pyramid, but more of an hour-glass-shaped content, where it varies throughout the day.

“We want to create a system where you are not noticing the container but you are actually noticing the content first,” Tavares said.

Designers, developers, and engineers should work together to prototype, design, and launch the system.

How to build it

It’s important to keep in mind that there is no one-size fits all. Designers and publishers should know the content and design it appropriately.

Although having flexibility is essential when designing for the Web, designers should keep a balance so the system is not over or under designed.

Other factors to keep in mind are the cost of maintaining the system and presentation methods.

One of the challenges web designers face is adapting to technology changes, but following these three basic approaches will allow web designers to produce adaptable content and user experiences.