web-dev-qa-db-ja.com

予測できないサイズの画像を特徴とする要素をどのように設計しますか?

デザインがいくつかのアイテムを表現する必要があるコンテキストがあり、それぞれに一貫性のないサイズのイメージが含まれています。 1つの例は、顧客のロゴが識別機能である顧客データベースです。これらは、設計が非常に難しい場合があります。

画像サイズのばらつきによって引き起こされる不規則性を改善するための一般的なデザインの「トリック」はありますか?位置合わせの欠如の影響を軽減する、または固定グリッドシステムによって引き起こされるギャップの影響を軽減する視覚要素はありますか?

たとえば、「フォトボード」効果のために画像をランダムに回転してレイヤー化することでこれを処理するデザインをいくつか見ましたが、それは特定の状況でのみうまく機能します。

6

グリッドを放棄し、コンテンツの配置に焦点を当てるだけで、ロゴ/画像を明確に描写し、下のこの画像に示すように、人がそれらをすばやく区別できるようにする必要がある場合があります。

enter image description here

または、ロゴのサイズに大きなバリエーションがある場合、それらのバリエーションを使用して、降順または昇順、または以下のようにランダムな外観を作成することもできます

enter image description here

最後に、Kimberley Dietemannがこれらが有効でないオプションであるかどうかを指摘したように、最も実行可能な方法は、ロゴを適切なグリッドサイズにサイズ変更して、背景に配置し、グリッドに配置することです。

enter image description here

2
Mervin

画像を拡大または縮小すると、不快な視覚効果が生じる可能性があります。ただし、画像のサイズを分析し、必要に応じてサイズを変更し、常に同じサイズである黒または白の背景に配置することは難しくありません。

例えば:

enter image description here

透明なロゴ.pngを簡単に中央に配置できます。ユーザーはロゴの色に基づいて黒または白を選択できます。

(免責事項:私はより多くのユーザー調査/ユーザビリティ担当者対ビジュアルデザインなので、ymmv;)

1