「非デザイナー」のための3つの効果的なウェブデザインの原則

公開: 2017-11-16

ミニシリーズ「EffectiveDiviWeb Design Principles」のパート2へようこそ。ここでは、新しいWebデザイナーや、「デザインの目」がない人として認識できる人に力を与えるための効果的なデザイン手法を模索しています。

前回の投稿では、考え方の準備について説明し、デザインに対するより良い目を開発する方法を学ぶいくつかの方法について説明しました。この投稿では、Webデザインの「デザイン」側でより良くなるために、Webデザインの取り組みにすぐに適用できる優れたデザインのいくつかの普遍的な原則に焦点を当てます。

さあ、始めましょう！

「非デザイナー」のための3つの効果的なウェブデザインの原則

このシリーズのパート1で述べたように、デザインに関しては正しいことも悪いこともありません。この投稿で取り上げる内容は、Webデザインコミュニティ全体で優れたデザイン原則として広く広く受け入れられています。これは、グラフィック/プリントデザイナーがDivi Webデザイナーに転向し、10年近くの経験があり、さらに重要なことに、何百人もの幸せで満足しているクライアントとしての私の個人的なガイドラインでもあります。私はこれらの原則を私が構築するすべてのDiviWebサイトのデザインに採用しています。ひどいものや壁から離れたものを望んでいるクライアントは常にいますが、これらは少なくとも10回のうち9回は役に立ちます。

1）三分割法

ウェブデザイン、グラフィックデザイン、印刷デザイン、写真、その他のクリエイティブなメディアで最も一般的な方法の1つは、1つの単純なルールである三分割法に従うことです。要するに、三分割法はすべて対称性とバランスに関するものです。三分割法の目的は、デザインのバランスと調和を高めることを目的としています。そして最良の部分は、三分割法をグラフィック、画像、Webページ全体のレイアウトなどに適用できることです。

三分割法が科学的であるかどうかについてはオンラインで多くの会話がありますが、それにもかかわらず、画像やデザインが左半分と右半分、または上と下の両方で類似しすぎると、聴衆はそれを見つける可能性があると一般的な意見が示しています退屈または退屈。どちらかといえば、三分割法はそれを面白く保ち、以下でカバーする良い流れにつながる可能性があります。

Divi Webコンテンツを最適化するためのデザインのヒントに関する以前の投稿では、グリッドシステムとしても参照されており、視覚的に考えるのに最適な方法です。次のようなグリッドを想像してみてください。

この架空のグリッドを画像、グラフィック、またはレイアウトに配置すると、1つ以上の主要な交点の近くにコンテンツを簡単に配置できます。

オブジェクトと焦点を4つの交点のうちの1つ以上に維持すると、被写体が交点の下にある2番目の例とは対照的に、はるかにバランスの取れた対称的な外観が得られることがよくあります。下の画像を見てください。最初の例は、三分割法に従っていません。

この例は、三分割法に従っています。

最初の例はまだ素晴らしい画像ですが、三分割法を使用すると、三分割法で前景と下の交点を交差させることにより、画像にまったく異なる感触を与えることができます。三分割法のグリッドで画像を見てみましょう。

それでは、三分割法のルールを並べずに画像を見てみましょう。

目を楽しませてくれるデザインが1つまたは複数の交点とどのように並ぶかに関して大きな違いがわかります。三分割法は写真やビデオ撮影で最も一般的に話題になっていますが、ウェブサイトのデザインでも同様に重要です。三分割法を私の個人サイトにどのように適用したかをお見せします。これは、「折り目の上の」初期デザインのスナップショットです。これは、下にスクロールする前に視聴者が見るものに適用されます。

それでは、三分割法をメインセクションに配置して、どのように見えるかを見てみましょう。この場合、三分割法を実装したプライマリメニューの下のコンテンツに焦点を当てます。

この例では、交点上または交点の近くに4つの主要な要素があります。要するに、私は次のことを強調したかったのです。

私が誰であるか、そしてこのサイトが何であるかについての簡単な説明。
新しいユーザーが誰から話を聞くかを確認することで、より快適で信頼できると感じることができる写真。
人々にサインアップする理由を与える私の最新の電子書籍のグラフィック。
最後に、召喚状の電子メールは、ユーザーの目が終わる最後の2フレームでサインアップします。

三分割法では、すべての交点（特に写真撮影）に何かを配置することは一般的にベストプラクティスではありませんが、Webサイトのビルドではこのレイアウトに従うことがよくあります。ちなみに、私たちは左から右に読んでいるので、画面の中央または右側に行動を呼びかけることがよくあります。それが私たちの目が終わる場所だからです。このシリーズの最後の投稿で、行動の呼びかけについて詳しく説明しますが、これは、三分割法を設計に実装した良い例です。

したがって、Webページのレイアウト方法がわからない場合や、画像、テキスト、およびおそらく行動の呼びかけの混合に苦労している場合は、三分割法に従って、それをガイドにしてください。

2）レイアウトとフロー

Webページのレイアウトとデザインに関しては、正しいスタイルも間違ったスタイルもありません。それは多くの場合、プロジェクト、クライアントの希望、デザインスタイル、そして多くの場合、ターゲットとする市場によって異なります。多くの場合、デジタルやWebデザインエージェンシーのようなサービスでは、ファッションや写真は、ミニマルなルックアンドフィールを備えたよりモダンでトレンディなデザインです。モダンなデザインでは、多くの場合、より多くのオープンスペース、より少ないテキスト駆動型コンテンツ、より多くの画像、そしておそらくより多くのスクロールがもたらされます。（私の昔ながらのクライアントの何人かはただ身震いしました！）

製造業、法律事務所、ブルーカラー業界などのより伝統的なビジネス市場では、テキスト主導のコンテンツが多く、オープンスペースが少なく、間違いなく魅力の少ない画像やデザイン要素を備えたWebサイトが見つかります。そして、何らかの理由で、これらの業界の私のクライアントの大多数は、過度のスクロールに厳しく反対しています。したがって、フローの良いレイアウトを設計する方法を知ることが重要です。私は自分のクリエイティブなデザインスタイルと、クライアントの業界内で機能するもの、ターゲット層、クライアントの要望やニーズとのバランスをとる必要があることに気づきました。とはいえ、誰と一緒に仕事をしていても、どの業界に所属していても、適用できる基本的なレイアウトとフローの原則がいくつかあります。

上記の前回の投稿を振り返ると、従うべき非常に重要なガイドラインは、デザインのzパターンです。これは、毎週提供される新しいプロのDiviレイアウトキットの多くで頻繁に見られます。

私が何を意味するのか見てみましょう。

左側の最初の例では、左側に画像があり、右側にテキストがあり、アクションボタンが表示されています。目が下に表示され、左側にテキスト/ CTAの別のセクションが表示され、右側に別の画像が表示されます。そして繰り返します。逆に、右の画像では、逆のパターンがあります。テキストから画像、画像からテキストなど。このzスタイルのパターンに従うことは、読者の関心を維持するための優れた方法であり、テキストと画像のバランスをとるための優れた方法です。

これは、優れたページデザインのフロー内レイアウトの唯一のオプションではありませんが、コンテンツを左から右、次に下に取り込むことをお勧めします。次に、左から右、次に下へというように続きます。したがって、疑わしい場合は、ページコンテンツのフローを整理する方法として、zスタイルのパターンに従ってみてください。そして、スクロールに関する最後の注意点–私は自分のサイトを3-5スクロール以内に保つ傾向があります。多くの場合、スクロールしなければならないほどページが大きくなり、読み込みが遅くなります。繰り返しになりますが、スクロールに関しては正しいことも悪いこともありませんが、昔ながらの考え方のクライアントとまだ仕事をしていない場合は、何らかの反対に遭遇することが保証されています。私はそれらのクライアントにスクロールが恐れられるべきではないことを再確認しようとします。ソーシャルメディアは、絶えずスクロールしてコンテンツをすばやく取り込むように私たちを訓練してきました。

3）視覚的階層

ここで指摘したい最後の主な原則は、視覚的な階層です。つまり、階層は、ユーザーが最も重要な情報が何であるかを知るのに役立ち、デザインのどこに目を向けるべきかについて非常に明確な方向性をユーザーに提供します。階層はタイポグラフィ（3番目の投稿で取り上げます）で参照されることがよくありますが、グラフィック要素、画像、およびサイトの全体的なデザインでも非常に重要になる可能性があります。

「良いデザイン」部門に欠けていると感じるサイトを意図的に指摘するつもりはありませんが、すべて同じサイズで明確でないテキストや画像が大量にあるサイトに出くわしたことは間違いありません。行動を呼びかけますよね？それは私たちが避けたいことです。適切な階層を使用することは、Webサイトのユーザーが何をクリックするか、次に何をすべきかを知るための最良の方法です。

階層を念頭に置いて作成した最近のデザインの例を次に示します。

右上のロゴと電話番号は明らかに大きくて目に見えますが、折り目の上の最大のコンテンツと最も鮮やかな色は、ボタンをクリックするための行動の呼びかけです。

私のクライアントは、サイトにアクセスしたときに簡単に検査を要求できるように特に望んでいたので、この視覚的な階層のアイデアを使用して、うまくいけばそれを達成しました！私が最近階層をどのように使用したかの別の例は、このサイトの折り目の上のデザインです。

この場合、クライアントの主な行動の呼びかけは、オンラインで購入するか、直接連絡することです。ロゴ、簡単な説明、さらには電話番号も一般的ですが、Diviダブルボタンは、ユーザーがそれ以上スクロールしない場合に探しているものをクリックしてもらうことを期待して、最初に表示される最大の要素です。

繰り返しになりますが、これらは視覚的な階層のほんの一例ですが、Webサイトのユーザーに、やりたいことをしたり、行きたい場所に行ったりするように指示するのに非常に強力な方法です。余談ですが、避けるべき一般的なWebデザインエラーに関する以前の投稿を確認することを強くお勧めします。

最後に

これらの効果的なデザインの原則が、Webデザインを初めて使用する場合でも、デザインを上達させたいと考えている場合でも、デザインの取り組みに役立つことを願っています。繰り返しますが、私たちが乗り越えることができる多くの原則がありますが、これらは私のすべてのウェブサイトのデザインに実装しようとするトップ3です。

他に共有したい設計原則がある場合は、以下のコメントでお知らせください。

明日：すべてのウェブサイト構築に焦点を当てる3つの重要な設計領域

考え方の準備、デザインをよりよく理解する方法を学び、いくつかの基本的なデザイン原則を確認したので、最後の投稿では、Webデザインの最も重要な側面のいくつかを探求します。すべてのウェブサイトが構築されます。それまで！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。