Text over images... everyone seems to do it these days, especially with user generated content. Unless it's like a one-off Nike ad I think putting text over an image fails most of the time. Agree/disagree/examples?

The example from my tweet is from Storify (of which I'm a big fan) I just don't like this technique: pbs.twimg.com

Its a crutch. I agree overall - especially with really tiny text like this. Rounded corners at top are pretty heinous as well.

In general I agree. I've seen it implemented well, but usually, and especially with user generated content, it's pretty bad.

The example you show, which you can see all over (Twitter's newer media tweets, here on Branch, etc.) is a great example of how this can go bad. To be honest, I'm not sure what is going on with this or how it's come to be so popular.

It's just very tricky to do and when it's not being "art directed" like the Nike ads you mention, it often comes out ugly or worse, hard to read. What's wrong with a nice thumbnail aligned nicely to text? Surely there has to be a better way to add visual interest.

I don't disagree that it's silly looking at times, especially when this happens:

cl.ly

But what do you mean it looks "bad" 99% of the time? It's aesthetically unpleasing? Do you mean it's hard to read?

If we're talking about aesthetics, we will probably end up agreeing to disagree, but if we're talking about legibility, I don't think it's that bad.

cl.ly

Those are all legible (for the most part), and I think the first-glance look at this page is much more visually interesting than if it were all text, as seen in this older mock:

cemre.s3.amazonaws.com

Is this the best solution? Probably not. We had tried a lot of things but this was the least worst.

In terms of "where did this style come from" the first time I saw it was on Facebook groups. They've since refined the design to this:

cl.ly

but it was much more dark gradient-y before.

and probably started out after the age old white text on transparent black rectangle on photo looked too separated with that stark horizontal break.

macstories.net

@Julius "aesthetically unpleasing? Do you mean it's hard to read?"
Yes. Often both are true.

That Facebook example is a fairly judicious application, BUT it's also on hover, so not quite apples to apples.

That Flipboard example is gnaaarly.

I brought up the example re: "where did this style come from". For us I remember seeing that and saying "oh let's try that" and it ended up OK...

that said, we'll probably be revisiting this at some point in the future.

Also new airbnb neighborhoods has it not on hover, but it's also got way less text and is art-directed kind of: cl.ly

Still gets kinda muddy for me, but the airbnb example is ok. Worthing noting: predictable metadata + hand-picked images.

When text and images are variable (user defined), and the desire is a pleasing grid, images over text have been the best solution I have found. jem-saw.com

There are still trade offs. Size variation depending on string length.

That said, as I've started working on the iPhone app, one of the first things I've done is broken the text out of the image. The design is a stream more akin to Twitter or Instagram and in that context text over image makes a lot less sense.

Sorry, wrong link: jem-saw.com

@matty8r I buy the general argument for uniformity, but I'm trying to understand that grid of yours. It looks arbitrary... some images are fit to containers in the grid, some are cropped to the grid.

@tarngerine - I think you could argue the visual interest point. Although, for the record, I don't agree with that point. :)

I find well structured text to be plenty interesting visually, and actually prefer the text only version of your example for a few reasons: scan-ability being primary among those. But I get your argument.

My biggest beef with this is they're often hard to read (big usability issue) or obscuring meaningful content with something often arbitrary or not fitting with the context. This is usually related to poor art direction or user-generated content.

The Airbnb example you cite is a case where it's done fairly well. Still could be improved with a bit of shadow or weight. See Williamsburg; still a bit hard to read.

General rules of thumb: if the primary content is the image, and the text isn't taking away from it, it's generally ok in my book. If the primary content is the text (a title, summary, etc.) and the image interferes (which, unfortunately, with user-generated content, it often does) then it's probably not a good idea.

Regardless - it's tricky. I applaud people for trying it out, and hey, maybe there is a way to do it right. Give more user control over placement of text, size, weight, typeface, etc? Allow for image only, editorial-style options sans text?

@Keith — definitely agreed on many of those point. Would love to be the ones who figure it out :)

Re: your earlier point about why not just use a thumbnail with nicely aligned text, the issue we ran into with that was that the thumbnail itself visually became a block of its own, distracting from the intended blocking by branch.

@Julius - yeah, not a surprise with Branch, but I've seen many instances where that would (probably) be a better option. For what it's worth, so far I think how you've done this with groups seems to come out nicely. The style makes it a bit easier to read, and the heavier handed fade keeps visual distraction to a minium.

Anyway, keep experimenting! It's a big key to great design and, you know, sometimes (often, if you're me) you'll get it wrong and have to refine. All part of the work. :) You guys have done a ton of interesting and cool stuff here!

@justin an explanation: some images are square, some are wide, some are tall. the grid supports items that are square, two squares wide and two squares tall. Cropping most things to 2:1 looks bad, so instead, I opted to put squares into squares, put tall things into 2:1 containers and wide things into 1:2 containers, preserving the entire image, rather than cropping... Needless to say, it's a tricky problem. Now imagine pulling the text (of varying length) outside of those containers.

You guys raise some really valid points. Text over images with a transparent gradient has become an overused (and often poorly used) trend, especially for user generated content.

What's interesting is text and images have been beautifully used together for so long, so why is this trend turning out to be such a flop?

For the most part, it looks like garbage because the text and the picture are not thought of holistically. They should be designed together and work to support each other.

I'm not really a sports fan, but sbnation.com has a rockstar team. Their curated pictures are perfectly paired with interesting typography. Aslo, they don't use a linear gradient (like fb and branch) but instead use shadows and overlays.