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.

  • I'm not sure I completely follow your thread. Are you using A, B, or C with D1 or D2? The arrow on B or C is more indicative of a back button, where as A suggests a dropdown menu. Can you provide anymore information? Nov 18 '20 at 12:14
  • Why do you need the back button overlaid the image if it is being used with the header? Nov 18 '20 at 20:41

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).

  • 1
    Amazing - thank you! "…plain white it is not annoying to look at (subjective, I know, but come on it really isn't)." 😅
    – Simplicity
    Nov 20 '20 at 7:55

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.