Recommended practices for working with backgrounds in flat design

Question

I am doing an Android app, actually re-disigning it, because the previous design was terrible. I'm not a designer, neither the guy who did the first version, we're both developers, but I do like the good designs in the apps I develop, the previous guy just didn't care.

I am doing a flat design, but I don't know what to put on the background. It has to be yellow, and I don't completely like the shade so I'd like to do something to it.

Before it was with this color: #ffc400

And now I put a little gradient from sides to center with :

startColor: #fdce00
centerColor: #fff400
endColor: #fdce00

Is it right for a flat design? I think it could be better, but I don't like the previous plain color background. Any ideas?

Answer 1

I dont think you should use any gradient as it has to be flat. Instead use a pattern if you still do not want just a flat color in the background. something like this.

Answer 2

Actually, I don't think flat design necessarily means no gradients. DA mentioned it in a comment, iOS7 embraces some gradients and it's still considered flat:

This is subtle affordance, and you can also find it for example in Gmail. Matthew Moore has a really nice article about it called 'Almost Flat Design'.

For the most part, these interfaces stick to the flat design principles of flat colors, no drop shadows, and use of color to encourage specific user actions (e.g. red compose button in Gmail). But if you look closely, that compose button does have a slight gradient.

The same happens with shadows:

Almost Flat Design doesn’t ignore the concept of depth. Instead, depth is used to support comprehension of the interface.

So in short: there is life beyond flat. You can actually have subtle gradients or shadows in 'almost-flat' design.

Answer 3

In design texture and gradients are part of skeuomorphism, not flat design.

I would recommend you stick look at yellow or orange colours that are tried and tested on screens. A single colour will give you a much better design (IMO) than using gradients. While you may like colour X because of screen colour profiles it may appear completely differently.

If you have any screenshots this would help us help you

Answer 4

I can't comment, but here's what I would say:

From Gizmodo: "Flat design is a design philosophy that argues for simplicity, clarity, and honesty of materials in user interfaces". It is the result of going against skeuomorphic design (design that physically emulates function/afforance. For example, the bookshelf app that Apple had).

Take Windows 8 and the new iOS 7 redesign as inspiration - these set the precedence for a "flat design". Notice how there is generally a very distinct lack of either texture or gradients in the design, and apply that to how you are designing flatly.

Hope that helps a little :)

Answer 5

Just to add another example of flat design that use gradients: Google's icons for their apps.

Almost all of the icons use some sort of gradient, even highlights (like the Drive icon). Nevertheless, this is considered flat design (and a well executed one) and not skeuomorphic design. It is still "simple, clear, and honest". The gradients have been subtly used to make the illustrations more ergonomic (as opposed to using them to try to convince the user they are not what they are, which would be skeuomorphism).

On the other hand, if the "flatness" is not used to help improve the experience of the user but just as a fashion statement or an artistic exercise, then it is not honest anymore, it is self centred and annoyingly dishonest. Good design communicates. A non-ergonomic design that uses flat areas of colour is just as bad design as one full of flashy gradients and overlays that add nothing to the function.