recently I've noticed a style used in design that I'm really interested in and really curious about. That being a soft grain in some of the otherwise flat design styles that are being used.

Some examples of this might be some of Google's design, or, this example that I found.

Both of them have a bit of grain, and although I know how to use Photoshop's noise filter and all, I was wondering if there was a routine way to go about this, or if anyone had any comments or thoughts on what to do or what not to do. Thanks!

  • Just a comment. Noise can increase the file size, so check that point. – Rafael Nov 3 '16 at 23:50
  • Are you trying to do this in photoshop, sketch or something else? – Ryan Nov 4 '16 at 1:44

There is a very deliberate, functional reason for this use of noise: it obscures banding in fine gradients.

Gradients have become incredibly popular within flat design, largely due to Apple's focus on them since iOS 7. Apple uses extreme gradients, mostly. By extreme, I mean there's a lot of colour shift in their gradients, so they can avoid banding, mostly, by the combination of the angles they use and the amount of colour shift.

For more subtle gradients, particularly radial ones, a banding becomes visible, often, because there's not enough gamut to prevent banding unless using huge (48bit) colour spaces. To obscure this banding, there's various ways to increase noise, both chroma and black and white, and blend it with the gradient. This hides the banding, somewhat.

When done subtly, the noise isn't consciously visible. But you're starting to see it, which means you've noticed it and can't un-see it, and/or you're looking at examples where stronger noise was required to obscure the banding in the gradients, or you're seeing images where the noise is desirable and accentuated.

  • Ah gotcha, thanks! I'm assuming it is still a stylistic thing as well though? In the Google example it's extremely prevalent. – Josh K-H Nov 4 '16 at 12:04
  • 1
    Yeah, this is what I mean by: "or you're seeing images where the noise is desirable and accentuated." This could be for a lot of reasons, but one technical reason is the (generally) limited gamut on (most) Android phones showing banding of gradients, and in ways that aren't at all desirable. So those making artwork for all Android phones go overboard to make sure all Android users don't get banding in gradients. And eventually these sorts of work-arounds and tech limitation solutions become "trends" in their own right. Flat design (itself) is a good case example of this "trend" "creation" ;) – Confused Nov 4 '16 at 16:16
  • search google for the words hide and banding and gradient and noise with your favourite photo editor or image editor in the search query and you should see a lot of examples. It's been around for a long time, because computer screens and even print have had this problem with gradients since... well, forever. – Confused Nov 4 '16 at 16:18

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.