多くの初心者デザイナーは、まず第一に、デザインが効果的でなければならない、つまり 特定の目標をエンドユーザーに伝えます。
見事な写真を撮った後、時々それでも何かが間違っていることがわかります。 そして、これは単に商品の販売が行かない場合に消費者に影響を与えます。 いくつかの表現とロゴが付いた完全に空白の白い絵を持っている競合他社とは異なり。
効果的な設計のトピックへのリンクがいくつかあります。
効果的なWebデザインの10の原則
Webに適用される5つのデザインルール
これは私が思い出したものです。 ブログのUser Interface Design and Usabilityを読むことをお勧めします。
これは、デザインのあらゆる方向に起因するプリアンブルです。 この記事では、WebデザインとGolden SectionとRule of Thirdsの適用について話します 。
Webでの効果的なデザインの主な目標の1つは、明快さと直感性です。 同様に、ページ上の適切な場所へのユーザーの注意。 これはどのように達成されますか？
たとえば、グリッドを使用するには、最も基本的なソリューションを選択するか、シンプルさと利便性に焦点を合わせることができます。
ただし、いずれにしても、ユーザーがバランス、秩序、調和、快適さを感じるようにする必要があります。 この場合、黄金比の使用は、Webページの設計における重要な段階になります。
黄金比
まず第一に、黄金比とは何ですか？
ウィキペディアに基づく：
黄金比 （ 黄金比 、極値と中点の分割、調和分割、フィディウス数、φ）は、大きな部分が小さな部分を指し、大きな部分が大きな部分を指すような割合でセグメントに分割されます。 たとえば、ACセグメント全体がABを参照するため、ほとんどのABがより小さいBCを参照するようにACセグメントを2つの部分に分割します（すなわち| AB | / | BC | = | AC | / | AB |） 。
この割合は、通常ギリシャ文字のφで示され（表記法もτになります）、1.618 ...（無限数）です。
私たちに伝わった古代文学では、黄金比は最初にユークリッドの「始まり」（紀元前3世紀）にあります。 「黄金比」という用語は、「理想的な人体」の割合として黄金比を使用したレオナルドダビンチによってずっと後に導入されました。 黄金比には多くの素晴らしい特性がありますが、レオナルドダヴィンチに続き、多くの人が「シーク」して、1.5から2のすべての黄金比を見つけます。
ゴールデンセクションのトピックについては、多くの文献が書かれていますので、それが何であるかについては詳しく説明しません。 この概念を初めて聞いた人には、次のリンクを読むことを強くお勧めします。
最も簡単なオプションは、Googleで黄金比を照会することです
しかし、私は最も興味深いリンクを強調することができます：
黄金比の神の割合
黄金比
ミュージアムオブホルモンアンドザゴールデンセクション
Web黄金比
図 1：Webでの実際の黄金比
図 1は、黄金比の原理を示しています。 レイアウトが固定幅-960pxで、2つのメインブロック、コンテンツ、サイドバーが含まれているとします。 マジックナンバー1.618を知らずにチャンクの幅をどのように計算しますか？
もちろん、ウェブデザインは黄金比に厳密に結び付けられるべきではありません。 しかし、場合によっては、この割合はレイアウト全体の視覚的な関係を改善するのに役立ちます。
たとえば、 The 404 Blogのデザインを考えてみましょう。
図 2： 404ブログ
すてきな構図、落ち着いた色。 視覚的な緊張感はなく、ブログの適切な場所に積極的に集中することもありません（現在は流行していますが、これは明るい細部の助けを借りて行われています）。
しかし、ブログのデザインはゴールデンセクションの原則に準拠していません。 興味深いことに、ほとんどの場合、ユーザーはレイアウトを2つの独立したブロック（幅583px
(630px - 31px - 31px)
および299px
(330px - 31px)
）に直感的に分割するため、単純にこれを感じません。
事実、ブログの空き領域は受動的です。 2つのメインブロックの比率は
630px : 330px ≈ 1.91 ≠ 1.62
です。
レイアウトが黄金比に準拠していないにもかかわらず、ほぼ完全にバランスが取れているように見える理由は、ブロック間の関係が等しいためです。
ちなみに、計算機なしで黄金比を計算するのに役立ついくつかの便利なアプリケーションがあります。
1. Phiculatorは、小さくて便利なアプリケーションで、入力された数字から、Golden Sectionに対応する値を自動的に計算します。
2. 黄金分割比設計ツール -オブジェクトとフォームのレイアウトを操作する際の日常的な操作を回避するのに役立つ強力なツール。 その場で結果を見ることができます。
サードのルール
これは、黄金比の単純化されたルールに基づいて構成を構築する原理です。 3分の1の規則は、主に写真家によって使用されます。
視覚的中心を決定するとき、フレームは通常、3：5、2：3または1：2の比率で、その側面に平行な線で分割されます（連続したフィボナッチ数が取られます）。 最後のオプションでは、フレームを各辺に沿って3つの等しい部分（3分の1）に分割します。
黄金比からの3分の1の規則によって得られた注意の中心の位置の顕著な違いにもかかわらず、技術的な単純さと視覚化により、この構成スキームが普及しました。
図 4：写真は、三分の一法則の使用法を示しています
ほとんどの場合、それは不可能であり、サイトレイアウトの最も重要な詳細を強調するために4つすべてのポイントを使用するだけでは役に立ちません。 しかし、1つまたは2つのポイントを使用することは、通常の方法で行われるように、それほど成功していません。
ユーザーは文字「F」の形に基づいてサイトを閲覧するため、通常、左上隅が最も「強い」です。
例として、3分の1の規則を検討してください。 幅が960pxのレイアウトがあるとします。 高さは750〜950ピクセルです。
レイアウトを9つの等しい部分に分割する方法は？ いくつかの簡単な手順：
1.レイアウトの幅を3で割ります。960px/ 3 = 320px。
2.レイアウトの高さを3で割ります（（750px + 950px）/ 2）/ 3≈285px。
3.長方形のサイズは約320x285pxである必要があります。
4.長方形の端に線を引いて、長方形のグリッドを描きます。
5.最も重要な要素を水平線と垂直線の交点に配置します。
人生の例は、 demandware.comプロジェクトです。
サイトの配色は明るくカラフルですが、それでもすべてが非常にシンプルで理解しやすいように見えます。
図 5： デマンドウェア
このプロジェクトの設計の有効性を考慮すると、第3の規則が完璧に使用されているため、完璧なバランスがすぐにわかります。
4つの交差点のうち2つで、最も重要な情報、会社が焦点を当てたい名前（ピンク色の四角でマーク）が強調表示されていることに注意してください。
ナビゲーションブロックも、線の2番目の交差点に著しく配置されています。 これは本当に効果的な（または効率的な）設計です。
おわりに
場合によっては、黄金比と3分の1の規則を適用すると、プロジェクトと訪問者との関係を大幅に改善できます。
比率を1：1.62にすると、サイトの表示がより便利になり、より構造的になります。
また、Webデザインだけでなく機能します。