0

What would you say is the best way of overlaying an flat icon over a image in a mobile application. I've tried fiddling around with the opacity on both images but they don't seem usable yet. Are there any best practices you can recommend?

Image below:

enter image description here

Improve this question

2 Answers 2

Reset to default
1

You need separate the controls from the background in more prominent way, to make it more clear they are not the part of the image, rather they are "external" objects.

Human are trained good (from physical world) to recognize 3D scenes. One way to convey this is to use element, which overlays the image. Semi-transparent bar with controls in the UI is the similar to looking through window, or such, which should be easily recognized by humans.

enter image description here

Improve this answer
2
  • Where did you get your icons? I really like them and would like to use them in my design. Also what do you think of this: i.imgur.com/DUPBJ5F.jpg. Does it work just as well?
    – methuselah
    Oct 13, 2014 at 8:17
  • Ha-ha, I've drawn the icons for 3 mins ). Your design doesn't look as a whole. The whole bar looks more distinctive. Though, it's my personal opinion.
    – Alexey Kolchenko
    Oct 13, 2014 at 17:40
1

Consider using some kind of field behind the icons. Any kind of contrast behind the icon is going to make it difficult to identify the shape.

The grey represents the image, and the circle and triangle are different kinds of icons.

UI example

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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