Flat Design As A New Foundation For The Web

Posted: 15 Jul 2013 05:30 AM PDT

The last couple of weeks I’ve been looking at the industry’s move from skeuomorphic detail to a flatter design aesthetic. I started by considering the useful, albeit temporary, metaphors skeuomorphism brings along with the inevitable reaction against it.

Next I looked at the current reaction that is flat design, mostly to think through why I haven’t always cared for it, despite it taking influence from the same things that influence me.

At the end of last’s week’s post I mentioned that when you get past the name, there really is a lot to like about the new flatter design aesthetic and I think in many respects it signals some positive things about and for our industry.

flat cartoon like drawing showing foundation of house and skyscraper — The shallow foundation of a house seen next to the deep foundation of a skyscraper

A Return to Fundamentals

I think I’m fairly typical of many web designers in the sense that I have no formal training in graphic design. Like many, I learned html and css while acquiring a smattering of skills in a variety of other technologies. Next thing I knew I was charging people to design and develop websites.

My lack of skills in the fundamentals of graphic design meant I turned to tricks and trendy techniques to hide what I couldn’t yet do. I learned how to add a gradient here, a drop shadow there, and a reflection in just the right place. Ornamentation can sometimes be used to cover up poor design. These tricks served no useful purpose though, other than to impress enough people to hire me.

A flat design works when fundamentals are done well and it doesn’t work when they aren’t.

Fortunately I was aware I was doing this and from the outset began a course of study for myself on the fundamentals of visual communication. I no longer need those tricks and I guess when I think about it, I’ve been designing flatter for the last couple of years. Not entirely flat, but flatter.

Now the industry as a whole is going to have to do the same, as the new flatter aesthetic strips away all the ornamentation that’s been in use the last few years. It’s removing many of the cover up tricks, which is a good thing. Remove the ornamentation and you’re left with the basics. You’re left having to work with design fundamentals like:

The move to flat design is going to force those designers who want to do well to learn these fundamentals, because that’s all there is after the ornamentation is gone. A flat design works when the fundamentals are done well and it doesn’t work when they aren’t.

Once again ornamentation can be used to cover up a poor design and for years many in the industry have relied on it to hide what’s been a shaky foundation. Flat design is stripping away the everything that was covering the foundation , which will force us to rebuild on solid fundamentals.

Why Now?

Flat design is only one reason for this change. A number of things beyond giving up skeuomorphism are leading us back to the foundation and the fundamentals.

A reaction to skeuomorphism
An ability to use more typefaces
A return to grids
Responsive and mobile design

It’s only the last couple of years where we’ve been able to realistically expand our type palettes. As type foundries have worked out how to deliver fonts online we’ve been given more options. More type choices in the toolbox means more ability to design with type.

Similarly, grids are only recently on the radar of web designers. It’s only been a few years since those who worked with them in print carried them over to the web and began teaching the rest of us.

Responsive design also takes us back to basics. There are still issues to sort out in how we handle images and media responsively and many are still simply trying to wrap their heads around this new approach to design. The things we can do well responsively revolve around the fundamentals.

The greater emphasis on mobile devices has us paying more attention to performance as well so less bitmapped images in favor of scaler vector graphics and icon fonts.

All of these things are coming together at a similar time, enabling us to design with less, but better at the very moment we want to do both.

A Solid Present for a Solid Future

If you look back over the short history of design on the web it’s gone through a variety of changes. It’s pushed against the technology. It’s looked to the past for advice and inspiration. It’s jumped around quite a bit, especially as the barrier for entry into the profession is minimal. Perhaps because of the low barrier, what’s mostly been missing is a strong foundation in design fundamentals.

That’s where we are now. A number of changes are forcing us to look at our foundation and improve it. Flat design strips away the ornament and everything else on top of the foundation. More type choices and a greater awareness of grids removes the need for stylistic tricks. Responsive design is emphasizing minimalism and performance over aesthetic ornament.

In time we’ll build on the foundation again. We’ll push the envelope more and explore the medium. However, we’ll do so with greater support at the base and this greater support will allow us to reach and push further than we could on the shaky foundation we’ve had.

Some will never realize any of the above. They’ll focus only on the flat in flat design. They’ll continue to copy the popular as they always have. Fortunately enough designers will get what’s going on and see beyond the flat surface down to the foundation below. They’ll understand the emphasis will be squarely placed on design fundamentals before the envelope can be pushed again.

If you haven’t yet taken the time to understand the basic elements of design, now would be a good time.

The post Flat Design As A New Foundation For The Web appeared first on Vanseo Design.