iOS/Android: Best practise for adding a back button on top of an either dark or light image



  • enter image description here

    Challenge: Creating a back button that is placed on top of an image that can either be dark or light WHILST keeping the style/layout in line with the current layout for headers.

    Ask: Help with either ideas or suggestions to inspiration.

    I've added the current layout for some headers as a baseline for helping with potential inspiration. Header option A is used as dropdown; Header option B and C is used as back buttons.



  • A simple & working solution in such cases is adding a transparent background layer, in e.g. 50% black. It can either be a linear gradient or a simple solid block at about 40-60% opacity.

    As you can see, it will work on any type of background and even on plain white it is not annoying to look at (subjective, I know, but come on it really isn't).

    enter image description here

    I don't know if this is breaking any rules for your current header design or Apple's or Google's guidelines. If adding an additional layer is too expensive, what also works is simply always darkening the image by a certain degree (e.g. also overlaying the whole thing with a transparent block in Photoshop and then using it in your app).



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2