This is a view from an app for restaurant.
As you can see, buttons and title of the dish cannot be read easily, especially over white tone photos.
I applied some gradient mask between photo and text, it is better now. But I want to know the best way of it.
And can you give me some clue about re-arranging the buttons?
P.S: I am only a Software Engineer 🙂
For optimum viewing, and given that you can’t control what’s below them, those buttons should really have a set, high contrast, background color/gradient. This would ensure that the text is always readable.
You can also do away with the drop shadow on the type to provide a more upper-scale, fluid, appearance.
Another alternative, if you want the photo to be perceived behind the buttons is to lower the opacity while using a high contrast color. Similar to how you’ve handled things lower in your image. While not quite as readable as a solid color, this at least allows you to add some darkness behind the text to ensure it’s readable over lighter areas.
Source : Link , Question Author : Burak , Answer Author : Scott