2

I'm working on a web app and this question came to my mind. I tried to look around but found a lot of resources from both approaches. So here I am, trying to figure out a good solution.

The web app is about a food business, right at the beginning it has a big header with a background image, it also has a menu without background (the background color is added after some scroll) and also a text with the business logo. See image below for reference:

Note: The logo used isn't the real logo, is just to demonstrade due to brand protection.

enter image description here

enter image description here

As you can see, the first image uses an black overlay to separate the image from the text/logo and make it readable.

Also, the second image has a shadow around these elements with a gradiente fade from the top to make the menu items readable.

I do have control over what image is going to be used in the background, but due to a limited budget, we don't have resources to make our own and best images to fit this header, so currently we are using generic images from the internet.

  • Using overlay: When using the overlay color, it highlights the text and logo better, but it also leave the image a little off, which is something to call users attention and to arouse desire to consume the product.

  • Using shadow: This can leave the background image almost untouchable, but doesn't seems to have a fluid and harmonious layout.

What do you guys think is the best consideration for this scenario?

1

Definitely the first one. If you're overlaying elements on a busy image background such as something like that, you'll need a clear way to show visual hierarchy, otherwise everything appears to have the same level of visual importance (for example, in the second image the logo blends in pretty well with the white dish behind it).

Designers use several things to illustrate hierarchy...

  1. Size
  2. Brightness
  3. Color
  4. Motion
  5. Shadows
  6. (There are surely many more, but you get the idea)

In this particular case, it seems that using brightness would be your best bet. In my opinion, it seems to do the best job of separating the foreground elements from the background.

Note: Google's Material Design relies heavily on drop shadows to illustrate visual hierarchy (similar to your second example), however, it is always utilized by simple, flat objects rather than visually rich images.

1

Dotted overlay

There is an alternative! You can try using a dotted overlay instead of a full black overlay. This has the benefit of letting some of the brightness from the image through while still creating enough contrast behind the light colored text.

enter image description here (image taken from this answer)

You can experiment with the size/color/shape/opacity of the dots to hit the perfect balance.

0

Perhaps consider using both the background overlay, as well as the text and logo shadows.

To provide enough contrast, you certainly need the background overlay, but I feel the text shadow can also help the text stand out above the background image.

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.