すべてのウェブサイト構築のために焦点を当てるべき3つの重要な設計領域
公開: 2017-11-17ミニシリーズ「EffectiveDiviWeb Design Principles」の最後の投稿であるパート3へようこそ。ここでは、新しいWebデザイナーや、「デザインの目」がない人として認識できる人に力を与えるための効果的なデザイン手法を探っています。
デザインをよりよく監視する方法の準備と学習について説明し、ツールボックスに含めるいくつかの効果的なデザイン原則について説明したので、次のことを達成するための鍵となる3つの非常に重要なデザイン領域に焦点を当てます。うまく設計されたサイト。
さあ、始めましょう！
すべてのウェブサイト構築のために焦点を当てるべき3つの重要な設計領域
このシリーズの最初の2つの投稿についていくと、デザインに関しては正しいことも悪いこともないと私が指摘するのを聞いたことがありますが、私たちが行った効果的なデザインの原則に加えて、いくつかの重要なことがあります。 、毎回成功し、目を楽しませてくれるウェブサイトの構築を確実にするために私が焦点を当てているデザインの実用的な領域。 そして最良の部分は、これらのアイデアはあらゆるタイプの業界やウェブデザインスタイルに転用できるということです！
1）タイポグラフィとフォント
あなたのサイトは美しい画像、魅力的な色、そして心地よいデザイン要素を持つことができますが、タイプが見栄えが悪いか、サイトのスタイルに合わない場合、それは大きな抑止力になる可能性があります。 このシリーズではタイポグラフィの基本については触れていません。基本について詳しく知りたい場合は、すべてのWebデザイナーが知っておく（そして理解する）50のタイポグラフィ用語の投稿を参照してください。 カーニング、リーディング、トラッキング、サンセリフフォント、サンセリフフォントを理解することで、タイプとデザインを上手に使いたいと考えている人に大いに役立つでしょう。
デザインスタイルや業界が大きく異なるクライアントを抱えるDiviWebデザイナーとして成功するために、私が固執する実用的なタイポグラフィのガイドラインをいくつか紹介します。
サイトの業界/デザインとうまく調和するフォントを使用する–このシリーズの最初の投稿で、優れた画像と色を備えたサイトを自明にデザインしたが、フォントがうまく一致しなかった例を思い出しました。 要するに、それは工業製造現場であり、私が最初に使用したフォントは、実際に会社の外観やブランドに合わない、よりモダンで洗練されたスタイルでした。
これは、フォントでクリエイティブになれないことや、業界の現状に合わせる必要があることを意味するものではありませんが、実際には、専門のサービスサイトで作業している場合は、過剰なフォントは必要ないでしょう。関係するトップの芸術的なフォント。 逆に、ユニークで芸術的な雰囲気のあるものに取り組んでいる場合は、ArialやHelveticaが目的の雰囲気に合わない可能性があります。 これにより、フォントのミキシングとマッチングの次のポイントにたどり着きます。
2〜3フォントを使用する–何十年にもわたって長年の試練に耐えてきた基本的な設計原則は、使用するフォントの数を制限することです。 フォントが多すぎると読者の気が散り、階層が混乱し、率直に言って、無法者への報酬を求めている古い西洋のチラシのように見えてしまいます。 私はよくヘッダーとタイトルに1つのフォントを使用し、通常はすべての段落テキストに読みやすいサンセリフフォントを使用します。 メインメニューに3rdスタイルのフォントを使用することもありますが、メニューフォントはタイトルによって合理化されることがよくあります。
フォントをペアリングする方法の詳細については、Webデザインでのフォントペアリングに関する以前の投稿を参照してください。7つの主要な原則が明らかになり、説明されています。
テキストにビジュアルを持たせる–コンテンツに適切な量のテキストを含めることは素晴らしいことです。 実際、SEOの観点から役立つように、1ページあたり少なくとも300語にすることをお勧めします。 ただし、テキストが多すぎて視覚補助が不十分であることに注意してください。 本、ブログ、記事、その他の長い形式のコンテンツの場合、多くのテキストが予想されますが、魅力的なランディングページをデザインしている場合、コンテンツが多すぎると、ユーザーはそれ以上見る前に退屈します。 私はよく、フロントページはクライアントをドアから導き、さらに詳細な情報を得るために、より多くのページ、ブログ、その他のリソースに飛び込むことができるセールスファネルであるべきだという考え方で設計します。
エレガントなテーマのホームページは現在、その完璧な例です。
この例では、魅力的なタイトル、行動を促すフレーズのボタンが付いたテキストの段落、メッセージに結びついた素敵なビジュアルグラフィックが表示され、ユーザーの関心を維持しています。 これは、ビジュアルを使用して適切な量のテキストを整理する場合に従うべき優れた例です。
私はかつてテキストとビジュアルでデザインされた美しいフロントページを持っていましたが、それをクライアントに渡して基本的な編集を行うと、彼らは本の小さな章のように見えるものをフロントページにダンプし、デザインの流れを完全に台無しにしました私が作成しました。 ですから、それを教訓として、コンテンツは素晴らしいものですが、それに応じて配置する必要があることを知っておいてください。
参照すべきもう1つの優れたリソースは、2016年に注目すべき20のタイポグラフィトレンドです。これらのトレンドは今日でも非常に有効であり、今後も前進するでしょう。
2）画像と色の管理
タイポグラフィと同様に、私は自分のWebサイトのビルドで最大2〜3色の原色を使用する傾向があります。 ブランディングに色が多すぎる会社や組織でない限り、色が多すぎると（特に色がうまく一致しない場合）、非常に気が散り、混乱を招く可能性があります。 色と画像を混合するときに私が固執するいくつかのガイドラインは次のとおりです。
ベースカラーとアクセントカラー–最近のプロジェクトで非常に成功している方法の1つは、クライアントのブランディングを採用し、まだ行っていない場合は、行動の呼びかけやリンクなどに適したアクセントカラーを選択することです。サイトでは、ロゴのブランドをグレーとオレンジで採用し、オレンジを原色として「ポップ」にするために、微妙なダークティール/ブルーを追加しました。
画像で色を合理化–デザインと画像を素晴らしい方法でまとめる1つの方法は、Webサイトの色をいくつかの主要な画像と一致させることです。 この例は、ウェブサイトの色をクライアントの衣装に合わせることができたため、少し珍しいものでした。これにより、画像とウェブサイトの色の間に非常に流線型の感触が生まれました。
私はクライアントの衣装から素敵な栗色とオレンジ色を取り、サイト全体を素敵な統一された外観にまとめることができました。 これで、サイト全体を画像からブランド化できる状況になることはめったにありませんが、アクションの呼び出しなどで背景画像を使用する場合も、これと同じ原則を適用できます。
実際には、特定の色を選択する方法がわからない場合は、ここに10のカラーピッカーツールがあります
鮮やかすぎる色から離れてください–新しいデザイナーは、非常に明るい緑、ピンク、黄色などを使用して、目を細めて画面から遠ざけることがよくあります。 ここでは悪い例は指摘しませんが、色があなたを背かせ、決して振り返りたくないサイトをたくさん見たことがあると思います。 鮮やかな色には確かに何も問題はありません。その効果を放たないように注意してください。 これは、他の設計者から建設的な批判やフィードバックを得ることが報われる場所です。
私の推奨事項は、テキストや背景グラフィックなどの基本色にかなり中間色を使用してから、アクションの呼び出し、リンク、およびページデザインのより注意を引く領域に、より鮮やかな色を使用することです。 デザインに不慣れで、色が快適な領域ではない場合は、WordPress Webデザイナー向けのカラーマッチングテクニックを参照してください。色をより適切に選択する方法について、さまざまなオプションが用意されています。
3）強力な召喚状
最後に、Webデザインの非常に重要な領域の1つは、強力で明確な行動の呼びかけ（CTA）を持つことです。 悪いウェブデザインの最も一般的な問題の1つは、明確な行動の呼びかけがない、重いテキスト主導のコンテンツを持つことです。 コンテンツは素晴らしいですが、それがすべての情報であり、変換がない場合、クライアントは確かに満足しません。 アクセントカラーやホバー効果を使って、CTAをデザインの他の要素から際立たせることをお勧めします。
これは、最近のクライアントに対して召喚状を実装した例です。
この場合、ウェブサイトユーザーに対するクライアントの主な行動の呼びかけは、電子メールの更新にサインアップすることです。そのため、すぐに暗い背景画像からロゴが飛び出し、すぐにサインアップする機会があります。下にスクロールする前に。 理想的には、行動を促すフレーズにユーザーの目を引き付けたいと考えています。 鮮やかなアクセントカラーやサイトへの効果が非常に有益なのはそのためです。
行動を呼びかける際に私が固執するいくつかのガイドラインは次のとおりです。
強力な行動を促すフレーズでホームページを終了する–多くの場合、私のホームページのデザインは、サイト全体の要約に近いものです。 たとえば、サイトの構造が次のような場合：
- 私たちに関しては
- サービス
- お客様の声
- ブログ
- コンタクト
ホームページのこれらのセクションごとに行動を呼びかけ、次にメインの行動を呼びかけるための最終的な洗練されたデザインを作成します。この場合は、サインアップします。 これが私が意味することの典型的な例です：
フロントページは基本的にサイト全体をカプセル化し、ユーザーがクリックしてギャラリー、ビデオ、その他の情報を表示するための開始点です。 おそらく、その考え方はあなたのホームページのデザインのようにあなたを助けるでしょう！
サイドバーに召喚状を提出する–サイドバーに強力な召喚状を提出する機会を忘れないでください。 特に、サイドバーを頻繁に使用するブログ投稿やその他のページがあるサイトがある場合。 これは、追加の電子メールサインアップ、寄付ボタン、または別のメインCTAへのリンクを配置する絶好の機会です。
上記のサイトと同様に、私の個人サイトの主な行動の呼びかけの1つは、電子メールのサインアップです。これは私のホームページの前面と中央にありますが、ブログ投稿とチュートリアルページでもそれを明確にしたかったのです。 。
ここでは、各投稿テンプレートの右上に、メインのサインアップフォームの上下に強力なビジュアルが表示されています。 したがって、サイドバーのあるページがある場合は、それらの領域が強力な行動を促すための貴重な不動産であることを忘れないでください。 また、CTAを目立たせ、できればメインコンテンツの下のモバイルで最初に表示されるサイドバーの上部に表示するようにします。
サブページのコンテンツの後に召喚状を提出する–最後に、おそらく最も見過ごされているのは、通常のページで召喚状を提出することを忘れないことです。 私は、最近クライアントから要求されたときまで、これを自明に見落としていました。 以下の例では、メインサービスページの最後に強力な召喚状があります。
ウェブサイトのユーザーがそのページを表示すると、すべての情報が取り込まれ、右側の素敵な歓迎の画像と、そのセクションに役立つ鮮やかなオレンジ色に裏打ちされた左側のCTAボタンに興味がある場合は、クライアントに連絡する機会があります。ページをポップオフします。 はい、以前の投稿で、通常はCTAを中央または右に配置すると言っていましたが、このレイアウトはうまく機能しているように見えました
シリーズまとめ
このシリーズが、Webデザインの取り組みに適用できる優れたWebデザインの原則と戦術に刺激を与えてくれることを願っています。 ミニシリーズ全体で行ったことを簡単に要約してみましょう。
パート1
- あなたの考え方を準備する
- 良いデザイントレンドを学ぶ方法
- あなたの仕事に対するフィードバックと建設的な批評を得る
パート2
- 三分割法に従う
- レイアウトとフロー
- 視覚的階層
パート3
- タイポグラフィとフォント
- 画像と色
- 強力な召喚状
繰り返しになりますが、学術研究全体が優れたデザインに専念しているため、ここでは表面をかじっただけですが、これらの原則と実践が、正しい方向にデザインを上達させたいと考えている皆さんを指し示すのに役立つことを願っています。 共有したい他の設計原則または方法がある場合は、以下のコメントでお気軽にお知らせください。
これが私たち全員が毎日より良いDiviWebデザイナーになることです！
大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。