If you glance at this iOS programming question, I was asking about the best way to achieve a "grainy" or "blurry" ground on a mobile device view.

So, this is, I'd say, quite a common trend these days. Minimal apps are a trend, and the ground is typically some sort of blurry/fuzzy flat color -- rather than (a) just a plain flat color or (b) leather/wood textures {that is to say, a skeumorph look background}.

So, you see this all over the place on the ground of Whassapp and other high-volume, "new minimalist" apps today.

{The programming question on the other site was about the issue that: flat colors are built in to the iOS programming milieu; I was looking for a way to click-to-add blurry/fuzzy backgrounds, rather than adding an example image of same.}

So, what is the best term for that type of background ... a "fuzzy" if you will plain color ground; but certainly not faux leather/woodgrain.

{TBC, as a naive Affinity user who is a non-designer, if the design department was asleep, I'd make such a background by adding some noise and maybe blur to a plain color: naturally you designer pros may well do something more fancy.}

So what's the best term for this? Much as we had a somewhat annoying term for leather/wood grounds (to wit, skeumorph), what's the best term for what I describe - which is currently popular, to boot.

I've lately heard users, devs, clients, etc calling it things like "cloudy sort of background" "a noisy sort of plain color like you see everywhere these days" "grayish you know what I mean" and so on.


closed as off-topic by DA01, JohnGB Aug 15 '15 at 23:46

  • This question does not appear to be about user experience within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • BTW, I swear this is one of the best sites on the network. It's a hi-iq site. Cheers. – Fattie Aug 15 '15 at 13:02
  • 1
    It's often called just "noise" – Dirk Aug 15 '15 at 13:54
  • I don't think this is a UX question. Maybe a Graphic Design question, but even then, the answer is likely just "textured background" – DA01 Aug 15 '15 at 22:14
  • DA - you're probably correct, it's more of a "graphic design" question... – Fattie Aug 16 '15 at 11:52

I use the "light noise background". But I think this term might be too technical for clients and non-designer/non-frontend colleagues.

I'm not sure there is a common, standardized term for it right now. Not in the way we had it with the "brushed metal texture" or "skeumorphic trend".

  • A great point on how "brushed metal texture" had a real term! You're probably right that "light noise background" is sort of the best full explanation of it. Mind you, if you look at say Whassaps background .. is it really noise? I get the feeling someone hand-built it, you know. – Fattie Aug 15 '15 at 23:23
  • You mean this? pbs.twimg.com/media/BiD2mx-CEAAp94S.jpg No, of course it's a hand illustrated pattern, it's different from the computer-generated noise texture. Both noise and patterns are used a lot, but they are very different not only in the genesis, but also in the visual feel they provide. There's a whole service with such patterns: subtlepatterns.com. If I had to call it something, I would use "subtle pattern", I think it's a short and self-explanatory term even for laymen. – Zoe K Aug 16 '15 at 9:29

Terms that could be applicable:

  • noise (the specific tool often used in photoshop)
  • textured background (more generic term, but most graphic designers would know what you are referring to. Alternatively: subtle texture
  • grainy (a term that comes from 'film grain')
  • duh! "textured background" duh! "grainy!" two great suggestions I plain didn't think of. – Fattie Aug 15 '15 at 23:20

It's generally known as "[type] mask" where type could be noise, blur, vibrancy, etc.

See vibrancy and blur techniques for iOS8 that applies to your scenario, background techniques for iOS7 and Masks in UIVisualEffectView documentation by Apple

Please note that I'm taking your SO question as guidance and hwo to make this programatically. If you mean in general (such as in an image manipulation software like Photoshop, or just graphic design lingo) it's a textured background, just like DA01 mentions. But since your original question is about how to progamatically doing this, there you go.

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