家アパートのインテリアフラットデザインの進化: 薄暗いカラーパレット。フラットデザインの進化: 薄暗いカラーパレットグレースケールファースト

アパートのインテリア

フラットデザインの進化: 薄暗いカラーパレット。フラットデザインの進化: 薄暗いカラーパレットグレースケールファースト

フラットデザインは、驚くほど長い間関連し続けている Web デザインのトレンドの 1 つです。過去数年間、このデザインはデスクトップ、Web、インターフェイスの開発で積極的に使用されてきました。モバイルアプリケーション。フラットデザインは印刷物のグラフィック素材を作成する際にも積極的に活用されています。知ることさらなる事実このオンラインチュートリアルではフラットデザインについて学ぶことができます。今日の会話のテーマは、フラットデザイン全体ではなく、その特定の部分であるフラットカラーです。

フラットデザインの名前には理由があります。そのコンセプトでは、3 次元要素、深い影、明るいグラデーションの使用が排除されています (英語の「フラット」は「平ら」を意味します)。ボタン、アイコン、その他のグラフィック要素は単純化されて明確に見えますが、依然として魅力的です。

フラットな Web サイトのデザインを開発するのはそれほど簡単ではありません。インタラクティブ要素では主な問題が発生します。デザインでは静的コンテンツと動的コンテンツの違いを強調する必要があるからです。どの要素がインタラクティブであるかをユーザーに伝える唯一の方法は、微妙な影と境界線を使用することです。したがって、「バランスの取れた」フラットなレイアウトを作成するには、すべての要素を細部に至るまで検討する必要があり、これは簡単な作業ではありません。

配色にフラットカラーを選択する

Web デザインにおける色の重要性は、過大評価することはできません。たとえば、成功した記事はより多くの読者を引き付けることができます。フラットデザインは、色に関するすべての点でユニークであることはすぐに言う価値があります。明るい色フラットなデザイン即座にユーザーの注目を集めます。 2 つまたは 3 つの色合いで構成される従来の配色とは異なり、フラットレイアウトデザインは 4 つ以上の色で行われます。非常に多くの場合、これらはグレーまたは黒と組み合わせられた豊かな色合いです。

色の組み合わせに関する従来のルールをフラットデザインに適用することはほとんどできません。フラットデザインでは、色そのものの組み合わせではなく、そのトーンと彩度が重要です。 1 つのレイアウトのデザインでは複数のレイアウトを絶対に使用できるという事実にもかかわらず、異なる色、それらを深く組み合わせる必要があります。単色自体は原色または二次のいずれかになります。白と黒の対照的な組み合わせも可能です。

理論から実践へと移りますが、W3.CSS のフラットカラーのセットについてお話したいと思います。このコレクションには、Web サイトを作成するためのさまざまな配色が含まれています。ここでは、マテリアルデザイン、フラットカラー、Windows メトロ、Windows Phone 8 の色が見つかり、選択した組み合わせをすぐに適用できるように、HTML と CSS のコード例が示されています。

まったくの初心者でどこから始めればよいかわからない場合は、「フラット UI カラー」にアクセスしてください。このサイトでは、好きな色をコピーし、適切な値を挿入してグラフィックエディターでその色を見つけることができます。ご覧のとおり、緑、青から黄色、オレンジまで、明るい色合いが選択の大半を占めています。

ただし、フラットデザインであっても、選択できる色には制限があります。たとえば、赤、黄色、および黄色の組み合わせはほとんど見られません。青い花 1つのレイアウトで。デザイナーは、より豊かで混合された色合いを好みます。

フラットなウェブサイトのデザインを開発したいですか? フラットデザインの原則を考慮して作成された MotoCMS 3.0 テンプレートに注目してください。テンプレートを比較しましたさまざまなサンプル単色の配色を使用して、UI プロパティにどのような影響を与えるかを示します。

明るい色。鮮やかな青、緑、紫が白または黒の背景に映えます。これらの色は、フラットな Web サイトのデザインでよく使用されます。

印刷サービス Web サイト用の MotoCMS 3.0 テンプレート

印刷サービス Web サイト用の MotoCMS 3.0 テンプレート - 完璧な解決策印刷・印刷関連のプロジェクトに。ただし、テンプレートのテーマは簡単に変更できます。テンプレートのデザインは、フラットデザインの原則を考慮して開発されています。ユーザーには、20 のウィジェットとモジュールとともに、スライダーとギャラリーの 8 つのオプションが提供されます。これらすべては、人気のあるオリジナルのオンラインプロジェクトを作成するのに役立ちます。

レトロな色。多くの場合、パステル調のオレンジや黄色に、明るい赤や青を組み合わせたものです。ほとんどの場合、単色原色は次のとおりです。レトロなスタイル二次的なものと組み合わせると、混合効果を達成しやすくなります。

インフォグラフィックスに最適なパレットを選択するためのヒントと原則を記載した投稿。

「最近では、適切なパレットを見つけるのは簡単ですが、データ視覚化に適した色の組み合わせを見つけるのは依然として困難です」と Zheng 氏は書いています。インフォグラフィックの色を探すとき、彼女は 3 つの主な課題を特定します。

フラット UI カラーパレット
プロタポニアのフラット UI カラーパレット
黒と白のフラット UI カラーパレット

まず、すべてのパレットが視覚化用に設計されているわけではありません。たとえば、インターフェイスデザインガイドライン (Google のマテリアルデザインなど) の色は、色盲の人にはうまく認識されず、単に互いにわずかに異なる場合があります。

Color Hunt Web サイトの 4 色のパレット

第二に、既存のパレットの多くには十分な色がありません。例として、彼女は Web サイト Color Hunt を挙げています。成功した組み合わせ 4色。しかし、インフォグラフィックスの場合、通常は 6 ～ 12 色が必要です。

Color Hunt サイトのグラデーションパレット。インフォグラフィックスでは色を区別するのが困難です。
4色のグラデーションパレットと12色のグラデーションパレットの違い

第三に、一部のパレットの色は明るさがわずかに異なるため、特に隣り合っている場合、それらを区別するのが困難になります。

良いものを選ぶには色の組み合わせインフォグラフィックについては、Zheng 氏は 3 つのルールを使用することをアドバイスしています。

左から右へ: マテリアルデザインの青いパレット、これもプロタポニウム、黒と白
色盲の人と正常な視覚を持つ人の明るさと色の比率

まず、パレットの色に十分な明るさの差があるかどうかを確認する必要があります。「明るさの違いは普遍的になるでしょう」とデザイナーは書いています。また、明るさの大きな違いは、色盲の人にパレットを適応させるのに役立ちます。プロタポニア（赤色の感度が低下）、第二色覚（緑色または他の色の感度が低下）を持つ人々がそれをどのように認識するか、また白黒に変換されるかどうかを確認できます。

第二に、パレットには自然な組み合わせを使用することをお勧めします。例として、Zheng 氏は、薄黄色から濃い紫へ、および薄紫から濃い黄色への移行を挙げています。「純粋に数学的な観点からすれば、それらはほぼ同じに見えるはずです」と彼女は書いており、最初の組み合わせの方が 2 番目の組み合わせよりも自然に見えると述べています。デザイナーは、これは人々が自然界、たとえば日没時に最初のパレットからの組み合わせを見ることに慣れているという事実によるものだと考えています。

グラデーションを操作するためのメッシュ

第三に、パレットを作成するときは、色の違いをよりよく感じるためにグラデーションを使用することをお勧めします。作業を簡単にするために、Zheng 氏は、上のスクリーンショットのような花のグリッドを Photoshop で作成することをお勧めします。彼女によると、グラデーションは 2 色または 12 色を選択するときに効果的です。

成功したインフォグラフィック用パレット
成功したインフォグラフィック用パレット

デザイナーもアドバイス 12 有用なリソースカラーとパレットを操作するため。彼らのリストを見ることができます

フラットデザインなどのトレンドは継続的に発展しており、フラット要素が積極的に使用される新しいサイトが登場しています。フラットデザインというと最近は明るい色のイメージがありましたが、最近多くのデザイナーが、明るくしたり落ち着いたカラーパレットを使用して、より落ち着いた色合いを優先し始めていることに気づくかもしれません。さまざまな色合いの組み合わせを試してみると、デザインをよりファッショナブルでモダンにし、主要な要素を同様に配置した他のサイトよりも目立つようにすることができます。

落ち着いたカラーパレットを使用すると、次のような場合にも役立ちます。明るい色サイトのメインテーマと矛盾します。場合によっては、派手すぎる色合いはユーザーをイライラさせる可能性があり、サイトにとって良くありません。それどころか、落ち着いた配色は、最も重要な要素を強調して視覚的な階層を作成できるため、フラットデザインの美学に非常によく適合します。

明るい色は注目を集め、目を引きますが、デザインでは慎重に使用する必要があります。そうしないと、ある要素から別の要素に注意が飛んでしまい、ユーザーを混乱させる危険があります。元の色の一部を明るくすることで、メインの色を維持しながら、デザインの一部を背景に押し込むことができます。カラースキームサイト。

ライトシェード

新しい色合いを作成するには、元の色に白を追加します。明るくされた色合いはより明るく認識され、そのような色はパステルと呼ばれることもあります。色合いの彩度は、ほぼ白から元の色よりわずかに明るい色合いまでさまざまです。明るいパレットを使用したデザインの Web サイトは、より軽くて「柔らかい」と認識され、多くの場合、デザイナーの意図が完全に実現されます。結局のところ、必ずしも明るい色を使用する必要はありません。大量の明るいパレットが適切以上に適している場合。明るい色合いメインコンテンツの閲覧からユーザーの注意をそらさないため、写真との相性が良いです。

ジャックホーナーファーストフードレストランのウェブサイトを見ると、微妙な淡い黄色の色合いが黒のデザイン要素とはっきりと対照を成していることに気づくでしょう。これは、デザイナーが、古代のレシピに従って調理された伝統的な料理を訪問者に提供するレストランの主な特徴をユーザーに伝えようとしている方法です。ここでの少しレトロな表現は、同社が推進するエコのテーマによく合っています。

明るい色合いは、ウェブサイト www.cakeTeacher.com からも入手できます。役立つヒント自宅でケーキを作るために。ここの色合いは、Jack Horner サイトよりも少し明るいですが、ユーザーが中央にある写真に集中するのを妨げるものではありません。落ち着いたトーンと明るい要素のコントラストにより、ユーザーはレシピ、ヒント、コツなどのメインコンテンツの閲覧に集中できます。さらに、微妙な配色は、ある時点で、サイト上のすべてのコンテンツにアクセスするには、月額 18.90 ドルのサブスクリプションにサインアップする必要があることに気づいた訪問者から生じる可能性のある否定的な認識の一部を取り除くのに役立ちます。

暗い色合い

濃い色合いはベースカラーに黒を加えることによって得られます。配色はより厳しく、重くなります。サイトに適切な雰囲気を作り出す必要がある場合は、汚い暗い色合いが効果的です。落ち着いたカラーパレットは、Ann Taylor Web サイトなどの商用 Web サイトによく似合います。

濃い色合いは、注意をそらすことなくデザインに安定感を与えます。女性が一日を快適に過ごすための服やアクセサリーを購入できるサイトです。アンテイラーのアイテムは、快適で居心地の良いカジュアルな服であり、配色によって強調されています。しかし、その会社が気取った華やかなブランドである場合、明るく派手な色調を使用せずに済ますことはほとんど不可能でしょう。

Frida Cafe の Web サイトのデザインには、メキシコのアーティスト、Frida Kahlo がよく使用した配色が使用されています。これらは落ち着いた黄色、黄土色、緑の色合いです。デザイナーは表現するという課題に直面しました本旨カフェのオーナー - シンプルで手頃な料理への回帰。「Café Frida」では、デザインに使用されている柔らかな色合いが強調する非常に豊かな味わいの淹れたてのコーヒーを味わうことができます。

結論

柔らかい色合いをデザインに使用するかどうかは、状況によって異なります。場合によっては、それが適切以上である場合もあれば、そうでない場合もあります。今日、柔らかいカラーパレットが流行しているという事実は、フラットスタイルのデザインを作成するときにそのような色合いなしではできないという意味ではありません。実験の余地は常にあり、明るい色の方が効果的であれば、それを使用してください。しかし、サイトに特定の雰囲気を作り出す必要がある場合は、ハーフトーンなしではできません。微妙な色はさまざまなコンテンツに適しているため、より正確にアクセントを配置し、最も重要なことにユーザーの注意を集中させることができます。

今回はフラットデザインについて解説していきます。フラットはここ数年、ウェブ上の主要なトレンドの 1 つとなっているため、おそらくすでにこのことについて何かを聞いたことがあるでしょう。

今回は、フラットデザインとは何か、その成り立ち、そしてクリーンで明るくレスポンシブなデザインを作成するために何が必要かについて見ていきます。

発見できる良い例ウェブサイト http://market.envato.com/ のフラットデザイン。モダンなデザインがどのようなものかを明確に理解できるレイアウト、アイコン、テンプレートが豊富にあります。 .

1. フラットデザインとは何ですか?

フラットなデザイン - モダンなスタイルユーザーインターフェイスとグラフィックデザインは、ミニマリズムを特徴としています。フラットデザインは、最小限の要素を使用し、混合色、グラデーション、ハイライトなどのテクスチャ、影、光のさまざまな効果を使用しないことを特徴とします。

フラットはスキューモーフィズムに反対します( スキューモーフィズムは、ある製品に別の製品の外観を与えるときのデザイン原則です。いつさまざまな要素インターフェイスは実際のオブジェクトからコピーされます - 約翻訳。、豊富なデザインだけでなく、フラットデザインは一見したほど単純ではないことは言う価値があります。これにはスキューモーフィズムの機能がいくつか含まれていますが、これについては少し後ほど説明します。

一般に、フラットは、ユーザーがビジュアルに気を取られることなくコンテンツに集中するのに役立ちます。フラットなデザインは要素のシンプルさを強調すると同時に、インターフェイスの応答性を高め、快適で使いやすくしています。

2. ちょっとした歴史

ご存知のとおり、フラットデザインは、Web 上で世界的なトレンドになるずっと前から存在していました。フラットデザインは 80 年代に非常に人気がありました。これは、当時のテクノロジーが複雑なエフェクト、テクスチャ、シャドウをサポートできるほど十分に開発されていなかったためです。しかし、そのときでさえ、デザインはスキューフォモーフィズムを追求し、インターフェイス要素を可能な限り現実的にしようとしていました。

現在私たちが目にしている形のフラットデザインは、マイクロソフトがいわゆるメトロスタイルの製品を生産し始めてから普及し始めました。 Metro は、そのスタイルとシンプルさが印象的な Microsoft の UI デザインです。

2010年に Microsoft は Windows Phone 7 をリリースしました。これは、以前の製品から継承されたシャープなエッジとシンプルなグラフィックスを備えたフラットデザインを採用していました。マイクロソフト（Zune）。その後、その成功に触発されて、マイクロソフトはオペレーティング·システム Windows 8 は、同じフラットな Metro スタイルに基づいています。

結局のところ、フラットデザインは、Apple がリリースした 2013 年に人気のピークに達しました。 iOS 7 の基本的なデモ新しいデザインアイコンやフォントなどのユーザーインターフェイス要素が完全に再設計されました。アップルが作成した UIとアイコンデザインの視覚原則 .

その後すぐに、Google もアプリケーションと Web ページでフラットスタイルを使用し始め、これをフラットスタイルと呼びましたマテリアルデザイン。 Google には、このスタイルに特化したセクション全体があり、Web デザインの目標、その原則、アイコンやレイアウトなどのさまざまなデザインオブジェクトを作成する手順の説明が含まれています。

それ以来、フラットは Web デザインの主要なトレンドとなり、Web サイト、アプリケーション、インターフェイス要素をエレガントでクリーン、スタイリッシュなものにしています。

このように、企業によるフラットデザインの世界的な例が 3 つあります。これらなしでは想像するのが困難です。現代世界技術:

MicrosoftのMetroデザイン

Apple iOS 7のデザイン

Googleのマテリアルデザイン

3. 清潔であることを忘れないでください

フラットなデザインは、立体的な要素が欠けているため「フラット」と呼ばれるようです。リアルな効果グラデーション、テクスチャ、ハイライト、ハーフトーン、シャドウなど。フラットスタイルはオブジェクトを 2 次元 (フラット) に表現する方法であることに注意してください。

さらに、フラットデザインでは、オブジェクトは非常に単純化され、様式化された方法で表現されます。

そして時には、オブジェクトのシルエットや輪郭だけが使用されることもあります。オブジェクトを認識できる程度に十分ですが、細かい詳細を詰め込みすぎないようにしてください。

最近ではミニマリズムが世界的なトレンドになっています。シンプルな形とシャープなエッジの使用により、すっきりとした心地よいデザインが生まれています。シンプルなフォームよりわかりやすく、よりわかりやすく。これにより、煩雑で乱雑な外観を与えることなく、デザインをミニマルかつクリーンに保つことができます。

4. 完璧に仕上げる

フラットアイコンと UI 要素を作成する場合は、それらを鮮明できちんとしたピクセル完璧な外観にする必要があることを知ってください。できるだけ。さらに、これはラスターグラフィックスとベクターグラフィックスの両方に当てはまります。

プログラムとはアドビフォトショップここですべてが明らかです。ピクセルに基づくラスターグラフィックスで動作します。

Adobe Illustrator プログラムでは、ベクトルと呼ばれる曲線や直線で構成され、数式で指定されたベクトルグラフィックスが使用されます。

かつて、Adobe Illustrator は、ピクセルパーフェクトなグラフィックを作成するのに特に便利なプログラムではありませんでした。良いニュースは、最新バージョンイラストレータースチール素晴らしいツール良いグラフィックを作成するために。

ベクターグラフィックスでは、主に単純で平らな形状、純粋な色、グリッドを使用する必要があると言わざるを得ません。Adobe Illustrator は設定が非常に柔軟で、グリッドをニーズに合わせて調整したり、オブジェクトを配置したり、使用したりすることができます。各種スナップ。これにより、どんなディスプレイでもすっきりとスタイリッシュに見える完璧なデザインを簡単に作成できるようになります。完璧なグラフィックを作成する方法を学びたい場合は、次の記事を読んでください。 Adobe Illustrator を使用してピクセルパーフェクトなアートワークを作成する方法 .

5. カラー

影以外のフラットデザインの最も特徴的な機能の 1 つは、色の使用です。フラットデザインの要素で使用される色のほとんどは、ほんの数色の基本色で構成されています。

フラットなデザインの色は明るく、豊かで豊かです。フラットな配色にはいくつかの特別な色が含まれており、その選択は、お菓子のアイコンや洗練されたレトロなパレットのレトロなスタイルのオブジェクトなど、何を描くかによってのみ異なります。

あなたが UI デザイナーで、カラーパレットをよく理解しており、実験しているとします。カラーパネル Photoshop と Illusstartor で、好きなように色を混ぜ合わせます。ただし、このプロセスは非常に複雑であり、優れた直感、経験、スキルが必要です。ここでは、独自のカラーパレットの作成に役立つツールをいくつか紹介します。

フラットデザインだけでなく、あらゆるタイプのデザインやイラストに適したものもあります。たとえば、Cooler として知られる Adobe Color CC です。現在では、Web サイトと Adobe 製品の両方から直接アクセスできます。 Cooler は非常に柔軟なツールで、独自のカラーパレットを作成することも、ライブラリのカスタムパレットから選択することもできます。

もう 1 つのシンプルで便利なカラーパレットジェネレーターは Coolors です。スペースバーを押すだけで、プログラムがカラーパレットを生成し、色を調整でき、エクスポート機能もあります。

便利なカスタムパレットを備えた同様のサービスが他にもいくつかあります。ただし、Designmodo によってフラットデザイン専用に作成されたツールが 1 つあります。これは、作業に非常に便利な「フラット」カラーのセットを備えたサービスです。このサイトは、良いものを探しているデザイナーの間で非常に人気があります。カラーソリューション完璧なデザインを実現します。それを試してみてください！

また、より多様な色やパレットを見つけることもできます。 Google のマテリアルデザインガイド.

6. 長い影

上で述べたように、フラットデザインはシンプルさと多くの空きスペースを特徴としています。これが、フラットデザインがエフェクトの使用を拒否する理由です。ただし、フラットデザインに特有の効果が 1 つあります。この効果はトレンドになっており、特徴的な機能フラタ。

今は長い影について話しています。彼らはいくつか持っています典型的な特徴、この効果を認識できるようにします。つまり、45 度の傾斜とビッグサイズ(影は被写体自体よりも数倍長い場合があります。その結果、長い影は平面にある程度の奥行き効果を与えます。

この効果により、オブジェクトがより立体的になりますが、同時にフラットなデザインの範囲内に保たれます。

7. フォントの操作

タイポグラフィーはフラットデザインにおいて大きな役割を果たします。多くの場合、テキストが作品の主要な要素になります。

フラットデザインでは通常、シンプルなフォントスタイルが使用され、デザイン全体が全体的にすっきりして読みやすくなります。 Adobe 製品を使用している場合は、Adobe Typekit で多くの無料フォントを見つけることができます。 Font Squirrel には優れた無料フォントもたくさんあります。ただし、フォントを商用目的で使用する場合は、ライセンスを読むことを忘れないでください。

ほとんどの場合、フラットデザインでは大文字と対照的な色を使用するのが一般的で、これによりテキストが読みやすくなります。

フォントは、独立した要素として表示されるのではなく、デザインを補完し補完するものであることを忘れずに、セリフや手書きの複雑なフォントを使用してはいけないという意味ではありません。最小限に抑え、すべてのバランスを保つことを忘れないでください。ただし、フラットでは、より厳格できちんとしたように見えるため、サンセリフフォントがよく使用されます。

8. フラットデザインの長所と短所

フラットデザインは多くの利点があるため非常に人気がありますが、このスタイルを使用する際にデザイナーが直面する欠点がまだいくつかあります。メリットとデメリットを見てみましょう。