Je voudrais savoir si c'est correct d'utiliser un style de bokeh d'arrière-plan et de le combiner avec un design plat de contenu?

Quelque chose comme:

Le bokeh et le design plat peuvent certainement bien jouer. Il n'est pas rare de voir un design plat utilisé avec des images ayant des propriétés similaires telles que des textures subtiles ou des photographies floues.

Mais il faut en être prudent, car vous brouillez la distinction avant-plan / arrière-plan parfaitement nette que vous obtenez avec un design plat. Cela est particulièrement vrai du bokeh avec ses grands spots potentiellement accrocheurs.

• Une partie du point du design plat est qu'il est simple, propre, épuré et clair où chercher. Vous devrez faire attention à ce qu'aucun effet bokeh ne casse cela. Assurez-vous que c'est subtil et qu'il y a encore plus d'espace que vous ne le feriez normalement autour des éléments qui doivent se démarquer comme premier plan. Il y a à peu près la bonne quantité d'espace dans votre exemple.
• Vous devrez faire attention au fonctionnement des relations chromatiques. Le design plat a tendance à nécessiter des couleurs simples et cohérentes qui se détachent clairement , et vous devrez faire attention à ce que le fond de bokeh coloré ne réduise pas cela. Par exemple, dans votre exemple, je réduirais le contraste et la saturation de l'arrière-plan pour que le premier plan soit plus clair et plus net, et je ferais attention à l'endroit où les points lumineux se situent par rapport au contenu (sachant que vous aurez un contrôle limité sur ceci sur un design réactif).
• Il est assez courant de voir de grandes photos de démarrage / «héros» à mise au point claire comme contenu de premier plan utilisé dans la conception plate. Si vous faites cela, vous devrez tenir compte du fait que ceux-ci ne se démarqueront pas aussi nettement qu'ils le feraient sur un fond plat propre. Encore une fois, c'est parce que vous brouillez légèrement la distinction avant-plan / arrière-plan normalement parfaitement nette.
• Tout bon design est motivé par la fonction plutôt que par la forme - le but des choses avant leur esthétique - et le design plat est tout cela. Assurez-vous de savoir pourquoi vous ajoutez le bokeh pour cette conception particulière et pourquoi cela vaut les petits compromis.
  • "Ça a l'air cool"? Pas assez bon.
  • "Fait ressortir la caractéristique X de la marque qui serait autrement perdue"? Meilleur.

Cela peut certainement être fait pour fonctionner, mais vous devrez prendre ces choses en compte.

Le design plat n'est pas une religion

Le «design plat» est devenu boueux au cours de la dernière année. Il existe de nombreux concepteurs qui le présentent comme une sorte de système dogmatique de normes. Et le succès de Material Design (et Metro de MS, dans une moindre mesure) a créé des lignes dures plus imaginaires qui n'existent pas vraiment.

L'appartement est ce que vous en faites. Le principe sous-jacent est d'éviter une utilisation excessive de l'ombrage ou de la modélisation ou un faux design visuel réaliste, comme nous l'avons vu avec le skeuomorphisme grotesque d' Apple . Cela ne signifie pas que l'ombrage, la texture, la photographie ou la décoration de toute sorte disparaissent. Vous devez encore concevoir votre interface.

Faites-en votre propre

En réponse à votre question: il n'y a aucune règle contre le bokeh, la photographie avec mise au point ou d'autres textures et images d'arrière-plan dans n'importe quel style de conception. C'est ainsi que vous interprétez les influences stylistiques qui distinguent une marque. Vous devriez développer un nouveau dialecte du langage visuel, ne pas parler celui de quelqu'un d'autre.

La plus grande considération, comme d'autres l'ont souligné, est l'utilisabilité. Assurez-vous simplement que votre photographie ne fait pas de l'interface un désordre déroutant. Dans certains cas, il est même normal que l'arrière-plan devienne une partie très dominante de l'expérience - assurez-vous simplement que vous obtenez toujours la "conversion" que vous recherchez, quelle qu'elle soit.

Dans la nature

Windows Metro est sans doute l'un des exemples les plus plats de Flat dans la mémoire récente. Et pourtant, il a des trucs comme ça.

Google Material est également très militant à propos de Flat, mais les grandes images sont essentielles pour apporter un peu d'humanité à sa palette lumineuse.

IOS 7 d'Apple était une tentative précipitée de rattraper la planéité. Pour le meilleur ou pour le pire, quelqu'un a fait du flou d'arrière-plan une métaphore centrale du système - qui est directement influencé par la photographie de bokeh.

Je dirais: le bokeh et les bordures plates (sans remplissage) fonctionnent bien. Mais vous devez limiter l'utilisation aux en-têtes et aux éléments en vedette.

Mise à jour (désolé, j'étais pressé et j'ai oublié de coller le reste de la réponse):

À titre d'exemple, nous pouvons prendre l'en-tête suivant:

Malgré le bokeh fort, les lignes fines du logo + les heures ne sont pas trop agressives et s'adaptent bien. Un remplissage ne fonctionnerait pas bien (il couvrirait trop la photo).

Un autre exemple: