プロフィール写真がほとんどのWebサイトでバナー画像と重なるのはなぜですか？
すべてのソーシャルアプリケーションでユーザーのアバターがユーザーのバナー/カバー画像と完全または部分的に重なっているのはなぜですか？同じことがページでも起こります。
それは意図的な、グリッドを壊すデザインです
Grid-breaking は、ページ上の重要なオブジェクトに注意を引くために使用される一般的なデザイン手法です。視覚的なコンテンツをページの自然なグリッド線に意図的にずらすことにより、ユーザーの目は自然にそのコンテンツに引き付けられるため、デザイナーはページ上の主要なコンテンツに注意を引くことができます。
次の例では、グリッドを壊す形状（丸）、配置（右マージンのオーバーラップ）、回転（傾斜したテキスト）、奥行き（ドロップシャドウ）、太字（赤）を使用して、ユーザーの目をページの赤い丸：
プロファイルページでグリッド分割を使用する理由
プロフィールページにはlotの情報（名前、誕生日、アバター、概要、友達、写真、アルバム、フィードなど）が含まれているため、情報は、ユーザーにとって圧倒されることがあります。グリッド分割を使用して、最初にユーザーの目をユーザーのプロフィール写真に描画することにより、デザイナーは次のことを行います。
- ユーザーの目がプロフィール写真を「見る」のを助けて、まともな エントリーポイント をページに作成し、次にページの残りの部分に移動します。写真が左上に配置されることに注意してください。これは ほとんどのユーザーがページの視覚的な処理を開始する場所 です。
- ページの残りの部分に、友好的な人間化された 心理学的アンカー を提供します。デザイナーはまずプロフィール写真にユーザーの注意を引くことで、ページの残りの部分に効果的で個人的なコンテキストを設定します。写真は、興味、保持、粘り強さなどを促進する傾向がある人について学んでいることを思い出させます。
2つの写真の間にhierarchyを表示するために重なりがあります。プロフィール画像がより重要で、カバーはユーザーに表示できる追加情報です。
これらの2枚の写真の順序が異なる例を考えてください。たとえば、最初にカバー写真を、その下にプロフィール画像を配置します。
あなたの目は最初に大きな画像を見て、次に下にある小さな画像を見ていきます。