9 ms·
The Flat Design Aesthetic
- artursapek 14y agoI always hated everyone's (especially Apple's) skeumorphism. I wrote this http://nnife.com/inouveau.html http://nnife.com/inouveau.html about it, to me imitative digital design has always been horrible and it reminds me of the imitative architecture and furniture design that was popular about 120 years ago, like this article also mentions. It's such a dumb way of designing. "Let's just make it look like this other completely different thing! It's familiar, so people will be drawn to it." Pixels are flat. Screens are flat. Flat design is here to stay.
- fumar 14y ago> Flat design is here to stay. I think web design is an art form. Like all art forms it is in a constant flux. We definitely are headed to a more flat era. However, I can not discount trends, it is their nature to change with the times. Steve Coogan states in 24 Hour Party People, "the history of popular music is like a double helix." Everything is always a reaction the last trend. http://youtu.be/GhpezhJxUYU?t=44s http://youtu.be/GhpezhJxUYU?t=44s
- ed209 14y agoUI Design is a type of language and as such has to communicate a symbol with a meaning (or action in most cases). If you can use a language element that your user already understands, why would you rule it out? I also wonder why you compare Skeuomorphism with flat design when you can have a flat skeuomorphic design anyway. And I'd also be careful with stating that any design trend is here to stay. Most design trends have been here before and will be back again in the future. It just happens that the flat-look is on trend.
- rimantas 14y ago> Pixels are flat. Screens are flat. Pixels are also RGB. Does it mean that designs should use only those three colors? > Flat design is here to stay. Total non sequitur.
- artursapek 14y agoWhat the fuck are you talking about?
- bcoates 14y agoTo bring up the affordance angle again, that doorway is extremely unsubtle about being a doorway, and gets high marks for usability, while the Le Corbusier building looks like a military pillbox with no way to enter or leave. All that ornamentation serves to guide the eye and give you a visual shorthand for what you're looking at, whereas the sharp textureless lines of modern objects and UIs makes me think it's all aspiring to be dazzle camouflage http://en.wikipedia.org/wiki/File:USS_West_Mahomet_(ID-3681)_cropped.jpg http://en.wikipedia.org/wiki/File:USS_West_Mahomet_(ID-3681)... Besides, in the real world flat surfaces carry a gradient from their lightsource, truly uniformly lit, flat-texture surfaces are extremely rare and hard to orient visually.
- ubercore 14y agoIs skeuomorphism being diluted to the point of irrelevance? I understood it to be _clear_ translations of design elements from one object to another. So, making a computer calendar look like a physical calendar that you would flip through on your wall. As used in the article, it's so vague as to be unhelpful: gradients are skeuomorphism? What were they copied from? What other object are they trying to imitate? Using the example of nest illustrates this well -- the interface shows an exact replica of the UI on the physical device to control it. Does the rotary control make as much sense on a computer screen? Probably not. Is it still a good design decision? Yes. Is it flat? No.
- sp332 14y agowe often apply gradients and drop shadows to elements that are meant to be buttons, because buttons in the real world have these features, even though they are unnecessary in the setting of a computer user interface. So it's skeuomorphism because it's trying to look like a physical push-button.
- ubercore 14y agoA gradient can be used as a design element (in buttons or elsewhere), without skeuomorphic intent.
- Kerrick 14y agoA gradient from one tone/tint/shade to another of the same hue implies one thing: directional light. If directional light is visible on an object, that object exists in 3D space, at least in the mind. If that object exists in 3D space, then it has tangible form. If a UI element has tangible form, instead of only function, then it is skeumorphic. At least, that's what the article seems to be saying.
- mikec3k 14y agoI HATE the flat look. I prefer to see gradients, drop shadows, and rounded corners. That's why I can't stand Android & Windows 8.
- jkw 14y agoI am generally against skeuomorphism, and prefer what this article refers to as "flat"" design. However, one of the difficulties I've come across with flat design is the ability to communicate the affordance of actionable items (i.e., buttons) vs. non-actionable items (i.e., content and images). As an example, I would classify the Windows Phone as an OS that has fully embraced flat design. However, after using it for 6 months, I constantly find myself confused on where I can click vs. not. Other apps have trained me to recognize buttons through gradients and bezels. This becomes even more important on the phone as there is no "hover" state that helps one explore click-able areas. I found it helpful is to introduce hints of skeuomorphism when communicating affordance of actionable items, while keeping the rest minimal. Am I the only one, or are others also experiencing this issue as well with totally "flat" designs?
- polyfractal 14y agoGotta say, I've never had a problem with WP7. All things clickable: - Big colorful squares - Round icons at the bottom of the screen - Ellipses - Most text that is white and largish Can you give an example of something difficult? I just flipped through my phone and couldn't find anything that might be confusing.
- ianstormtaylor 14y agoYup I've had this problem as well. I think consistency and generous use of white space helps to alleviate this. As well as eliminating non-clickable items as much as possible. Ideally the content itself would be actionable without the need for buttons everywhere. Realistically if something isn't actionable on mobile you should really be questioning what it is doing there, or whether you can simplify the interface by making it interactive.
- pan69 14y agoMaybe a balanced combination of the two design philosophies can exist together where skeuomorphism is only used for actionable elements such as buttons etc. but not other elements. It sort of reminds me of old pixelated video games where sprites stood out from the background making it almost instantly clear which elements could be interacted with.
- jongold 14y agoAs with everything on that blog: total BS. Flat design isn't an 'aesthetic'; it's the result of considered design thinking. Picking 'flat design style' instead of x or y 'design style' is to cheapen yourself as a designer to the level of an 11 year old on DeviantArt.
- mnicole 14y agoSome of these design blogs need to be put in the same bucket as W3Schools on HN so people know not to bother. So much misinformation.
- jinushaun 14y agoSkeumorphism isn't inherently bad. But problems commonly follow when designers aspire for authenticity over sanity, which leads to bad user experiences. Apple's Contacts and Calendar apps are cumbersome to use because they try too much to replicate real world objects. More alarmingly, it limits our creative thinking. When the iPhone was first presented in 2007, Jobs kept on reminding us that these user experiences were only possible because of touch screens. We were no longer limited by static physical keyboards. The iPhone doesn't even have a shutter button in Camera.app! There are countless other examples of digitally authentic user experiences which are only possible if we think outside the box and beyond real world objects.
- bcoates 14y agoI think the only thing I'll miss from the unmourned previous design era were gradients. They served a very practical function: the boundary between almost any two gradients, even subtle ones, triggers the edge-detection algorithm in the brain and creates a border while using up hardly any of your budget for space and contrast.
- jpdevereaux 14y agoI like the happy medium that the Squarespace screenshot suggests - flat list navigation elements that are implicitly clickable due to their arrangement, and lightly-gradiented buttons that pop out as actionable items. Moderation is ideal (as usual).
- hcarvalhoalves 14y agoMinimalism and skeumorphism are not mutually exclusive. Skeumorphisms are adopted on UIs, a priori, to give hints about the function and ease the interaction with new users. It's a metaphor to reuse prior knowledge of how things work in the real world. What Apple did with the calendar app is not skeumorphism: it's just kitsch. While the app looks like a calendar, it doesn't work like a calendar (you don't flip between months, for example), so it completely misses the point. On the other hand, you could design a calendar that works like the real thing, using minimal lines and flat colors, and you could argue that it's minimalist and skeumoprhic (because it still carries assumptions about another object, the paper calendar, even thought flipping pages is not a metaphor of digital media). BTW, the definition of skeumorphism in the Wikipedia article is too narrow, and at some points downright wrong.
- shmageggy 14y agoI think Don Norman's book "The Design of Everyday Things" is largely about exactly this, and it could even provide a simple heuristic for whether or not a specific skeumorphism is worth keeping or just kitsch: Does the additional design (whether a gradient, bevel, shadow, etc) indicate an affordance? That is to say, does the extra stuff that is being layered on serve to tell the user something about what the UI element is for. For example, a slight gradient and bevel on a button informs the users that it is meant to be pushed, as it looks a bit raised up relative to its surroundings. This, to me, is the biggest thing missing from these flat designs. There's nothing left to indicate whether something is a button, a panel, or whatever else. It's been stripped down so far that crucial UI hints have disappeared. As other commenters have pointed out, I think moderation is the key.
- mortenjorck 14y agoActually, both the OS X and iOS calendars do support flipping between months with a swipe. Arguably, the leather effect at the top aids in this by reinforcing the physical-analog affordance, though the torn edges are a bit much. Now the address book, that's a nearly perfect counterexample. Once again, on both iOS and OS X, it has "pages" that invite a swipe – except here, swiping does nothing. A dead affordance that only serves to frustrate and confuse the user.
- juiceandjuice 14y agoSort of off topic, but there are physical examples of "flat" design applied to objects. One notable example could be the Quad 33 preamp: http://en.wikipedia.org/wiki/File:Quad_33_Front.jpg http://en.wikipedia.org/wiki/File:Quad_33_Front.jpg
- ChrisNorstrom 14y agoOh Jesus, UI Design has turned into fashion. Follow a fad, get sick of it, follow another fad, get sick of it. Over-do skeumorphism, proclaim "I'm heading in the extreme opposite direction", over-do flat design, go into extreme opposite direction. After everything's been "flat"ened we'll move into 3D design where divs and containers have a raised 3D look. ===== The problems with flat design ===== - It can give off a hospital white, cold, emotionless, colorless, boring, bland, sterile look. - Looks like it was exported from a UI drafting app. - Looks unfinished. - You can't always tell which elements are clickable (see new YouTube redesign) because everything is so blocky (see windows metro). - Has an extremely unhealthy obsession with white-space as a separator. - Elements that where once grouped together are now just floating around in white-ness. - Looks like randomly arranged icons and text. (see the new unnecessary, god-awful YouTube re-design) ===== The problems with Skeumorphism ===== - Inefficient, lots of css, lots of images. - Follows what used to be familiar 10 years ago rather than what's proper today. - Stuck in the past, old fashion, outdated. - Doesn't make room for new UI elements. - Old UI clashing with New UI. ===== The problems with Web 2.0 look ===== - Design and UI are loud and attract more attention than the content they hold. - Super shiney buttons, unnecessary gradients. - Distracting colors. ===== WHAT DESIGN SHOULD BE CENTERED AROUND ===== - Predictability, familiarity, usability, ease, retention, signups. - Gradients are fine as long as they're subtle and not distracting. - Buttons should have rounded corners to emphasize their clickability. - Important elements should stand-out / pop-out more. You can use shadows and gradients and color to do this. - Typography should be easily readable and go with the theme of the site. - Design elements should not be loud, the elements that contain the content should not stand out more than the content itself. - Rather than use eye bleeding white on everything, using subtle soft colors is best.
- 54mf 14y agoDesign has always been about aesthetic preference. While you're absolutely right about the core concepts (typography, color, contrast, etc), I find it amusing that you say that buttons "should" have rounded corners, or that gradients "are fine". Both of those concepts have merit, but are centered around a specific design metaphor (creating virtual objects with real-world qualities; round, "safe" corners for touching) that is by no means required for good UI design. I'd be happy if we could just all agree and acknowledge that design is fashion and is almost entirely open to personal preference, instead of cyclically praising then destroying our golden calves du jour.
- elijahmurray 14y agoOne thing that comes to mind is the updated www.outlook.com design and Windows 8 in general. While I personally am a fan as a designer, I'm more interested in what non-techy people think of skeumorphism vs flat. Anyone have input from relatives / friends or anyone not associated with technology?
- tptacek 14y agoRdio is I think an example of the aesthetic taken too far; when I first got it in an update, I thought it might have been a bug. It looks not drawn enough, like the product of a UI framework that deferred look-feel and died due to an uncaught exception. A lot of UI styling is just cosmetic, but some of it is there to create affordances.
- ryanglasgow 14y agoTheir designers stripped away everything that was unnecessary, and allowed the content to become the design. It's a very difficult aesthetic to pull off because it relies entirely on the most challenging aspects of UI design: spacing, grids, and typography. At first, I didn't like it either, but over time have come to love it (and have become inspired by it in my own designs).
- runawaybottle 14y agoIt's ok, and heavily inspired by the zune windows app (which had some more interesting UI/precursor to metro): http://cdn.appstorm.net/windows.appstorm.net/files/2011/04/sshot-2011-4-19-488.png http://cdn.appstorm.net/windows.appstorm.net/files/2011/04/s... Rdio: http://assets.gearlive.com/blogimages/rdio-white-redesign.jpg http://assets.gearlive.com/blogimages/rdio-white-redesign.jp... I think a good argument against too much flat design is just how similar things end up looking.
- rimantas 14y agoAlas, it is possible to strip too much and I think Google is guilty of that. > aspects of UI design: spacing, grids, and typography I'd say these are more aspects of content design, albeit still very important in UI, but less so, for a simple reason: typically there is less content. You still have to have some visual hierarchy, make important things prominent and less important less so, mark interactive elements as such. When you strip too much you are forced to use whatever left for that and it can be a stretch, like excessive use of white space.
- cageface 14y agoWhen I first saw the UI I thought there was a stylesheet missing or something. After several force reloads it started to dawn on me that they were serious. I am generally very pro-minimalism and hate skeuo design but this is not only taking minimalism too far but failing to understand that a blinding white screen is visually exhausting. There's a reason almost all "pro" apps have a muted, grayscale palette.
- anthemcg 14y agoThis whole argument is starting to feel really old. Neither "flat design" or skeumorphism is necessarily the right path. They are both great techniques which can solve different problems. Gradients and texture bring dimensionality and personality. Flat design feels more modern and focuses certain functionality. Look at Apple v. Microsoft right now. Skeumorphism IS solving Apple's design problems and Windows 8 is struggling to make meaningful strides. In my opinion This whole purist backlash against skeumorphism is bad. This new approach implies that ornamentation and style is not important or useless. I find this implication ridiculous, designers must solve problems with form and emotionally appeal to users. Personality is equally important to solving the problems. The fact the designers are attacking or shunning one over the other is upsetting.
- dreamdu5t 14y agoNone of the points listed about flat design are specific to flat design, but are simply good design practices.
- TommyDANGerous 14y agoI love flat design!
- sekou 14y agoI'm surprised Windows wasn't mentioned in the article. Although the latest version has been met with mixed reactions, I think the fact that Microsoft has embraced "flat" design will have a measure of influence on the future of the aesthetic.
- lnanek2 14y agoIt would be nice to see some usability studies to see if users actually find the actions on a page as easily despite the lack of 3D, bevels, shadows, gloss, gradients, etc.. We programers often reason things out, like the above article did, just to watch users try to use the app and prove us completely wrong. At one company where we had flat buttons we made the most commonly desired action on the screen really huge and had a block of smaller buttons below it. In usability tests, no user ever hit that huge button. They all thought it was just a page title or something. We even tried giving them tasks that required using it, but they would go into a different section of the app like the settings and never figure it out.
- mortenjorck 14y agoAllen Grinshtein of Layervault may have coined the term “flat design” originally. Oh dear. This is what happens when your design perspective is limited to the past few years of popular UI design. “Flat design” was not invented by designers at tech startups. The concept was not popularized by Microsoft. Yes, there has been a recent trend away from the use of shading, texturing, and depth cues. It is a resurgence of something that began much, much longer ago. Who invented “flat design”? Maybe Josef Müller-Brockmann, 1951? El Lissitzky, 1932? Dribbble users may not care about these names, but the current seasonal trend toward formal simplicity is little more than a rediscovery of the 20th Century's defining graphic design aesthetic, Swiss Modern. If you're interested in the history of design, and understanding modern visual design in a broader context, I'd suggest Philip B. Meggs' A History of Graphic Design. For something a little more readily available, you might also want to take a look at Guity Novin's History of Graphic Design. Here's the relevant chapter on the Swiss Grid: http://guity-novin.blogspot.com/2011/07/chapter-42-swiss-grade-style-and-dutch.html http://guity-novin.blogspot.com/2011/07/chapter-42-swiss-gra...
- amolsarva 14y agoIn this book Interface Culture, Steven Johnson argues that Apple's OS X (back in 1999 or so) was as significant a cultural contribution as.... Sgt. Pepper by the Beatles That's back when Apple made everything 3-Dish and liquid and transparent. It did indeed change a whole 5-year chunk of UI designs. Maybe it was even the first skeumorphism...it looks like water http://en.wikipedia.org/wiki/Aqua_(user_interface) http://en.wikipedia.org/wiki/Aqua_(user_interface)
- cturner 14y agoI can't see a comparison to Sergeant Pepper. Sergeant Pepper was both mass culture, and genuinely innovative through the use of sampling techniques that ultimately changed the nature of pop. And it did progressions between movements which was not new but still unusual in pop. What innovations were new to OS X? In several cases it copied features from other systems and then did a worse job of implementing them than the original. GUI search was copied from BeOS and less powerful and more cumbersome. Workspaces were copied from unix UIs, and feel roughly bolted-on because the system is application centric not window centric. The strength in OSX was in bread and butter stuff like consistent UI and drivers that work. The only thing that was mildly new was the traffic light and horizontal stripes. We'll have to see if people still respect that in a few decades. I suspect we will instead look back at it as influential in the way in the way that flares or the Ford Anglia 105E were influential, perhaps asking "what was wrong with the world that so many people thought this kitsch to be a good idea".
- jmathai 14y agoThis page on LayerVault is a lot of subconscious work to know what's a button and what's a form field. https://layervault.com/payments?plancode=small_team&signup=true https://layervault.com/payments?plancode=small_team&sign...
- 89a 14y agoProbably the stupidest "design" "article" I've ever been unfortunate enough to read
- Mordor 14y agoThere are two o's in skeuomorphism!
- Mordor 14y agoIf skeuomorphs are designed to transition from the physical to the virtual, and we're now getting beyond them to a 'flat design', new virtual materials should be the next topic for discussion. What sort of virtual world is it that uses entirely new material forms?
- B-Con 14y agoI love it. I like the flat look, and I like simplicity in UIs. I was afraid that flat and simplicity was going to die with Web 2.0, but now with Google and Microsoft pushing simpler, largely flat UIs, that seems to be less worrisome. There will always be trends, and I'm sure eventually we'll trend away from flat, but I'll enjoy it while it lasts.