Webデザインチュートリアル（3）：デザインの手順と考え方

<br />前のチュートリアル：Webデザインチュートリアル（2）：模倣と盗作について。前の手順とは異なり、これは実際の操作手順です。この記事には、全体的な手順と列、画像、さらにはアイコンの選択などが含まれており、多くのことを見逃している可能性があります。追加することを歓迎します。私はただ考えるようにガイドしているだけです。この章は、Webページの標準的な制作手順ではありません。標準的な制作手順はないと信じています。
この章のデザイン手順は、Web デザインの最初のステップ (手順と全体像) に基づいています。グラフィックデザインに関する知識や、Web ページとグラフィックデザインの比較が含まれる場合があります。Web ページとグラフィックデザインの違いについては、後で説明します。
この章は PHOTOSHOP ソフトウェアに基づいています。
この章では、Web ページの 90% がタイポグラフィであることを証明します。
全体から部分への順序に従ってください。
1: ポジショニングに基づいて、何をしたいのかを考えます。
この文章は実際には説明の必要がありません。あなたが理解する必要があるのは、私が構築したいウェブサイトがどのような効果をもたらすか、そして例を念頭に置くことです。このウェブサイトはどのような業界に属し、この業界のウェブサイトに共通する特徴は何ですか。
2: あなたの目標/効果と、達成したい目標/効果は何ですか? 設計した目標は、顧客や会社のリーダーの目標と一致していますか? 違いは何ですか?
3: 目標/効果を達成するために、どのように、どのような方法を使用しますか。また、この効果を強化し、強調するために、どのようなデザインを使用しますか。
4: レイアウトをデザインとどのように一致させ、アイデアをどのように強調すればよいでしょうか?
5: スタイルは異なりますか? 色の変更だけですか? (背景レイヤーはすべて色付きのままにします)
始める前にこれらの手順を書き留めておく必要があります。さらに詳細な機能とレイアウトがあるので、自分で理解することができます。
実際のハンズオンデザインの手順は以下のとおりです。
1: 解像度と、さまざまな解像度における対応する効果を決定します。
Web ページとフラットメディアの違いは、Web ページの方がフラットメディアよりも柔軟な表現ができることです。
サイトのフルスクリーンの概念は、実際には相対と絶対に分かれています。相対は、現在の解像度に対するフルスクリーンです。絶対フルスクリーンとは、異なるモニターと異なる解像度がフルスクリーンであることを意味します。一般的に、最小解像度と無限大の最大値を指定します。相対フルスクリーン、たとえば1024×768、800×600など。絶対幅、つまりピクセルで定義するのが最適です。絶対フルスクリーンでは、パーセンテージを使用します。
解像度を決定したら、PS イメージは実際のデザインよりも大きくする必要があります。ユーザーがデザインよりも高い解像度を使用した場合に、Web ページが左側、中央、右側のいずれに表示されるかを検討します。
２：メイン背景、補助線３本、縁取り処理。構成（頭、真ん中、下の大まかな位置）
全体に背景はありますか？
左境界線、右境界線、センターライン。
デザインが絶対幅の場合、ユーザーがより高い解像度で閲覧したときに、コンテンツと追加画面の間に分離はありますか?
構造は、上・中央・下構造か、左・中央・右構造か、あるいは他の構造か。各ブロックにはどのようなコンテンツが配置されるか。
點擊在新窗口中瀏覽此圖片

3: ナビゲーションと標識。
ウェブサイトの 100% はナビゲーションです。これは何度も広まっているフレーズです。
ナビゲーションは長いですか、短いですか? 水平ですか、垂直ですか? それとも曲線ですか? ドロップダウンメニューはありますか? それぞれのウェイトはどれくらいですか? ロゴはどこにありますか? 各言語ページへの入り口はどこにありますか? ログイン (バックエンド管理/ユーザー/メール) はどこにありますか? ロゴの近くにハイライト広告はありますか?
さて、次のステップに進みましょう。
點擊在新窗口中瀏覽此圖片

4: バナーとナビゲーション、トランジション。
ナビゲーションとバナーは別々ですか、それとも一緒になっていますか? 一緒になっている場合、フラッシュを使用して作成していますか? そうでない場合、デザインした背景はタイル状に切り取るのに適していますか? 背景画像のサイズを最小化するにはどうすればよいですか? タイル状にするには 2×2 の背景を使用しないように注意してください。バナーは幅全体を占めていますか、それとも一部だけですか? 一部である場合、空きスペースに何を配置する予定ですか?
5: メインコンテンツ部分。
中心は左から右の構造ですか、それとも大きなピースですか、それとも左から右の構造ですか? 各ピースを分割するにはどのような方法が使用されますか? 色の変更にはどのようなルールが適用されますか? 次に、コンテンツを入力します。
6: 著作権情報やその他の情報は下部にあります。
7:さまざまな調整スタイル。
基本的にはそれだけです。理解できず、書いた内容に満足していませんが、多くの問題を回避するのに役立ちます。
画像と小さいアイコンの選択について:
画像の選択は次の要素に従います。
1: 明確なテーマが必要です。
2: 映像はできるだけサスペンス性のあるものにする。
3: ハイライトされたコンテンツが 1 つだけである (画像にはハイライトされたコンテンツが 1 つだけあり、レイアウトは同じです)
4: 対象物や対象サービスオブジェクトの観点から写真の選択を検討します。
5: 背景の作成が上手であること。
6: 初心者の場合は、できるだけ空白スペースを残すようにしてください。
7: 初心者は arc を慎重に使用する必要があります。
アイコン選択に関する注意事項:
1: アイコンの意味はタイトルと一致している必要があります
2: 同じ色または統一されたスタイル。
3: 突破方法を学ぶ（アイコンはタイトルの背景によって制限されません）
4: アイコンのサイズに特に注意してください。
5: 丸い角をうまく活用する（円弧とは異なる）
6: 覚えやすいものにする。
7: 繰り返しはできるだけ避ける（純粋な装飾や繰り返し刺激効果を除く）

<<: ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

>>: 珍しいけれど役に立つJSテクニックをいくつか紹介します