In an imaging app I'm working on, I want to enable the user to apply a blur filter to the image. Bit creating an icon for that filter isn't easy. Should I

  1. Draw a white circle and just apply a blur to that and take that image as icon? I'm not too happy with making a modern UI icon that hasn't straight lines and curves, but blurry outsides
  2. Similar to 1., but make one half of the circle without blur and separate them with a line (similar to an average sign
  3. Make a circle / image with an very curved, unclear outline, but all of the image in the same color (white) so I don't have to apply a blur to the image itself which seems like violating the modern UI design princibles

Any help (or reference to some documentation) is appreciated.

  • Hi there! Do you have any examples of the things you have tried so far? I really like option 2, but it might work or not depending on how you execute it. It's definitely a challenge to use blur in flat UI! We encourage critique questions here as well, so if you want to upload some examples and ask for feedback that would be great :) – Yisela Mar 11 '14 at 19:56
  • In image editing software such as photoshop, a droplet is the common icon for blur. – DA01 Mar 11 '14 at 20:54

Everything I can come up with looks kind of terrible, but these might give you some other ideas:

Half focused, half blurry element:

enter image description here enter image description here

Partially blurred element, but the challenge is to differentiate that portion enough. You could use some other element to bring attention to the blurred part:

enter image description here enter image description here

And the one I think has potential, blurred element BUT with defined borders. Something you can associate with blur, like a street picture on a rainy day. So in this case the blur is not applied to the element, but the element works as a sort of transport for the message inside:

enter image description here

EDIT: DA01's comment is right on spot. Scaling any of these would be quite tricky. Last option would be, in my opinion, to use a symbol for the tool rather than the effect:

enter image description here

Or you could combine all the previous and use a less literal representation of blur, solid shapes with decreasing opacity for example. If your app doesn't have other similar tools, you might get away with it:

enter image description here

  • These are good ideas, but the big challenge with using literal blur is that it gets a bit lost when reduced down to a toolbar icon size. – DA01 Mar 11 '14 at 20:55
  • @DA01 Agree. Maybe for smaller size you are forced to use an icon that symbolizes the tool instead of the effect. Like the hand, or the droplet, or a sponge or... something like that – Yisela Mar 11 '14 at 20:56
  • 1
    I like the droplet. It perhaps isn't intuitive, but has become the defacto standard. The dots are nice looking...but they seem to be applicable to other tools as well (opacity, brushes, etc.) – DA01 Mar 11 '14 at 21:09
  • 2
    I think I'll take on of the first ones. The Icon will be the size of a medium live tile, so I guess the size won't be a problem, but I'm trying to make it as intuitive for people who aren't used to graphics manipulation, so the defacto standard won't help a lot. But thanks for all these very nice suggestions. – jalgames Mar 12 '14 at 20:13

So how about a Gaussian icon i suggested earlier something like this quick mockup:

enter image description here

There is a lot of tehcnical reasons for this icon since blur is generally a diffusion effect and the Gaussian is what you'd get if you let the middle bar diffuse over time while feeding energy in. It might be too technical tough.

But like the drop icon it can be made simple enough to be visible at smaller sizes. The drop being in general a good candidate for pure artists as water is used to diffuse out paint. This may not be so good for other audiences tough.

  • The problem is that this item is, ass you pointed out, not very intuitive and this won't become the next photoshop, but a small mobile app, so it is very important for the object to look intuitive. Another reason it that there are other curve adjust filters so it would be difficult do see the difference – jalgames Mar 12 '14 at 20:15
  • @user2241553 Its very intuitive if your a technical or scientific person but outside of that skill set its not. Just like a water drop is not intuitive for blur for somebody who has not worked with traditional media. – joojaa Mar 13 '14 at 17:47
  • Yes, that's what I mean. It has to be intuitive for just those people who can't use photshop and want to apply some filters to their photos quickly in realtime. – jalgames Mar 13 '14 at 21:20
  • what about a camera lense out of focus? – joojaa Mar 14 '14 at 5:36

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.