ビジュアルコンテンツの方向あなたが知っておくべきこと
の コンテンツの視覚的方向 はあまり広くは議論されていませんが、高変換Webデザインの重要な側面です。すべての訪問者は、最初のページの読み込みで新しいサイトを「吸い上げ」ます。.
美学は役割を果たすが、それはもっと 全体的なデザイン感. この感覚は空白、活版印刷、対称性の影響を受けますが、ほとんどの場合 関係 ページ要素間.
デザイナーは訪問者が欲しい ページに留まる そして スクロールし続ける 彼らの注意を引いて、彼らをそのサイトに興味を持たせることによって。デザイン原則は常に焦点を当てるべきです フォームの前の機能について. これはデザインが 内容を補完する, 後付けとしてそれを押し込まないでください.
この記事では、私はあなたができる方法についていくつかのヒントをお見せしたいと思います。 レイアウトとビジュアルコンテンツフローを改善する あなたのサイトに.
構図に焦点を当てる
Webサイトのあらゆる部分が構築されます 全体的なレイアウトに. この全体的なレイアウトは、次のように述べているゲシュタルト理論の規則に従う構成を作成します。 全体は常に部分の合計よりも大きい.
ページの個々の領域は一緒になる 全体を形成する. デザイン要素を構築する必要があります 引力 内容についてページ上のすべてのもの ページの下部に達するまで、訪問者をさらに下に案内します。.
これが、コンテンツのさまざまな部分（ビジュアル、テキスト、ボタンなど）間の関係がデザインにとって非常に重要な理由です。.
あなたの目標は 人を励ます 自分の傾向からサイトを閲覧する。それは言われたより簡単に言われます、しかしあなたはたくさんによって学ぶことができます 実例を勉強する.
Monkopのホームページは、視覚的階層の優れた例です。 テキストとビジュアルの両方. 要素間には十分なスペースが使用され、タイポグラフィはブランドのベクトルイラストを補完する.
スクロールすると、気づくでしょう ストレート水平ページブロック 色、ボーダー、グラフィックで分けられます。これらはで構築されています デザインパターン を念頭に置いて 一貫性を提供する ページ全体.
底に向かって、あなたは見つけることができます 2列分割 片側に画像、もう片側にテキストがあります。画像も サイドを入れ替える 左右左右のパターンで。これは注目を集める、そして 単調さを破る まだ典型的なページの 自然な流れを保つ コンテンツ内.
A 似たようなデザインの美的 PicjumboのWebサイトで見つけることができます、PhotoshopとSketchユーザーのための写真アドオンのためのランディングページ.
ホームページはロゴとプレビュービデオに焦点を当てています。スクロールすると、ページ全体に移動するカスタムアニメーションが表示されます。このアニメは本当に 注目を集める, そして視聴者を得る スクロールし続けたい.
全体的に見て、ページは感じます 開いた そして 見やすい. 内容は 水平ブロックに分割 ぱりっとしたタイポグラフィときれいなアイコンで.
さまざまなページ要素の方法を検討する バランスをとる, 要素間のスペース、色の間のコントラスト、および異なる形状。これらすべてが、全体的な構成において重要な役割を果たします。すべてのサイトは当然コンテンツに一定の重みを付けます.
サイトごとに異なるため、絶対的な答えはありません。例えば, 大きくて大きすぎる場合は、ナビゲーションリンクが見やすくなります。. 彼らがいるとき他の人はよりよく合う 大文字で小さい.
私はあなたがあなたのニッチで他のウェブサイトを研究することを勧めます。実際にそれらがどのように組み合わされているかを分析します。レイアウトを再構築して、どの要素が最終的にデザインを「まとめる」のかを確認してください。.
型設計事項
あなたのタイポグラフィをデザインする方法は コンテンツの方向に影響を与える あなたのサイトに。これは型階層と関係があります 異なるページ要素のデザインスタイル 段落、ヘッダー、箇条書き、引用符、および列や表などの特別なレイアウト要素.
ビジュアル レイアウトにも影響する可能性があるため、コンテンツをデザインすることをお勧めします。 自然な進行で. 次のようにコンテンツを書く ページを下に流れる, そして 読み続けている 各段落を通して.
あなたが自由に使える最大のツールは あなたのデザインの目. 活版印刷要素の違い、およびそれらが他のページ要素とどのように関連しているかを理解することを学びます。コンテンツの領域を区別するためにページセクション間の関係を作成する.
あなたが考えるかもしれないいくつかのこと：
- 文字サイズ
- フォントファミリー
- カラーコントラスト
- ページセクションの関係
- 行の高さと段落余白
- 文字間隔と大文字/小文字
たとえば、Campaign Monitorのホームページを見てください。一番上のナビゲーションリンクは、小さな文字ですべて大文字を使用しています。ページ上の他のヘッダ これと同じオールキャップデザインに従ってください どっち 統一感を生み出す.
サイト上の他の大きなヘッダーは もっと目立つ, そして彼らは本当にページから飛び出します。典型的なヘッダデザインを見るだけで、簡単にできるはずです。 違いを伝える ヘッダーとその対になった本体コピーの間.
Campaign Monitorの文字体裁デザインのスタイルは絶妙です。 レイアウトに自然に溶け込む. このような結果を得るためには練習が必要ですが、あなたが試みるほど、それはより簡単になるでしょう.
もう少し学ぶために、以下のリンクを強くお勧めします。
- デザイン原則：視覚的な重さと方向
- デザインで視覚的な重みを使って作業する
- 構成バランスに影響を与える19の要因
コンテンツを導く
だとわかる ウェブサイトの種類 持ってる さまざまな方法 サイトを介して訪問者を案内するため。たとえば、ランディングページは訪問者を次のように案内します。 情報の一口, 小さいアイコン, スクリーンショット, そして 紹介文.
ブログのような他のサイトは通常、一度にホームページに人を連れてくることはありません。ほとんどの人 記事ページに着陸する, ブログ投稿のレイアウトは、 見出しをハイライトする, そして人々を描く さらに内容へ. あなたがすべての単語に読者をぶら下げて欲しいので、これは良質のコピーライティングが効くところです.
ソーシャルネットワークとWebアプリが必要 質の高いユーザーエクスペリエンス, それでそれはわずかに異なるトピックですが、Facebookフィードがどのように設計されているかを考えてください。 スクロールとユーザー操作を促進する.
あなたが人々をサイトを閲覧させ続けるためにあなたが採用するデザイン方法はそうするでしょう 経時変化. しかし、一般的には、あなたの目標は ガイド訪問者 視覚的なコンテンツの方向性.
を見てみましょう ランディングページ そして ブログデザイン 違いを見つける.
CactusはOS X用の静的サイトジェネレータです。彼らのホームページ Appleのデザインスタイルにぴったり - たくさんの空白と細いsans-serifフォント.
コンテンツは、単純なグラフィックを使用して列、ブロック、およびテキストのまとまりに編成されています。これらと同じ美学は アップル製品に共通, だからMacユーザーはこのデザインスタイルを楽しむでしょう.
製品に関する情報（機能や設定を含む）は、ホームページに表示されています。ページ自体 スクロールを促進 独自のコンテンツ、基本的なアイコン、および左右のコンテンツブロックの交互の列パターン.
ここでの目的はに情報を提供することです。 既存のユーザー, 売る 新しい利用者 サボテンのアイデア.
そのデザインを、次のWebのホームページと比較してみましょう。内容は もっと散発的 ブログのホームページに さまざまな投稿トピックがたくさん.
長方形はカプセル化するグリッドシステムを作成します 複数の投稿を1つのレイアウトにまとめる. ここでの目標は ユーザーにコンテンツを読んでもらう サイトに。訪問者が何かをダウンロードしても問題ありませんが、訪問者がダウンロードしても問題ありません。 何かを読むために固執する.
人々に読んでもらう方法はあります 素晴らしい写真 そして キャッチーな見出し. TNWはこれをうまくやっています、そしてそれらのレイアウトは 人々をブラウズし続けるために構築された サイドバーとコンテンツ後領域に関連する投稿サムネイルを表示.
訪問者を特定の行動に導くことは、サイトごとに異なります。しかし、他の成功したサイトが何をしているのか、そしてコピーする方法を学ぶことでたくさん学ぶことができます。.
あなたの目を信頼する
個々のデザインプロパティは分析的に説明できますが、実装はサイトごとに異なります。 「さらにスクロール」リンクを持つ主人公の画像 同じことをしない すべてのWebサイトで.
デザインを学ぶことはとても 視覚的プロセス. デザインに対するあなたの目は最も重要な側面です。必要がある 物事を正しく見る これを識別するため 視覚的階層. あなたが他のウェブサイトでそれを見ることができるならば、あなたはあなた自身のサイトでそれを複製することができるでしょう。.
私が一番のアドバイスは ちょうどあなたの目を信頼する. お気に入りのウェブサイトのリストを作成し、それぞれを閲覧するのに5分かかります。お気に入りの要素をページに書き留め、それらがデザインにどのように影響するかを書き留めます。これはあなたを助けるでしょう UI / UXの観点からこれらの概念を内面化する, ユーザーの視点ではなく.
また、ものを試すことを恐れないでください！誰もデザインが上手くいかなかった ただ デザインに関する記事を読むことによって。はい、彼らは助けます - 彼らは実際に大いに役立ちます。しかし、あなたは 必要 に 何を学ぶために一からものを作る 作品 そして何 しない.
あなたが好むウェブサイトのレイアウトを研究して、そしてそれらを作り直すことによってあなたの目を訓練してください。時間が経てば、新しいサイトをより簡単に設計できるように、パターンライブラリを頭の中に構築します。.
まとめ
うまくいけば、これらのヒントはあなたが始められるようになり、あなたに従うべき基本的なロードマップを与えるでしょう。 Webデザイナーになるのは簡単ではありませんが、世界には才能が必要です。そして、これらの基本的な概念を自分自身で教えることがこれまでになく簡単になりました.
調査 あなたが楽しむページ要素を持つWebサイトの最良の例. 列車 関係を認識するための目 発達する 必要なスキル 複製する あなた自身の仕事におけるそれらの関係.
