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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

推薦する

Docker 基本チュートリアル: Dockerfile 構文の詳細な説明

序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...

MySQLキーワードDistinctの詳細な紹介

MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...

txt ブックの内容を Web ページに表示するコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...

Web2.0: 情報過多の原因と解決策

<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...

よく使用される MySQL 関数の完全なリスト (分類および要約)

1. 数学関数ABS(x) xの絶対値を返します。 BIN(x) xの2進値を返します(OCTは8...

ミニプログラムはリストのカウントダウン機能を実装します

この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...

Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法

1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

docker run後、ステータスは常にExitedになります

追加するdocker run -it -name test -d nginx:latest /bin...

Zabbixについて管理者ログインパスワードを忘れた場合、パスワードをリセットする

Zabbix 管理者ログイン パスワードのリセットに関する問題は次のとおりです。 1. 問題の説明:...

MySQLデータベースで列を追加、削除、変更する方法

この記事では、例を使用して、MySQL データベースの列を追加、削除、および変更する方法について説明...

MySQL 子テーブルで外部キー制約チェックを無効にする方法

準備する:教師テーブルと生徒テーブルを定義し、生徒テーブルで教師テーブルIDを参照します。テーブルt...

JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...

CentOS7 での mysql 5.7.23 のバイナリ インストール

インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...

Vue.js でフォントを読み込む正しい方法

目次font-faceでフォントを正しく宣言するフォントをプリロードするフォントをホストするにはli...