ウェブサイトのビジュアルデザインの重要なポイント

ウェブサイトのビジュアルデザインの重要なポイント
手工芸デザインからグラフィックデザイン、そしてウェブデザインまで、デザインの原則は同じままですが、私の経験から、デザインメディアの変化はメディア自体の多くの特別な機能をもたらすことがわかります。他の人の経験と私自身の経験に基づいた、ウェブサイトのビジュアルデザインの重要なポイントは次のとおりです。
1 —ロゴ:基本的なロゴ機能、ロゴデザインの基本に沿った(グラフィックデザインに共通)表示効果:鮮明さ、最小サイズ(ディスプレイ解像度による、オフライングラフィックデザインの印刷効果に相当)
2 —テキスト:コンテンツレベルによってフォント、サイズ、太さが決まり、ステータスによって色が決まります (デフォルトまたはウェブサイトに応じて統一)
3 —広告とコンテンツの画像:サイズとスタイルの配置、同一ページ内での調和、画像の最適化、位置のリズム、サイズの比較。
4 —アイコン:ブランド、正確で合理的な表現、デザイン手法 (ブランドに基づく)、一貫性、機能: 魅力的で目を引く、識別しやすく、理解しやすく、操作しやすく、覚えやすい。
5 —クリック可能(ボタン):違い(クリック不可)、人々の生活経験に基づく:太さ、クリック可能、質感(物理的な関連性)、色(ブランド、統一性、コントラスト)、均一なスタイルのサイズ(テキストの均一な内側の余白に基づく)
6 —背景画像:雰囲気作り、製品との一貫性、最適化(品質、サイズ、色情報、実装計画)、
7 —グラフィックとテキストのレイアウト:メイン画像とセカンダリテキスト、グラフィックとテキストのリズム、ギャップ、モジュール化。
8 —現在のステータス:拡大 (形状)、色の変更 (反転、コントラスト、明るさ、純度)、リンクインおよびリンクアウト後のコンテンツプロンプトの指定。
9 —インタラクティブなコントロール:合理的かつ正確なスタイル (システムと日常生活に対する人々のデフォルトの認識)、状態 (視覚表現スタイルとアクション プロセスの最適化)、創造性。
10 —読み込み:コンテンツの関連性(読み込み前後のコンテンツの関連性)、退屈な待ち時間の楽しさ、ボリュームとエリアの最適化、創造性。
11 —ユーザーフィードバック_成功、エラー、プロンプト、結果なし:コピーライティング (明確、合理的、人間的、創造的)、グラフィック (明確、目を引く、色の心理的認知精度)。
12 —アニメーション効果:合理的なプロセス(実際の環境をシミュレートする合理化)、継続性、リズム感、ユーザーの日常的な行動のパフォーマンス、効果音の調整、創造性。
13 —始まりと終わりのデザイン:始まり(ブランドの宣伝、独自の特徴、明確な内容、雰囲気の表現、創造性)。終わり:エコー、リズム(始まりとともに)、創造性。
14 —適応型画面設計(フルスクリーン設計):最大画面と最小画面の考慮(テキストと画像の位置、改行効果)
15 —固定サイズのグリッド設計:合理的なセル (黄金比を考慮)、セル領域のリズム、均一な余白
16 —デモ設計案:コンテンツについて最も考慮する点と最も考慮しない点。
17 — ページ:ブランド、主要要素の一貫性、再利用性、リズムと領域の感覚、視覚的な魅力、ブラウジングのガイド、点、線、面の関係、スケッチの原則 (スケッチの基本ルールを使用してページを作成する)。
18 — 読書:読書(視覚)における背景の快適さ、コンテンツと背景のコントラストの快適さ。

実際、インタラクション設計やコード設計など、他にも多くの設計ポイントがあります。これらをユーザーに提示できます。まとめると、これらはユーザー エクスペリエンス設計の大きなプロセスを構成します。作業中はすべてのポイントを見積もることができないことが多いため、いつでも確認できるように要約します。

<<:  vsFTP 3.0.3 のコンパイルとインストールの詳細な分析

>>:  MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明

推薦する

CSSがページのレンダリングをブロックするかどうかについての簡単な説明

おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

JavaScript は、シンプルな虫眼鏡の最も完全なコード分析を実装します (ES5)

この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介...

html オプション 無効 選択 選択 無効 オプションの例

コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...

MySQL 5.7 と Mac 上の MySql の詳細なインストール図をダウンロードする

1.ブラウザに次のアドレスを入力します参考: 2. 次のインターフェースに入ります。下の場所をクリッ...

MySQL データベースの大文字と小文字の区別の問題

MySQL では、データベースはデータ ディレクトリ内のディレクトリに対応します。データベース内の各...

この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...

適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...

HTML で中国語を UTF-8 に変換する方法

HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

IdeaでMySQLデータベースに接続すると中国語の文字化けが発生する問題

問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...

Linux サーバーのクイックアンインストールとノード環境のインストール (簡単に始められます)

1.まずnpmをアンインストールする sudo npm アンインストール npm -g 2. ノー...

Ubuntu 18.04 が VMware 仮想マシンでネットワークに接続できない問題の解決策

仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...

ナビゲーションバーのドロップダウンメニューのサンプルコードを実装するためのHTML+CSS

効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ​...