1

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?

migrated from ux.stackexchange.com Feb 5 '14 at 21:32

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

  • 1
    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
1

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.

2

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

  • 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
0

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

  • 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
0

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

  • 1
    The converse, however, would be iOS7 which, while being very 'flat', also embraces gradients. – DA01 Feb 5 '14 at 21:35
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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