サイト設計者へのメモ

記事の2番目のバージョン、拡張および補足。



それらのほとんどは、 RIT：Client Technologiesでの私のスピーチの準備をしていましたが、残念ながら、私は連絡しませんでした。











残念ながら、経験豊富で「ファッショナブル」で壮大なデザイナーでさえも、彼らの仕事の結果は、ポートフォリオにのみ適した「スーパースクリーンショット」ではなく、 ウェブサイトであることを忘れています。



当初、このメモは社内で使用するために私が書いたものでしたが、資料が多くなりすぎて独立した記事になりました。 私はアメリカを発見しませんでしたが、単にそれをまとめ、デザイナーがサイトのデザインとデザインのプロセスで考慮すべきいくつかの要件を策定しました。

最初に考えてから

これは非常に単純で、しばしば破られたルールです。 特に若いデザイナーによる。



鉛筆と紙を用意してください。 サイトのタスクとアイデアについて考えてください。 素早いラフスケッチを作成し、構成、おおよそのグリッド、ブロックと要素の配置、必要なイラストの手書きを見つけます。 そして、その後、コンピューターに座ります。



このような単純な移動は、はるかに生産的であり、多くの時間を節約し、より興味深いソリューションを見つけるのに役立ちます。





簡単なスケッチと結果の例

大から小へ、一般から特定へ

これは2番目の単純なルールです。 また、しばしば違反されます。



ドローイングとペインティングの古典的な教えは次のように教えています。「大から小へ、一般から特定へと移動します。 最初に全体の構成、最大の質量と体積、最大のスポットを作成し、次に詳細を調整、調整、飽和させます。」



このルールは、デザインのすべての側面とジャンルに完全に適用されます。



プロジェクトについて考え、アイデアと構成を見つけ、一連のスケッチを描きます。 そして、グリッド、ブロックのレイアウト、要素、大きなカラースポットから始めて、体系的にこれらのスケッチを実装します。 そして、常に詳細でそれらを飽和させます。





段階的な詳細化と一般的なレイアウトから特定のレイアウトへの改良の例。



独学の独学のアーティストが、目や左足のつま先から人物の肖像画を描き始めたのを見たことをよく認めなければなりません。 そして、何人かのデザイナーがどのようにして 単一のプライベートアイコンでサイトを描き始めるかを何度も見ました。 どちらの場合も、驚いたことに、興味深い結果が得られました。



しかし、これは長い道のりであり、多くの場合、設計プロセスで大きな調整と変更を必要とします。 おそらくそれは創造性に当てはまりますが、 デザインの専門家では、ある時点で良い結果を得る必要があるとき、そのようなアプローチは受け入れられないと思います。 明確な時間枠で保証された結果を得るには、保証されたプロセス技術が必要です。 そして、「成功しただけでなく、それを手に入れない」 。



したがって、要約すると、「 大きいものから小さいものへ、一般から特定へ 」。

モジュラーグリッド

設計プロセスで最初に決定することの1つは、モジュール式グリッドです。 サイトのすべてのページを通過するすべてのメインブロックと要素の単一のフレームワークとレイアウト。



グリッドはシンプルで複雑で、使用するのに柔軟性があり、それほどではありません。 これはそれほど重要ではありません。 重要なことは、デザインを設計するときにモジュールの特定のグリッドを指定した場合、それに従うように親切にしてください。 プロジェクトの最初のページから最後のページまで。 また、内部ページを描画するプロセスで、受け入れられたグリッドに収まらない要素がある場合、それを設計するのに十分な時間を費やしていません。



プロジェクト内で単一のモジュラーグリッドに従うことで、サイトの整合性と論理的な認識が向上するだけでなく、開発者の作業が大幅に簡素化されます。





モジュラーグリッドの例





モジュラーグリッドの例

拡張性

現在、すべてのユーザーが多種多様なモニターを使用している場合、主に「ゴム」サイトを作成するのが理にかなっています。 つまり ユーザーのモニターの解像度に合わせてスケーリングするサイト。





さまざまなモニターにエラスティックサイトを表示する



そのため、「ゴム」デザインを作成することを忘れないでください。

• 訪問者の解決において、全体的な構成に違反してはなりません。
• すべての要素は、ユーザーの画面サイズとフォントサイズに応じて拡大縮小されます。
• モジュラーグリッド、ブロック、およびその他の水平線全体がパーセント単位でスケーリングされます。
• すべてのフォント、インデント、ほぼすべての垂直はemでスケーリングされます。 多くの場合、これは国境にも当てはまります。
• 例外は写真のみです。 そして、多くの画像のピクセル単位のハードサイズは垂直方向の制限です。

「圧縮ストレッチ」

いわゆる「半ゴム」は使用に最適です。 サイトは特定の制限まで拡張および圧縮されます。

分

最初に行う必要があるのは、最小限のサイト圧縮を見つけることです。



もちろん、サイトの最小幅は、サイトのタスクとターゲットオーディエンスによって決まります。 実際、最小パラメーターは760 pxと990 pxの 2つだけです。 1つ目は、最も大規模で雑多なオーディエンス向けに設計された企業サイトまたはリソースに最適です（たとえば、大量サービス：メール、検索、ニュースなど）。 2つ目は、イメージおよびプロモーションWebサイトに適しています。



最小限のサイト圧縮で要素の衝突/重複が発生しないように、モジュラーグリッドの各要素をチェックし、必要に応じて修正します。

最大

サイトの最大幅は異なる場合がありますが、原則として、推奨されるストレッチの範囲は最小圧縮のサイズの1.5倍から2倍以下です。 これは、サイトが1.5倍以上引き伸ばされると、通常は構成が崩れるためです。



ユーザーのモニターのサイズを最大幅にして、サイト全体で何が起こるかを判断する必要があります。 配置する場所を決定します。 右に？ 左へ？ 中央に？



最大の解像度を超える解像度で、サイトの完全な外観と環境への自然な移行を実現します。 大きなモニター上のサイトが「クロップされた」ように見えることは受け入れられません。



「より大きなモニターを持っている人なら誰でももっと見える」という原則から、すべてのイラストと繰り返しのない背景を描きます。 通常、イラストの幅は、 max状態で割り当てられたモジュラーグリッドのブロックの幅によって決まります。

サイト成長の在庫

より広い範囲のタスクでは、 名刺サイトでも販促サイトでもない場合、サイトのページやセクションの数が増えたり変化したりする可能性があることを考慮する必要があります。



したがって：



ナビゲーションは、新しいメニュー項目の追加、さらに項目の名前の変更が簡単になるように設計する必要があります。 新しいセクションを追加しても、ナビゲーションが変更されることはありません。





「痛みのない」変更の例/第1レベルと第2レベルのツリーナビゲーションの追加



場合によっては、サイトの外観/情報の非表示/機能ブロックを提供する必要がありますが、外観は簡単です。





「痛みのない」動きの例、

サイトブロックの変更/削除



画面のスケーラビリティを考慮し、サイトに新しい素材を追加することを考慮して、テキストヘッダーとナビゲーションを優先することをお勧めします。

フォントスキーム

ほとんどのサイトは、1〜3 個のフォントに基づいてデザインを構築するときに完全に見えます。



基本フォント -サイト資料の基本フォント。



偶然 -見出しのフォント。



場合によっては、次の追加のフォントが導入されます。

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

設計者は、サイト上のすべての要素、ヘッダーの階層、およびナビゲーション要素（ツリー状のメニューやタグクラウドなど）に対して、単一の共通のインデント/スペースサイズスキームを計画する必要があります。 これは不可欠であり、サイトのすべてのページで使用する必要があります。



サイト上の情報のその後のすべての処理は、一般的なスキームに基づいている必要があります。





シンプルな企業サイトのフォントスキーム

ユーザーの対応

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



典型的な要素を考慮してください。

ナビゲーション

サイトのレイアウトのフラグメント。3つのナビゲーション状態を表示します。通常のメニュービュー、カーソルのあるメニュー項目、現在のセクションの強調表示です。



サイトの種類と規模に応じて、ナビゲーションアイテムの状態をいくつか表示する必要があります。



典型的なセット：

• 通常のビュー。
• ホバーします。
• このセクションにいます。
• 私たちはこのセクションにいますが、さらに深くなりました。
• 親セクションのアイテムにカーソルを合わせます。

同時に、スイッチやコントロールを含むすべてのナビゲーション要素の最小セットは、通常のアクティブビューです。 つまり 少なくともすべてのコントロールとナビゲーション要素では、これは「オン/オフ」です。





ナビゲーションアイテムのさまざまな状態

参照資料

テキスト内にあるリンクには常に下線が引かれ、メインテキストとは色が異なるはずです。



ナビゲーションでは、マウスをポイントしたときにリンクの外観を提供することが望ましいです。



大量のテキストで、異種情報（記事の目次、サイトマップなど）を発行する場合、訪問したリンクの外観を提供することが不可欠です。 また、ホバー時の外観も必要です。

高度な機能とのリンク

特にテキストで使用する場合、追加機能を提供するリンクの場合、リンクの追加プロパティについてユーザーに知らせる小さなアイコンを提供することをお勧めします。



これらのアイコンにはリンクが必要です。

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

追加の「in life」アイコンの使用例。

擬似リンク

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





疑似リンクの使用の一例。

タブ

タブは、ナビゲーションとコントロールの組み合わせです。



それらの状態を考慮します。

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

アクティブなタブ、ホバー、通常の非アクティブな状態の3つのタブの状態が同時に表示されるサイトのフラグメント。

カーソル

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

コンテンツデザイン

情報はインターネットを支配します。 サイトはそれを配信するための手段にすぎません。 サイトの外部デザインは、感情的な雰囲気を設定し、ブランドを強化するフレームにすぎません。



ユーザーがほとんどの時間をサイトで費やしているのは、情報を調べることです。 そしてまさにこの理由のために、コンテンツのデザインに十分な注意を払う必要があります。



サイトとそのコンテンツのタスクは常に異なります。 したがって、このコンテンツも常にさまざまな方法でフォーマットする必要があります。





デザイナーがコンテンツデザインの典型的な要素のほとんどを示したニュースサイトの断片。

コンテンツ要素

すべての可能な設計オプションを事前に予測することは不可能であるとすぐに言わなければなりません。 典型的なもののみを検討します。



たとえば、企業サイトの場合：

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

魚

理想的には、 実際のコンテンツを操作する必要があります。 そうでない場合、少なくとも「魚」は、ページがそのタイプとボリュームで形成されるために、 可能な限り典型的である必要があります。 これにより、試運転後のデザインのギャップやサイトの煩わしい外観を回避できます。



別の言語からの「魚」の使用は完全に受け入れられません。 テキストの量と平均単語長は異なります。 たとえば、英語とロシア語では非常に顕著です。





異なる言語のテキストの同一コンテンツブロックの異なるパターン。

PS

上記の要件は定説ではありません。 ルールから逸脱することがあります。 これだけが無知からではなく、 意識的に行われるべきです。

著者について

パベル・コロディアジニー。 デザイン局の アートディレクターと創設者が作ります。

彼はウェブサイトの開発 とインターフェースの設計を専門としています。

設計の合計経験-9年。 著者および共著者として、彼は 100以上のサイトと約30のインターフェースの誕生に関与していました。 作品の中には、Sunbay Software、Space Andventures、Pulsar Software Systems、Canon Inc.、Yandex、Yamaha Motorsなどの企業向けのプロジェクトがあります。 以前の成果にもかかわらず、彼は最も興味深いプロジェクトがまだ来ないと考えています。

謝辞

すべての同僚や従業員にとって、すべての例は私たちの局の仕事の断片です。

Evgeny Cheporov、私に記事を作成するように押してくれた。

ヴラド・デニソフ、実例を紹介してくれました。



ヤロスラフ・トロフィモフ（Inspireから）彼のアドバイスとテキストに対する建設的な批判。



Ira Yantsev、校正、英語版の翻訳、辞めたいときに記事を終わらせるように説得してくれました。



LiveJournalとHabrahabrのすべてのユーザーに、コメント、フィードバック、質問をいただき、この資料を完成させて拡張しました。