9 ms·
Almost Flat Design
- erictarn 14y agoGreat post! I learned a lot and its interesting to see the drastically different directions Apple, Google, and MS are taking. Remember when everybody would just rip off everything Apple did? What would say the opposite of flat design is? 3D Design? Skeuomorphism? What would you consider Twitter Bootstrap? http://twitter.github.com/bootstrap/getting-started.html#examples http://twitter.github.com/bootstrap/getting-started.html#exa...
- scott_karana 14y agoI'd say it's Almost Flat. Colors are typically mainly solid, with mild gradients, and there are pervasive but understated borders with round edges, etc.
- duncans 14y agoIt looks like it's going flatter in v3 according to this tweet from @mdo the other day: https://twitter.com/mdo/status/291831248576458752 https://twitter.com/mdo/status/291831248576458752
- clauretano 14y agoGreat post, though you really did pick an extreme screenshot for the iOS example. Something like Messages, Mail, or Calendar would be a more representative screenshot. It did remind me how much "find friends" and Game Center make my eyes bleed though.
- edouard1234567 14y ago+1 to that, I made the same comment at the same time :)
- mtmoore55 14y agoThat's a good point guys. I didn't really intend for the Find Your Friends screen to represent Apple's UI aesthetic as much as an extreme example of real-life metaphors. It's pretty clear Apple is going away from that look as fast as they can.
- saint-loup 14y agoSame thing for Windows Phone. Obviously, it's on every marketing material from Microsoft, but I don't see it as the killer feature of the OS, especially on WP8. The tiles have three different sizes, can be pictures or not, can be animated or not... The result is a mess. Highly connected and informative, certainly, but a mess nonetheless.
- lotso 14y agoCan you explain why the tiles of Windows Phone is a mess?
- warfangle 14y ago* Constantly animating with new information often leads to overload (see: marquee tag) * Lack of affordances mask what actions can be taken by tapping on a given tile * Lack of differentiation between the functions of different tiles leads to a confusing experience
- steverb 14y agoOther than the animations, what is the difference between tiles and app icons on every other mobile OS?
- logn 14y agoTiles convey information. I don't think iPhone does this. Android has had this since the beginning I believe. E.g., you can add a weather tile to see forecasts. Or the clock tile.
- pedalpete 14y agoThe constant animation I can agree with somewhat. Tapping a tile and the functions of different tiles isn't confusing because all tiles upon tapping have the same function, open the app. You can't actually interact with a live-tile in any way, though maybe you are suggesting that the animations of the tiles is suggestive that you can take an action on the tile other than open the app. In this regard, a WP tile is the same as an app icon on any other platform. Having said that, I think the challenge in WP8 vs WP7 is the 3rd size for the tile (WP7 had only two sizes, square and landscape). The smaller sized tile does allow more info/apps/tiles to be shown on the homescreen, but it certainly clutters up the interface and makes it somewhat overwhelming.
- edouard1234567 14y agoThe screenshot you used to illustrate apple's design is particularly ugly... doesn't do them justice.
- troebr 14y agoHacker News DDoS :(
- gagege 14y agoIn the immortal words of Charlie Brown, "I killed it..."
- mmackh 14y agoCached Version, http://thequeue.org/cr?id=http%3A%2F%2Fwww.matthewmooredesign.com%2Falmost-flat-design%2F&title=508%20Resource%20Limit%20Is%20Reached http://thequeue.org/cr?id=http%3A%2F%2Fwww.matthewmooredesig...
- nantes 14y agoI got a Resource Exceeded warning the first time I tried to load the page. http://www.matthewmooredesign.com.nyud.net/almost-flat-design/ http://www.matthewmooredesign.com.nyud.net/almost-flat-desig... if you get the same.
- sikhnerd 14y agoCoral Cache: http://www.matthewmooredesign.com.nyud.net/almost-flat-design/ http://www.matthewmooredesign.com.nyud.net/almost-flat-desig... Google Cache: http://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A%2F%2Fwww.matthewmooredesign.com%2Falmost-flat-design%2F&oq=cache%3Ahttp%3A%2F%2Fwww.matthewmooredesign.com%2Falmost-flat-design%2F&aqs=chrome.0.57j58.2193&sourceid=chrome&ie=UTF-8 http://webcache.googleusercontent.com/search?q=cache%3Ahttp%... (Since it appears dead)
- danso 14y agoI'll say it again...the variance in iOS app design (I'd argue that GameCenter is even worse than Find my iPhone) is so wide that I wonder what the product design management structure is (or was, post-Forestall) at Apple. How could any senior manager look at the designs for iTunes, App Store, Messages, iPhoto, etc., and then at Game Center, Find my iPhone, and conclude all is well? There must have just been no single person in charge of overall UX, I guess?
- emehrkay 14y agoI prefer Apple's approach in all comparable apps simply because they do a better job of separating content from control. I dislike Google's grey on grey and Microsoft's "some text are buttons, take a stab at it" approach. I must be strange because I fell that gamecenter is a pretty good metaphor and easily puts purpose into context when shown to the user (start a match on letterpress on the ipad and you get a gamecenter popup). I dont understand the find my friends leather, but it is really just a skin on top of a standard set of ios controls, it doesnt take away from usability.
- nchlswu 14y agoMan. After LayerVault's post, the term has taken on a life of it's own. Minimalism never precluded the use of effects or interactions to create depth (and I'd argue that "Flat Design" never precluded this either). Just because skeumorphism was one extreme, doesn't mean everything has to use another extreme as a baseline. Using the "flat" end of the spectrum is entirely unnecessary. A name isn't neessary for everything... Also, for what it's worth, I much prefer Andrew Kim's characterization of the spectrum as skeumorphic to digital [1]. Digital doesn't have the connotations that "flat" has [1]see: http://bit.ly/VfSQ7T http://bit.ly/VfSQ7T
- jcampbell1 14y agoI agree. I also think it is important to distinguish between skeumorphim that is purely aesthetic, such as the leather in find my friends, and skeumophism that informs function, such as the bookcase in iBooks/Newsstand, or the calendar app. They are equally pixel heavy, but I find the former in bad taste.
- cwilson 14y agoI'd been toying around with a post like this of my own after getting tired of hearing bitching from both "camps" in the design community (skeuomorphic vs flat), so I'm glad to see this. The current trend has become totally flat design, but as with most things in life, this is all about balance. Completely flat design has no sense of layers or depth. This is important because users need to know where they are at any given time within your application, they will feel lost otherwise. Completely flat design is also flawed when it comes to call to actions and various controls. Sure, a big red button in a sea of gray stands out, even if flat. The problem is when you can't have just one big red button (or you don't want a rainbow of buttons, which will look awful). You need your call to actions to stand out, and a perfect method of doing this is by giving said button depth or weight. It suddenly stands out from the flat design around it.
- wlesieutre 14y ago> Completely flat design has no sense of layers or depth. Windows 8 suffers particularly strongly from this because it's got a lot of software that wasn't originally designed for the Metro style. Outlook (http://i.imgur.com/7fWEmvm.png http://i.imgur.com/7fWEmvm.png) is one of the worst examples. There are so many small things that would help give a hierarchy to the design, like using a darker shade of gray in the ribbon background and maybe the sidebar. Without visual cues it's a mess that you have to stare at to understand.
- eclipxe 14y agoThat screen shot just pains me to look at it. Even obvious details are wrong like one set of reply buttons being flat and another set with gradients. This is really sloppy.
- wlesieutre 14y agoIt's possible that isn't the final version; I just found the screenshot on GIS. But as far as I know it still looks like that in RTM.
- baby 14y ago1. As the first comment on his blog is saying. The first image is a pretty bad representation of Apple's design. 2. When you use box-shaddow (or dropshaddow), then it's not flat design anymore. I feel like Matthew just wants to coin his "Almost Flat Design" term when there is no need. Design has always been in the middle, except when it was extensively making use of boxshaddow or making everything flat. Then we give it names. He has a point though, Windows with metro and mobile is doing Flat Design like nobody ever dared and as much as it's beautiful to see, it's a pain to see for a UI designer. Too bad he doesn't write more about this.
- mtmoore55 14y agoNot really trying to coin the term, I just gravitated to it when I was thinking about this topic. I've actually been thinking about this for a few months and two thoughts have dominated my mind: 1. As a UI designer, I love flat design. Probably that's partly due to it being new and refreshing, but I do appreciate cutting down the visual noise to a minimum and focusing on the content. 2. As a UX designer, flat design is extremely problematic for all the reasons I discussed in the post. I'm happy this has started such a discussion and hope it can help other designers form their own opinions with this whole flat movement.
- camus 14y agoI agree 100% this whole skeuo vs mini is a scam. We need both where it is appropriate and think about the user first that's what design is about, and not just throw designs because they are trendy , what used to be trendy always sucks in the future. Let's take at ReadWrite , TNW , Mashable new designs. They are flat , boring , with huge ugly flat color blocks that may look good on ipad or whatever , but not on my pc, frankly i ended ud reading only the register which still looks like a real online magazine to me. Iguess the others tried to appify their blog like Qwartz , except how much people read Qwartz ? I have a tiny 13'' screen i want as much infos as possible , not negative spaces all over the place. Ask developpers about the latest Visual Studio version too, i'll guess used to it probably but how does it make that software look better? a little of relief would add to usability,now it feels like windows 3.1 or something, with ugly colors.
- vbl 14y agoI've been doing "almost flat" for years because it's the simplest expression of a design without gutting affordances. Things that are interactive look interactive, and these attributes are only used for that practical purpose and never for pure decoration. I really don't understand why this is even a debate. Do we need a daily post talking about how Apple's overwrought, realism aesthetic is tacky (it often is) and how flat design is too flat (which it is)? This issue has officially reached dead horse status.
- taligent 14y ago> Apple's overwrought, realism aesthetic Well it's not like you've helped the issue with misleading, blanket statements like this. The problem with iOS/OSX is specific apps e.g. Game Center, Podcasts. The core OS itself is pretty neutral: http://www.teehanlax.com/blog/ios-6-gui-psd-iphone-5/ http://www.teehanlax.com/blog/ios-6-gui-psd-iphone-5/
- vbl 14y agoI don't think we should avoid having opinions on this; I just think it's overdiscussed. In the spirit of you calling me out, I will say that most of what Apple does (particularly in iOS) is beautiful and usable.
- seanmcdirmid 14y agoI've been thinking a lot about this also. Metro seems too flat, the lack of depth really makes it hard to know what can be pressed. I've added small drop shadows to my own Metro-like interfaces and they make a lot of difference! I also have had an idea for a new kind of "flattish" UI based on layered construction paper that is lit and shadowed by a simulated overhead light. The idea would be to let natural lighting algorithms do their thing in giving the otherwise flat interface depth.
- lnanek2 14y agoWas really hoping for an A/B test on this. Not, oh, we use it too.
- kyro 14y agoThe issue isn't skeuomorphic vs. flat design. Let's reframe it to be about the inclusion of affordances and constraints. What makes a tool easy and intuitive to use is the careful attention given to both enable and restrict the user from performing a set of actions. When a user clearly sees what he/she can or cannot do, they understand the purpose of what's in front of them. Gradients and dropshadows help with that, but even ignoring these aesthetic qualities, we have a whole host of other concepts to utilize, like consistency, proximity, structural heirarchy, and more conceptual digital analogs of real world entities. Let's compare apples to apples: the iOS home screen to that of Windows. Let's go further and ignore the aesthetic differences, like gradients and dropshadows. What are we left with? The iOS screen has a table of app icons, all consistent in size and alignment. It's easy to see that at the highest level, these are all applications I can access. Let's look at Windows, more specifically the screenshot in the blog post. We see no consistency in size, and further, that grouped set of minicons on the left are of a confused relationship. 3 are music apps, and the fourth looks like maybe text messaging. The iOS apps are laid out in a way where a user can easily tell what is tappable from what is not tappable -- "this is an actionable element in a sea of inactionable whitespace." Contrast this with the billboard-like layout of the Windows Phone UI. You are bombarded with colors and pictures and icons, mere millimeters away from one another, leaving a user in confusion and sensory overload because it's difficult to isolate the various elements. The iOS app screen has an icon and a text label for every single app. The Windows Phone does not. It almost seems like tiles are arbitrarily assigned to be little/big or to have icon-labels/photos. After playing around with a friend's Lumia for some time, I'm still confused when I stare at the screen of a Windows Phone. I'm not trying to spark an Apple vs. Microsoft debate. I'm trying to show that stripped of all gratuitous skeuomorphism and subtle aesthetic qualities, UIs can still be usable given they clarify to the user what they can or cannot do. I could've done the same mini-analysis with an Android home screen compared to a Windows one and Android would've come out on top for many of the same reasons.
- NZ_Matt 14y agoI don't think the tiles in Windows 8 and WP8 are confusing, it's very easy to understand that they all have one function and that is to open an app.
- 14y ago
- firefoxman1 14y agoSo tl;dr is basically "Most big, popular, respectable sites already implement 'Almost Flat Design'"
- tzury 14y agoI wish one would make a bootstrap theme of "Almost Flat" - It almost there, except the buttons, perhaps the popups can vet a "wash" as well.
- dslavik 14y agoI'm in the process of doing this for a project I'm working on. Once I'm done I'll put it up on github.