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

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

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

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

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

推薦する

URLパラメータに基づくNginx転送

使用シナリオ:ジャンプ パスは、傍受された URL に応じて動的に構成する必要があります。これは、イ...

docker に基づいて nginxssl 設定を開始する

前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

MySQL 権限昇格のさまざまな形態の概要

目次1. Webshel​​lを書く出力ファイルにシェルを書き込むログファイル書き込みシェル2. U...

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...

TypeScript で時間を費やした場所の概要

TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...

Windows 10 に Linux サブシステムをインストールする 2 つの方法 (画像とテキスト付き)

Windows 10 は Linux サブシステムをサポートするようになり、面倒なデュアル システ...

HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明

1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

Ubuntu でパスワードを変更し、パスワードの複雑さのポリシーを設定する方法

1. パスワードを変更する1. 一般ユーザーのパスワードを変更する パスワード現在のパスワードを入力...

ストアド プロシージャでエラー状態をトリガーする mysql ストアド プロシージャの分析例 (SIGNAL および RESIGNAL ステートメント)

この記事では、例を使用して、MySQL がストアド プロシージャで引き起こすエラー状態 (SIGNA...

CSSでフレックス配置を表示する(レイアウトツール)

display: flex レイアウトに関しては、深く理解している人もいますし、私も他の人の作業か...

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

HTML コード例: ハイパーリンクの詳細な説明

ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...

js タグ構文の使用法の詳細

目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文:日常の開発では、プログラム...