Gostaria de saber se é correto usar um estilo de bokeh de fundo e combiná-lo com o design plano de conteúdo?

Algo como:

Bokeh e design plano certamente podem funcionar bem. Não é incomum ver o design plano usado com imagens com propriedades semelhantes, como texturas sutis ou fotografias com foco suave.

Mas é preciso ter cuidado, porque você está confundindo a distinção de primeiro plano / plano de fundo perfeitamente nítida que obtém com um design plano. Isso é particularmente verdade no bokeh, com seus grandes pontos potencialmente atraentes.

• Parte do objetivo do design plano é que é simples, limpo, organizado e claro para onde procurar. Você deve tomar cuidado para que os efeitos do bokeh não quebrem isso. Certifique-se de que seja sutil e tenha ainda mais espaço em branco do que normalmente em torno dos elementos que devem se destacar como primeiro plano. Existe a quantidade certa de espaço em branco no seu exemplo.
• Você precisará ter cuidado com o funcionamento dos relacionamentos de cores. O design plano tende a precisar de cores simples e consistentes que se destacem claramente , e você precisará ter cuidado para que o fundo colorido do bokeh não reduza isso. Por exemplo, no seu exemplo, diminuiria o contraste e a saturação do plano de fundo para que o primeiro plano fique mais claro e nítido, e tenha cuidado com a localização dos pontos brilhantes em relação ao conteúdo (saiba que você terá controle limitado sobre isso em um design responsivo).
• É bastante comum ver grandes fotografias de "splash" de foco claro / "herói" como conteúdo de primeiro plano usado em design plano. Se você estiver fazendo isso, precisará levar em consideração o fato de que eles não se destacarão tão nitidamente quanto em um plano de fundo limpo. Novamente, é porque você está confundindo levemente a distinção normalmente perfeitamente nítida em primeiro plano / fundo.
• Todo bom design é orientado pela função sobre a forma - o objetivo das coisas antes de sua estética - e o design plano é tudo sobre isso. Certifique-se de que você sabe por que você está adicionando o bokeh para este projeto em particular e por isso vale a pena os pequenos compromissos.
  • "Parece legal"? Não esta bom o suficiente.
  • "Traz X característica da marca que de outra forma seria perdida"? Melhor.

Certamente pode ser feito para funcionar, mas você precisará levar essas coisas em consideração.

Design plano não é uma religião

O "design plano" ficou turvo no último ano. Existem muitos designers que o sustentam como algum tipo de sistema dogmático de padrões. E o sucesso do design de materiais (e do Metro da MS, em menor grau) criou mais linhas rígidas imaginárias que realmente não existem.

Flat é o que você faz. O princípio subjacente é evitar o uso excessivo de sombreamento, modelagem ou design visual falso, como vimos com o ckeuomorfismo grotesco da Apple . Isso não significa que sombreamento, textura, fotografia ou decoração de qualquer tipo desapareçam. Você ainda precisa projetar sua interface.

Faça o seu próprio

Em resposta à sua pergunta: Não há regra contra bokeh, fotografia com foco no foco ou outras texturas e imagens de fundo em qualquer estilo de design. É como você interpreta influências estilísticas que fazem uma marca se destacar. Você deve desenvolver um novo dialeto da linguagem visual, sem falar de outra pessoa.

A consideração maior, como outros já apontaram, é a usabilidade. Apenas certifique-se de que sua fotografia não torne a interface uma bagunça confusa. Em alguns casos, é aceitável que o plano de fundo se torne uma parte muito dominante da experiência - apenas certifique-se de obter a "conversão" que deseja, seja lá o que for.

Na natureza

O Windows Metro é sem dúvida um dos exemplos mais simples de Flat na memória recente. E, no entanto, tem coisas assim.

O Google Material também é bastante militante em relação ao Flat, mas as imagens grandes são fundamentais para trazer um pouco de humanidade à sua paleta brilhante.

O iOS 7 da Apple foi uma tentativa apressada de alcançar o Flatness. Para melhor ou pior, alguém fez com que o desfoque de fundo fosse uma metáfora central do sistema - que é diretamente influenciada pela fotografia bokeh.

Eu diria: Bokeh e bordas planas (sem preenchimento) funcionam bem. Mas você deve restringir o uso a cabeçalhos e elementos em destaque.

Atualização (desculpe, eu estava com pressa e esqueci de colar o restante da resposta):

Como exemplo, podemos usar o seguinte cabeçalho:

Apesar do bokeh forte, as linhas finas do logotipo + a hora não são muito agressivas e se encaixam bem. Um preenchimento não funcionaria bem (cobriria muito a foto).

Outro exemplo: