5 ms·

I'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),

by cwilson 14y ago

I'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 ago
  That 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 ago
    It'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.
    - pdubs 14y ago
      Definitely isn't RTM. Here are those sections in RTM. http://imgur.com/Uz5xi0t http://imgur.com/Uz5xi0t http://imgur.com/k3Comek http://imgur.com/k3Comek edit: It appears the reply buttons do squish like that on narrower screens though, but it's at around 1000px wide or less, so that's really a non-point in this day and age. Gradient issue isn't there though.
    - joseph_cooney 14y ago
      It is possible that some of those buttons are from add-ins like CRM, which haven't updated to the new look and feel. Visual Studio 2012 has the same problem. Although this by no means affects your main point about the organisation/visual hierarchy.
  - mkhattab 14y ago
    Indeed, I looked at the image before fully reading the comment and thought it was an older version of Outlook.
- taligent 14y ago
  Windows Phone has a lot problems as well. I open the Photos Enhancer app for example and it's impossible to know what is clickable or not. You effectively have to keep tapping on text/images until something happens. The whole flat design approach still needs a lot more thought.
  - gbog 14y ago
    Same in Android actually.
- ianstormtaylor 14y ago
  To be fair that interface has WAY bigger problems than being flat. Even if you unflattened it, it would still be a horrible interface. Not really a fair argument.
  - wlesieutre 14y ago
    This isn't a perfect comparison because it's a larger screenshot, but the non-flat interface is 2010 was laid out the same way. In my opinion, it's a much clearer interface: http://cdn-static.zdnet.com/i/story/61/44/001475/out14-revised.png http://cdn-static.zdnet.com/i/story/61/44/001475/out14-revis...
- danem 14y ago
  The application in your screenshot doesn't suffer from a lack of gradients and drop shadows. The problem is the almost uniform treatment of every element of the interface. This isn't a problem with "flat design" ( whatever that is ) but poor typography. One can ( and should ) create a clear visual hierarchy through type and color without resorting to shadows to give it more "depth".

by cwilson 14y ago

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 ago
That 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 ago
  It'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.
  - pdubs 14y ago
    Definitely isn't RTM. Here are those sections in RTM. http://imgur.com/Uz5xi0t http://imgur.com/Uz5xi0t http://imgur.com/k3Comek http://imgur.com/k3Comek edit: It appears the reply buttons do squish like that on narrower screens though, but it's at around 1000px wide or less, so that's really a non-point in this day and age. Gradient issue isn't there though.
  - joseph_cooney 14y ago
    It is possible that some of those buttons are from add-ins like CRM, which haven't updated to the new look and feel. Visual Studio 2012 has the same problem. Although this by no means affects your main point about the organisation/visual hierarchy.
- mkhattab 14y ago
  Indeed, I looked at the image before fully reading the comment and thought it was an older version of Outlook.
taligent 14y ago
Windows Phone has a lot problems as well. I open the Photos Enhancer app for example and it's impossible to know what is clickable or not. You effectively have to keep tapping on text/images until something happens. The whole flat design approach still needs a lot more thought.
- gbog 14y ago
  Same in Android actually.
ianstormtaylor 14y ago
To be fair that interface has WAY bigger problems than being flat. Even if you unflattened it, it would still be a horrible interface. Not really a fair argument.
- wlesieutre 14y ago
  This isn't a perfect comparison because it's a larger screenshot, but the non-flat interface is 2010 was laid out the same way. In my opinion, it's a much clearer interface: http://cdn-static.zdnet.com/i/story/61/44/001475/out14-revised.png http://cdn-static.zdnet.com/i/story/61/44/001475/out14-revis...
danem 14y ago
The application in your screenshot doesn't suffer from a lack of gradients and drop shadows. The problem is the almost uniform treatment of every element of the interface. This isn't a problem with "flat design" ( whatever that is ) but poor typography. One can ( and should ) create a clear visual hierarchy through type and color without resorting to shadows to give it more "depth".