視聴者の目を引くために強調を使用する
Webページのデザインを強調すると、ページの中心となる領域またはオブジェクトが作成されます。 1つの要素をデザインで目立たせる方法です。 焦点は、デザインの他の要素よりも大きくてもよく、明るく色付けされていてもよく、両方とも目を引く傾向がある。 ウェブページをデザインするときには、単語やフレーズを選択し、それを目立たせる色、フォント、サイズを割り当てることで強調することができますが、デザインに重点を置く他の多くの方法があります。
設計における強調の使用
設計者ができる最大の間違いの1つは、デザイン内のすべてを目立たせることです。 すべてが等しく強調されていると、デザインは忙しく混乱し、悪い退屈で魅力的ではないように見えます。 Webデザインでフォーカルポイントを作成するには、以下の使用方法を見落とさないでください。
- ライン：コントラストを強調します。 いくつかの要素が水平である場合、1つの垂直要素が焦点になります。
- 色：デザイン内のほとんどの要素が暗いまたはミュートされている場合、色付きのオブジェクトは目を引き付けます。
- 形：ほとんどの形が不規則である場合、幾何学的な形が目立ちます。
- 近接性：複数のアイテムがグループ化され、1つがグループとは別である場合、目は1つのアイテムに移動します。
- 配置：例外がありますが、デザインの中心に配置された要素は、通常、目を描画します。
- 体重：重い要素は、視聴者の注目を集めます。
- 繰返し：単純なグラフィックから型要素を繰り返すと、目は焦点の繰り返し要素に従います。
- コントラスト：色や線で作成されたコントラストに加えて、サイズ、テクスチャ、フォントの変更によってコントラストが生成されます。 この変更により、焦点要素が目立つようになります。
- 白いスペース：白い（または空の）スペースで囲まれた要素が焦点になります。
Webデザインにおける階層
階層は、サイズによる重要性を示す設計要素の視覚的な配置です。 最大の要素が最も重要です。 あまり重要でない要素は小さくなります。 Webデザインに視覚的な階層を作成することに重点を置いてください。 HTMLマークアップへのセマンティックフローを作成しようとしている場合は、 Webページに既に階層があるため、これは簡単です。 最も重要なことは、H1ヘッドラインなどの正しい要素を強調することだけです。
マークアップの階層に加えて、訪問者の目はスクリーンの左上隅から始まるZパターンでウェブページを閲覧することを認識します。 これにより、ページの左上隅が会社のロゴなどの重要な項目に適した場所になります。 右上隅は、重要な情報のための第2位の配置位置です。
Webデザインに重点を置く方法
Webデザインの強調は、さまざまな方法で実装できます。
- セマンティックマークアップを使用すると、スタイルがなくても強調表示ができます。
- デザインで強調または非強調するフォントまたはイメージのサイズを変更します。
- 対照的な色を使用して強調します。
- サイズカウント。 ページや画面上の巨大な単語がすぐに注目を集めます。
- ホワイトスペースで焦点を囲む。
- 注意を引くために単語やイメージを繰り返します。
従属はどこに収まるのですか？
従属は、デザイン内の他の要素をトーンダウンして焦点をポップアップさせるときに発生します。 1つの例は、黒と白の背景写真に対して配置された明るい色のグラフィックです。 同じ効果は、焦点の背後の背景と混ざり合っている色や色を消して、目立つようにした場合にも発生します。