What Will We Build on a Foundation of Flat Design?

Over the last few years web designers have been returning to fundamentals. Focus has shifted from skeuomorphic details like reflections to the basics of type, layout, and color. Much of this shift can be seen in the recent trend of flat design, which I think signals a new foundation for web designers. The question I want to address today is what will we build on top of that foundation?

Web designers are finally coming to terms with how the web is different from print. We’ve always known the two were different, but we’re better now at understanding those differences and what they mean when designing online. If what we’ve learned from print is serving as the foundation, what we get exclusively from the web will likely sit on top.

Print and the Web

The web isn’t print. We might use both to display similar content and we often treat them the same way, but they’re clearly not the same thing. Each comes with it’s own advantages and disadvantages that suggest how best to design for them.

Print design is fixed, static, and known, while web design is flexible, dynamic, and unknown.

Print is fixed and static and the conditions under which a print design is viewed will generally be known in advance. The web is flexible and dynamic and the conditions under which a web design is viewed will generally be unknown in advance.

Print and the web do share some similarities. For the most part when looking at a print design, we’re looking at text and images on the page. We’re still mostly looking at text and images on the web, though on a screen instead of a page.

It’s because of these similarities that we can learn much from print. Viewers of both designs are essentially the same and we can create designs that make clear the hierarchy of information and control visual flow from most to least important.

Of course, the web allows us to consume additional content like audio and video and it provides a mechanism allowing consumers to interact with the design and even shape it to a degree.

Print design occurs on a 2-dimensional plane. The web adds another plane, the z-index. Print can reference other documents, but the web can directly connect to them. In a sense this is another way in which the web contains more dimensions than print as each connected document forms another layer.

Print tends to be more linear in its narrative. You can employ flashbacks and other non-linear devices, but in print you generally start at the beginning and work your way in a straight line to the end.

The web adds behaviors and allows viewers to interact with and change the content. In return, the design can respond to these interactions and the conditions under which it’s viewed in order to adapt itself. This leads to a less linear narrative or at least an ability to absorb web content in non-linear ways. The viewer has more option as to how the content will be presented and consumed.

This responsive and adaptive behavior on the part of both the design and the viewer leads to more modular thinking in how websites are designed and built.

A design for print is permanent. Once finished the design remains as is. A design for the web can be iterated. Even after a web design is released it can be changed and improved with feedback. What it is at any point in time can be vastly different from what it was when first “finished.”

We’ll probably discover more differences between print design and the web design as technology and the web become more than they are today.

Again the key differences are:

• Print is fixed, static, known, and permanent
• The web is flexible, dynamic, unknown, and changeable

If we’re building a foundation based on the influence from print design, it stands to reason we’ll build on top with those things the web offers that print doesn’t. What we build on top of the flat design foundation will take advantage of the strengths of the web.

Building on a New Foundation

We’ve begun to take advantage of the flexibility of the web through responsive design. We’re learning to design mobile first with a minimalist base and then progressively enhancing our designs as we sense more capable devices. In the future we’ll likely have more ways to sense the environment and deliver more refined experiences based on what we sense.

We’re coming to understand that our content should be chunked and modularized. Through whatever sensors we have available we’ll put logic in place to adapt these chunks and modules and deliver the best experience based on the context and conditions.

We’re also beginning to take better advantage of the dynamic nature of the web by adding behaviors, interactions, and animations. CSS gives us the ability to build up simple animations from transitions and transforms. There’s a danger of overdoing these, but I think we’ll see small animations used in ways similar to how we’ve been using drop shadows, gradients, and similar details.

The animations I’m thinking about will be more understated and serve as visual cues to inform our audience. Think of a progress bar that does nothing to change progress, but makes it clear something is happening and can even be designed in a way to make that change feel quicker or slower.

Where we used to change the color and background of navigation items in an instant, we’ll transition these changes. We’ll use movement and timing not to distract but to create rhythm and direct flow. We’ll use these things to delight much the same way we used skeuomorphs to delight the last few years.

I don’t think the flat in flat design will last overly long. Soon enough designers will bring back depth to web design, though I suspect it’ll come about more through layering in the z-axis than through overuse of gradients, shadows, and reflections. I expect the latter three will be used, though in more subtle ways.

The issues we’re facing with images will ultimately lead us to use more vector based images, saving bitmapped imagery for specific cases where photographic realism is necessary.

Earlier in this post I mentioned how print and the web offer different ways to build a narrative. I think this is one area ripe for exploration. Think back to when movies moved from silent films to talkies. The change the industry went through involved more than simply adding sound to the visuals. It required a new narrative and a new way of acting.

Silent film stars needed to communicate through facial expression and so the visuals featured many closeups. Once sound was added this was no longer necessary. Sounds did more than add another sense. It changed how the visuals were recorded. It changed everything about how movies were made.

I don’t think we’ve yet figured out what the narrative on the web should be. For the most part we’re still leaning heavily on the beginning to end linear narrative we’re familiar with. My hunch is the narrative will change to one controlled more by those consuming the content than those creating it.

Closing Thoughts

I think we’re heading toward cleaner and more minimal interfaces based on an objective foundation of universal principles. These will serve as an aid to make our designs more and more usable.

To this objective foundation we’ll build layers of enhancement that offer additional cues and hopefully delight our audience.

1. A layer of objective and universal principles will form the foundation
2. A layer will be used to respond and adapt to different conditions and devices
3. A layer of detail will use small animations to provide visual cues and delight
4. A layer of subjective emotional aesthetics will sit on top and help make a connection with viewers

These layers will move from the objective and universal at the bottom to the more subjective and personal at the top. Much of what we build on top of the foundation will take advantage of the strengths of the web. They’ll look to be more flexible and dynamic and they’ll be more modular giving our audiences more control over how they interact with our designs.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.