🔆 🤛🏼 ◽️ サイトデザイナーへのメモ ⚠️ 👐 🎅🏿

残念ながら、経験豊富でファッショナブルで効果的なデザイナーでさえ、巨大な軍隊は仕事の結果がウェブサイトであるべきであることを忘れており、壮大なポスターとしてのみ適しているポートフォリオの「スーパースクリーンショット」ではありませんアメリカを開いたのではなく、単にまとめて、ウェブサイトのデザインを開発する際にデザイナーが考慮すべき多くの要件を策定しました。

モジュラーグリッド

設計プロセスで最初に決定することの1つは、モジュール式グリッド、単一のフレームワーク、および多くの場合、サイトのすべてのページを通過する主要な要素のレイアウトです。少なくとも、後続の記事でさらに詳細に検討したいと思います。

「ゴム」

「ゴム」サイトのみを作成します。すべての要素はユーザーの画面サイズとフォントサイズに応じて拡大縮小されます。すべてのモジュラーグリッド、ブロック、その他の水平線はパーセントで拡大縮小されます。多くの場合、これは国境にも当てはまります。例外は写真のみです。そして、多くの画像では、 pxのハードサイズが垂直方向の制限です。

「圧縮ストレッチ」

「半ゴム」、つまりサイトは特定の制限まで拡張および圧縮されます。

分

まず、サイトの最小圧縮を見つけることから始めますが、サイトの最小幅はもちろん、サイトのタスクとその対象ユーザーによって決まります。実際、最小パラメーターは760 pxと990 pxの 2つだけです。 1つ目は、最も大規模で雑多なオーディエンス向けに設計された企業サイトまたはリソースに最適です（たとえば、大量サービス：メール、検索、ニュースなど）。モジュラーグリッドの各要素の設計の最小圧縮を考慮して、要素の衝突/重複がないようにします。

最大

サイトの最大幅は異なる場合がありますが、原則として、最小圧縮のサイズの1.5倍から2倍までの範囲を使用します。これは、サイトを1.5倍以上引き伸ばすと、通常、サイトの構成が崩れるためです。ユーザーのモニターのサイズが最大幅を超えた場合にサイト全体で何が起こるかを考慮します。右に？左へ？中心に？最大の解像度を超える解像度で、サイトの完全な外観と環境への自然な移行を実現します。大型モニターのサイトが「クロップド」のように見えることは容認できません。「大型モニターを持っている人はもっと見る」という原則から、すべてのイラストと繰り返されない背景を考慮に入れています。通常、イラストの幅は、状態maxで割り当てられたモジュラーグリッドのブロックの幅によって決まります。

サイト成長の在庫

大規模なタスクでは、名刺Webサイトや販促Web サイトに関するものではない場合、Webサイトのページやセクションの数が増えて変化する可能性があることを考慮する必要があります。したがって、ナビゲーションは、新しいメニュー項目の追加など、アイテム名は問題なく発生しました。新しいセクションの追加がナビゲーションの改訂につながることは容認できません。場合によっては、サイトに情報/機能ブロックを追加/非表示にする必要があります。

フォントスキーム

原則として、1〜3 個のフォントに基づいてWebサイトのデザインを構築します。 基本フォント -サイト資料の基本フォント。 アクセント -見出しのフォント ：場合によっては、 追加のフォントが導入されます。

メニューとナビゲーション。
割り当てブロック（重要な情報、引用、コールアウト）;
読みやすさを高めるための小さなテキスト用。

設計者は、サイト上のすべての要素、ヘッダーの階層、およびナビゲーション要素（ツリーのようなメニューやタグクラウドなど）に対して、単一の共通のインデント/スペースサイズスキームを計画する必要があります。サイトのすべてのページで追跡可能である必要があり、その後のサイト上の情報の登録はすべて一般的なスキームに基づいている必要があります。

ユーザーの対応

設計者は、ユーザーアクションに応答する要素に何が起こるかを計画する必要があります。

参照資料

テキスト内のリンクは常に下線が引かれ、メインテキストとは色が異なります。カーソルの上にカーソルを置くと、リンクの外観を提供することが望ましい（およびナビゲーションに必要）。大量のテキストおよび異種情報を表示する場合は、 訪問済み状態を提供することが不可欠です。次のような追加機能を提供します。

代替データ取得（RSS、PDA、印刷可能バージョン）、
サーバーにあるファイルのダウンロード、
人気のあるリソース（Yandex、Google、Flickr、LJマップサービス、Wikipediaなど）へのアピール
メールアドレス
オープニングフォーム
新しいウィンドウでリンクを開く

テキスト内のこのようなリンクの場合、ほとんどの場合、ユーザーにリンクの追加プロパティを知らせる追加アイコンを提供する必要があります。

擬似リンク

擬似リンク、つまり別のページにリンクしていないが、現在のページの情報をリロードせずに開いたり非表示にしたりするリンクは、点線の下線で示されます。他のすべての点では、それらは通常のリンクに示されているすべてのものでカバーされています。

タブ

これは、ナビゲーション要素とコントロールの混合物です。それらについては、状態を考慮します。

タブは非アクティブです
ホバー（最適化）
コンテンツローダー（opt）
タブがアクティブです

カーソル

ホバー時にカーソル応答を提供します。特に、ナビゲーション、疑似リンクとタブ（ hand ）、ツールチップ（ help ）、要素のサイズ変更とドラッグなどの非標準コントロールに関しては。

魚

設計時には、このページの最も一般的な情報をタイプとボリュームごとに考慮する必要があります。理想的には、実際のデータを操作します。これにより、コミッショニング後のデザインのギャップやサイトのうっとうしい外観が回避されます。他の言語の「魚」を使用することはまったく受け入れられません。テキストの量、単語の平均の長さは異なります。たとえば、英語とロシア語では非常に顕著です。

コンテンツデザイン

すべての可能な設計オプションを予測することは不可能です。デザインは常にサイトのタスクと情報によって決定されますが、企業サイトのテキストページの典型的なリストを示します。

テキストの段落。
3〜4レベルの見出しの階層。
リンク、擬似リンク。
重要な情報を強調する要素。
引用;
順不同リスト;
ネストされたリスト。
番号付きリスト;
テキスト内のストリップの図。
テーブル
ダウンロードするファイル。
コールアウト;
2〜3列の情報の送信（グリッドに応じて）。
シンプルなフォーム。

メモでは、上記の一連の規則がこれらの領域にマークを残していることは否定できませんが、デザイン、色、使いやすさの問題には意図的に対処しませんでした。私たちの議論のおかげで））））モジュラーグリッド、フォント、カラースキームの問題も検討したいと思います。しかし、これはすでに別の資料に含まれています。ある場合）））

サイトデザイナーへのメモ