You may have heard the term “flat design” and wondered what it was. Well before I tell you let me confuse you even more. Flat web design is the follow on trend from skeuomorphic web design. Confused? Good!
In a nutshell, Skeumorphic design is a term used to describe the period of web design / software design that represented real life objects as closely as possible, this included many 3D effects, lighting, shadows, textures and rendering. Flat design does away with all this fuss resulting in a clean crisp 2D effect. You will have already seen this shift over the past few months on your phone, laptop and tablets as the big players such as Google, Apple and Microsoft have set the trend.
You can see Apple have now changed to flat design on the iPhone
Back in 2011, I wrote an article entitled Less Is More ( click the link to read) that predicted this change. I’d already started to educate web design clients to the benefits of a no bells and whistles approach for several reasons. It’s only now, 4 years after my article that flat design has become mainstream in software are we now seeing that mirrored in web design.
Why Flat Design?
Well first up it’s not as naff looking as skeuomorphic. Let’s be honest. At first we marvelled at the 3D effects on our phones and so we wanted the same effect on our websites. Spotty pencil twirling web geeks were in their element designing all manner of spinning, sliding, perfectly rendered 3D gadgets for websites and clients loved it just as much. Web design up until recently was all about flashy gimmicks.
The simple fact is however, gimmicky websites are difficult to navigate, they are resource hungry using lots of bandwidth and they rely on software technology that isn’t always stable.
Flat web design focuses on pure function, clean, easy to navigate pages that load quickly and are therefore bandwidth (and cost) friendly.
Flat design doesn’t necessarily mean boring, vibrant colours are often used against a white crisp background, animated transition effects albeit muted are still often employed and if anything it is this animation, and interaction that has perhaps taken the emphasis of design. An example of this is parallax scrolling. This isn’t a new technology, it’s been used for years in animation. Essentially, it’s the method of employing a background that scrolls at a different rate to the foreground thereby causing an illusion of depth. The parallax concept has been taken further in web design, being employed to increase user interaction. To see one of the best examples (not the best example of flat design) of parallax web design take a look at this website
