Recently, I've looked at a lot of sites to figure out patterns used in mobile web design.

I've noticed that if the app is using lists or buttons, most designs use a gradient background.

Is there any reason for this regarding UX or is this only a design choice?

I am building a WebApp and in my opinion the flat style looks nicer.

Here the 2 versions: Flat: Flat

Gradient: Gradient


3 Answers 3


Good design is about creating something useful that works. The school of style in which it is designed (flat or skeuomorphic), is just a matter of fashion. But all styles may not work for all projects, so it shouldn't be forced.

The thing to be kept in mind is that "Flat design is simple by nature and works well with an overall minimalist design approach. It has a distinct look and feel without all the extras. It relies on a clear sense of hierarchy in the design and placement of elements to make successful projects easy for users to understand and interact with."

In the case of mobile applications, the interface has fewer buttons and options, which makes the flat interface easier to use.

Some key principles of flat design from Carrie Cousins article on designmodo (link is at the end)

  • Each UI element should be simple and easy to click or tap. Interaction should be intuitive for users without a lot of in-design explanation.
  • Because of the simple nature of element in flat design, typography is extremely important.(see example - plover.co)
  • Flat design is simple by nature and works well with an overall minimalist design approach. (See example).

If your application can follow these principles, go for it. If you need a different, more complex approach or the presence realistic elements in your design, avoid flat design. (I am not saying that flat design cannot be used to achieve complex designs, but it would require more effort and creative insight to do it)

P.S. You might want to look into "Almost" Flat Design. It is essentially flat design with some minor affects to give it more flexibility. (see example)

Source: Carrie Cousins article on Principles of Flat Design (designmodo)


With so little space having visual clues like gradient are useful. For example it may be better that you dont have a gradient on the table with check boxes but do have gradients on the wide grey + / - sections which are clickable.

The gradient gives the impression of something raised that can be clicked on whilst not taking up extra space.

You can also use shading to sharpen edges (as you are doing in your flat version anyway) and shadows to show that one section is part of another. It looks like the table of checkboxes appears when you click on the grey section - if you have a drop shadow between the grey Werkstattarbeiten section and the checkboxes below it appears like it is an extension of the heading.

Unless of course you design for Microsoft metro...

  • +1. Also as implied by @icc97 by "use shading to sharpen edges" a gradient can suggest a border (in lists and such) thereby saving a pixel (of an actual border line).
    – obelia
    Jan 13, 2013 at 17:31

There is no such guidelines from Apple, and you can count on Apple's UI development guidelines for many such things http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556

Personally for me gradient for background color of the content or the header looks cooler than gradient for the button. Also, I guess it depends on your personal choice and imagination of the designer more than anything else.

  • The OP did not refer to any operating system, so why are you particularly refering to Apple's guidelines?
    – kontur
    Jan 13, 2013 at 13:33
  • @kontur As long as he is referring to a native mobile device app, Apple's guidelines should be very useful as a reference point.
    – ripu1581
    Jan 13, 2013 at 15:21
  • He is asking about gradients or flat color. Were I to link to the Windows Phone 8 design guidelines, the recommendation would be totally on the contrary to this specific problem. I don't think advocating one platform's guidelines as a universal solution answers the OPs question.
    – kontur
    Jan 13, 2013 at 15:57
  • @kontur There is nothing platform specific about the advice and I didn't suggested to stick to it either. It was suppose to be used as a reference point. And yes, Windows Phone 8 design guidelines could be as good a reference point as Apple's, though I personally would prefer Apple's due to its wider acceptance.
    – ripu1581
    Jan 13, 2013 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.