0

What factors led to flat design catching on in web and app design? I know that Microsoft and Apple led the way in abandoning skeuomorphism in favour of more austere designs, but what motivated this evolution?

  • 1
    Hi Andy, welcome to GDSE and thanks for your question. I'm afraid your question, as-is, is too broad for our Q&A format. Could you try and edit it to make it more concise and objectively answerable in just a few paragraphs? If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Vincent Nov 10 '15 at 10:28
  • 5
    Sorry but this sounds like a homework assignment. There are so many articles on the topic of how it became to be and what problems it solves and which it introduces. A simple google search reveals the top minds in the field of UI/UX talking about it. So please, show a little bit more effort. – KMSTR Nov 10 '15 at 14:21
  • 1
    As a former art student, I learned to get deeply suspicious of the reasons that people present for their ideas: its kind of the George Lucas school of retcon. I note that skeuomorphism faded from use right about the time that the ability to render effects on-the-fly in the OS became "cheap" computationally and high-density displays became commonplace leading to high-DPI aware OS and applications. These both are arguments for non-prerendered elements that rely on hardware compositing. Flat design works really well for this. – Yorik Nov 10 '15 at 22:39
4

What caused it....

People/Designers just following trends... that's all.

Its the same thing that caused skeuomorphism to spread wildly... and the same thing that is causing the "material" design to spread.

Skeuomorphism had a basis in some reasoning... in that it was originally used to try and get users comfortable with digital content by making it appear familiar by being close to real-world objects. However, since digital items are very, very commonplace now, there's no need to try and ween users into digital worlds. Everyone understands digital content today. So designers, as a whole, are freer to design however they want. When Apple, Google, and Microsoft all bucked the trend of skeuomorphism it opened the door for other designers to follow them.

Some larger company decides to redesign... and a whole rush of other designers tries to copy them in an effort to conflate their design with the large corporations design...

a la ...

I love Apple.... this site is designed like the iOS, it must be good....

or

I love Microsoft, this site is designed like Windows 8 ... it must be good.

It's a way of gaining client/user credibility purely through appearance. Kind of like name recognition for a politician.

There's no great cause or reasoning behind any of it, other than designers just following what other designers (in more visible companies) are doing.

| improve this answer | |
  • I know I'm probably beating a dead horse on this one, but flat design is still mostly skeuomorphic. We're still emulating physical objects. They just look different. Realism vs. flat design...but both still tend to rely on skeuomorphs. – DA01 Nov 10 '15 at 19:47
  • 1
    I agree... but really it's more the "material" or "Windows8" that is using the skeuomorphs. Apple moved away from them a great deal. Each company has their own "rebrand" of "flat" and nothing is 100% skeuomorph free. – Scott Nov 10 '15 at 20:02
1

There was a great post on Nielsen Norman Group a couple of months ago that covered this topic. Essentially:

The release of Microsoft’s Metro design language and Windows 8 in 2011 was particularly influential in popularizing flat design. Microsoft’s design documentation referred to its new style as ‘authentically digital’—a phrase that neatly captures the appeal of flat design for many designers. Unlike skeuomorphic design, flat design was seen as a way to explore the digital medium without trying to reproduce the appearance of the physical world.

The flattening of Apple’s homepage provides a useful benchmark for the growth of the trend’s popularity. Skeuomorphism and realism had long been trademarks of Apple design, and its homepage resisted the flat trend until around 2013.

Recently, designers have begun to realize the usability issues of flat design. As a result, a more mature and balanced interpretation of flat design has emerged. Designers are finding they can be ‘authentically digital’ and explore the unique opportunities of the medium without compromising usability.

This is sometimes referred to as ‘semi flat,’ ‘almost flat,’ or ‘flat 2.0.’ This design style is mostly flat, but makes use of subtle shadows, highlights, and layers to create some depth in the UI.

| improve this answer | |
1

(This is more of a comment, but I don't have enough rep to posts comments, so I'll post a pseudo-answer)

What caused the rise of flat design? Fashion.

It's just a style thing, and rounded corners were no longer fashionable.

This biggest irony that I see is that "web 2.0" was largely typified (in a style sense, not the technology sense) by rounded corners and glass effects. In the early days, this was hard to do since CSS/browsers didn't support the radius property well, and PNGs with alpha channels were also not widely supported.

By the time standards and browser implementations caught up to all of this, BAM!. Rounded corners weren't cool anymore, and suddenly it was all flat design.

Flat design is easier to work with when designing for the web (from a developers perspective), but just give it a year or two. Flat design will be out and the next thing will be in.

| improve this answer | |
0

Microsoft and Apple led the way in abandoning skeuomorphism

There's your answer. If they aren't trend setters, I don't know who is.

I do have to nip-pick about the use of skeuomorphism here, though. It's a word with a definition that has been stretched beyond recognition, IMHO.

A skeuomorph is an element than emulates it's real-world counterpart. It's more of an interaction design concept than aesthetic. A simple example is the calculator app in iOS. The original app and the new 'flat design' app are essentially the same in that it emulates a real calculator with real buttons and a real LCD screen. They are just styled very differently.

| improve this answer | |
  • downvoter? Care to elaborate? – DA01 Nov 11 '15 at 6:10
0

I believe that Mobile first and the need for speed are at the heart of a return to simple flat design as it forced a rethinking of skeuomorphism and the extra weight of rounded corners, shadows and other elements.

Then came Paula Scher's redesign for the Windows logo with a clean and stark approach which seemed to have opened a floodgate of rethinking web and mobile graphics——Microsoft's Metro-, Apple's flat- or Google's material-design at the same time that Sketch became a prominent tool.

In short it was in the air!

| improve this answer | |
  • I'd actually cite advances in CSS, specifically CSS3 being adopted widely, as to why many images needed for skeuomorphism were no longer needed. I don't think Mobile First had a great deal to do with skeuomorphism being used less, although it certainly could have been a factor for some designs. – Scott Nov 10 '15 at 23:49
  • Again, skeuomorphism is there with our without flat design. I think you mean realism. A rounded corner also isn't more or less of a skeuomorph than a square corner would be. Also, while Paula Scher is certainly an influencer, Metro predated her logo by several years I believe (the Zune was the first product to start using the flatter aesthetic) – DA01 Nov 11 '15 at 6:14
  • +1 skeuomorphism is realistic, that's the whole point. It's a digital imitation but it has a weight to it & let's be honest, even if it's doable in CSS a lot of web designers can't/don't want to spend time on creating them; we need speed on all levels. Plus it's considered cheesy sometimes. It's not necessary anymore anyway since "we" all know that a simple icon with an envelop means "email", a tiny "home" icon means homepage, a button can be a simple rectangle, etc. We're all educated, we can use simpler shapes. Also just for reference and definition: en.wikipedia.org/wiki/Skeuomorph – go-junta Nov 11 '15 at 11:02
  • 1
    @go-meek it's realistic in its behavior...not necessarily its looks. A flat square acting as a button in iOS7 is still skeuomorphic as it's still emulating a real button...even though it's styled in a certain way. In addition, you can style a UI element to be very realistic looking, yet not be skeuomorphic if it in no way is used like its real world counterpart. – DA01 Nov 11 '15 at 22:58
  • Let us continue this discussion in chat. – DA01 Nov 12 '15 at 17:02
-2

High resolution display. It's a need to add shadow and gradients and colors, and smooth to look good in low res screens. With the advent of retina display and other high res, this need faded away, so here we hare. In print we always use "flat design"

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.