シンプルなウェブデザインコンセプトのカラーマッチング

シンプルなウェブデザインコンセプトのカラーマッチング
(I)ウェブページのカラーマッチングの基本概念

(1)白黒の言葉は永遠のテーマです。誰もそれを悪く言うことはできません。


(2)ウェブページで最もよく使われる人気色
青——青い空と白い雲、穏やかで清楚な色。
緑 - 緑と白、エレガントで活気のある。
オレンジ - 活気があり温かみのある、標準的なビジネスカラー。
ダークレッド - 厳粛、真剣、高貴。刺激的な赤を抑えるために、黒やグレーと組み合わせる必要があります。

(3)色に関するタブー
汚くならないようにしてください。背景とテキスト コンテンツのコントラストが強くなく、灰色の背景は憂鬱な印象を与えます。
純粋さは避けてください。明るい純粋な色は人々に刺激を与えすぎ、意味合いが欠けています。
飛び飛びの色使いは避けましょう。色がどれだけ美しくても、全体の見た目から外れてはいけません。大衆から離れることは、自分自身に屈辱をもたらすことです。

花の使用は避けてください。絵全体に流れるメインカラーが必要です。メインカラーは、最も面積が大きい色ではなく、テーマを最もよく表現し反映できる最も重要な色です。少数派であっても決定的な役割を果たすリーダーのようなものです。

パウダーは避けましょう。明るい色はきれいに見えますが、コントラストが弱すぎると、まるで絶望的な病人のように、全体が青白く弱々しく見えてしまいます。
純粋な青、黄緑、明るい赤は避けてください。

(4)いくつかの固定コロケーション
青、白、オレンジ - 青がメイントーンです。白い背景、青いタイトルバー、装飾としてオレンジ色のボタンまたはアイコン。
緑と白の蘭 - 緑がメイントーンです。白い背景、緑のタイトル バー、装飾として青またはオレンジ色のボタンまたはアイコン。
オレンジ、白、赤 - オレンジがメイントーンです。白い背景、オレンジ色のタイトル バー、装飾として濃い赤またはオレンジ色のボタンまたはアイコン。
ダークレッドと黒 - メイントーンはダークレッド。黒または灰色の背景、濃い赤のタイトル バー、テキスト コンテンツ用の明るい灰色の背景。

2. Webデザインのコンセプト

(1)内容が形式を決める<br />まず内容を充実させ、次にそれをセクションに分け、次にトーンを決め、最後に細部を扱う。

(2)まず全体、次に部分、そして最後に全体に戻る。
全体の状況を考慮して、スペースを埋められるものはすべて埋めてください。次に、モジュールでトーンとデザインを設定します。最後に、満足できない詳細を調整します。

(3)機能がデザインの方向性を決定する<br />ウェブサイトの目的がデザインのアイデアを決定します。商業ウェブサイトは営利目的を強調し、政府ウェブサイトはイメージと権威ある記事を強調し、教育ウェブサイトは学部とコースを強調する必要があります。

3. 設計作業を迅速かつ効率的に完了する方法

(1)世の中の文章はすべて盗作である。
コピーできるかどうかによって異なります。コピーされるのは、アイデア、考え、そして細部の絶妙な装飾です。
インターネットで類似の Web サイトを検索し、気に入ったものをいくつか見つけ、そのうちの 1 つを基本的な青写真として使用し、その利点を自分の Web サイトに統合します。これは最も効率的で迅速な方法であり、結果も得られ、多くのことを学ぶことができます。

(2)デザインフォーラムに参加し、参考資料を探します。

<<:  CSS ボックスを中央揃えするためのよく使われるいくつかの方法 (要約)

>>:  Tomcat プロセスの CPU 使用率が高い場合の解決策

推薦する

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

node.js グローバル変数の具体的な使用法

グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...

Kubernetes コントローラーとラベルの簡単な分析

目次01 k8sの一般的なコントローラーRCコントローラーデプロイメント コントローラーステートフル...

Vue ElementUI フォームのフォーム検証

フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...

js での Object.create インスタンスの使用法の詳細な説明

1. Object.create() メソッドを使用して新しいオブジェクトを作成し、既存のオブジェク...

JavaScript ベースのパスワード ボックス検証情報の実装

この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...

CSS でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...

Tomcat が応答データグラムを書き戻すタイミングの詳細な分析

疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...

Linux (CentOS) システムで MySQL データベース ディレクトリの場所を変更する方法

CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...

CSS スタイルを HTML 外部スタイルシートにインポートする方法

リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...

HTMLタグを閉じるのを忘れないでください

Web 標準に準拠した Web ページの構築は、jb51.net が常に全員と議論しているトピックで...

Vueコンポーネントは、写真やビデオをアップロードするためのサンプルコードをカプセル化します

まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...

MySQLのロック機構の詳細な説明

序文データの一貫性と整合性を確保するために、あらゆるデータベースにはロック メカニズムが備わっていま...

Vue は動的なプログレスバー効果を実現します

この記事では、動的なプログレスバー効果を実現するためのVueの具体的なコードを例として紹介します。具...

フォーム要素属性の読み取り専用と無効の使用の比較

1) 適用範囲:読み取り専用:input[type="text"],input[...