Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm struggling how to show logo and text on a background which changes.

enter image description here

Live example: http://firestartr.co.s3-website-eu-west-1.amazonaws.com/

It goes form dark to light so choosing black or white is not very readable.

Any clues?

EDIT:

text-shadow: 0 1px 1px rgba(0,0,0,.5); helps a lot

share|improve this question

5 Answers 5

up vote 5 down vote accepted

Check out https://www.spotify.com/uk/video-splash/

Spotify accomplishes text/button overlay on a video background pretty well. You could add a drop shadow via CSS to your overlay. Do you have any control over video selection? Take note of the types of videos the spotify splash uses. Note that some videos are very specific about the aperature used to shoot the video (that is, some sections are blurred). Spotify doesn't even utilize a drop shadow and it looks great. Also maybe it is OK if occasionally the user can't read the text. The important thing is most of the time they can. I believe video choice plays a big role in successfully implementing this effect. Another option is to employ a semi-transparent darkening overlay (either a gradient overlay or a fullscreen overlay) to darken the video. Twitter uses this effect, and facebook does the same for their image headers (though it's more subtle). This can be accomplished with pure CSS. Another option is to use bigger text. If you don't have enough room for bigger text you may wish to simplify your wording and eliminate unecessary text.

Spotify video

Twitter overlay

share|improve this answer
1  
Dutch ecommerce retailer wehkamp.nl uses this gradient back drop to keep their white text at the bottom of the page readable no matter of the background image. –  Paul Jan 10 at 8:15

The standard solution is to have the foreign text on a float which covers a small part of the viewport, e.g. white text on a black rectangle.

You can make it look better if you choose a text color which is by itself likely to have high contrast from most other colors (your current white is great here) and give it a very fine border from a color which will have high contrast from the colors the main text disappears within.

You can also programatically change the color each pixel of the text depending on the background.

You will never achieve a subtle, beautiful effect - these are impossible under the circumstances. The design look and feel will change a lot. This is a necessary price for readability in this case.

share|improve this answer
    
"You will never achieve a subtle, beautiful effect" spotify.com/uk/video-splash Spotify does a pretty good job. –  circuitry Jan 9 at 20:41
    
@circuitry Spotify uses a large, thick font, and the majority of their film clips show decently dark colours behind the words. That works out pretty well. :) Less easy to do here specifically where the OP wants a small paragraph, though. –  doppelgreener Jan 9 at 22:16
    
@JonathanHobbs Yeah, that's a good point. Maybe the solution can involve increasing font-size and condensing the text in the paragraph. That combined with a drop shadow, a darkening overlay and/or selective videos and the OP may be in luck. –  circuitry Jan 9 at 22:23

I don't know that this would fit the motif you are going for, but a semi transparent band across the screen that the text sits in would make the most sense to me. Something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

With this approach, the area where the text lies, you will be able to guarantee that the text will still be readable, but the beautiful images behind will still be clearly visible.

share|improve this answer

Check out the coloring used here: http://www.seattlecidercompany.com/, they manipulated the coloring so that white text would look good across it.

enter image description here

Your video is very clear and draws attention to both the wording and the video at the same time. You might want to consider either playing with the color (like the link above) or playing with the clarity like these: http://signaltower.co/white-font-on-blurry-backgrounds/

As long as the background is darker or has a blur, I think white text would work.

enter image description hereenter image description here

share|improve this answer

You can add a dark text shadow to white text so it's still readable on light backgrounds. Depending on what is the main subject, you can also try to alter the video by adding a blur filter and a black layer (reducing his opacity). There is some other solutions : add an outline to the text, put a shape behind it (a filled square or a blured one, ...), etc.

Actually I think it depends on what you really want to show, if the text is displayed during the whole video, and so on. Anyway, there is probably a lots of place for experimentations :)

share|improve this answer

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.