web app - Mobile WebApp - Gradient vs. flat regarding UX

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:

Gradient:

Answer

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)