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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

推薦する

JavaScriptはクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...

Mysql と Oracle でよく使用される複数テーブルの変更ステートメントの概要

今日、SQLトレーニングの質問バンクでこの質問を見ました。これは、非常に代表的なマルチテーブル変更の...

モバイルアダプティブスタイルで@mediaを使用する方法

一般的な携帯電話のスタイル: @media all および (orientation : 縦向き) ...

タイムスタンプの差を計算するSQLメソッド

タイムスタンプの差を計算するSQLメソッド概要場合によっては、特定のレコードを時間で検索する必要があ...

HTML マルチヘッダーテーブルコード

1. マルチヘッダーテーブルコードコードをコピーコードは次のとおりです。 <!DOCTYPE ...

Vueでアイコンをカスタマイズする手順

ant-design-vue は Ali iconfont icons の使用をカスタマイズします\...

MySQL ストアド プロシージャ関連の権限変更の問題

MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...

音楽プレーヤーアプリ(アプリケーションソフトウェア)の分析と再設計 美しい音楽プレーヤーインターフェースの設計方法

無線インタラクションにずっと興味があったので、今回は実践してみようと思います〜この分析と評価は iO...

MySQL に大量のデータを挿入するときに重複データを除外する方法

目次1. 問題を発見する2.重複したデータを残さずにすべて削除する3. 削除テーブルから重複データを...

JS でオブジェクト プロパティを簡単にトラバースするいくつかの方法

目次1. 自己列挙可能なプロパティ2. Object.values()はプロパティ値を返します3. ...

CentOS 8.4 での Docker パッケージのオフラインインストールの問題について

使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...

Vue で手ぶれ補正を実装するためのサンプルコード

手ぶれ防止: 繰り返しのクリックによるイベントのトリガーを防止まず、揺れとは何でしょうか? 震えるの...

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

uniappのグローバル変数実装の詳細な説明

序文この記事では、uniapp グローバル変数の実装方法をいくつかまとめています。詳細な知識は、uV...

Vueでブラウザタイトルを動的に設定する方法の詳細な説明

目次ナンセンス文章最初ルーター/index.js 2番目1. プラグインをインストールする2.mai...