ウェブデザインでは、まずウェブサイトの包括的なイメージの位置付けが必要です。

ウェブデザインでは、まずウェブサイトの包括的なイメージの位置付けが必要です。
⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部に対処します。
⑵ まず全体、次に部分、そして最後に全体に戻る。
全体の状況を考慮して、スペースを埋められるものはすべて埋めてください。次に、モジュールでトーンとデザインを設定します。最後に、満足できない詳細を調整します。
⑶ 機能によってデザインの方向性が決まります。ウェブサイトの目的によってデザインのアイデアが決まります。商業用のウェブサイトは営利目的を強調し、政府系のウェブサイトはイメージや権威ある記事を強調し、教育系のウェブサイトは講師やコースを強調します。
コンテンツと機能によって、表現形式とインターフェース デザインが決まります。よく出される課題は、2 つの文章が書かれた小さな紙で、Web サイトをデザインするようにというものです。紙一枚を見るだけでページをデザインできる人もいます。たった 2 つの文章で、クライアントのページをデザインできます。私は 7、8 年のデザイン経験がありますが、それでもあえてやろうとは思いません。あなたは本当に私のアイドルです。
Web デザインを行うときは、クライアントについて多くのことを知る必要があります。
ウェブサイト構築のためのコラム計画と各コラムの形式と機能要件。メインカラー、顧客の性別の好み、連絡先情報、旧バージョンのURL、優先URL。業界と顧客の要件に応じて、段階的に構築するかどうか、将来の互換性を考慮するかどうかが重視される必要があります。顧客はウェブサイトを構築する強い意欲を持っていますか?顧客を精神的にコントロールできますか?これまで触れたことのない技術的な知識をしっかりと把握していますか?
等...
これらすべてのコンテンツを明確に理解すると、この Web サイトの包括的かつ鮮明な位置付けが頭の中に浮かぶようになります。次は、インターフェイス デザインに焦点を当てます。
⒈ ウェブページのカラーマッチングの基本概念 ⑴ 白黒の言葉は永遠のテーマであり、誰もそれが悪いとは言えません。
⑵ ウェブページで最もよく使われる人気色は青です。青い空と白い雲のような、落ち着いていて整然とした色です。
緑 - 緑と白、エレガントで活気のある。
オレンジ - 活気があり温かみのある、標準的なビジネスカラー。
暗い赤 - 厳粛、真剣、高貴。刺激的な赤を抑えるために黒やグレーと組み合わせる必要があります。
⑶ 色に関するタブー:汚い色は避けましょう。背景とテキスト コンテンツのコントラストが弱く、暗い背景は憂鬱な印象を与えます。
純粋さは避けてください。明るい純粋な色は人々に刺激を与えすぎ、意味合いが欠けています。
飛び飛びの色使いは避けましょう。色がどれだけ美しくても、全体の見た目から外れてはいけません。大衆から離れることは、自分自身に屈辱をもたらすことです。
花の使用は避けてください。絵全体に流れるメインカラーが必要です。メインカラーは、最も面積が大きい色ではなく、テーマを最もよく表現し反映できる最も重要な色です。少数派であっても決定的な役割を果たすリーダーのようなものです。
パウダーは避けましょう。明るい色はきれいに見えますが、コントラストが弱すぎると、まるで絶望的な病人のように、全体が青白く弱々しく見えてしまいます。
純粋な青、黄緑、明るい赤は避けてください。⑷ 青、白、オレンジのいくつかの固定された組み合わせ - 青をメインカラーとして。白い背景、青いタイトルバー、装飾としてオレンジ色のボタンまたはアイコン。
緑と白の蘭 - 緑がメイントーンです。白い背景、緑のタイトル バー、装飾として青またはオレンジ色のボタンまたはアイコン。
オレンジ、白、赤 - オレンジがメイントーンです。白い背景、オレンジ色のタイトル バー、装飾として濃い赤またはオレンジ色のボタンまたはアイコン。
ダークレッドと黒 - メイントーンはダークレッド。黒または灰色の背景、濃い赤のタイトル バー、テキスト コンテンツ用の明るい灰色の背景。
⒉ 弱められたインターフェース 優れたインターフェース デザインは、弱められたインターフェースを持ちます。これにより、機能が強調され、Web サイトがユーザーに提供するものが強調されます。これには、閲覧順序、機能分割などが含まれます。
訪問者は、0.5 秒以内に Web サイトの業種特性を把握し、1 秒以内に Web サイトの使用を開始する場所を認識できる必要があります。一度クリックできれば、二度とクリックする必要はありません。もちろん、上記はほとんどの機能的な Web サイトを指します。特殊効果や Flash Web サイトなどのプロモーション Web サイトやディスプレイ Web サイトの場合は、少し凝ったデザインにする必要がありますが、やりすぎであってはいけません。ウェブサイトは漫画ではありません。効率がますます高まり、社会心理がますます衝動的になっている中国では、人々の忍耐力はますます小さくなり、心理的耐久力はますます低下しています。効果は芸術的な概念を反映し、まさに適切なものになります。
⒊ 強力なモジュール性と変更可能性 モジュール性により再利用性が向上するだけでなく、Web サイトのスタイルを統一し、プログラム開発の強度を軽減することもできます。ここでは、サイズ、係数、許容差、命名規則などに関する知識を設計しますが、詳細については説明しません。
アーキテクチャ、モジュール、画像など、どのようなものであっても、強力な変更可能性を考慮する必要があります。簡単な例を挙げると、ロゴやボタンなどの場合、多くの人が絵を描くことを好み、N 個のボタンは N 個の絵を意味します。 3 ~ 5 種類のボタンの背景画像を作成し、それを使用して Web ページのコードにテキストを入力すると、変更が容易になり、プログラマーにテキストの変更を任せることができます。ただし、Web ページに表示されるフォントはギザギザになります。一般的に、明瞭さと美しさの両方を確保できるフォント サイズには、次の種類があります: Songti 12px | Songti 12px Bold | Songti 14px | Songti 14px Bold | Heiti 20px | Verdana 9px | Arial Black 12px |
⒋ 芸術を創作するのは恥ずべきことです。分析能力は創造性よりもはるかに重要です。デザインの世界ではいつも「創造性」について語られています。私が言いたいのは、コンテンツの目的や意味を明確にせず、技術的な制作を完璧にせずに、創造性や特殊効果を使って顧客や訪問者を混乱させることは恥ずべきことだということです。ウェブデザイナーにとって、分析能力は創造性よりもはるかに重要です。
⒌ CSS、XHTML、web2.0、Ajaxなどを考慮するか放棄するか。嵐が来ています。高度な技術を学ぶことは確かに有益ですが、中国での現在の認知度の低さは、顧客の需要と価格もかなり低いことを示しています。先ほど、Web デザインは経済によって決まると述べましたが、場合によっては、これ以上の妥協は許されず、放棄したり諦めたりすることも無力な行動です。

<<:  CSSクラス名の問題の詳細な説明

>>:  Apache ストレステストツールのインストールと使用

推薦する

バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...

Windows での MySQL 8.0.15 の詳細なインストールと使用のチュートリアル

この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...

three.js で 3D ダイナミック テキスト効果を実現する方法

序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...

mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル

目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...

シェルでパスワードなしでMySQLデータベースに素早くログインする方法

背景Shell の mysql-client を介して MySQL データベースにログインする場合、...

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるよう...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

外部キー制約を持つテーブルデータを削除する MySQL メソッドの紹介

MySQLでテーブルやデータを削除する場合、 [エラー] 1451 - 親行を削除または更新できませ...

MySQLの半同期の詳細な説明

目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...

ログインフォームを実装するためのJavaScript

この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...

入力ボックスの値を取得する方法のReactの例

入力ボックスの値を取得する複数の方法最初の方法は、制御されていないコンポーネントの取得です2番目の方...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

preタグを自動的に折り返すためのサンプルコード

pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...

MySQLの自己接続と結合の詳細な理解

1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...