Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

enter image description here

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?

Thank you

P.S: I am only a Software Engineer :)

share|improve this question
    
This thread may help: graphicdesign.stackexchange.com/questions/17359/… –  John Jun 21 '13 at 18:56
    
Because it will be dynamic, it's very hard to understand the contrast of the image. –  Burak Jun 21 '13 at 19:19
    
I think they way you are doing it is best. If you can't control the image underneath, then tint it to something else. It is a very effective way to ensure adequate contrast for your text, and I think it looks classier and is more readable than using heavy drop shadows or strokes. –  John Jun 21 '13 at 19:35
    
I agree that the transparent overlay method is the best option in cases where the accompanying image could be anything. Having said that, if you have some input in the photography as it looks like you possibly might, you could arrange the photographs to contrast well with text-only links, wherever you wish to place them. –  Dominic Jun 22 '13 at 23:53
add comment

2 Answers

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.

buttons

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.

buttons2

share|improve this answer
    
Try adding a slight orange tint to the text to make it contrast against the purple somewhat more than (near-)plain white..? :) –  kwah Jun 22 '13 at 3:37
    
I wouldn't add orange. That would not increase contrast. Just my opinion though. –  Scott Jun 22 '13 at 8:05
    
This looks very beautiful. But I have a problem. For each restaurant, I should change the basic color of the theme, so the color should be dynamic, or colorless. That's why I made them white-transparent. Do you think it is ok if I put black gradient layer over the photo so buttons with white background will be in contrast? –  Burak Jun 22 '13 at 10:06
    
Not sure I understand. You mean add a gradient fading from top to bottom over the photo? That may work... but it really depends greatly on the photos being used. That may ruin some photos. –  Scott Jun 22 '13 at 10:17
    
If you want to avoid all color for the buttons, I'd go somewhere in the neighborhood of #2d2d2d for a background color on them, but you could go lighter than that if desired. Optimally any dark area should never be solid black but a deep, rich color. However, if there's no common color to use, then the greys tend to increase readability more than a solid black will (easier on the eyes) The key is high contrast but not glaringly high contrast. It's a fine line. I'd probably opt for the lower opacity version if using grey buttons. White or black is just not going to work for some photos. –  Scott Jun 22 '13 at 10:23
add comment

While the title is easy to read in your second example I would consider moving it below the image and rearranging the other elements (price, description, etc). The image is very important so you should try not to obscure it if possible.

Another alternative would be to hide it then slide it up on rollover to how you have shown. You could also have the buttons almost transparent and fade them in. This keepsthe image as the hero.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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