情報の最適化と改良は常にデザインの最初のステップです。 「これは百度アライアンスユーザーエクスペリエンスセンターのバナーにある文章です。ウェブデザインを行う過程で、私はこのような要約についての個人的な経験とアイデアをますます持っています。もちろん、この簡潔な文章には実際には多くの内容が含まれています。個人的には、少なくとも次の4つの側面が含まれていると思います。1.ウェブサイト全体の魅力の観点から、ウェブサイトの魅力をよりよく実現するために、ウェブページにどのような情報を配置する必要がありますか?どの情報を保持する必要がありますか?そして、どの情報を他のページに配置する必要がありますか、または単に破棄する必要がありますか? 2.ページに配置することを決定した情報について、どのようにテキストを書き、画像を選択して、機能性と視覚的な美しさの完璧な統一を実現すればよいですか? 3.情報の重要性を区別し、どれが重要で強調する必要があるか、そしてどれがそれほど重要ではないか? 4.一次情報と二次情報を区別した後、レイアウト、色、サイズ、つまり視覚的にどのように強調して表現すればよいですか? これら 4 つのパートにはそれぞれ議論すべきトピックがほぼ無限にあるため、この記事では、4 番目の側面、つまり Web ページ上のコア コンテンツと視覚表現の関係についてのみ、私の理解を整理して要約します。私が検討したすべての内容を書き留め、私の視点を説明するためにいくつかの具体的な例を示して、皆さんがよりよく理解できるように最善を尽くします。 1. コアコンテンツがページレイアウトに与える影響<br />下の画像はWordPressウェブサイト構築を提供する会社です。ホームページには、上からナビゲーション、ロゴ、スローガン、作品展示、選定理由、お問い合わせフォーム、ログリスト、メール購読、Twitter情報、著作権情報などの情報が表示されています。最初のビジュアルは、間違いなく会社のスローガンと仕事の展示であり、このウェブサイトのホームページの核となるコンテンツです。なぜなら、Webサイト構築会社として、自分たちが何をしているのか、どのようにそれをしているのかを直感的に顧客に知ってもらうことが、顧客が最も知りたいコンテンツであるはずだからです。では、コアコンテンツについてはどのような視覚的配慮がなされているのでしょうか? プロモーションスローガンでは、デザイナーが「wordpress」という単語の文字サイズを非常に大きくし、他のテキストと区別するために濃い灰色を使用して、会社がバックエンドとして特に WordPress を使用して Web サイトを構築していることを強調していることがわかります。宣伝スローガンの下の作品展示画像のサイズは非常に大きく、幅は540ピクセル、デザイン全体の幅は1000ピクセルです。ホームページ上のこのような大きなサイズの展示画像により、お客様は作品の本来の姿を非常に鮮明かつ直接的に確認することができ、会社の制作レベルを直感的に感じることができます。このような大規模な作品展示は、実はウェブサイト全体のレイアウトを漠然と決定づけているのです。考えてみてください。画面の左上の領域に幅 540 ピクセル、高さ 460 ピクセルの長方形を配置した後、次の領域にはどのような情報を配置すればよいでしょうか。実際には、積み木を配置するのと同じで、重要度に応じて 1 つずつ配置するだけです。もちろん、これが唯一のレイアウト方法ではありませんが、どのようなレイアウト方法を使用する場合でも、機能的な考慮に基づいて考える必要があります。私たちは創造性を持つことができますが、創造性と、既成概念にとらわれない純粋な創造性との違いを理解しなければなりません。 ![]() ![]() ![]() Puppetの完成作品から、デザインのアイデアに従って作られたグレーの背景は落ち着いていて控えめで、白い絵の縁と背景と鮮明なコントラストを形成し、グレーと白の配色はカラフルな絵と衝突しないことがわかります。絵がどのように変化しても、グレーと白と合わせることができます。そのため、カラフルな絵は白い背景と縁に対してより目を引くようになり、写真などの重要な情報を視覚的に十分に表現することができます。 ![]() ![]() |
<<: リフレッシュリダイレクトを実現する HTML ヘッドタグメタ
>>: CSS3のbox-shadowプロパティの使い方の詳細な例
目次Zabbix カスタム監視 nginx ステータス1. ステータスインターフェースを開く2. 監...
1. openssh-serverをインストールする yum インストール -y openssl o...
* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...
HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...
a : ハイパーリンクの開始位置または宛先位置を示します。頭字語: 単語の最初の文字からなる略語を示...
この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...
MySQL では、ユーザーに付与された権限をどのように確認しますか? ユーザーに付与される権限は、グ...
Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...
この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...
CentOS 7にPostgreSQL 11をインストールする PostgreSQL: 世界で最も先...
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...
1. データを初期化する `test_01` が存在する場合はテーブルを削除します。 テーブル「te...
方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...
コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...