すべての設計者が知っておくべき20の設計要素と原則

デザインがコントロールされすぎていた時期がありました。 パターンが多すぎます。 安全すぎる。

しかし、進化は避けられず、デザイナーはもう少し実験を始めました。

そこから、デザインはより大胆でより良いものになりました。 デザイナーは、オーディエンスの行動の背後にある科学を深く掘り下げ始め、市場の要求に柔軟に対応できるようになりました。

「今日、デザインは単なるパターンやトレンド以上のものになっています。 ライフスタイルになっています。 」 すべての人間の反応とルーチンに注意深く織り込まれている何か。 そして、このライフスタイルに伴う複雑さの下には、この世界をより創造的で美しい住む場所にする20の異なるデザイン原則があります。

それらの原則と、それらを設計に利用するためのヒントを見てみましょう。

線

あなたの周りのどこかを見ると、線が見えます。 コンピューター画面の端。 キーボードの各キーの側面。 それらのキーの文字でさえ、線で構成されており、まっすぐなものもあれば、湾曲したものもあれば、斜めになっているものもあります。

それがまさに重要な線です。 それらがなければ、すべてが無限に混ざり合い、世界を単一のブロブにします。

線がすべての形を定義しているという事実を除けば、線をさらに驚くべきものにしているのは、それらが同等の反応を求める感情やアイデアにも変換されるという事実です。 たとえば、直線の垂直線の横に波線を配置すると、一方の側で秩序と強さを、もう一方の側で混乱と混乱について考えるようになります。 これは、特定の行動の呼びかけに応答するように視聴者に促す場合に非常に役立ちます。 彼らの気分や感情が設定された瞬間、あなたの行動への呼びかけをただ巡航するのは簡単です。

ウェブデザインで線が果たすもう1つの役割は、線が各ページの焦点に向かって聴衆の目を導くという事実です。 たとえば、他の小さなテキストの海にあるブランドの名前の下にある強い先頭の線は、その名前を目立たせるのに役立ちます。

規模

スケールは、単一のデザインでさまざまな要素のサイズを決定する方法を定義します。 それは基本的にロジックを断片化するか、それを取り除きます。 たとえば、犬のすぐ隣に蟻を描く場合、犬を蟻よりもずっと大きくすることは意味があります（デザインが現実から離れることを指示していない限り）。

スケールは、ドラマを作成するための最良の方法でもあります。 上で示唆したように、リアリズムから離れて、一部の要素のサイズを他の要素よりも大幅に小さくしたり大きくしたりして、見事な効果を作成する必要がある場合があります。

スケーリングは、階層を強調するための優れた方法でもあります。 たとえば、映画のポスターを考えてみましょう。 主要な役割を持つ俳優は、通常、他の俳優よりも写真が目立つようになっています。これは、サポートする俳優よりも背が高い、または大きいからではなく、キャラクターの方が重要だからです。

さて、あなたがたくさんの写真ではなく、たくさんのテキストを特徴とする何かに取り組んでいるとしましょう。 スケーリングは、他の詳細よりもいくつかの詳細を強調するための最良の方法であることがわかります。 たとえば、統計を大幅に拡大して、視聴者の目をそのデータに直接引き付けることができます。

色

色がすべてにどれほどの影響を与えるかは信じられないほどです。 色が人の気分や感情だけでなく、その反応や購入の決定にも及ぼす影響について、研究を重ねてきました。

ブランドに白黒だけを使用している環境企業を見ることを想像できますか？ または、明るいネオンカラーを使用してプロのオーラと伝統的な価値観を醸し出したいビジネスですか？ それは、色がデザインでどのような役割を果たしているかを示す十分な説明だと思います。

一貫性

コカ・コーラについて考えるとき、あなたは緑または青の色を想像しますか？ おそらくそうではありません–あなたの心は自動的に赤い色にジャンプします。

これが一貫性のすべてです。

ブランドのデザインは一貫性がすべてです。 それは、まったく同じ色合い、まったく同じ色調、まったく同じフォントタイプを使用することです。 Officeレポート、看板、バナー広告–ブランドに関連するすべてのものは常に一貫している必要があります。 結局のところ、コカ・コーラが毎年かそこらで配色を変更したとしても、それでも今と同じブランドの想起がもたらされると思いますか？ 私はそうは思わない。

ホワイトスペース

FrameInc.名刺

白いスペースは必ずしも白いことを意味するわけではありませんが、それがどんな色であっても常に同じことを意味します。 それはあなたの要素の間の未使用のスペースであり、多くのデザイナーが夢中になっているそのネガティブなスペースです。

一部の人にとっては、その未使用のスペースはすべてそのような無駄のようです。 ただし、戦略的に空白のままにして、そのスペースを有利に使用するまで待ちます。 あなたはあなたの聴衆の心を吹き飛ばすであろう全く新しいレベルの創造性を開くことができます。

私を信じないの？ MC Escher's Sky and Waterをチェックしてください。そうすれば、私が言っていることを正確に理解できます。

対称

ギャレットゴッドシーによるアレスパッチ

あなたの目は自然に対称的なものに引き寄せられることをご存知ですか？ これは、TargetやChanelなどのブランドが利用したコンセプトであり、ロゴを非常に印象深いものにしています。

対称性は、あらゆるデザインにバランス感覚と秩序をもたらすものの1つです。 それほど明白ではない場合もありますが、すべての優れた芸術作品には、目を楽しませるために対称性を形成する独自の方法があります。

不透明度

デザイン要素の不透明度は、それがどのように「透けて見える」かを示しています。 それはすべてがどれほど透明であるかを指示します。 不透明度が低いものは基本的に軽量ですが、不透明度が高い要素は目にしっかりと見えます。

不透明度は、下にある要素の存在を完全に排除することなく、さまざまな要素を互いに重ね合わせるのに役立ちます。 また、画像に動きの感覚を加えるためにも使用されます。

テクスチャ

テクスチャがないと、どのデザインも空白で無地に見える可能性があります。 テクスチャを追加すると、デザインが生き生きとなり、画面または印刷された表面から飛び出す準備ができているように見えます。

これは、すべてのデザインにテクスチャが必要であることを意味するものではありません。 クリーンでシャープなデザインプロジェクトは常に存在します。 ただし、少しの質感でも問題ない場合もあります。

表面に奥行きを加える背景を追加することで、デザインのテクスチャをジャズアップできます。 いくつかの要素をエンボス加工することもできます。

バランス

EddieLobanovskiyによるタップ

バランスは対称性と混同されることがありますが、実際には2つの異なるものです。 物事が対称的である場合、各要素が同じ余白で終わるか、ページの両側に同じ数の要素が存在する可能性があります。 これは通常、バランス感覚をもたらしますが、対称的なデザインを使用せずにその感覚を実現することもできます。

たとえば、テキストと画像を含むアバウトページをデザインしたいとします。 テキストは画像と同じ要素ではありませんが、2列のレイアウトでバランス感覚を見つけることができます。

バランスは、デザインの一部を完全に見せるためのものです。 画像のバランスが崩れていると、中途半端な、またはさらに悪いことに、刺激を受けていないように見える場合があります。

階層

MelanieTaubeによる階層

階層は、どの要素が他のすべてよりも重要であるかを示します。 これは、階層の最後にある要素（いわば最下位のフィーダー）がなくても実行できることを意味するものではありません。 結局のところ、階層のもう一方の端に要素がないと、目的の影響量を得ることができません。

階層は、スケーリング以外にもさまざまな方法で表現できます。 食物連鎖の最上位にあるものには明るい色を使用でき、さらに下に移動すると色が明るくなります。

対比

コントラストは反対のルールです。 それは基本的に明るいものと暗いもの、大きいものと小さいものを区別します。 常にデザインから1つまたは2つの要素をポップアウトすることを目指しているデザイナーにとって、コントラストは通常​​、使用するアプローチの1つです。

しかし、コントラストは単なる美学よりもはるかに深くなります。 コントラストも読みやすさに影響します。 テキストと背景にほぼ同じ2つの色を使用すると、テキストの内容を読み込もうとして目を傷つける可能性があります。 コントラストの高い2色を使用することで、目元に見えるはずの色がすぐにわかります。

フレーミング

最高のカメラは、SeanMcCabeが持っているカメラです。

フレームがあなたがそれに入れた写真の周りにどのように境界を置くかを見てください？ それがまさにフレーミングの目的です。 それは基本的に、絵の一部であるべきものとそうでないものを示しています。

ボックスの輪郭、余白–これらはすべてフレーミングの形式です。 また、テキストで満たされたページの中央にある一重引用符のように、特定の要素を他の要素よりも強調表示することもできます。

また、通常の線や余白以外に、創造性を発揮してフレームに使用することもできます。 たとえば、ビーチをテーマにしたポスターでは、テキストの周りに並べられたシェルを使用して、効果的にフレームを作成できます。

グリッド

空白のスペースに物事を揃えようとするのは難しい場合があります。そのため、グリッドは設計において非常に重要です。

グリッドは、設計者が要素を整列および配置するのに役立ちます。 これの完璧な例は、雑誌のページや新聞のコラムです。 グリッドのガイダンスなしで、すべてのテキストがランダムに配置されることを想像できますか？ 理解しようとするのは惨事でしょう。

一方、少し剛性の低いデザインを使用する場合は、グリッドを分割することで、即座に混沌とした感覚を作り出すことができます。 私たちの目は自然にデザインのレイアウトとグリッドを探す傾向があるので、その構造からバストアウトすることは混乱の感覚を作り出すのに役立ちます。

自発性

確かに、確かに。 バランスが必要です。 対称性が必要です。 グリッドに従ってください。 線を使用してフレームを作成します。 しかし、これはすべて、マニュアルに従ってすべてを行う必要があるという意味ではありません。 時には、素晴らしいデザインを作成するために少しクレイジーなことも必要です。

列と行が明確に分割されているからといって、既存のフレームに従わずに突然中央に引用符を配置できないわけではありません。 それがその線を目立たせるための最良の方法であるなら、そうです。

設計しているときは、「ルール」から少し離れて、少し自発性の余地を見つけてください。これは予想外のことです。 これはあなたのデザインが必要とするものかもしれません。

方向

アランピーターズによるスパイラルアートクランクデザイン

これは、視覚的またはグラフィックの手がかりとも呼ばれます。 誰かがあなたの行動を促すフレーズのボタンを指している画像を配置すると、ほとんどすべての読者の目がすぐにそのボタンに直接向かいます。

もちろん、目はページを見ているときに特定のパターンに従います。 研究によると、たとえば、目が従う最も一般的なパターンは、E、F、またはZの形です。 これが、最も重要なコンテンツをページの左上に配置するのが最適な理由です。目の自然な本能は、最初に左上から右上に移動することです。

ルール

はい、創造性はしばしば自発的ですが、従うべきデザインルールはまだたくさんあります。 しかし、繰り返しになりますが、これらのルールを頻繁に破ると、驚くほど美しい作品を作成するように促されます。

では、いつルールに従うべきか、いつルールを破るのかをどうやって知るのでしょうか？

まず、自分が何を破っているのかを正確に知るために、基本に精通している必要があります。 次に、ルールを破ることがあなたが作ろうとしているポイントに対応していることを確認してください。

動き

印刷されたデザインに動きを作り出すのに魔法は必要ありません。 画像が動いているような印象を与えるために使用できるエフェクトはたくさんあります。

たとえば、自転車に乗っている子供の画像では、周囲の画像の残りの部分をぼかして、通りかかったものすべてにうなり声を上げていることを示すことができます。 波の効果だけでなく、モーションラインも使用できます。 上記のウラジミール・ミルゾヤンによってデザインされたこのロゴのように、不透明度を使用して動きの目の錯覚を与えることもできます。

深さ

確かに、フラットなデザインはここ数年大流行しています。 ただし、一部のデザインに奥行きを加えると、より適切にフィットすることを認める必要があります。 結局のところ、物理的に2次元の何かが実際にページから飛び出しているように見えるのは、どれほど驚くべきことでしょうか。

デザインに奥行きを持たせるために使用できるテクニックはいくつかあります。

• 影
• 重複
• 遠近法で遊ぶ（3D効果になります）

デザインが少しの寿命を使用できるように見える場合は、これらのアプローチのいずれかを試して、表面から立ち上がる前に画像を確認してください。

タイポグラフィ

デザインのすべての画像、テクスチャ、背景、およびその他の要素を十分に理解している可能性がありますが、タイポグラフィに何らかの作業が必要な場合は、デザイン全体が危険にさらされます。 タイポグラフィは、フォントスタイルやフォントサイズだけではありません。 また、スケーリング、間隔、色、およびその他の多くの基本的な設計概念とも関係があります。

タイポグラフィは多くの分野をカバーしているので、タイポグラフィをより良くする方法についてこれらの本を読むと、おそらくもっと啓発されるでしょう。

構成

RomainRdbによる波

構成は、独立した要素ではなく、実際には前に説明した要素のいくつかの組み合わせです。 スケール、階層、深さ–これらすべて、およびその他多くのことが、デザインの全体的な構成に貢献します。

構成は、その最も基本的な意味で、デザインのすべての要素の全体的な配置をカバーします。 私たちが議論したすべての要素を想像してみてください–一緒に混ぜると、最終結果は機能するかどうか？ それがあなたが構成を測定する方法です。

20の異なる要素、デザインを作成または破壊する20の異なる方法。 作業中は常にこれらの要素のリストを横に置き、次の設計プロジェクトの完了に伴う課題を解決するためのガイドとして使用してください。