Flat design is a graphic style that aims to avoid any graphic element providing no significant value to the structure of a template. This type of visual design purely avoid any form of abstract “decorative” elements. Gradients, reliefs, volumes, realistic forms are erased to make room for simple solids.
This is a minimalist visual approach where the design is smooth.
Some examples of flat designs
What about Skeuomorphism?
Skeuowhat? What a horrible word!
Skeuomorphism is basically the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Its a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.
People are slowly moving away from the skeuomorphism design, which has been very popular over the past few years. Apple introduced it in iOS and since then many designers have adopted it. Apple iBook app is a very good example, once opened you are in front of a real bookshelf.
Some examples of skeuomorphic designs
Flat design vs Skeuomorphism
There has been precious little research conducted on the differential effectiveness of flat design versus skeuomorphic design. As a divide grows between the two schools of thought, let me point something interesting …
Just think about this : When you design a button in flat web design what are you doing? Basically you design a “flat” button that looks like a real life button, isn’t it a copy of something real? Guess what?
You’ve just figured out the inconvenient truth : Flat design is skeuomorphic.
Final thoughts
Over the coming years we will surely unearth some new schemas and mindsets related to web design. Flat UI is just another aspect of the many ways to treat information. The community has grown into a global community with designers to be found all over the planet. This means we all have access to share and research off each other’s information, regardless of skill level. There has truly never been a better era to work in the field of web design.
And you? What do you think about flat design?
Are you a flat design or skeuomorphism advocate?
Let us know your views in the comments.
I always love a fresh new wind blowing thourgh the design profession, and large brands like MS and Apple have a huge influence one way or another. Although I don’t really have a strong preference (I think all the hatred towards skeuomorphism is people regurgitating others opinions) but the very strong ‘but’ I feel is the psoitive effect ‘3d’ has on usability which the ‘flat’ design varian might be lacking. 3D always gives people the impression they can ‘click’ on something because it resembles for example a real life button or switch. Flat design lacks this characteristic, and therefore might be less intuitive for some people to use.I think it’d be very interesting of someone would splittest a flat and 3d button for click-through rates. I think it might add value to the conversation.
I welcome this flatter, more minimal style because it is simpler to implement. I don’t think the lack of “3d-ness” takes away from usability because icons indicate functions.
You’re not considering usability if you use the phrase “easier to implement.” And there will never be any science to this field of UX/UX if you start a sentence with “I don’t think…”
Wish granted! Looks like 3d buttons are winning. Personally I don’t see the appeal to flat buttons, even though I am supportive of flat design as a whole. We naturally want buttons to be tactile and visible – I think it is important that they’re distinguished from the rest of the elements on a page so that they’re instantly recognisable. This doesn’t necessarily mean they have to be protruding out of the page, as long as there is some skeuomorphism in the change between the natural and active state of the button.
Derp, forgot the link… Mods, can you join my comments?
https://www.zebraa.nl/buttonforahero/
What about to combine the two concepts?
No shadows, no lights, no reflections or gradients…Flat design with textures.
sounds like new Microsoft logo 😛
Right. 3d is not automatically skeumorphic. I think the author acknowledges this is a round about way. Skeumorphiisms usually depending on a larger metaphors…the wood shelves need books on them. If we use subtle 3D or relief in an otherwise “flat” interface, it will be very effective.
Flat design is NOT skeuomorphic. The flat design is about creating digital-native interfaces/designs, not real-world copy designs.
I can’t help but have the opinion that the line “You’ve just figured out the inconvenient truth: Flat design is skeuomorphic” is a really silly, contrived attempt at a “there is no spoon” moment. If a “flat” design is skeuomorphic just because it has UI elements like buttons and windows, then every digital interface is inherently skeuomorphic simply because it’s digital, and the definition and meaning of “skeuomorphic” is entirely lost and the discussion is moot.
What I’m saying is that I’m not sure what the point of the article is. If you’re going to say “there has been precious little research conducted on the differential effectiveness of flat design versus skeuomorphic design” and then just move on without adding anything at all, where is the value? Here’s a summary of the article: examples of flat design UIs, examples of skeuomorphic UIs, “there’s no research regarding the differences from a UX standpoint,” “there is no spoon,” and an invitation to discuss in the comments.
I’m hoping I don’t sound too harsh, but this is my honest opinion. I was excited when the article came up in my feed. After I was done, I was disappointed, because it’s empty.
I have to second this.
Me too, totally agree!
Agree. The comments are more interesting than the article.
Disappointed to say that I really agree with this comment. To make the argument that essentially the two design styles are the same just because they are both digital is ludicrous. It’s like arguing that Van Gogh and Picasso had the same style because they both used paint brushes. Was excited by the title of the article, but the excitement pretty much ended there…
Easily agree with this comment.
Agreed.
Philip is right on with this one.
(Also agree that Susan is right, the comments are making this article more interesting… which i guess is IN A WAY THE POINT!?!?!
The Article IS the Comments!
…
Just kidding about the meta-joke)
Agreed 100%
I agree. I stopped in my tracks at “flat design is skeuomorphic” because it sounded so puzzlingly nonsensical. I couldn’t figure out if I was missing something or if the argument being made really was as ridiculous as it seemed – that just because the concept of buttons exists in physical space, a flatly designed button is skeumorphic. I second Mike’s Van Gogh/Picasso/paintbrushes comment.
I think the most important part of the whole discussion: skeuomorphic design is not bad by definition. But what people seem to discuss is the matter of texture, not what the term actually describes. Just an example: scrolling with weight (the stuff we all enjoy on the iPad, iPhone, Android-Phones and tablets is skeuomorphic design. It resembles reality and attempts to give you the illusion of weight while scrolling.
People are obsessing over the leather texture of the iCal and rounded buttons, which is a LOOK discussion, not a discussion on the matter of skeuomorphic design or not. But thats the internet. Everyone jumps on the bandwagon and freaks out about a subject without giving it more than a fleeting thought.
Skeuomorphic design is very helpful in giving people a basic understanding of what a purely digital, virtual “thing” does when they interact with it. That is skeuomorphism. It has a lot of benefits and is here to stay.
On the matter of “real life” texture or flat design, as discussed in the article, we are just approaching another wave of design trend, which will absolutely be replaced by another trend in 5+ years. Maybe in 10 years people will facepalm on the ignorance of people who embraced flat design and say how boring it is bla bla bla… trends are here to change. Always keep that in mind. Trends are a matter of taste, not of facts.
Personally I like flat design more. But that is just a question of taste, and taste is influenced by trends, which in turn are influenced by rumors and opinions etc etc.
The point is this, at the introduction of the iPhone and with iOS wanting to get the largest demographic possible, then skeuomorphic is a must because someone who has no idea about user interfaces needs to be familiar with the phone.
Now as we move ahea and newer generations take place they know that a smartphone is a tactile device and they dont compare it with real life objects.
The recent debate about the save button is a classic example, it was right for older generations but today means nothing. In fact that button is the epitomy of skeuomorphic design.
Flat design and minimalistic design are trends, in 5 years we’ll be looking at flat design saying “thats so 2013” it isnt a reality. Some influential designer will say something like what they heck we are humans, humans create stuff, they decorate thats the difference between us an other species and therefore we must add fancy borders and lots of other additional elements all over the place. Then that’ll be the trend.
So it’s not whether one is right or wrong, it depends on who you want to use the product and will skeuomorphic be more practical for them than flat. If you’re disrupting a common paradigm then it is likely that skeuomorphic is a good way to go, if you want traction. Imagine disrupting a paradigm and doing a totally unfamiliar design form, you’re likely going to fail.
There’s my opinion.
I see the top two examples of ‘flat design’ have 3d elements with drop-shadows. Shadows, used wisely, improve ease of perception by mimicking our real-world 3d view. As in the second example (“die nätschen…”) the drop-shadow on the left-hand menu panel separates it from the main window. Without such devices, too many squares on a page just become confusing. This debate is a bit silly – it’s not one thing or the other, it’s what works best for ease of perception and use.
Flat design vs. Skeuomorphism? Come on WDL! BOTH suck!
The comments are far more interesting than the article.
I have to agree. 🙂
Couldn’t agree more
The best answer is here. https://daringfireball.net/2013/01/the_trend_against_skeuomorphism
The trend away from skeuomorphic special effects in UI design is the beginning of the retina-resolution design era
I think that a more dimensional design gives users more of a feeling of reality, substance and dimension, the feeling like they have a real bookcase of books. I like reading a book whose pages actually still turn, especially if i have to give up the feel of paper in my hand. Flat design leaves me feeling, well, flat and 2-dimensional and boring. Indicates the designer doesn’t have the skill to create in 3D. I think if we are converting to a more digital world, we should not do away with at least the presumption of a virtual 3D view of things, which is normal to the human eye. I feel more impelled to try something or view something that is more “real”. As all cable, phone, electric and other Internet providers finally install fiber optic cable all the way to homes and businesses, bandwidth almost won’t matter, and everything can be hi-res, 3D, high-speed video, and in beautiful dimensions and shadows. No longer will some people have to view things through stupid non-shadow-capable browsers which are definitely not for artistic use at all. Funny that kids really like 3D movies. I wonder why. Video games are mostly 3D, at least the good ones are. Who came up with going flat? Keep the mental feel of reality, even if we are viewing flat surfaces. I think it attracts viewers more. I wouldn’t even like playing digital synthesizers at all, or musical instruments on the iPad, if they were flat!!! Ruins the whole thing!
I hate the flat squares look. If ios looks like metro, I’m going to resist upgrading as long as possible.
I think it would be nice if developers considered their entire customer base, not just really young ones.
The conspiracy theorist in me thinks tall these discussions are Apple’s doing… they are preparing us for their next gen UI design, so that when it appears people will fawn over it as the best, most modern, and most intuitive UI ever invented… never mind that other companies have already been doing it.
Unlikely, as Windows 7 kick started the trend. Of course, very few will admit that and Apple fanboys will still trumpet the new ‘flat’ ios re-design as revolutionary.
I’m on the “flat design” side. But I don’t think that it’s a matter of taste or trends. I think that “flat design” is the real concept of design related to communication (graphic design, web design) because it is built only with the pure communication elements: basic geometry, colors, text.
Flat design is skeuomorphic this is wrong. In skeuomorphism design, the object looks like a real on the screen.It is based upon textures, drop shadows and real object characteristics.In Flat design it is clean, open space, crisp edges, bright colours and two-dimensional illustrations. It makes less stress usability.
“You’ve just figured out the inconvenient truth : Flat design is skeuomorphic.”
I must agree, if you really look at it the above comment makes sense.
I do have to say I am in love with Flat Design!
To say that any design trend or style sucks or is “better” than another is a really limited understanding of design. Design isn’t (or shouldn’t) be about copying the latest trend, forcing your design style (or the style of the moment) onto a client or project regardless of the needs or goals of the project. Design is problem solving, and the visual style of any project should be dictated by the needs, goals, audience and environment/media of the project. If all you can do is copy the style of the moment or design everything in your personal style, you aren’t a designer-you’re a decorator.
BINGO! The whole debate is just fodder. Substance before style
As you said “Design is problem solving” that’s why Flat Design sucks (oh boy it really sucks) because Flat Design do not solve problems, it creates problems.
Why did 3D look, shadows, gradients and so on were created in the first place ? To be able to identify interactive elements like a button quickly and easily, Flat design throw all this to the bin and let’s you in front of an image where you have to figure yourself what is clickable and what not.
From a usability viewpoint this is a major leap backward.
It’s evolving. At the moment, both serve a purpose. Consider an analogous circumstance in language. Few people have a horse who say “hold your horses”; few have a circa 1920s wall mounted phone who say “hang up the phone and drive”; few drive trains who say “he’s blowing off steam”; few have TVs with knobs that turn who say “turn on the TV” or “turn up the volume”. And so on. There will always be some anachronistic lag in language, design, etc. Don’t get too “put out” by it.
If you think ‘flat design’ is NEW you are either very young, and that’s you’re only excuse, or you need to get out from behind your screen more…
The issue with skewmorphism is with scalability. With retina displays and variable screen resolutions Flat Design at this time is a more viable solution.
It’s an interesting discussion. I agree with Paul Christian that the issue of usability is important, but also think that it’s horses for courses. You adopt a design approach which is best suited to the audience – the same approach is not suitable for all audiences.
Let’s get too hung up on genres and trends, remember that pretty much everything is design is derivative. Flat design is modernism, skeuomorphic is realism. Just like in art, architecture and life, these things come and go.
…’Let’s NOT get too hung up…’
Well, what seems to have happened here is that the design has no elements that are motivated purely aesthetically, but that each have a purpose. And if you add the necessity to distinguish those functional elements for ease of use – say, contrast, position, or some other visual distinction – then it seems you have arrived not at a new design ethos, but back at quite an old one – information design. The designs do have the quality of an infographic.
Flat design: Essentially 20th Century Modernism packaged under a new name. Glad it’s coming back though.
Nice post, I tend to naturally create flat designs as my philosophy evolves around intuitiveness and functionality. I find its easier to communicate a message by stripping it back to the bone and having the purpose as clear as possible. Although, if adding gradients and strokes to a button makes it even more enjoyable, I wouldn’t ignore it.
Superflat needs tasteful photography and/or typography
Superflat needs tasteful UX.
have a good time designing, it all blows in the wind
cheers
I agree with Pete R. And Ian C. There’s nothing “new” here. Just a back to basics in functionality. Besides, does it have to be a “one is better than the other” or an either/or. There’s always been room for both approaches depending on the situation. This is an argument for arguments sake. Pointless unless given a particular scenario.
A site needs to be informative, the rest is secondary. I changed the layout and made it quite minimalistic. Conversions doubled.
Great article, I’m surprised that you didn’t mention how convenient flat design is in relation to responsive design. Two trends that go great hand in hand. I posted a bunch of great examples here https://blog.stationfour.com/flat-designs-trends-in-responsive-websites/ check it out.
“Flat Design”? That’s the new “trend” the design community is trying to talk about? Seriously? Maybe I’ve been doing this for too long but I really feel this isn’t worth talking about. Any designer that follows trends instead of solving problems isn’t worth his salary
Glad you wrote about this. Four words … adaptive UI cognitive algorithms. The “inconvenient truth is non sense. read some semiotics on hyperreality and symbols generally. “The functional need for it is gone …” I wish, but that is not the way human cognition works. It is a continum and depends, although I find most designers misbalance either aesthetic and overdesign. Though more often than flat design, the rear view aesthetic approach to skeuomorphic in the digital world is particularly hokey. I did that digital clock in 1993 for IBM yeessssh I cringe. Like avatars in virtual worlds or god forbid naked ones, people want them then go berserk when they’ve no covering textures. Human factors/cognition is the scaling problem. We are funny little apes.
What it ultimately comes down to is the feeling, the sensation, the user experience or impression. Does the design create the desire to interact, or perhaps more importantly, to buy—from a personal standpoint, that’s all that matters to me as either the creator or the consumer. I want to know what people are willing to give their attention to and maintain a viable relationship with and why.
“There has been precious little research conducted on the differential effectiveness of flat design versus skeuomorphic design.” -hopefully, we can find an answer to that question sooner than later.
These comments bring up some good points. Flat design has simple and clean lines. Skeumorphism should not be looked down upon. Flat design works great for minimalistic designs, but not all designs. If we stick to only what’s hot, there won’t be any room for innovation and creation.
Someone please tell me what is the advantage of ‘flat’ design?
It certainly doesn’t help the user understand where to click or touch. A 3d environment is much better for that. the interface should seem real… it doesn’t have to be retro to seem real.
As I recall back in the day, the impetus for flat design was because the simpler/fewer the graphics the smaller the footprint… It was a bandwidth issue! For instance, Craigslist was brilliant not because it was so simple but it was small and loaded quickly. It was a performance issue… people had dialup.
So now, in an era of broadband, we no longer have those issues. Have we instituted more clearer to understand/3D elements, perhaps with tactile and click sounds for instance, now that we CAN??? NOPE Why not?
Flat design. huh? As someone just pointed out, flat design is not new.
Now, people seem to think this flat design thing is better… buy WHY? I don’t understand what the advantage is. It’s now to the point that using a drop shadow or, (god forbid) a bezel and emboss is a crime! People are actually snotty about it. But what is the logic here? Is it just because of some ‘modern art’ view… because some people just LIKE the look better? or because we’ll be viewed as ‘modern’ if we follow what Microsoft is doing?
feel free to enlighten me.
Certainly the small phone interfaces, originally with exceptionally small resolution were an argument for the simplest possible interfaces.
… or is just that we’ve not woken up to the fact that we no longer need to worry about bandwidth or critically small mono resolution? hmm..
Or we want our PC apps to ‘match’ our phone apps… simpler is better? Interesting notion, while throwing the baby out with the bathwater.
Wouldn’t it be better to make a user interface as obvious and clear to use as possible? as three dimensional, using multiple intelligences (like sound and tactile responses)? my thinking… duh!
In the contrary of what you seem to believe, modernist design (what you call “flat design” which is kind of a silly name) is much better for small screens like phones, and in difficult viewing situations like outside in the bright sun. Because of the lack of useless UI information (such as “glass” effect, shadows, 3D etc) and the clear Swiss typography, the screen is much less overloaded and people can read and interact faster and better. There is a reason why Windows Phone devices are consistently rated better on Amazon and other platforms by people actually using it than the concurrence.
I for one am very excited to see what Ive is coming up with. It will be nice to see a refresh in the tired iOS UI, and we know that Ive always disliked Skeuomorphism.
Cheers
Laurent
Ahh…fashion. Dimensions go up and dimensions go down. YAWN!
What about the disappointment and immediate lack of trust? The first thought we get from Sceoumorphism is “this is fake”. On digital surfaces it is somewhat ok, since we are familiar with the technology and possibilities through films, gaming and such. But it is when this fakeness is applied in the physical realm we react with disgust. In cars for example we are presented with fake wood, leather textured plastic and graphically altered surfaces that resemble something expensive.
This topic is not very different from what we see in architecture. Modernism is in my opinion the same aesthetical reaction as flat design is in the digital world today. We need this!
You make a great point. If you check my presentation “Putting the Microsoft design language to work”, you will notice the 5 Microsoft design principles. One of them is “Authentically digital”. Because the apps you build run in a digital world, this principle recommends to acknowledge that fact and to avoid overloading the UI with unnecessary information. When I give this presentation, I say (in a controversial manner, but forgive me for that) that skeuomorphism is a lie.
Cheers
Laurent
The article was good for evoking some great discussions. Really enjoyed the comments. Flat design is a little bit more creative than skeumorphism. Flat design is without a reference and creates possibilities to design something new and fresh as stated above in so many comments. It could lead to the development of a new trend. That is what makes flat design good and fun. It is a mere stepping stone to the next new trend. Skeumorphism is definately here to stay.
I love this ongoing debate. The bottom line is that both are trends in design.
When iOS came out, everyone praised the skeumorphic language by proclaiming “it giving users a sense of real world context in a digital environment”. Then designers started reducing decoration to what is now referred to as a “flat” design language proclaiming “all decoration has been removed to it’s essentials because it is represents digitally created stuff.”
They are trends. Plain and simple. There will be another trend. And another. And so on.
What my big beef about this debate lies in the conversation about the origin of this trend (and others like it). Microsoft did NOT invent “flat” digital design. Neither did Pepsi, or Nike, or Facebook.
Digital design firms have been practicing this style for years. Group94, ATTIK, Odopod, AREA17, ROKKAN and many others brought this language to the forefront of modern design trends many years ago. In fact, Group94 and AREA17 built their entire business almost exclusively on this aesthetic. They were, of course, inspired by Dieter Rams, Massimo Vignelli and other prominent design superheros that practice reductionism and minimalism.
Let’s give credit where credit is due and get off the “Microsoft invented ‘flat’ design language” bandwagon.
I also challenge you to question this aesthetic when you start a new project. It’s your responsibility as a designer to provide an appropriate solution for the design problem you are trying to solve. Don’t automatically go to “flat” because you want a nice flat design in your book. Do what’s right for the brand, the product, and the audience you’re trying to reach.
Now, back to Photoshop you monkeys!! (myself included) 🙂
Microsoft might not have invented it, but they are certainly setting the trend with the successful implementation of modernist design and Swiss typography in Windows Phone (since 2010) and Windows 8. Of course as soon as Apple will follow the trend, we will hear that they invented it 🙂
Cheers
Laurent
more flat designs are currently on the web. moved by the trend or what.
it’s simplicity, getting the info quick and easy.
skeuomorphic designs is more about the look and feel. both are good depending how to use it.
Based on the images of flat design shown as examples, I’ve been really enjoying the new trend of flat design. It’s different, so it feels new and fresh. It even makes some of the skeumorph designs look old and outdated. But as many have mentioned, all styles are here to stay. It’s a matter of how well it’s put together and what kind of an experience the user gets. Great Article. Thanks.
I don’t know how possible it is to get away from computers not reflecting real everyday objects. What do you replace a Folder icon so not to be too skeuomorphic? You can try making it as flat as possible, but your still using a conventional representation to explain the digital method. In a sense we are imposing the physical on digital so that we ourselves can be able to understand the digital. There is no around this.
Personally I don’t care if it’s flat or not as long as it has a usable UI and it does NOT crash … I think that flat design is a trend that may eventually go out of fashion …
I must say I’m leaning toward flat design. While I love what skeumorphism can offer, it seems like it’s on its way out. There are even rumors that Apple’s iOS7 will be an all-flat design, so it seems like they’re on board with it. I will miss skeumorphism, but I think flat leaves an opportunity for the designer to be more creative.
Skeuomorphism is really new term for me! but flat design is not adapting on my websites. it is growing quickly in web designs community.
Flat Design is a Big time Yes , Every one loved it and every one wants it , It is simple easy to design and Boy it looks fantastic , but you hav eto balance it out with proper fonts .
“If you ever hire a designer, developer or read an article with the words Flat Design in their title, just runaway, run to the mountains, because that person doesn’t understand that this isn’t about being flat, it’s a not a style…”
Enough said.
https://www.toledo2.com/2013/05/02/dont-call-it-metro-call-it-good-design/
Laurent
I think It really depends on your clients. You can’t force a style on a client if it’s “trendy” right now, do what’s right for what your client needs.I want to read a lot more about the debate:)
I think that in general there is no real answer. Depends on the project, the users… BUT I do find Skeuomorphism a little heavy looking…
I feel like there should be a harmony between the two. I personally like the flat look better (thats what I tend to strive for, but I also add textures here and there). But at times I feel like Skeuomorphism is similar to the Art Nouveau. Unnecessary design just to jazz up the aesthetics (even though I do think there is a huge difference in terms of one is helping relate non-tangible objects to real objects; while the later was purely for aesthetics). And I keep relating this flat style to the Industrial Revolution/Modernism/Bauhaus. It seems like design tends to always go from complex design to more simplistic design, once the consumer understands the product. That being said, there will always be a place for both styles
Flat design doesn’t mean it’s easier to do. But it’s easier to explore than Skueomorphism design. With Responsive Web Design trend, it’s easier to match with Flat Design….
Flat designs are getting popular day by day. I remember that flat designs are firstly introduce by windows 8. but now everyone is behind it 😛
flat designs looks beautiful that’s why everyone wants flat design now even google and yahoo logo is flat 🙂
So many years of fabulous improvements in display technology, giant steps in computer power and clever concepts in computer aided design… all of them gone for the sake of “flat design”… So what i.e. “retina display” is for? To just notice the “serifs” of typography? Tens of thousands of pixels on every single square inch just to be filled with a… single color (or two!)
I’d be really glad to see various and completely different types of design, surfing the web, but that dominance of the FLAT in web design is a GREAT dissappointment for me, who for ten years now have been a great enthousiast of shadows-highlights, gloss, inner lights and, generally, 3D appearance by applying some simple yet genious ideas on graphics.
I hope soon realism (or what you call “sceuomorphism”) will be back in our computers or we can throw out our display adapter and replace it with a 16 color capable one…