

Almost Flat Design - mtmoore55
http://www.matthewmooredesign.com/almost-flat-design/

======
kyro
The 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.

~~~
pavlov
_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._

This is true -- but only in the context of a random person put in front of a
random Windows Phone device for the first time. However that's a fairly rare
occurrence over the lifetime of a highly personal device, and I feel Microsoft
has made the right decision in prioritizing personal organization.

Tile sizes and placements are indeed "arbitrarily assigned" simply because
they're chosen by the user. Anecdotally, everybody I know with a Windows Phone
has tinkered with the tile layout. The lack of whitespace is not a problem
when you've placed all those items there yourself. The ability to vary tile
sizes further improves spatial orientation within the customized screen.

(Think of items on your desk -- in order to tell them apart, do you insist
that they are all the same size and at least 20 cm away from each other?
Probably not, because those items have some other meaning to you than simply
"object on my desk").

Another misunderstanding about Windows Phone is the content of the tiles. In
screenshots it looks garish to have some tiles in a solid color and others
filled with photos. In practice there's a strong consistency at work: any tile
that is non-flat is displaying the user's own content. Furthermore these tiles
usually also have an element of motion so that the non-flat content is not
static. (For example, the People tile shows the user's contacts with varying
animations, and the Pictures tile shows the user's photos as a slideshow with
smooth panning.)

------
cwilson
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
> 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>) 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
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
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
Definitely isn't RTM.

Here are those sections in RTM. <http://imgur.com/Uz5xi0t>
<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.

------
nchlswu
Man. 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>

~~~
jcampbell1
I 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.

------
clauretano
Great 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.

~~~
saint-loup
Same 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
Can you explain why the tiles of Windows Phone is a mess?

~~~
warfangle
* 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
Other than the animations, what is the difference between tiles and app icons
on every other mobile OS?

~~~
logn
Tiles 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.

------
vbl
I'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
> 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/>

~~~
vbl
I 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.

------
mmackh
Cached Version,
[http://thequeue.org/cr?id=http%3A%2F%2Fwww.matthewmooredesig...](http://thequeue.org/cr?id=http%3A%2F%2Fwww.matthewmooredesign.com%2Falmost-
flat-design%2F&title=508%20Resource%20Limit%20Is%20Reached)

------
sikhnerd
Coral Cache: [http://www.matthewmooredesign.com.nyud.net/almost-flat-
desig...](http://www.matthewmooredesign.com.nyud.net/almost-flat-design/)

Google Cache:
[http://webcache.googleusercontent.com/search?q=cache%3Ahttp%...](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)

(Since it appears dead)

------
erictarn
Great 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#exa...](http://twitter.github.com/bootstrap/getting-
started.html#examples)

~~~
scott_karana
I'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
It looks like it's going flatter in v3 according to this tweet from @mdo the
other day: <https://twitter.com/mdo/status/291831248576458752>

------
edouard1234567
The screenshot you used to illustrate apple's design is particularly ugly...
doesn't do them justice.

------
nantes
I got a Resource Exceeded warning the first time I tried to load the page.

[http://www.matthewmooredesign.com.nyud.net/almost-flat-
desig...](http://www.matthewmooredesign.com.nyud.net/almost-flat-design/) if
you get the same.

------
baby
1\. 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
Not 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.

------
emehrkay
I 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.

------
seanmcdirmid
I'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.

------
tzury
I 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
I'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.

------
firefoxman1
So tl;dr is basically "Most big, popular, respectable sites already implement
'Almost Flat Design'"

------
lnanek2
Was really hoping for an A/B test on this. Not, oh, we use it too.

------
danso
I'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?

------
troebr
Hacker News DDoS :(

~~~
gagege
In the immortal words of Charlie Brown, "I killed it..."

------
camus
I 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.

