キャンペーンと群れを区別するための5つのデザインのヒント

募金キャンペーンを公園から追い出す必要があるときは、デザインがすべてです。 それがなければ、注目を集め、信頼を築き、あなたの目的のために行動を起こすことははるかに困難です。

それでも、ウェブサイトが優れたデザインの基準を高め続けるにつれて、消費者の期待も高まります。 今日、キャンペーンのデザインでは、この基準を満たすだけでなく、サポーターを本当に「驚かせる」ことが不可欠です。

しかし、この目標は疑問を投げかけます。「優れたデザイン」はどのように見えるのでしょうか。 Design forFoundersの所有者および運営者であるHeidiPunは、組織がデザインを単なる視覚的美学以上のものと見なすことを奨励しています。

これはあなたの非営利団体に簡単に適応できます。 あなたは、資金調達キャンペーンのデザインが新しい支持者を引き付け、より多くの寄付を引き出​​し、そしてあなたのコミュニティからの行動を奨励することを望んでいます。

視覚的に喜ばれ、コミュニティに行動を促すキャンペーンを作成できるように、次のレベルに進むための5つのデザインのヒントをまとめました。

構造がすべてを指示する

すべての優れた映画は、観客を最初から最後まで旅に連れて行くように設計された構造に従っています。 この道に沿って、彼らは画面上で何が起こっているのかを理解し、キャラクターとの感情的なつながりを築き、映画の解像度の閉鎖を見つけるために必要な情報を与えられます。

映画の横に並べると、募金キャンペーンはそれほど変わりません。 あなたの非営利団体の背景、関係者、寄付を通じて彼らがもたらす影響を支援者が学ぶ旅にあなたの支持者を連れて行くようにあなたのページをデザインしてください。

また、良い映画のように、人々が迷子になったり混乱したりしないようにキャンペーンを構成する必要があります。 ほとんどの設計者は、観客の目を上から下に導き、その間のすべてに当たる階層を構築するというアイデアを支持しています。

Classyの新しい資金調達スイートには、この階層の概念が組み込まれていますが、これは標準的なアプローチです。

• ヘッダーの会社のロゴ
• 大きなヒーロー画像
• 募金プログレスバーと組み合わせた、ボタンの「今すぐ寄付」するための行動の呼びかけ
• 組織とキャンペーンに関する関連情報
• 寄付が具体的にどのように役立つかを説明するインパクトブロック
• 組織に関する追加の背景情報
• 最近の寄付などの募金キャンペーン活動
• 連絡先情報とブランディングが記載されたフッター

テリーがアドバイスするように、あなたはあなたの資金調達キャンペーンが、素晴らしい映画のセリフのように、記憶に残り、共有できるものであることを望んでいます。 ただし、構造がないと、キャンペーンは文字化けし、覚えにくく、共有できなくなります。

デザイン階層が組み込まれている場合、フォント、配色、視覚効果、画像など、ページの他の部分を実行するためにデザイン作業を費やすことができます。

必要なのは3つのフォントだけです

多くのデザイナーは、タイポグラフィがすべてのデザインの95パーセントであると主張しています。 そのため、選択したフォントは、キャンペーン全体の美的感覚の95％に影響を与える可能性があります。 ただし、選択肢が非常に多い場合は、適切なフォントを選択するという決定は圧倒されるように思われるかもしれません。

難しいのは、TimesNewRomanとCalibriのどちらかを選択することではありません。 むしろ、ブランドのロゴ、色、募金キャンペーンのメッセージと見た目に調和するフォントを選択しています。

たとえば、募金キャンペーンが放棄された動物の家を見つけることを中心に展開している場合は、フォントImpactを使用したくないでしょう。 それは難しく、大胆で、あなたに全力でやって来ます。

この例では、Verdanaのように、文字の周りに余裕のあるフォントを検討することができます。これは、はるかに軽い感触を持っています。

Heidi Punは、ページに2つのフォントを推奨していますが、3つで済ませることができます。 使用するフォントが多いほど、ページがばらばらになり、混乱する可能性があることを覚えておいてください。 次の場合は別のフォントを使用します。

• ヒーローブロック
• 見出し
• 本文のコピー

キャンペーン階層を上から下に流すのに役立つ、よりすっきりとしたデザインのテキストを提供します。 現在、Classyプラットフォームには、一貫性のあるページのために選択できる7つのフォントがあります。

あなたの聴衆がスムーズで前向きな読書体験をすることを確実にするためにあなたの選択を3つに制限してください。 選択するフォントは、キャンペーンの色と同様に、伝えるストーリーの感情的な感触に影響を与えます。

補色を選択してください

色は特定の感情を伝えます。 フォントと同様に、選択を戦略的に行い、使用する数を制限する必要があります。 キャンペーンページで訪問者を圧倒したり混乱させたりしないように、サイトには2〜3色、最大5色を使用してください。

使用する色を特定するには、一緒に機能する配色を検討することが重要です。 たとえば、同じページにあるライムグリーン、マスタードイエロー、ネオンピンクは目を楽しませてくれません。

組み合わせたときに色が意味をなし、キャンペーンの全体的なテーマに貢献できるようにする方法がいくつかあります。 選択した色が組織にどのように結びつくかを検討し、Coolors.coやAdobe Color CCなどの配色ジェネレーターを使用して、補色のセットを見つけます。

使用する配色ジェネレーターに関係なく、各色には16進カラーコードが付加されます。

新しいFundraisingSuiteを使用すると、16進カラーコード識別子をコピーして貼り付けて、ページにすばやく組み込むことができます。

キャンペーンをペイントして、目的の感情に合わせます。 これにより、ストーリーをより効果的に伝え、サポーターからのエンゲージメントを高めることができます。

効果は微妙である必要があります

募金ページをデザインし、色や効果を微調整するとき、心の最前線に置きたい言葉は微妙です。 効果が微妙であるほど、デザインの美しさがきれいになります。

募金ページでは、視聴者を直接的かつ的確な旅に連れて行く必要があることを忘れないでください。 色やフォントと同様に、メインメッセージが背景にフェードインしないように、視覚効果を使用してシンプルさの側面で放映したいと考えています。

デザインの最近の傾向を考えると、Classyの新しい資金調達スイートには、画像の不透明度、ぼかし、背景色の3つの一般的な視覚効果が組み込まれています。 キャンペーンの特定の部分を他の部分よりも目立たせるために、これらの効果の1つまたは2つをサンプリングすることをお勧めします。

Classyプラットフォームが利用するもう1つのデザイントレンドは、ほとんどのWebサイトで見られる固定効果とカバー効果です。 前景色のブロックとテキストがその上をスクロールしたり、覆ったりしている間、背景画像を所定の位置に固定します。

また、ネガティブスペースまたはホワイトスペースも忘れないでください。 これは、特定の画像など、キャンペーンページの特定の要素に目を向けるためのデザインツールとしての空きスペースの使用です。

あなたの画像はあなたを定義します

フォント、色、視覚効果と同じくらい重要なのは、ページに入力する画像です。 非営利団体のメッセージを具体化した高品質の画像なしでページを作成しないでください。

Classyは、写真を使用するための無料のライセンス付きライブラリであるPixabayを新しい資金調達スイートに統合し、使命に合った画像を見つけるのに役立てています。

さらに、パーソナルライブラリにある画像は、ヘッダーまたはヒーローの画像スロットに直接アップロードしたり、本文のテキストブロックに直接アップロードしたりできます。 さらに少しスパイスを加えるために、通常の画像をアップロードできる任意の場所にGIFをアップロードすることもできます。これらは、固定スクロールとカバースクロールでも機能します。

それを映画の比喩に戻すには、あなたの画像を映画の主役と考えてください。 これらは、あなたが生み出したものに注意を払うために時間、エネルギー、そして努力を費やすために人々を一目で引き付けるものです。

構造からフォント、色、視覚効果、画像に至るまで、ページ上のすべてのデザイン要素が連携して機能し、視聴者の利益になります。 最終目標に関係なく、これらの設計のヒントは、構成員が行動を起こすように促すのに役立ちます。

新しい資金調達スイートは、上から下への動きをデザインするためのクリエイティブなコントロールを提供します。 詳細に興味がありますか？ 今すぐ無料のClassyアカウントにサインアップして、自分で試してみてください。