ウェブデザイナーが従うべき3番目の効率的なデザイン原則：配置

概要: 本書「A Design Book for Everyone」では、複雑なデザイン原則を、コントラスト、繰り返し、整列、親密さという 4 つの主要なデザイン原則に凝縮しています。このシリーズの記事では、4 つの設計原則における重要な要素と補助ツールについて詳しく説明します。この記事は、Web サイトのデザインと補助ツールにおける配置の重要な役割について説明する 3 番目の記事です。

ホスピタリティ業界と連邦政府向けの Web 開発を専門とする Ryan Boudreaux 氏は、4 つの設計原則に関する一連の記事を執筆しています。この記事は、一連の記事「Web デザイナーのための効果的な設計原則: 調整」の 3 番目です。内容は次のとおりです。

配置は、「Web デザイナーが従うべき効率的な設計原則」の 3 番目です。

アライメント

気づいているかどうかにかかわらず、配置はほとんどの Web デザインに不可欠な部分であり、舞台裏で機能し、隠れたデザイン要素です。最初は単なる PSD ファイルとして始まることもありますが、デザイン テンプレートや Web デザインのバックボーンとして欠かせない要素となることもあります。おそらく、Web サイトには、サイトの外観や操作性、ナビゲーション、ツールバー、ヘッダー、フッターなどをサポートする主要なフレームワークとして機能するレイアウト (またはグリッド) のセットがあります。

効果的なデザイン原則として、配置はページ上で要素をどのようにレイアウトするかについて明確な決定を下すのに役立ちます。デザインを戦略的なレイヤーにレイアウトすることで、より強力で魅力的な構成を作成できます。グリッド システムを使用すると、各要素の配置に関する標準的なガイドラインが提供されます。配置戦略がなければ、要素を無計画に配置し、他の類似の要素とのつながりがほとんどないかまったくなくなります。整列しないと、Web サイトの外観と雰囲気が乱れてしまいます。

配置戦略は、位置揃え、フロート プロパティ、テキストと画像の配置をはるかに超えて、ユーザー操作、情報アーキテクチャ、グリッド、Web デザイン要素の構成などの他の要素も含みます。

Web デザインにおける配置については、どのように決定しますか?

重要な考慮事項には、視線追跡テストなどの一般的なユーザーインタラクションパターンの分析が含まれます。ユーザーがウェブを閲覧する方法については、目がどのようにページをスキャンするか、最初から最後までのスキャン経路はどのようなものか、ユーザーがどこにジャンプするか、次にどこをクリックするかをどのように決定するかなど、多くの研究が行われてきました。 Usability.gov で Charles O'Connell 氏が始めたディスカッション (図 1 を参照) では、アイ トラッキング テストの意味について紹介しています。これらの調査から得られた重要なポイントの 1 つは、ほとんどのユーザーがページのコンテンツを「F」字型の「ヒート マップ」に沿ってスキャンし、上から始めて (見出しが写真よりも目を引くことが多いのと同じように)、数語だけスキャンし、次にページの左側に沿ってスキャンしてより魅力的なコンテンツを見つけ、数秒以内にクリックするという点です。

図1

同時に、全体的な概念モデル、設計計画、構造、組織を含む情報アーキテクチャ (IA) にも注意を払う必要があります。このプロセスでは、詳細なデザイン パターンの代わりに、ページ ワイヤーフレーム、サイト デザイン ダイアグラム、プロトタイプを使用して、Web サイトの階層、コア ナビゲーション、標準、仕様、カテゴリ ラベル、およびユーザビリティを描写できます。図 2 は、開発フローの開始点となり、最終的に主要な要素を動的な Web サイト モデルに合わせて調整する、シンプルな Web サイトの情報アーキテクチャの概念モデルを示しています。

図2

配置を使用して目を引く Web サイトを作成するにはどうすればよいでしょうか?

配置の原則は秩序をもたらし、秩序は調整を反映するため、Web ページ上のすべての要素がバランスよく合理的に配置されます。成功する製品を構築し、健全に成長するために、ページ要素を整然と整理します。

図 3 に示すシンプルなレイアウトでは、左上にロゴがあり、ヘッダーとナビゲーション領域が右側の領域に水平に配置されています。バナー画像はナビゲーションの下に配置されています。左の列はロゴが 1 列に表示され、フッターの上部まで伸びています。メインコンテンツ領域は、バナー画像とヘッダーとともに左側に配置されます。右の列は残りのスペースを占め、ヘッダー/ナビゲーションとバナー画像の右端と垂直に揃えられます。フッターはページの幅全体に広がります。

図3

ロゴ、左の列、コンテンツ領域、右の列、フッターのテキストはすべて左揃えになっていますが、ナビゲーション領域とバナー領域は中央揃えになっていることに注意してください。

これは、グリッド システムでページ要素を明確にレイアウトする方法の例にすぎません。

グリッドシステム

いくつかのグリッド システムとテンプレートは、Web デザイン要素のレイアウトに役立ちます。以下に、列やタイポグラフィなどのさまざまな設定を変更し、CSS および HTML 形式で保存して、プロトタイプをすばやく提供したり、既存の開発環境に統合したりできる 2 つのシステムを紹介します。

ウェブ開発者の Rasmus Schultz が提供している Grid Designer は、デフォルトで 4 つの列 (各列の幅は 174 ピクセル、合計幅は 800 ピクセル)、各列間の間隔は 20 ピクセル、ページの両側に 22 ピクセルの空白が用意されているオンライン ツールです。この場合、デフォルトのタイポグラフィ スタイルは Veranda です。段落内のテキスト サイズは 10 ピクセル、行の高さは 1 です。見出しには、デフォルトのフォント、サイズ 16 ピクセル、行の高さ 2 が使用されます。図4に示すように。

図4

960 Grid は Web デザイナーの Nathan Smith によって設計され、ダウンロード可能です。幅 960 ピクセルの共通寸法でページを分割することで、Web 開発を効率化するシステムを提供します。 12 列と 16 列の 2 つのオプションがあり、それぞれ単独でも組み合わせても使用できます。 12 列のグリッドでは、幅が 12 列 (各 60 ピクセル幅) に均等に分割されますが、16 列のグリッドでは、幅が 16 列 (各 40 ピクセル幅) に分割され、各列の左右に 10 ピクセルの隙間が設けられ、各グリッドの最も外側に 20 ピクセルの空白スペースが設けられます。

図5

レスポンシブアライメント

レスポンシブ Web デザインのために、W3C は「Flexbox」と呼ばれる CSS フレキシブル ボックス レイアウト モジュールの作業草案を公開しました。編集者のドラフトは 2012 年 8 月 13 日に更新されました。ユーザー インターフェイスのデザインを最適化するための CSS ボックス モジュールの仕様について説明しています。強力なレイアウト モデルでは、フレキシブル コンテナー内の子要素はどこにでも配置でき、サイズを「柔軟に」変更できます。つまり、未使用のスペースを埋めるために拡大したり、オーバーフローを避けるためにスケールを変更したりできます。子要素は、水平方向と垂直方向に簡単に配置できます。これらのボックスのネスト (たとえば、水平方向の中に垂直、垂直方向の中に水平) を使用して、2 次元レイアウトを構築できます。図5はEditors Drafからの図解です。

図6

オリジナルリンク: http://www.techrepublic.com/blog/webmaster/effective-design-principles-for-web-designers-alignment/1856

元記事: http://www.csdn.net/article/2012-08-31/2809425-effective-design-principles-alignment

ウェブデザイナーが従うべき2番目の効果的なデザイン原則：繰り返し

ウェブデザイナーが従うべき最も効果的なデザイン原則の1つはコントラストです。

元のタイトル: Web デザイナーが従うべき 3 番目の効率的なデザイン原則: 配置

キーワード: Web、デザイナー、従うべき、効率的、デザイン原則、調整、要約、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化