Flat And Thin Are In

Advertisement

In the last several years, we’ve seen a rapid shift in software and app interface design, from 3-D and skeuomorphic to flat and minimal. Although this trend has become nearly ubiquitous, let’s take a moment to consider how we got here and what influence it’s having on interface design as a whole. Additionally, I’ll share some tips and considerations on designing flat interfaces.

mobile_os
Interfaces on a Windows Phone 8 and Apple’s iOS 7.

What Happened?

So, how did the collective consciousness swing from a love of all things textured, beveled and drop-shadowed to a desire for flat colors and simple typography? Many factors have fuelled this transition, but here are a few that stand out.

Information Overload

As a constantly connected culture, we deal with a nonstop flow of information, some of it important and relevant, most of it not. We are constantly evaluating, filtering and, of course, creating content, and it all gets pretty exhausting. In addition, much of our content consumption has moved to devices with small screens, thus exacerbating that feeling of overload. Becoming overwhelmed is all too easy, and a reduction of clutter in a user interface (UI) can create a little visual zen.

Geckoboard1
Free of clutter: Geckoboard2‘s visualisations are designed to make key data easy to interpret at a glance.

Simplicity Is Golden

In a similar trend, a lot of disruptive Web apps and services are offering highly focused tools with extremely limited feature sets. Whereas traditional software developers tend to load their products with a glut of features to justify the high price tags, this shift towards focused micro-apps favors simplicity over feature set. Simpler apps mean simpler interfaces.

blue3
Beautiful and minimal: The Blue4 weather app by Oak.

Content Is King, Again

As so often happens when new devices and technologies enter the market, we become fascinated by what they can do and how we can advance interactivity. This interface frenzy is usually followed by a return to a focus on content. Media consumption, whether of text, audio or video, is probably the activity we engage in most on our devices, and for that use case, we just want the interface to get out of the way.

Technological Literacy

As smartphone and tablet adoption has rapidly penetrated all user demographics, concern about the obviousness of controls has reduced. Whereas we once feared that users might miss a button if it didn’t pop off the screen, we are now willing to explore subtler interactions. Windows 8 and Chrome for Android even support touch commands that start off screen, without any visual indicator.

fitbit_dashboard5
Fitbit6’s dashboard is a bright, bold, and easy approachable visual identity.

Technology’s Influence

Most software will be limited by the platform on which it runs. Screen dimensions and pixel density are the confining factors of hardware. A minimal interface demands a very limited design palette, which means that every element needs to sing. Typographic scale and font weight will largely determine both the aesthetics and usability of a flat design.

If your target devices can’t handle that level of nuance, you’re out of luck. As screen size and pixel density continue to increase on mobile devices, thinner and smaller type can be presented with better clarity. Of course, support for @font-face7 has also boosted the appeal of minimal typographic-focused designs.

wallmob8
Live sales monitoring with Wallmob9: keeping track of the figures from any device that has a browser.

Responsive Design

With the proliferation of connected devices of various dimensions, UIs have had to become more fluid, and the responsive design movement has responded. While responsive design does not call for a particular aesthetic, one could certainly argue that flat UIs lend themselves to it more easily than many other styles. The other advantage of minimal design is the reduction in page weight and loading time.

onsiteio10
To the point and weightless: OnSite11. (Larger view12)

Best Practices

OK, enough with the theory. Let’s get down to some practical considerations. Creating an effective minimal design is surprisingly challenging. As you strip away common UI tricks (drop shadows, bevels, textures and the like), you quickly realize how important the few remaining elements become. While the following tips are mostly universally applicable, they are especially relevant to flat UIs.

Before You Begin

As with any project, the first step is to ensure that your chosen style makes sense. Before diving into a flat design, make sure it aligns with your target users’ sensibilities and your target platform, devices and application type. Following a trend is pointless if it’s the wrong solution for your project.

Process

The process you follow is pretty important, no matter what style you are adopting. Here are some ideas to keep in mind when aiming for simplicity.

  • When designing a minimal interface, I often seek inspiration from the pre-PC era, when designers and artists did more with less. This is a perfect opportunity to revisit some of the design greats, such as Josef Müller-Brockmann and Wim Crouwel. I also look to minimal painters such as Ellsworth Kelly, architects such as Mies van der Rohe and industrial designers such as Dieter Rams.
  • Walking away from the work is also helpful. Flat and minimal design is all about nuance. So, taking a break and coming back later with fresh eyes is often more effective than hammering away.
  • Comparing versions side by side is also helpful. After moving a line of type up and down by 5 pixels for 20 minutes, I’ll save two versions and compare them; the better option is quickly revealed.
  • Because the relative scale of objects plays such a critical role, check your design concepts on a variety of target devices early on to confirm that they work.
  • As you work, keep asking yourself, “Do I really need that?” Getting attached to an item that you find clever is so easy, but we must always look for elements to cut or simplify. Ditching something that you’ve put so much work into is always hard, but editing is critical.

globalcloset13
Global Closet14: an interactive game designed for National Geographic Education by The Workshop15.

Grid

The grid plays a crucial role in so much of interface design, and no exception here. As you attempt to establish order and make usability intuitive across a project with a restricted set of visual elements, the grid is there to help.

  • The grid establishes more than visual order. Use it to define content and functional groups. You don’t always need a line or box to group a set of objects. Simple alignment and spacing can help the user understand an interface’s structure.
  • Try breaking the grid with elements of particular importance to really draw the user’s attention. Without fake 3-D trickery, basic layout principles such as scale and placement become the best elements by which to establish visual hierarchy.
  • Experiment with a denser grid than you are accustomed to working with. When you dramatically reduce the visual palette, you may find that the design supports a more complex structure without feeling messy. See what additional information you can convey through placement alone.

live_school16
Live School17 iPad app by Rossul Design.

Color

Obviously, color is always a key component of visual design. With minimal interfaces, it is even more critical.

  • Consider a broader palette. If you’re like me, then you feel that a narrower palette usually leads to a more functional interface. Ending up with an overwhelming rainbow is all too easy. Here’s your chance to really stretch; and with so few elements to work with, you can feel good about expanding the palette.
  • When setting the palette, test your selected hues across a wide value spectrum to make sure they behave in lighter and darker versions.
  • You’ll probably want to experiment with tone on tone and stark type. Experiment with your palette early on to ensure that you have enough range for both subtle and high-contrast elements.

trippleagent18
TriplAgent19‘s visual design makes use of a stunning color palette.

Typography

When it comes to flat content-driven websites, typography is the hero.

  • While serifs are certainly an option, san serifs almost always feel cleaner.
  • Look for a font family with a wide variety of weights and styles. You certainly don’t need to use them all, but a broad selection will help you define the hierarchy more sharply, and you might also find that certain weights render better in certain environments.
  • Don’t be afraid to pair fonts with extreme differences in size and weight to create visual order. Try pairing an oversized ultra-thin font for headlines with a small medium-weight font for the body.
  • Watch out for legibility in fonts. It sounds silly, I know, but you will be asking a lot from your chosen fonts, so make sure they have great legibility at any scale.

siteleaf20
Clean and legible typography on Siteleaf21.

Interaction

In a flat UI, indicating that an element is interactive can be tricky. Here are a few methods I rely on.

  • Contrast is key. If the majority of the layout is white, then you could give interactive elements some color. If the design is primarily text-driven, then you could use simple iconography. If the headlines are large and all lowercase, you could make links small and all uppercase. You get the idea.
  • Conventional placement helps as well. If you use a slim chevron for a back arrow, place it in the upper-left corner, where users would expect to find the back button.
  • As you layer more features on the page, making every interactive element look like a button wouldn’t make sense. The interface should be as intuitive as possible. But in cases where interaction is particularly complex or unexpected, make it easy to recover from mistakes.
  • Drop-downs, modal windows, fly-outs and other layered elements can be troublesome to implement in a flat design. Leverage sharp contrast, borders or tinting to visually separate the levels of interaction.

taasky22
Design elements presented in a simple layout and with optimal contrasts: Taasky23.

Wrapping Up

I don’t believe in hard and fast rules in design. Seeing designers so heavily invested in creating extremely clean and simple user interfaces is pretty awesome. Does exploring flat design mean using absolutely no gradients or shadows? Of course not. In fact, some of the most intriguing work I’ve seen recently balances flatness and dimension by presenting content intelligently while keeping the interaction intuitive.

In this highly connected, information-rich and feature-packed digital world we live in, minimal design’s widespread resurgence is refreshing to witness. It is by no means the right solution for everything (no style is), but when applied thoughtfully and appropriately, it makes for a highly usable and enjoyable digital experience.

(al) (ea)

Footnotes

  1. 1 http://www.geckoboard.com/
  2. 2 http://www.geckoboard.com/
  3. 3 http://partlyblue.com/
  4. 4 http://partlyblue.com/
  5. 5 http://www.odopod.com/work/fitbit/
  6. 6 http://www.odopod.com/work/fitbit/
  7. 7 http://www.font-face.com/
  8. 8 https://www.wallmob.com/
  9. 9 https://www.wallmob.com/
  10. 10 http://onsite.io/
  11. 11 http://onsite.io/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2013/09/onsiteio_mini.jpg
  13. 13 http://globalcloset.education.nationalgeographic.com/
  14. 14 http://globalcloset.education.nationalgeographic.com/
  15. 15 http://www.theworkshop.co.uk/
  16. 16 http://www.rossul.com/portfolio/liveschool-ipad-app/
  17. 17 http://www.rossul.com/portfolio/liveschool-ipad-app/
  18. 18 http://www.triplagent.com/
  19. 19 http://www.triplagent.com/
  20. 20 http://www.siteleaf.com/
  21. 21 http://www.siteleaf.com/
  22. 22 http://taasky.com/
  23. 23 http://taasky.com/

↑ Back to topShare on Twitter

Adrian is an Interactive Creative Director and Principal at Pushstart Creative, a multidisciplinary agency focused on the convergence of physical product, interactive technology and brand experience. While much of his current work is focused on research, strategy development, and UX he will always have a passion for pushing pixels. Stop by designtaylor.com or find Adrian on Twitter.

Advertising
  1. 1

    One important thing to note is that Flat UI interfaces might look simplistic on screenshots. Most of them have rich animations that catch the users eye. Its not like those flash-websites from the old days, but engaging nonetheless.

    0
  2. 2

    This is really Great .. Enjoyed the article very Much .. FLAT is the New ‘Sexy’

    0
    • 3

      It is my firm belief that we’re observing a peak turning point in design. Where we have gone from flat (Yes, it was flat before the 3D hype) to skeuomorphic (3D hype – everything looking realistic) to extreme flat. We will shortly leave the extreme flat design, simply because it is lacking some of the benefits the extra dimension adds to the usability.
      As example I believe that Google is on the right track, that takes a stand in flat design, but adds depth (three dimensions) where it makes sense and adds functionality and clarity.

      3
  3. 4

    I think perhaps the shift could also have something to do with the fact that when smartphones first emerged, users would have had less understanding of how the interface worked in general, as they were so different to older style feature phones; so it was made as realistic as possible to make them feel like they instantly knew how to use it.

    Nowadays, people innately know how to use a smartphone/tablet so the interface is allowed to become less obvious, more stripped back, and that kind of paves the way for a ‘simpler’ design.

    0
    • 5

      “Nowadays, people innately know how to use a smartphone/tablet”

      Assume nothing, unfortunately. Users are becoming more and more proficient with odd iconography, but I still think it’s a mistake to assume that just because you know that a box with three lines on it is a minimised menu that your mother would too.

      I like creative iconography, and appreciate the skill involved in making ideogrammatic interfaces seem intuitive but just look at Gmail if you want an example of Google also assuming that people ‘innately’ know how to use a smartphone interface.

      2
  4. 6

    The Author and the Design Community seem to have no historic Memory or Google Fu whatsoever.

    Before the Pseudo-3D Style was made so simple even Pixel Monkeys could do it with Shadows and Light Effects – everything was “flat”.

    Wrong Argument #1: Flat Design reduced Information Overload.

    Any UX-Designer or IA will tell you that the Interfaces hold the same Amount of Information – just the visual Representation is less ornamental.

    ———-

    Wrong Argument #2: Flat Design is “simple” or brings Simplicity.

    Not it isn’t. It is made to look simple. It a Question of Perception, not Reduction or Simplification of the Interface and it’s Elements.

    The Author confuses Simplicity with Reduction. For example GMails new Compose Windows looks simpler, because it has reduced the Number of Elements – but it also means that the User has to make more conceptual Leaps to get his Tasks done. To open the Formatting Option you now require an additional Click just to open that Toolbar – which means the User has to remember the Interface and even understand the conceptional Leap that a certain Icon represents the Formatting Option.

    Once again it’s about Perception: the Interface is not simpler and nor is it a Simplification of the actual Functionality and Workflow – but Eye Candy and hiding perfectly useful Function for the Sake or being cool and trendy.

    So Simplification often causes unnecessary conceptional and cognitive Leaps by the User – hardly an Achievement in Terms of good Usability and actual Simplicity.

    ———-

    Wrong Argument #3: Obviousness of Controls

    No, not everyone immediately gets every Interface, even when they have worked for Decades with Gadgets and Computers.

    Why shouldn’t Controls be obvious, clearly identified and labelled?

    Because Designers are bored of doing their Homework? Or because Buttons spoil their pretty Photoshop Designs?

    Unless you customizable Interfaces or a Pro and Beginner Version any Interface should be as comprehendable and clear as possible.

    Even so called digital Natives are often not as sophisticated as they think and any Interface requires a learning Curve as well as conceptional Leaps.

    The Designer should provide a solid Interface and possible a Choice for the User to customize his/her Experience – Empowering the User doesn’t mean hiding Stuff, just because we ASSSUME the User has it all figured out.

    Especially Google has that terrible Habit of making their Offerings “Auto-Awesome”, which doesn’t empower the User, but make him/her a Bystander in the Workflow. This takes away the Chance of actually learning a Tool and some Skills as well as Choices with the Workflow / Creative Process.

    This dumbs down the Users – it doesn’t empower them. Power comes from Knowledge and Knowledge comes from Learning. Take away the Chance of Learning and you get a Pavlovian Button-Presser.

    ———

    Contrast is King? The Author illustrates his Points by using many Screenshots that have miserable Typography and Colour Choices that have hardly any Contrast at all.

    This is currently very prevalent in Flat Design: dark Grey Typo on medium Grey Background – no Contrast at all (this also applies to the Example of White Type of Yellow Background). Often they also use very delicate / thin Fonts that offer also no Contrast, especially on mobile Devices in Sunlight.

    3
    • 7

      You seem to know a lot about design.

      Can you also give some design advice in addition to your (constructive?) criticism? Like what do you consider good typography or contrast color schemes? And how would you make interactions obvious?

      0
    • 9

      I agree with your point about Google’s gmail. Having been a gmail user for nearly a decade now, I can testify that their interface has introduced a new learning curve every time they changed it.

      It’s actually really confusing and things are misplaced. Example, signing out and settings are in two different areas that are hidden away.

      1
    • 10

      I had the same reaction about contrast. Many of these designs would be nearly impossible to use in bright sun. A person with low vision would even more trouble reading these off white on pastel background buttons.

      Using bold contrast in font size doesn’t mean you can ignore the contrast between text and background colors. Remember 4.5:1 is the required contrast for accessibility.

      0
    • 11

      Excellent analysis.

      This trend is so badly used that all apps/sites tend to look EXACTLY THE SAME.

      0
    • 12

      Agree with everything Dieter said. On top of that, ultra-thin fonts do not look good on Windows machines.

      0
    • 13

      An enjoyable article, although I agree with Dieter’s points, especially “Wrong Argument #3″.

      “As smartphone and tablet adoption has rapidly penetrated all user demographics, concern about the obviousness of controls has reduced.”

      I believe it is the necessity to reduce information on smaller screens that is driving this, but it is a fundamental error except for expert or advanced user interfaces, and a cardinal sin for anyone serious about interface design.

      While I like the theory of no “hard and fast rules”, the ability to instantly (or at least very, very quickly) discern controls is close to “hard and fast.”

      I know in my shop we are eagerly watching to see whether the emerging patterns and indicators, such as the ‘three horizontal bars in a small square’ to indicate a menu (does that have a name yet?) are being learned by mobile users generally, or only by early adopters/experts.

      0
      • 14

        As a user, I don’t like super-flat. It looks good on an infographic, sure, but when I’m trying to get something done quickly, a row of monochrome icons (usually all white, tiny and in a row on a photo background) I find confusing and tough to figure out. I would rather bigger, more stylised icons, and TEXT. There’s nothing wrong with the odd word, especially if you’ve gone for slightly unusual iconography.

        The current Twitter android app has a slightly hidden longpress-activated tool-tip on their tab menu, which although pretty random (who really longpresses on their profile tab?) did indicate that even the major players haven’t necessarily forgotten about the importance of words.

        1
      • 15

        “..such as the ‘three horizontal bars in a small square’ to indicate a menu (does that have a name yet?)..”

        I have seen it referred to as the “Hamburger” (http://responsive-nav.com/), and as a result, have started doing the same.

        Do not forget though that Chrome has been relying on “the hamburger” (see?! it works!) to toggle the additional/expanded menu even on desktops. Since more and more people have become familiar with the browser itself, it’s easy to understand how and what is learned across the board- which also helps when browsers like Chrome are intended to have the cross-device integration.

        I’m no wizard, and I have no time machine, but I envision many of the newer trends developing (rather, becoming standard) as a result of familiarity with programs/apps that we end up using on more than one or two devices.

        0
    • 16

      Less is always more. I don’t allow my designers to use flash at all because I end up with a gob of superfluous fluff. Don’t agree with most of Dieter’s criticisms. A little too nit picky. I do agree that too fine a type face is difficult to read. I’m in my 50s and I’m probably going to switch from iphone to something larger because I just can’t read anything anymore without pinching which gets old fast. I lose interest in what I was reading. And I love to read.

      0
    • 17

      Carlos Davarre Salazar

      October 2, 2013 7:32 am

      content is king and sacrificing content no matter the design is foolish… flat design is just that “design”. flat design does not imply the reduction of vital content which would imply breaking the number one rule “content is king”. All it does is it makes the user interface “feel” cleaner and improves the end user experience which in my opinion is the entire point of good design.

      content is king and having pointless content shares its own drawbacks.
      there is no harm in de-cluttering content that is unnecessary as long as the end user has access to all the information they require as quickly and as painlessly as possible.

      0
      • 18

        I think it’s important to differentiate “Flat Aesthetics” from “Flat Design”. Design will always be important, since Design is about Purpose. I do agree that Content is king; and as such, Design should be its throne.

        0
    • 19

      I concur with your assessment Dieter — particularly “Simplification often causes unnecessary conceptional and cognitive Leaps by the User – hardly an Achievement in Terms of good Usability and actual Simplicity.”

      I’ve been on the wrong end of the stick on that one many a time. Worst offenders? Microsoft and Google (including YouTube). Every time they roll out a “new improved” interface, I end up either wanting to or actually using them less! I like “simple-LOOKING” flat graphics, they can make a beautiful design, but don’t obfuscate functionality in the name of “sleekness.”

      0
    • 20

      Finally someone that makes sense ! :) So many young designers stubbornly go with low contrast that reads really really bad. Dribbble is full of such eyecandy-esque examples. Great arguments !

      0
  5. 21

    Great article. Flat design comes more naturally to me. I am working on a site now that that uses different shades of blue and to contrast that a bright green. I love flat, clean, responsive design

    0
  6. 22

    @Dieter thanks for your thoughtful and thorough reply. “Flat” design always get’s the opinions flowing! I don’t necessarily disagree with the points you’ve raised but I did want to clarify a few items.

    Argument #1: Flat Design reduced Information Overload.
    I agree that there is the same about of media (text, image, video, etc.) in a flat design as in a more dimensional design however I would argue that every item in a design requires effort by the user to decode. Less elements often means less work. Now this is not to say that you can’t make a dimensional design easy to parse, just an example of a possible benefit.

    Argument #2: Flat Design is “simple” or brings Simplicity.
    I agree with you here and don’t believe that I ever made that argument that flat inherently creates simplicity. In fact, I would suggest that a reduced use of dimensionally in your design often makes it more difficult to create an obvious / intuitive interface. Good usability and aesthetic style are separate concerns. I do feel that when designs attempt to work with a reduced visual pallet it can help to focus their efforts on usability rather than decoration, but not always. I think we both agree that simplicity is hard to do right.

    Argument #3: Obviousness of Controls
    I think we are actually aligned on this point. Flat does not make things more obvious, it often makes them less so. When designing flat you must work even harder to make things intuitive. A big shinny button with a drop shadow is almost always going to be more obvious then a thin white arrow on a flat background. Before working flat designs must consider whether it is the right style for their audience and then word diligently to ensure usability.

    Thanks again for your thoughts!

    0
    • 23

      Thanks for the Reply.

      Argument #1: Flat Design reduced Information Overload.

      _ I would argue that every item in a design requires effort by the user to decode_

      Obviously. The biggest Job of our higher Brain Functions is Pattern Recognition – the more Elements or “Chaos” (in Lack of a better Term) increases the mental Filtering Process.

      But we have to differentiate between Filtering the visual Representation (“oh, here is the Save-Button”) and conceptual / functional Understanding (“This Button works as Save, but also Save as when I press it in a different Way”).

      Flat Design should in an ideal World reduce visual Clutter, but in many Cases – as I pointed out – it also adds additional “conceptual Processing”.

      Argument #2: Flat Design is “simple” or brings Simplicity.

      You make this Argument writing about the Zen-Style against Overload and come out with Simplicity in the next Headline.

      If you wanted to argue that Flat Design doesn’t bring or could bring Simplicity you made a a rather shallow and well defined Argument.

      But I do agree to your Reply, which was more thoughtful.

      Argument #3: Obviousness of Controls

      Agreed.

      0
    • 24

      I see Argument #3 exactly against flat design:

      “When designing flat you must work even harder to make things intuitive.”

      People don’t like to work harder than absolutely necessary. Or even less. As result we get sub-optimal experience and have to put of with sub-standard interfaces. Just my view.

      0
  7. 25

    Flat and thin is what basic design is, skumorphism is just photoshop in the wrong people’s hands.

    Flat and thin since 2010
    http://www.mrbava.com

    -2
  8. 27

    @Dieter “Good usability and aesthetic style are separate concerns”

    This is not the case.

    http://www.sigchi.org/chi97/proceedings/paper/nt.htm

    Prettier interfaces have a higher task success rate than ugly interfaces, this appears to be due to a change in attitude of the user, with the user more willing to try multiple times to complete a task on a pretty interface, but spend less time on an ugly one assuming the ugly interface is at fault for the task failure.

    IMO flat interfaces are caused primarily by the mobile industry primarily to achieve the following:

    1. reduce processing power requirements
    2. allow for easier / less processor intensive animation
    3. save battery life
    4. provide more content per square inch due to smaller screen sizes

    This leads all brands to compete on this level and tend towards this aesthetic.

    Watch the trend reverse when flexible fold out large displays appear in mobile devices :)

    0
    • 28

      @Tez:

      Sorry, let me phrase this more clearly …

      Aesthetics are essential and are a Part of UX, because we Humans do have certain Preferences when it comes to Dimensions and Relations.

      But the Style of the Aesthetics is far less consequential and more a Matter of Taste.

      eBay and Amazon have been “ugly” by most Standards and especially Design Trends, yet both Site were incredible successful, because the basic Aesthetics were there (and the huge Desirability of their Offers).

      Most People would can see the Difference between so called “timeless Design” (which respects all Rules or proper Aesthetics) and “awesome Design” (which might please a certain Trend or personal Taste).

      I agree with your other Statements. Thanks.

      0
      • 29

        eBay and Amazon are incredibly successful because they give the user a certain sence od security being on a site that is so widely known and even famous. I think that if user already knows the site is used by so many others, he will put extra effort to learn UI rather than on a site that looks ‘pretty’ and is even more functional and comprehensive.

        0
    • 30

      Wow…

      Did the people that produced that paper not look at it online and think to themselves: “who the hell is going to read this awful page?!”

      0
  9. 31

    Gawd I hate it so much. I cannot wait for the pendulum to swing back to ornate. This flat design trend reminds me of soulless modernism for the sake of utility.

    0
  10. 32

    The internet and design particularly has always been a victim of trends. Whats in today is replaced by something new tomorrow. They rightly said…change is the only constant.

    0
  11. 33

    One factor I don’t see mentioned here is an analogy to clothing and grooming trends. I don’t pretend to know anything about the fashion industry, but I am old enough to have seen wide then skinny ties, long then short hair, bell-bottom then straight leg jeans, and so on. These trends are not limited to one’s personal style–think about the almond and avocado color appliances from the 70′s which are now becoming trendy again.

    There were certainly technological, user familiarity, gee-wiz, and homogenous platform causes behind the skeuomorphic and 3-D interfaces, but a big part of the current trends are just that–trends.

    I for one don’t care for the completely, totally, graphene-like flatness and the sickly saturated colors of this flat design trend. I happen to like a little bevel, a little shadow, and an understated realism to a computer interface. My opinion is that the current trend is a pendulum swing too far in retaliation of heavy skeuomorphism. I hope that design trends will return to some reasonable middle ground in a few years. I can say for certain that design trends will continue to be trendy!

    1
  12. 34

    Personally I find many minimalistic interfaces extremely annoying. This is especially the case when action is hidden or very un-intuitive.

    For example, I downloaded a mobile weather app with a flat interface, a nice trendy design of squares with weather info in them. That app required the user to pinch up/down, pinch left/right, and swipe to operate it, with no on-screen clues; the actions are arbitrary and can only be mastered by memorization. Although the UI pinch animations were cool (a type of 3D expand), the navigation was hard to master. It got to be so annoying that I eventually deleted it.

    Many minimalistic apps have squeezed out intuitive elements and useful prompts/captions/etc. The result looks really cool, if you’re into that sort of thing, but is a UI nightmare. It’s form over function, a big leap backward in usability.

    I have seen some nice minimalistic designs. There are also nice photorealistic designs, and nice retro designs. But whenever people jump on a bandwagon just to follow the trend, you get lots of junk, because trend-followers are not thinking, they are blindly striving for a “look” without understanding how it interfaces with purpose and with the minds of the users. Eventually the pendulum will swing back the other way, and you’ll hear “Finally, the end of all this ugly flat design madness.”

    2
  13. 35

    I would be careful. The flat design is one of the main reasons why users despise Windows 8. User dread towards Windows 8, in turn, is the main reason for even lower PC sales than projected. Windows phones are unwanted by the vast majority of the population.

    Flat design is design for the tech elites. It is bad for ordinary users who curse at their computers and phones from it. (I get to hear the cursing from my non tech friends.)

    1
    • 36

      Windows 8 has now more users than all OSX combined, according to this page : http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=0
      Windows Phone 8 already has more than 10% of market share in Europe in Q2, says this link : http://www.kantarworldpanel.com/Global/News/Record-share-for-Windows-phone

      I wouldn’t say that they are unwanted. This is THE third competitor that is emerging pretty quickly against iOS and Android. And the fact that the two majors are slowing adopting flat design may be the proof that it may not be such a bad idea.

      On PC, I think that minor hardware evolution is the main cause of the sales dropping. There’s almost nothing that an i3 or equivalent cannot do for the common people who use Word or OpenOffice for their correspondance and Youtube or VLC for media consumption. There is no need to immediately upgrade from a Sandy Bridge generation to a Haswell generation, unless you really need over-the-top performance.

      0
    • 37

      Henrik Erlandsson

      November 2, 2013 12:46 am

      It’s usually the power users and professionals that curse bad design decisions like The Ribbon and instead cry out, “I’m actually able to navigate a menu!”, and “I right click on an object. Give me the actions I can perform on that object!”

      With this, the conclusion is that multiple-click fold-out interfaces are made for no user category at all, but simply an adaptation to “touch” and “small screens”.

      And naturally interfaces where the smallest clickable element is the size of your fingerprint will be much less busy :) And much less usable. It’s just sad that they’re bringing it to the desktop as well, which already had pretty darn good usability.

      1
    • 38

      “The flat design is one of the main reasons why users despise Windows 8″

      Nah. That’s because people hate change.

      -1
  14. 39

    Thanks for including TriplAgent in your best practises. We are humbled!

    Cheers,
    Taras – Founder

    0
  15. 40

    I welcome the “new” trend of clean web design. I’ve been creating clean designs — in print – for 40 years. A warm welcome to web designers to the world of good, readable design. .

    But i truly despise one aspect of clean design: the lack of contrast between grey body type an an off-white (or worse) background. (This is becoming common in print as well). Nothing makes these 50-something eyes jump away from a website (or printed materials) faster than not being able to read tiny, grey type. Not all web users are 20 years old with perfect eyesight!

    0
  16. 41

    I think that the need to have designs adaptable to working in multiple resolutions may be driving the trend. Designs of simple vector shapes can be scaled up and down more easily than bitmap textures can.

    0
  17. 42

    What a great read!

    0
  18. 43

    So the current theme seems to be “Let’s all design like it was 1989″. CPUs are slow, graphics chips are functionally challenged, graphics are hard edged and color limited. Making the assumption that everyone is comfortable and knowledgeable about smartphone functionality, navigation, settings and use is a mistake. IOS is different than Android or Windows, or Blackberry. Making the UI easy to understand is critical if manufacturers have any hope of getting people to defect from other phones. Having flat symbols that could be a label, an input area, a button or a function that brings up more options is a frustration for new customers. Having 3D form areas that fall into the area to indicate input, buttons that pop out at you and other designer tricks actually help rather than hinder. Also , do not forget that the most basic application that a phone has is the operating system that the user uses to create contacts, manage calls, schedule appointments, etc. These must be fluid and easy to understand, because there is no manual to read. Just the phone in your hands.
    There is also a whimsical fun factor. So what if Apple chose to show books as cover images on a fake wood bookshelf. They could also have shown book cover icons floating on a basic black background, or square boxes with just the book title in it, or simply a text list of books. Any of those will get the job done. The latter two do not require a retinal display density or graphics processing, the first two make it unique to the device. We currently have devices that are far more sophisticated than the devices of 1989. I do not think a retro design emulating the graphics starved era of that time will work. The real design sits somewhere in the middle.

    1
  19. 44

    An entire page on UI design, with so many references to the use of color, and not the slightest hint of a recommendation to consider users with color vision problems (color-blindness). Shame!

    1
    • 45

      I for one would be really interested to hear what you think – not being colour blind myself, but interested in UI, Is flat design worse or better?

      0
  20. 46

    Thanks for the feature Adrian and Smashing Magazine. Great article!
    - Team @TriplAgent

    0
  21. 47

    Flat Design Trends In 2013 – Flat Mockups For Your Website & Apps
    http://graphicriver.net/item/flat-responsive-screen-mockups/5235917?ref=graphicon

    Check Out!

    -2
  22. 48

    31 comments to Adrian’s thought-provoking article, and not one consideration as to whether or not flat design is congruent with the entity’s branding. The approach I recommend is to first consider who your user is and determine the (average) level of sophistication they represent, and at the same time, consider the entity’s branding and positioning. After careful analysis and thought, then it is time to consider skeuomorphic or flat design. Don’t let UX and UI design trends dictate the direction you go in. Rather, go back to the fundamental basics of branding, and let that be the foundation of your decision making.

    3
    • 49

      Well said Marta – I couldn’t agree more.

      0
    • 50

      great point…so true…target demographic is crucial information for design/usability.

      certainly, if you know most of your sites users/buyers are going to be women aged 35-55, you would be foolish to design it as if you they were going to be primarily 15-25 males…

      0
  23. 51

    I think this is all part of a normal evolution. Mobile is still a new platform, things are still being defined.
    In the past, web design conventions were forced on mobile design. It’s true to native applications and more so to mobile web. But as you mention, more and more designers use the more clean, objective oriented method – and in mobile, it’s a must.

    0
  24. 52

    at one point people were using ‘arrows’ 1999 in flash and aftereffects to create a motion effect. odd

    0
  25. 53

    Great article!

    Something I feel that is missing from these is influences. I don’t know if anyone else feels like this but to me, I’m incredibly reminded by Swiss and Dutch design whenever the topic of flat design comes up. I can’t help but think that plays a role. Look at ios 7 for example. The typography has taken such a larger role than before. When I look at Hofmann’s work, the typography is clearly the top if the hierarchy.

    Perhaps I’m not getting it?

    0
  26. 54

    The worst thing about recent design trends has been the disappearance of affordances. “Pull to refresh” is the worst offender. There’s a number of apps that support it, but they don’t provide anything to indicate that you can pull down at the top to do something. Worse, if you do happen to pull down at the top, some of them won’t give any feedback that you triggered a refresh. I hope Donald Norman hunts down the people that created these and beats them with a sack of doorknobs and push plates.

    3
  27. 55

    inspiring article. thanks a lot.

    0
  28. 56

    For some reason my original message was marked as spam when I tried to edit it. So not sure if the message will go through, but I was trying to add the comment that your example of ‘Global Closet’ in my opinion is beautiful ‘flat design’ unlike the lazy flat designs of my afore mentioned offenders.

    Cheers

    0
  29. 57

    Love this post! As a designer, I keep feeling attracted to a more minimalist design, and it’s good to read things that explain why.

    I’m also curious about another possibility: A lot of these minimalist designs look similar and have comparable UI/UX. Do you think this could create a user “culture” in which people are inherently familiar with the suble moves that are becoming more common in these applications?

    For a quick example, when magazines made the switch to tablets, people felt way more comfortable swiping left and right between pages, just like they did with physical magazines – even when doing so was counterintuitive to the possible design opportunities. This swiping was part of a user culture.

    I foresee another minimalist-centric UI/UX culture where people become accustomed to using these light, intuitive designs. I think we should make moves towards unifying that cultural standard, as doing so will allow us to improve our UX greatly.

    Loved the article. Really got me thinking!

    0
  30. 58

    The main problem with flat design is that it is…flat. As Adrian pointed out, simple is very hard to do. To make less look good takes so much more time. Look at logo sites. They have 3-4 basic looks: The swash, The gradient circle, the playful type and cartoony clip art (for restaurants), etc. Every tech logo has the same exact aesthetic fell. Same with restaurants. Every single logo is a rainbow mess with fun type. Yuck. But I have people complain very LOUDLY when I do a typemark. “What did that take you, five minutes? I’m not paying for that.” They have no clue how long it is to find the right fonts, test it, manipulate it in Illy, etc. They actually have no clue what a logo is. Logos are now the only design job I must be paid in full upfront.

    In flat, you really have to do a lot of up front look to select the right font and color palette. But as always, in the end it comes to this: does it work and does it represent the client aesthetic perfectly?

    0
  31. 59

    The author is over-thinking, and rationalising the reasons why everyone is making everything look “flat” after the fact.

    Digital designers and users didn’t all have logical, burning needs that were going unfulfilled by skeuomorphic or shiny design. What actually happened was that the fashion changed. A few interfaces floated round with a flat aesthetic and it was copied until it became a trend.

    Ugg boots didn’t become fashionable because women everywhere were concerned by the lack of warmth or comfort provided by their cowboy boots. Rather, some women started wearing them, and other women saw them thought they looked cooler than cowboy boots. Suddenly everyone’s wearing Uggs.

    1
  32. 60

    Great post and comments.

    Personally, although I love flat design, i don’t find it that easy to use.
    Recently I discovered buzz launcher for android – which lets you customize layout of your panels.After testing few nice looking flat, minimalist home screens – and trying to design one myself – I went back to original one…

    We will see how long it will take before new trend is introduced.
    As David mentioned – its kind of fashion.
    There were gifs, boxes, flash, css zen, web 2.0, apple candy looking icons and windows aero – and now flat design introduced by windows 8 tiles.

    New trend will probably come with transparent screens where contrast matters.

    Regarding the content reduction – I kind of agree that’s its a matter of laziness.
    As this has excuse for smaller screens, for larger one – its is completely unnecessary additional learning curve. But perhaps after a while I will appreciate uniform layouts.

    0
  33. 61

    I don’t think we should over analyze flat design as if it is has any actual reasons for being. It’s just a style that is trendy, just like we had web 2.0, grunge, and now flat.

    It will pass to make room for another trend. Also note that some of the most popular UIs in computing are not flat, in use for decades, so apparently they do just well despite the supposed problems with non-flat UIs.

    0
  34. 62

    I would have to agree with Marta on this one. Considering who your user is fundamental. Marketing companies always start with the audience. When I was a cool hunter it was all about what do they like, what do they prefer, what visually pleases them. For decades it was all about bringing these people is and asking. Its much simpler now because all of the media outlets is in the palm of your hand.

    Level of sophistication is huge! Flat design is not always the way to go and could hurt you if you put it to the wrong audience.
    The entity’s branding and positioning may evolve over time to retain the loyalty of who they have and still pull in new visitors.
    UX and UI design trends only give you opportunities for your direction but not THE direction.

    Great Read!

    0
  35. 63

    It is the natural progression of language that new ideas are introduced packaged in metaphors of the familiar. Then once established and familiar, those metaphorical symbols become simplified as they have their own identity. Such simplification reduces noise making room for more content. This is the nature of modernism / minimalism.

    Having saiid that, much of the current flat trend is anything but true minimalism. It is all too much an excuse to confuse users by hiding affordances and embellishing with color and stylish elements that are superfluous and misleading, merely swapping one form of noise for another.

    0
  36. 64

    My issue with the ‘new flat style’ is that it’s not new to me at all. People (mostly designers) were addicted to this design style two or three years ago (colorful ‘modern’ design). Just because it’s more common in the environment now doesn’t make it new. That’s why I don’t like the new flat design from iOS – it’s not because I completely dislike the design style itself, but because Apple is expected to SET design trends, not use already existing trends (aside from their own, of course) that everyone else has used already.

    0
  37. 65

    Mr. Taylor,
    As a student designer, I found this to be a very informative and thought-provoking post that explores the factors behind this “flat and thin are in” aesthetic in design that so many designers, students and professionals alike, have been following. I appreciate that you have expanded and explained certain logic and reasoning behind this trend. While I realize that many dismiss this as just a trend focused on aesthetics, much like a fashion trend, I believe the conditions of modern users who are perhaps seeking simplicity and clarity in a society where digital content and consumption is becoming increasingly overwhelming, serve as an impetus for designers to create better, usable design for these users. Although the growing reliance on flat and minimalist design might not always be the right answer, as you acknowledged at the end of your post, design has always been very focused on problem-solving and the reduction of clutter through aesthetics is one way to solve the problem of information overload, responsiveness, and interactivity – to name of a few of the problems you pinpointed in the beginning of the article.

    I agree with some of the previous comments that the decision of using flat design is dependent on the needs and the level of sophistication of the user. For example, many mentioned the design of iOS7 for iPhones just recently released. While I acknowledge that it is not wise to design under the assumption that everyone innately understands how to use a smartphone or tablet, is it not unrealistic for designers to design for everyone and for every situation? I recently read another intriguing article on Smashing Magazine that argues for user experience and interface designers to design for certain users and certain situations in mind. In the case of iOS7, Apple most likely realized a large part of their demographic are users who are already iPhone owners and are familiar with their operating system. Although it is hard to please everyone with a completely new look, I believe that Apple has made some smart decisions in their redesign, such as an increased focus on typography and a brighter color palette used to increase visibility of certain elements on screen. Of course, this isn’t to discredit the argument that flat design does not always equate to intuitive design, and some comments have identified the problem of simplistic iconography when applied to other applications such as Google email. As with all design problems, I think that the problems that come with reliance on minimal design is not an easy one to solve and perhaps it is prompting us to utilize a more data-driven approach to design thinking, where we closely study qualitative and quantitative data in order to continue designing better products for our users.

    While most of your entry focuses on flat and minimal design for digital interfaces on the screen, I am starting to see this trend being applied to designs of physical products and electronic devices as well. An interesting article on Wired Magazine describes how the “Golden Age of UI” is around the corner, and while designers today have a deep understanding on how to make apps simple without being simplistic, a new challenge for design is the application of this simplicity to the cumulative complexity of all our digital technology and gadgets. As someone who is an expert on not only interactive technology but also design for physical products and brand experience, I am curious about your thoughts on how this trend applies to design not only on but also off screen? As a fellow designer interested in a new era of innovation and user experience, I hope you agree that the future of design holds exciting challenges that are about so much more than trends and fads.

    Regards,
    Shelley Xia

    0
  38. 66

    Thanks for your article. Once I saw the title “Flat and Thin are in” it dragged my eyes into this entry, because Flat and Thin are always my taste of design. I have just revamped my own portfolio http://fat-cow.net last month, I would like to clarify is my portfolio counted in “Flat and Thin”?

    0
  39. 67

    Now that Apple has jumped the bandwagon (iOS 7), it’s a sad day when the mainstream interface design is driven by a trend with a need to over-simplicate everything (ironically, look at Metro’s start-up screen – it’s very confusing at first glance).

    But hey, this is how the money runs in the industry – you’ll have to “wow” the audience once in a while. I bet the next step is to make the interface more attractive with shadowing and other effects, making the current trend look dated. But from 20 years from now we’re again at the starting point with rough boxes or whatever looks “fresh” for a while.

    0
  40. 68

    I’d like to point out that designers and UX people are not the same. Designers from my experience are more about how it looks vs how it behaves. Sometimes designers cross over into the territory of how something behaves by changing how something looks. That’s when form is incorrectly valued over function.

    Also, software design should not be the same as informational website design. The former can have daily users who do their job every day using that software, so usability reigns king over design. The latter can be less about design, b/c the users might visit the site for say 5 mins a day.

    A specific example is how some designer have fallen in love with all this light-gray text. Yeah that looks great on a website that people only peruse with no real need to examine the text carefully. But for software where you may have lots of text you need to read carefully, it’s a bad decision in my opinion.

    I think the pendulum has swung way to far to minimalism. There has to be balance, and without swinging too far back to the glossy gradient stuff.

    To sum it up: Know your users and their use cases, don’t put a hammer to everything

    0
  41. 69

    I don’t know if you’ve been sleeping but this post is way too old to be posted now. Plus, Windows 8 made flat design the way it is now if anything. It made it more popular (because people will hate and say they didn’t create it) and this post has ONE product picture that is not Apple. Can we say biased?

    1
  42. 70

    Thanks for this fantastic article. Great advice – especially about going back to see what has been done by greats of the past!

    0
  43. 71

    I guess Adrian is right in his considerations, but in the end it is all about relevanz!
    (What he did mentioned in the comments.)

    We always have to consider what fits the customer interests and user interests at most.

    It’s not about choosing any design trend.
    It’s about creating the best user experience you could achieve for the user!

    Flat design only shows what we have tried to forget!

    Too many designs were badly influenced by skeuomorphic design, but the point is, there is more than just one way to create user value and to create great user experience.

    Flat design is just another design diversity which could fit the interest of customer and user at most.

    It is up to us to choose and it is up to us to keep digital design principles in mind.

    At least when we get tired about flat design it is the time again where it is up to us to reinvent the wheel again.

    Any design trend is just a part of this wheel and every trend comes and goes and leaves another piece of experience and knowledge to us.

    0
  44. 72

    THANK YOU SO MUCH , ….

    0
  45. 73

    Great article on flat design. We look forward to using this at our Leicester web design studio.

    0
  46. 74

    It looks to me that flat design is not itself good or bad.
    The trend that actually disappoints me is when the clean and minimalist look (or any visual trend) is prioritized vs usability.

    e.g.

    - The buttons ‘save’ and ‘delete’ may look elegant with simple typo on a light grey flat background, but adding symbols (like a tick for saving and a X for deleting) and using different colours would help the user to understand more quickly the function of the button.

    - Hidden commands declutter the interface, but then the user has to find out and remember their position

    Additionally, I would appreciate a lot more customizable interfaces.
    Surely more work for the designer, but with the benefit to find out what the end users actually prefer.

    0
  47. 75

    The pendulum need to swing back the other way a tad bit. I had issues with what is informative and what is interactive with the new flat design.
    A lot of this flattened lifeless design is like a colored in wireframe. It reminds me of the early days of the Internet when you were file size conscience. Ok now I’m ranting. Just bridge the gap visually between interactive and informational that’s all I have to say

    2
  48. 76

    In UI design, what are the recommendations for button press feedback with regards to contrast? While I know contrast can be “king”, is there any theory rooted in psychology that gives insight on good practice on this simple topic? For example, let’s say I have a touch screen loaded with a bunch of light blue buttons over a white background. Does the button press feedback call for a light orange color or a more subtle approach, like a darker blue? Thanks!

    0
  49. 77

    Thank you so much for posting!

    0
  50. 78

    I really enjoy the flat and simplicity trend that is going on now. I rely on simplicity when doing work. When there are too many graphics and typography going all over the page, it is not pleasing to the eye. I also, think that it is okay to have flat and drop shadows/bevels on the same page, because it adds more dimension and contrast. If you need to emphasize a graphic or show a button, that is a way to do it. Sure, it will look bad if you do too much, but a few items is just enough. Flat Interfaces are the way to go, in my opinion. I hope the web design world does not go back to the beveled and bold look, it is too much to get a handle of; sure it catches the eye, but it gets overwhelming to look at.
    I truly believe in the saying, “less is more..”

    Rankmyweb.com
    Brandi

    0
  51. 79

    As with any visual language, there’s pros and cons. I think it’s best that we try not to all adopt at once since everyone else is doing it. Consider your project first and whether or not a “flat design” philosophy and approach matches up to what your needs are. If you’re marketing a grunge band, maybe the contrasting visual of flat design could draw attention, but on the other hand grungy illustrative effects, pattern, etc might be a good way to go as well.

    0
  52. 80

    Thank you for this very inspiring and open minded article. I’ve read so many articles about flat design, which had almost a religious touch, spurning everything that has something to do with gradients, gloss effects or any kind of skeumorhphism. It’s so refreshing to see reasonable opinions to the current vogue.

    0
  53. 81

    Part 5 under PROCESS is elegantly summed up by Antoine de Saint-Exupery:

    “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”

    1
  54. 82

    Great analysis!!!!!!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top