Catégories
Astuces et Design

Repérer une tendance | Astuces CSS

Il existe des tonnes de sites Web à la mode, avec un nombre égal ou supérieur de designers et de développeurs talentueux qui les créent. Le Web est génial comme ça et encourage ce genre de créativité.

Même ainsi, je suis étonné que certains traits se retrouvent dans les choses. Je veux dire, cela a du sens. Beaucoup d'entre nous utilisent les mêmes frameworks d'interface utilisateur et s'inspirent des sites que nous admirons. Mais de temps en temps, mon œil commence à saisir le vent de l'air du temps et des points communs qui l'accompagnent.

Le dernier? Formes Blobby. C'est une touche amusante qui ajoute un peu de panache, en particulier pour les conceptions plates qui nécessitent une touche de couleur ou un point focal intéressant qui conduit l'œil d'un endroit à l'autre. Je suis sûr que vous l’avez vu. J'ai passé une semaine à collecter des captures d'écran de sites Web que j'ai rencontrés et qui l'utilisent. Je ne veux certainement pas regarder pour des exemples; ils sont juste apparus dans ma navigation normale.

Je suis désolé s'il semble que j'appelle des gens parce que c'est mon intention. J'adore vraiment le concept – tellement, en fait, que je l’envisage sur un projet! Certains des exemples de cette galerie sont absolument magnifiques.

Après avoir repéré ces formes blobby à plusieurs reprises, j'ai commencé à remarquer certaines considérations à prendre en compte lors de leur utilisation. Des choses comme:

  • Surveillez le contraste lorsque le texte se trouve au-dessus d'un blob. Il existe de nombreux cas où l'arrière-plan du document est blanc et la tache est sombre. Si le texte les traverse, il sera difficile de trouver une couleur de police qui satisfasse la norme de lisibilité 2.1 AA des WCAG.
  • Marchez légèrement lorsque vous mélangez et assortissez les couleurs. Une goutte rose vif derrière un composant de carte n'est pas un gros problème, mais ajoutez du jaune, de l'orange et d'autres couleurs vives qui se trouvent à côté… le design commence à détourner l'attention du contenu. De plus, un arc-en-ciel vibrant de formes blobby peut soulever des problèmes d'accessibilité. Une fioriture est juste cela: une belle touche subtile mais percutante.
  • Les blobs sont bons pour plus que la couleur. Certains des exemples les plus intéressants que j'ai vus coupent des images en formes intéressantes. C’est bien que nous puissions intégrer une image directement dans SVG, puis la masquer avec un chemin.
  • Les blobs sont également utiles pour plus que les arrière-plans. Avez-vous pris cette capture d'écran sur le site de Topcoder? Ils l'utilisent pour des onglets qui sont super funky et cool.

Tout cela me fait réfléchir à la manière dont les sites Web d'aujourd'hui seront considérés par les développeurs de demain. Vous vous souvenez il y a 15 ans, lorsque de nombreux sites ont adopté l’utilisation des images réfléchissantes par Apple? J'ai probablement encore de la mémoire musculaire Photoshop pour avoir reproduit cet effet tant de fois.

Photo de trois modèles d'iPhone 3 côte à côte. Le premier montre l'écran d'accueil, les deux autres montrent le dos, un en noir et un en blanc. Les trois téléphones arborent un reflet sous eux.
Remarquez les icônes skeuomorphes – qui étaient aussi populaires!

Skeuomorphisme, biseaux, arrière-plans GIF animés, longues ombres, héros, dégradés, arrière-plans bokeh… tout cela et bien d'autres traitements visuels ont fait leur temps au soleil. Peut-être que les blobs rejoindront ce club à un moment donné. Peut-être qu'ils reviendront avec style après ça. Qui sait! Je trouve juste intéressant de réfléchir aux choses qui nous ont inspirés au cours des trois dernières décennies et d'imaginer comment les choses que nous faisons aujourd'hui seront vues à travers la longue lentille du temps.

Ce serait génial de voir d'autres instances de formes blobby – partagez-les si vous en avez!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *