Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

Plain background

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

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

Gradient background

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?

share|improve this question

migrated from Feb 5 '14 at 21:32

This question came from our site for user experience researchers and experts.

Re-opened after some editing (answers were going in a good direction, I think this is a valid and interesting question). – Yisela Feb 10 '14 at 3:18
Flat in the sense, it doesnt mean it should be desperately flat, sometimes we can play with it, – Alankar Sudarsan Feb 10 '14 at 12:44
up vote 1 down vote accepted

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.

share|improve this answer

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.

with lines

share|improve this answer
This is a good idea. Flat design, taken to the extreme tends to suffer from poor contrast. Large flat color on top of large flat color leaves little room for affordance. I think a subtle pattern can really help differentiate static background elements with interactive foreground elements. – DA01 Feb 5 '14 at 22:09

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

enter image description here

share|improve this answer
I wouldn't call a gradient particular skeuomorphic. It can be, depending on context, but certainly may not be. Also note that flat design doesn't preclude using gradients, either. It just tends to mean to take it easy on the skeuomorphism as a whole. – DA01 Feb 5 '14 at 21:37

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

share|improve this answer
The converse, however, would be iOS7 which, while being very 'flat', also embraces gradients. – DA01 Feb 5 '14 at 21:35

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

enter image description here

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.

share|improve this answer

Your Answer


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.