Le bokeh et le design plat sont-ils compatibles?


9

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:

entrez la description de l'image ici


4
Bienvenue sur GD.SE. Je ne pense pas qu'il existe de règles strictes.
joojaa

Haha merci pour ton commentaire génial: D Est-ce que ça choque quand tu le vois?
Zooly

Dans ce cas, cela ne fonctionne pas vraiment à 100%, mais je dirais que c'est plus les images particulières. Pourrait fonctionner avec un meilleur avant-plan de combo et de hors-piste. Toujours pas si mal. (pour ne ses plus les couleurs)
joojaa

Bien sûr, je viens de prendre le premier bokeh que j'ai trouvé et la première couleur plate dans mon esprit ^^
Zooly

3
C'est une question purement subjective pour la plupart.
DA01

Réponses:


5

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.


Merci pour votre réponse complète! Je suis d'accord avec vous, j'aurais besoin d'un argument pour savoir pourquoi j'utilise ce combo au lieu d'uniquement plat. Et ... je n'en ai pas! Vous avez raison, je viens de le trouver sympa. Je pensais que cela apportait du dynamisme à mon site Web (modèle d'une page), mais je dois l'essayer dans des conditions réelles, et, comme vous l'avez dit, pensez aux différentes couches, et choisissez les couleurs parfaites pour accentuer l'information. Merci pour votre point de vue;)
Zooly

@HugoTor Comme le note cette réponse, l'arrière-plan du bokeh peut être une mauvaise idée si vous utilisez une grande photo de héros. Dans ce cas, une bonne justification de l'arrière-plan du bokeh peut être si vous n'utilisez pas de héros et que vous pensez que votre design plat sans arrière-plan est trop fade visuellement. Dans ce cas, cela peut être un bon substitut pour les photos de premier plan, tant que vous faites attention à maintenir le contraste de premier plan / arrière-plan.
reconnaissance

9

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.

Écran météo de Windows 8

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.

entrez la description de l'image ici

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.

entrez la description de l'image ici


1
C'est une réponse absolument superbe.
Courses de légèreté en orbite le

1
Thx @LightnessRacesinOrbit! Je pense que ce sujet mérite d'être démystifié (◠‿◠)
civil le

Merci pour votre réponse géniale. Je me demande, si j'ajoute un relief à mon élément plat, afin de les distinguer, il deviendra quelque chose comme Material Design? La chose que je préfère (sur ces exemples) est l'application Google: c'est clair, mais beau. S'il y a une chose que je n'aime pas dans le design plat sans la photographie en arrière-plan, c'est la netteté. Je pense que cela pourrait être vraiment ennuyeux pour l'utilisateur de ne voir que des carrés et des rectangles.
Zooly

1
Vous êtes sur la bonne voie. Je pense que la même préoccupation est ce que l'équipe iOS essayait de résoudre avec des choses comme le flou d'arrière-plan. Malheureusement, ils se sont retrouvés avec une interface plus désordonnée et moins utilisable. C'est contre cela que je mets en garde.
civil du

1

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: coup de dribble # 848287

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: de @KinaoleCanada

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.