Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
font-family: 'Helvetica Neue',Arial,sans-serif; –  Mervin Johnsingh Jan 13 '13 at 10:18
    
Possible duplicate: ux.stackexchange.com/q/19608/21973 –  kontur Jan 13 '13 at 13:36

3 Answers 3

up vote 2 down vote accepted

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)

share|improve this answer
1  
The carrie cousins article is great. However two of the links you provide are now broken: cdns.designmodo.com/wp-content/uploads/2013/05/SimpleMail.jpg and cdns.designmodo.com/wp-content/uploads/2013/05/Plover.jpg –  icc97 Aug 19 at 22:28

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.

share|improve this answer
    
The OP did not refer to any operating system, so why are you particularly refering to Apple's guidelines? –  kontur Jan 13 '13 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 '13 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 '13 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 '13 at 16:28

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

share|improve this answer
    
+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 '13 at 17:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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