Are bokeh and flat design compatible?

Question

I would like to know if this is correct to use a background bokeh style, and combine it with content flat design?

Something like:

Answer 1

Flat design is not a religion

"Flat design" has gotten muddy over the last year. There are many designers holding it up like some kind of dogmatic system of standards. And the success of Material design (and MS's Metro, to a lesser extent) has created more imaginary hard lines that don't really exist.

Flat is what you make it. The underlying principle is to avoid excessive use of shading or modeling or faux life-like visual design, like we saw with Apple's grotesque skeuomorphism. That does not mean that shading, texture, photography, or decoration of any kind go away. You still have to design your interface.

Make it your own

In answer to your question: There is no rule against bokeh, or focus-challenged photography, or other background textures and images in any design style. It's how you interpret stylistic influences that make a brand stand apart. You should be developing a new dialect of visual language, not speaking someone else's.

The bigger consideration, as others have pointed out, is usability. Just make sure your photography doesn't make the interface a confusing mess. In some cases, it's even okay for the background to become a very dominant part of the experience — just make sure you still get the "conversion" you're after, whatever that may be.

In the wild

Windows Metro is arguably one of the most flat examples of Flat in recent memory. And yet it has stuff like this.

Google Material is pretty militant about Flat too, but big pictures are central to bringing some humanity to it's bright palette.

Apple's iOS 7 was a hurried attempt to catch up with the Flatness. For better or worse, someone there made background blur a central metaphor of the system — that is directly influenced by bokeh photography.

Answer 2

Bokeh and flat design certainly can play well. It's not uncommon to see flat design used with images with similar properties such as subtle textures or soft-focus photographs.

But it's one to be careful with, because you're muddying the otherwise perfectly sharp foreground/background distinction you get with a flat design. This is particularly true of bokeh with its big, potentially attention-grabbing spots.

• Part of the point of flat design is that it's simple, clean, uncluttered and clear where to look. You'll want to be careful that any bokeh effects don't break that. Make sure it's subtle and have even more whitespace than you would normally around the elements that must stand out as foreground. There's about the right amount of whitespace in your example.
• You'll need to be careful with how the colour relationships work. Flat design tends to need simple and consistent colours that stand out clearly, and you'll need to be careful that the colourful bokeh background doesn't reduce this. E.g. in your example, I'd lower the contrast and saturation of the background so the foreground is clearer and sharper, and be careful about where the bright spots sit relative to the content (being aware that you'll have limited control over this on a responsive design).
• It's quite common to see big clear-focus splash/"hero" photographs as foreground content used in flat design. If you're doing this, you'll need to take into account the fact that these won't stand out as sharply as they would against a clean flat background. Again, it's because you're slightly muddying the normally perfectly sharp foreground/background distinction.
• All good design is driven by function over form - things' purpose coming before their aesthetics - and flat design is all about this. Make sure you know why you're adding the bokeh for this particular design and why it's worth the small compromises.
  • "Looks cool"? Not good enough.
  • "Brings out X characteristic of the brand which would otherwise be lost"? Better.

It certainly can be made to work, but you'll need to take these things into account.

Answer 3

I'd say: Bokeh and flat borders (w/o filling) work well. But you should restrict the use to headers and featured elements.

Update (sorry, I was in a rush and forgot to paste the rest of the answer):

As an example, we can take the following header:

Despite of the strong bokeh, the thin lines of the logo + the hr are not too aggressive and fit well. A filling would not work the good (it would cover too much of the photo).

Another example: