I would like to know if this is correct to use a background bokeh style, and combine it with content flat design?
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.