Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Flat And Thin Are In

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.

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

What Happened? Link

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 Link

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.

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

Simplicity Is Golden Link

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.

Beautiful and minimal: The Blue4 weather app by Oak.

Content Is King, Again Link

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 Link

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’s dashboard is a bright, bold, and easy approachable visual identity.

Technology’s Influence Link

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-face5 has also boosted the appeal of minimal typographic-focused designs.

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

Responsive Design Link

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.

To the point and weightless: OnSite9. (Larger view10)

Best Practices Link

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 Link

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 Link

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.

Global Closet12: an interactive game designed for National Geographic Education by The Workshop13.

Grid Link

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 School15 iPad app by Rossul Design.

Color Link

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.

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

Typography Link

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.

Clean and legible typography on Siteleaf19.

Interaction Link

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.

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

Wrapping Up Link

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 Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


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 or find Adrian on Twitter.

  1. 1

    Saroj Shrestha

    September 3, 2013 1:48 pm

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

    • 2

      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.

  2. 3

    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.

  3. 4

    Dieter Mueller

    September 3, 2013 2:36 pm

    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.

    • 5

      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.

    • 6

      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?

    • 8

      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.

    • 9

      Excellent analysis.

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

    • 10

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

    • 11

      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.

      • 12

        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.

      • 13

        “..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” (, 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.

    • 14

      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.

      • 15

        Less is NEVER more.

        This User wants as much info as possible in one view and NOT to trawl the screen with the pointer to discover what is an active linke and what is a passive text or header.
        If I have to scroll, I’ll look elsewhere.

        “Flat” serves the Producer and not the User.

    • 16

      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.

      • 17

        Cristian Serrano

        October 15, 2013 8:49 pm

        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.

    • 18

      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.”

    • 19

      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 !

  4. 20

    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

  5. 21

    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.

    • 22

      “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.

  6. 23

    @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!

    • 24

      Dieter Mueller

      September 3, 2013 8:19 pm

      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


    • 25

      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.

  7. 26

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

    Flat and thin since 2010

  8. 28

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

    This is not the case.

    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 :)

    • 29

      Dieter Mueller

      September 3, 2013 8:25 pm


      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.

      • 30

        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.

    • 31


      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?!”

  9. 32

    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.

  10. 33

    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.

  11. 34

    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!

  12. 35

    Michael Prewitt

    September 3, 2013 6:55 pm

    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.”

  13. 36

    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.)

    • 37

      Windows 8 has now more users than all OSX combined, according to this page :
      Windows Phone 8 already has more than 10% of market share in Europe in Q2, says this link :

      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.

      • 38

        Windows 8 has such a high percentage because it’s the only version of Windows that comes on consumer PCs. If you have software that requires Windows, you get a PC and that comes with Windows 8. Everyone I know who has it hates it but they put up with it because it’s what came on their PC. Every one of them also has Start8 or Classic Shell installed to make it almost usable.

    • 39

      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.

    • 40

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

      Nah. That’s because people hate change.

  14. 41

    Taras Kravtchouk

    September 3, 2013 11:41 pm

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

    Taras – Founder

  15. 42

    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!

  16. 43

    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.

  17. 44

    Gary Stachelski

    September 4, 2013 2:29 pm

    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.

    • 45

      Gary & Dieter are on the right track.
      Flat or low contrast webpages are a nightmare for Users. Add to that monotone pre-school icons that are either meaningless or ambiguous.

      Users need to know INSTANTLY what is clickable / active and what’s not.
      “Flat” removes all of the visual clues. What’s wrong with a “button” (shadowed, shaded, bevelled or whatever)?
      Flat sites require too much guessing – scanning with the cursor to “discover” links, because active text is indistinguishable or boxes might be clickable or they might be headers.
      Menu tabs across the top that no longer look like tabs, just words.

      And grey text on acres of glaring white background, wider lines-spacing all on the left side of the page requiring scrolling down several pages when previously it might fit on 1 or 1 1/2 pages.

      For those putting functionality second to aesthetics – Flat is BORING not encouraging dwell-time or repeat visits. (e.g.
      There is hope though…. Smaller retailers can’t afford unnecessary web redesign. Those with a functionable and interesting UI may see increased traffic

  18. 46

    What a great read!

  19. 47

    Brian D. Coryell

    September 4, 2013 3:24 pm

    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!

    • 48

      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?

  20. 49

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


↑ Back to top