Me gustaría saber si es correcto usar un estilo bokeh de fondo y combinarlo con un diseño plano de contenido.

Algo como:

Bokeh y diseño plano ciertamente pueden jugar bien. No es raro ver un diseño plano utilizado con imágenes con propiedades similares, como texturas sutiles o fotografías de enfoque suave.

Pero es algo con lo que debes tener cuidado, porque estás enturbiando la distinción de primer plano / fondo que de otro modo sería perfectamente nítida que obtienes con un diseño plano. Esto es particularmente cierto para el bokeh con sus grandes puntos potencialmente llamativos.

• Parte del objetivo del diseño plano es que es simple, limpio, ordenado y claro dónde mirar. Debes tener cuidado de que los efectos bokeh no rompan eso. Asegúrese de que sea sutil y tenga aún más espacio en blanco del que normalmente tendría alrededor de los elementos que deben destacarse como primer plano. Hay aproximadamente la cantidad correcta de espacios en blanco en su ejemplo.
• Deberá tener cuidado con el funcionamiento de las relaciones de color. El diseño plano tiende a necesitar colores simples y consistentes que se destaquen claramente , y deberá tener cuidado de que el colorido fondo bokeh no lo reduzca. Por ejemplo, en su ejemplo, reduciría el contraste y la saturación del fondo para que el primer plano sea más claro y nítido, y tenga cuidado con la ubicación de los puntos brillantes en relación con el contenido (teniendo en cuenta que tendrá un control limitado sobre esto en Un diseño receptivo).
• Es bastante común ver grandes fotografías de bienvenida clara / "héroe" como contenido de primer plano utilizado en diseño plano. Si está haciendo esto, deberá tener en cuenta el hecho de que estos no se destacarán tan claramente como lo harían contra un fondo plano y limpio. Nuevamente, es porque está enturbiando la distinción de primer plano / fondo normalmente perfectamente nítida.
• Todo buen diseño es impulsado por la función sobre la forma (el propósito de las cosas va antes que su estética) y el diseño plano se trata de esto. Asegúrese de saber por qué está agregando el bokeh para este diseño en particular y por qué vale la pena los pequeños compromisos.
  • "Se ve bien"? No es suficiente.
  • "¿Saca X característica de la marca que de otro modo se perdería"? Mejor.

Ciertamente se puede hacer que funcione, pero deberá tener en cuenta estas cosas.

El diseño plano no es una religión.

El "diseño plano" se ha enlodado en el último año. Hay muchos diseñadores que lo sostienen como una especie de sistema dogmático de estándares. Y el éxito del diseño de Material (y el Metro de MS, en menor medida) ha creado líneas duras más imaginarias que realmente no existen.

Plano es lo que haces. El principio subyacente es evitar el uso excesivo de sombreado o modelado o un falso diseño visual realista , como vimos con el grotesco esceptomorfismo de Apple . Eso no significa que el sombreado, la textura, la fotografía o la decoración de cualquier tipo desaparezcan. Aún tiene que diseñar su interfaz.

Hazlo tuyo

En respuesta a su pregunta: no existe una regla contra el bokeh, o la fotografía con problemas de enfoque u otras texturas e imágenes de fondo en cualquier estilo de diseño. Es cómo interpretas las influencias estilísticas que hacen que una marca se distinga. Debería desarrollar un nuevo dialecto del lenguaje visual, no hablar el de otra persona.

La mayor consideración, como otros han señalado, es la usabilidad. Solo asegúrese de que su fotografía no haga que la interfaz sea un desastre confuso. En algunos casos, incluso está bien que el fondo se convierta en una parte muy dominante de la experiencia, solo asegúrese de obtener la "conversión" que está buscando, sea lo que sea.

En la naturaleza

Windows Metro es posiblemente uno de los ejemplos más planos de Flat en la memoria reciente. Y sin embargo, tiene cosas como esta.

Google Material también es bastante militante sobre Flat, pero las imágenes grandes son fundamentales para atraer a la humanidad a su brillante paleta.

El iOS 7 de Apple fue un intento apresurado de alcanzar a Flatness. Para bien o para mal, alguien allí hizo que el fondo difuminado fuera una metáfora central del sistema, que está directamente influenciada por la fotografía bokeh.

Yo diría: Bokeh y bordes planos (sin relleno) funcionan bien. Pero debe restringir el uso a encabezados y elementos destacados.

Actualización (lo siento, estaba apurado y olvidé pegar el resto de la respuesta):

Como ejemplo, podemos tomar el siguiente encabezado:

A pesar del fuerte bokeh, las líneas finas del logotipo + hr no son demasiado agresivas y se ajustan bien. Un relleno no funcionaría bien (cubriría demasiado la foto).

Otro ejemplo: