ランダムな色をデザイン方向に変える

1. 1つの文でデザインチャレンジを書く

何をデザインしているかを知るまで色を生成しないでください。チャレンジがなければ、結果をあなたが個人的に好きかどうかでのみ判断できます。明確なブリーフにより、色が特定の視聴者、メッセージ、アクションをサポートできるかどうかを判断できます。

プロジェクト、視聴者、および望まれる応答を含む1つの文を書いてください。例えば「独立系フォトグラファーが彼らのサービスをプロフェッショナルでありながらアプローチ可能なものとして提示するのを助けるランディングページを作成する。」別のブリーフは「大学の学生に地元のリサイクルプログラムに参加するよう奨励するキャンペーンアイデンティティをデザインする」かもしれません。

あなたの文は色を説明する必要はありません。コミュニケーション問題を説明すべきです。これにより、すべての生成結果を事前に決定されたビジュアル答えに強制することから身を守ります。

プロジェクトが新しいビジネスアイデアに接続されている場合、オンラインビジネスを立ち上げる前に行うべき12の決定をカバーするガイドは、デザイン開始前に視聴者、オファー、カスタマージャーニーを明確にするのに役立ちます。

2. 終わりのないスクロールなしに色を生成する

ランダムカラージェネレーターを開いて、いくつかの結果を作成してください。危険は、ツールが既に望んでいた色を表示するまで続けることです。それはランダムな探索を、既存の好みの偽装された確認に変えます。

開始する前に停止ルールを確立してください。正確に5つの色を生成し、3番目の結果を展開することを決定するかもしれません。別の方法は、6つの候補を保存し、ランダムナンバージェネレーターを使用して1から6の数を選択することです。

ランダムな選択は、使用不可な結果を公開する必要があることを意味しません。それは、再度生成ボタンを押す前に、選択された色を真剣に調査することに同意することを意味します。再度生成ボタンをすぐに押す代わりに、その可能性を調べるのに少なくとも15分を費やしてください。

選択された色と生成番号をメモに記録してください。これにより、演習に明確な始まりが与えられ、プロジェクトが接続されていないスクリーンショットの終わりのない収集になることを防ぎます。

3. 使用可能な形式で色を記録する

スクリーンショットは適切な色レコードではありません。生成されたHEX、RGB、HSL値を作業用ドキュメントにコピーしてください。各形式は同じ表示色を異なる方法で説明し、ワークフローの異なる部分で有用である可能性があります。

MDNのCSSカラー値のガイドは、16進数表記、rgb()、hsl()、および新しいカラー関数を使用して色をどのように表現できるかを説明しています。

元の値を変更せずに記録してください。後で補助バリエーションを作成しますが、初期結果は演習全体を通じて参照ポイントとして利用可能なままであるべきです。

4. 名前の代わりにその特性を研究する

色の名前は一貫していません。ある人の「オーシャンブルー」は別の人のティール、ターコイズ、またはシアンかもしれません。名前について議論する代わりに、色がどのように動作するかに影響を与える特性を調査してください。

明度から始めてください。色は、暗い前景、淡い背景、または中間色のアクセントに自然に適していると感じられますか? 次に彩度を確認してください。彩度が高い結果は、強い強調を作成する可能性がありますが、大きな領域で使用するときに疲れる可能性があります。くすんだ色は落ち着いた雰囲気を作成する可能性がありますが、重要なアクションの周りでより強いコントラストが必要です。

最後に、温度と周囲の関係を考慮してください。色は暖色か寒色に傾いていますか? 純粋な白、温かいグレー、チャコール、黒の隣でどのように変わりますか? 色が実際のデザインに入ると、分離されて表示されることはありません。

5. ステレオタイプに頼らずにムードを構築する

「青は信頼を意味する」、「緑は自然を意味する」、「紫は贅沢を意味する」などの普遍的な主張を作成することは魅力的です。これらの関連性は時々有用かもしれませんが、固定されたルールではありません。意味は文化、文脈、業界、タイポグラフィー、画像、および周囲の色によって変わります。

1つの感情をすぐに割り当てる代わりに、2つか3つの可能な解釈を作成してください。くすんだ緑は自然なスキンケア、経済的安定性、または教育アプリケーションをサポートする可能性があります。強いオレンジは、1つのプロジェクトでは親しみやすさを通信し、別のプロジェクトでは緊急性を、3番目では安いエネルギーを通信する可能性があります。

各可能な解釈について3つの形容詞を書いてください。次に、これらの形容詞を元のデザインチャレンジと比較してください。色とプロジェクトの間で最も有用な関係を作成する解釈を選択してください。

この方法により、同じ色は、それが1つの普遍的な心理的意味を持っていると主張することなく、異なるストーリーをサポートすることができます。

6. 色のプロジェクトコンセプトを作成する

実際のクライアントの練習ではなく練習のために演習を使用している場合は、色に架空のプロジェクトを提供してください。プロジェクトコンセプトは、魅力的でありながら説明のないムードボードを作成する代わりに、視聴者、トーン、レイアウト、コンテンツについての決定を下すことを強制します。

名前ジェネレーターを使用して、架空のアプリケーション、カフェ、衣類ラベル、キャラクター、イベント、またはサービスの名前を作成してください。次に、プロジェクトが何を提供するか、そして誰がそれを提供するかについての短い説明を書いてください。

単に色を説明しているという理由だけで名前を選択することを避けてください。すべてのグリーンコンセプトを「フォレスト」と呼んだり、すべてのブルーコンセプトを「オーシャン」と呼んだりすることは、創造的な方向を制限します。名前はプロジェクトを説明すべきですが、色はその個性に貢献します。

あなたのコンセプトはシンプルなままできます。「Northlineは、複雑なプロジェクト管理ソフトウェアなしにクライアントのデッドラインを整理する必要があるフリーランサー向けのプランニングアプリケーションです。」これは意図的なビジュアル選択を始めるのに十分な文脈です。

7. 色をビジュアルルールに翻訳する

デザイン方向はパレット以上を含みます。タイポグラフィー、間隔、形、アイコンスタイル、写真、モーションはすべて、選択された色がどのように解釈されるかに影響を与えます。

先の角が無い、圧縮されたタイポグラフィー、高いコントラストの写真とペアにされた鮮やかな黄色を想像してください。それはエネルギッシュで破壊的に感じるかもしれません。同じ黄色は、丸いカード、寛大な間隔、親しみやすいイラストと組み合わされ、楽しく親しみやすく感じるかもしれません。

1つの見出しスタイル、1つの本文テキストスタイル、2つのボタン形状、サンプルカード、画像リファレンス、および選択された色を含む小さなディレクションボードを作成してください。すべての決定は、ステップ5で選択した同じ3つの形容詞をサポートすべきです。

結果がプロフェッショナルなケーススタディになる場合、あなたの価値を証明するオンラインポートフォリオを構築する方法に関するガイドを確認してください。強いケーススタディは、磨かれた最終画面のみを表示する代わりに、チャレンジ、制約、および方向の背後にある推論を説明します。

8. 色がどれだけ表示されるかを制御する

色は小さなボタンで美しく機能し、ページ全体に適用するとすぐに圧倒的になる可能性があります。より多くの画面を開発する前に、ランダムな色がどれだけの視覚的スペースを占めるべきかを決定してください。

60-30-10コンセプトは、始まりの練習を提供できます。支配的なファンデーションに約60パーセント、サポート領域に30パーセント、アクセントに10パーセント。それは普遍的な法則ではなく、インターフェースレイアウトはめったに完全な数学的ブロックに分割されません。その価値は、比率について考えることを強制することにあります。

大きなビジュアル領域の配置やプレゼンテーションの配布を推定する場合は、パーセンテージ計算機を使用してください。さらに重要なのは、視聴者の注意が最初に向かう場所を検査することです。

彩度が高いランダムな色は、通常、より小さな量で最もよく機能します。ソフターカラーは、テキストとコントロールが明確に区別可能である限り、より大きな表面を覆う可能性があります。

9. ニュートラルを追加し、機能的な役割を割り当てる

ランダムな色には、背景、表面、テキスト色、境界線からのサポートが必要です。選択された色を複数の同じくらい強い競争相手に囲む代わりに、限定されたニュートラルファンデーションを追加してください。

次に、ランダムな色が実際に何をするかを決定してください。プライマリアクション、選択されたナビゲーションアイテム、チャートハイライト、または装飾用イラストを識別する可能性があります。明確な理由なしに、1つの場所で「対話的」を意味し、別の場所で「装飾的」を意味することを許可しないでください。

Googleのマテリアルデザインのカラーロールのガイダンスは、パレットを構造化されていないスウォッチのコレクションとして扱うのではなく、目的に応じて色を割り当てることの価値を実証しています。

10. 1つのリアルなデザインサンプルを作成する

ムードボードだけから方向を承認しないでください。本物のテキストと機能的な要素を含む1つの小さく、リアルなアーティファクトを作成します。これは、ランディングページのヒーロー、モバイルプロファイル、プロモーションカード、イベントポスター、またはアプリケーションダッシュボードである可能性があります。

コンセプトがソーシャルアイデンティティを必要とする場合、Instagramユーザー名ジェネレーターは、モックプロジェクトで利用可能な命名スタイルを探索するのに役立ちます。リアリスティックなプロファイルヘッダーまたはキャンペーン投稿内に選択されたユーザー名を配置し、分離された装飾として表示する代わりに。

また、QRコードジェネレーターで機能的なテストを作成できます。ポスター、名刺、またはパッケージングコンセプトにQRコードを追加し、デザイン方向が実用的な要件を生き残るかどうかを確認してください。QRコードと背景の間に強いコントラストを維持し、明確な周辺スペースを保存し、複数のデバイスで最終出力をスキャンしてください。

実際のコンテンツは弱さをすばやく露出します。大きな長方形で印象的に見える色は、ボタンラベルの後ろで使用されるとき、写真の隣に、または小さいモバイルコンポーネント内に失敗する可能性があります。

11. 方向をCSSに移動する

コンセプトがウェブサイト向けの場合、選択した値をCSSカスタムプロパティとして記録してください。別の人が各色が存在する理由を理解できるように、セマンティック名を使用してください。

:root {
  --color-page: #f7f7f4;
  --color-surface: #ffffff;
  --color-text: #1d1e20;
  --color-text-muted: #63666b;
  --color-primary: #7b4de3;
  --color-on-primary: #ffffff;
  --color-border: #d9d9df;
}

コンポーネント内でテストした後にのみ、ホバー、押下、選択状態を作成してください。Smashing Magazineの記事CSSカラーミックス()でパレットを簡素化するは、文脈的なバリエーションがどのように既存のテーマ色から導き出せるかについて論じています。

導き出された値はまだビジュアルとアクセシビリティテストが必要です。自動混合は一貫性のある関係を作成することができますが、すべてのテキスト、アイコン、背景の組み合わせが十分に明確であるかどうかを決定することはできません。

12. 最終方向をストレステストしてドキュメント化する

元のプレゼンテーションより見栄えが悪い状況で方向をテストすることで終了します。小さいスクリーンで表示し、ボタンの内側に長いテキストを配置し、補助写真の品質を低減し、明るく薄暗い環境でデザインを比較してください。

他の人に、彼らが最初に気付くもの、それが表現していると思うプロジェクトの種類、どの要素が対話的に見えるかを尋ねてください。あなたの意図を説明することによって始めないでください。彼らの援助されていない解釈は、視覚的なシステムが計画していることを通信するかどうかを明らかにします。

元のランダムな色、最終的な色値、プロジェクトブリーフ、選択された形容詞、機能的な役割、拒否された方向、および重要な変更の理由をドキュメント化してください。これは楽しい演習を繰り返可能なデザイン証拠に変えます。

最後に、明確な決定を下します。採用、改訂、または拒否。生成された色がプロジェクトをサポートできないことをテストが示している場合、拒否することは許容されます。テストが新しい可能性をを規律を持って調査するのに役立った場合、演習は成功しています。