A brief history of web design — part 3: The Age of Flatness


While the ultra-glossy era didn't have a clear origin, the flat UI era had one.

Yes, there was GMail before that but GMail was mostly a case of form follows function. The first system that sported flat design as a conscious design choice, was Windows Phone 7

The other thing that came with Windows Phone 7 and was here to stay was huge, skinny fonts.

The first decade of the new millenium is quickly coming to an end and while flying cars and martian colonies are still nowhere to be found, technology has increasingly invaded our lives. There's now a generation of digital natives that feel just at home handling digital devices.

These guys don't need the image of a button to know they can click on something, nor they require a digital notebook to look like a notebook. New hints are required however adjusted to the new interactions. Scrollbars are no longer always visible so cues like cut off images and text are required to hint at more content in one or the other direction. Arrows and glows are also used to indicate more content off screen.

Windows Phone 7 looked so fresh that I took a couple of notes before creating our 2011 website (ehm, maybe one too much?)

I'm not exactly certain when this idea appeared, but infinite scrolling became well known around this era. Pages with very much content eschewed the pager for a piece of javascript code that loaded more content when the user reached the bottom of the page. This broke all kinds of browser navigation, but this is a story for another article.

The end of the m-era and responsive design

Responsive design wasn't yet a word back then, but using conventional (read JavaScript) methods, and a Nokia N900 as a testbed, our second website worked fine down to 800px wide screens, but only in landscape. Not exactly responsive, but by hiding extra elements and modifying some behaviours, the seeds were there.

Here's where mobile web design (see part 2.5 ) and desktop web design start to converge. The unified design language that is starting to emerge is often dubbed one web.

2014 and the one web

The one web has been influenced by the flatter os designs of the latest years. Lively color is now à la mode. Helped by the increased color fidelity of current screens the gradients (if any) are extremely low contrast, and drop shadows are almost invisible.

Simplicity is valued again so there are vast expanses of negative space, elements are less tightly positioned, edges are sharp and grids are commonly used, but mostly without borders. Header bars and page headings are huge, and cut off at the fold, giving the user a hint to scroll down. In other cases, huge header images cover exactly the whole viewport, made easy by new CSS units vh and vw

This return to clean design was partially helped by the rapid expansion of screen real estate fuelled by affordable LCD screens but also by technologies that seem trivial. Due to the scroll wheel and kinetic scrolling, content off screen is no longer that hard to get to, so the decision to put less things above the fold is easier to make.

High density screens help the fonts show more of their sexy features and thus we have a turn to humanist sans serifs (Open Sans, Nokia Pure, Source Sans Pro, Segoe UI) and some touches of retro typefaces mostly for display

Parallax scrolling is another effect that has had its time in the limelight the recent years. Highjacking the users scrolling might be frowned upon but some effects do have artistic value.

Google's Material Design

If WP7 and to a lesser extent iOS7 was a full swing away from any kind of skeuomorphy, usually the designs that eventually culminate into the reference of an era aren't so radical. Google's material design seems a natural evolution of its no-nonsense approach over the years, but at the same time one can trace the full 25year history of the web in its features.

The future

As I'm eagerly waiting for flying cars and killer robots, I'll continue to humbly surf the web and collect every new trend and style and report back. For now, enjoy some HTML5 Video :)