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

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

Plano es lo que haces. El principio subyacente es evitar el uso excesivo de sombreado o modelado o un diseño visual falso, como vimos con el grotesco skeuomorphism de Apple . Eso no quiere decir que desaparezca el sombreado, la textura, la fotografía o la decoración de cualquier tipo. Todavía tienes que diseñar tu interfaz.

Hazlo tuyo

En respuesta a su pregunta: No existe ninguna 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 lo que hace que una marca se destaque. Deberías estar desarrollando un nuevo dialecto del lenguaje visual, no hablando el de otra persona.

La mayor consideración, como han señalado otros, 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 busca, sea lo que sea.

En la naturaleza

Podría decirse que Windows Metro es 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 con Flat, pero las imágenes grandes son fundamentales para traer algo de humanidad a su brillante paleta.

El iOS 7 de Apple fue un intento apresurado de ponerse al día con Flatness. Para bien o para mal, alguien hizo que el desenfoque del fondo fuera una metáfora central del sistema, que está directamente influenciado por la fotografía bokeh.

El bokeh y el diseño plano ciertamente pueden funcionar bien. No es raro ver el 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 hay que tener cuidado, porque estás enturbiando la distinción entre primer plano y fondo, que de otro modo sería perfectamente nítida, que obtienes con un diseño plano. Esto es particularmente cierto en el caso del bokeh con sus puntos grandes que pueden llamar la atención.

• Parte del punto del diseño plano es que es simple, limpio, ordenado y claro donde mirar. Deberá tener cuidado de que los efectos bokeh no rompan eso. Asegúrese de que sea sutil y que tenga incluso más espacios en blanco de los 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 reduzca esto. Por ejemplo, en su ejemplo, bajarí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 (siendo consciente de que tendrá un control limitado sobre esto en un diseño responsivo).
• Es bastante común ver grandes fotografías de salpicaduras/"héroes" de enfoque claro como contenido de primer plano utilizado en el diseño plano. Si está haciendo esto, deberá tener en cuenta el hecho de que estos no se destacarán tan nítidamente como lo harían contra un fondo limpio y plano. Nuevamente, es porque está enturbiando ligeramente la distinción entre primer plano y fondo, que normalmente es perfectamente nítida.
• Todo buen diseño está impulsado por la función sobre la forma, el propósito de las cosas está por encima de su estética, y el diseño plano tiene que ver con 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.
  • "Resalta 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.

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, tenía prisa y olvidé pegar el resto de la respuesta):

Como ejemplo, podemos tomar el siguiente encabezado:

A pesar del fuerte bokeh, las finas líneas del logo + la hr no son demasiado agresivas y encajan bien. Un relleno no funcionaría bien (cubría demasiado de la foto).

Otro ejemplo: