web-dev-qa-db-fra.com

Comment pouvons-nous concevoir des éléments qui présentent des images de taille imprévisible?

Il existe des contextes où une conception doit représenter plusieurs éléments, chacun avec des images de taille incohérente. Un exemple pourrait être une base de données clients, où le logo du client est une caractéristique d'identification. Celles-ci peuvent être très difficiles à concevoir.

Existe-t-il des "astuces" de conception communes pour améliorer les irrégularités causées par les variations de taille d'image? Y a-t-il des éléments visuels qui réduisent les effets du manque d'alignement ou qui réduisent l'impact des lacunes causées par les systèmes de grille rigides?

Par exemple, j'ai vu des conceptions qui gèrent cela en faisant tourner et en superposant les images de manière aléatoire pour un effet `` photoboard '', mais cela ne fonctionne bien que dans des circonstances particulières.

6
Jimmy Breck-McKye

Il y a des moments où vous avez juste besoin d'abandonner la grille et de vous concentrer uniquement sur le placement du contenu afin que les logos/images soient clairement définis et qu'une personne puisse rapidement les différencier comme indiqué dans cette image ci-dessous:

enter image description here

Alternativement, si les tailles de logo ont d'énormes variations, vous pouvez utiliser ces variations pour créer un ordre décroissant ou croissant ou même un aspect aléatoire comme ci-dessous

enter image description here

Enfin, comme Kimberley Dietemann l'a souligné s'il ne s'agit pas d'options valides, le moyen le plus pratique consiste à redimensionner le logo à une taille de grille acceptable et à le placer sur un arrière-plan et à le placer dans la grille

enter image description here

2
Mervin

Étirer ou rétrécir des images peut entraîner des effets visuels désagréables. Cependant, il ne serait pas difficile d'analyser la taille de l'image, de la redimensionner si nécessaire, puis de la placer sur un fond noir ou blanc toujours de la même taille.

Par exemple:

enter image description here

Un logo transparent .png pourrait être facilement centré. Les utilisateurs pouvaient choisir le noir ou le blanc en fonction des couleurs de leur logo.

(Avertissement: je suis plus une personne chargée de la recherche/de l'utilisabilité que de la conception visuelle, donc ymmv;)

1