この概要では、次のプロジェクトのインスピレーションとなる各トレンドと美しい例を紹介します。
1. 奇抜なレイアウト
図 1
2. 単一ページのレイアウト
図 2
3. 複数列のレイアウト
図 3
4. 巨大なイラストと鮮やかなグラフィック
図 4
5. 以前よりも多くの空白
図 5
6. ソーシャルデザインの要素
図 6
7. 会話型ナビゲーション
図 7
8. [動的] タブ
図 8
9. 大きな検索ボックス
図 9
10. 分類に視覚効果を追加する
図 10
11. 著者のアバター
図 11
12. アイコンと視覚的手がかり
図 12
13. タグインデックス (タグクラウドの置き換え)
図 13
14. ブログでのイラストの使用
図 14
15. 水彩画
図 15
16. 手書き
図 16
17. レトロ
図 17
18. 有機素材、レンガ、写真を背景として使用する
図 18
19. マーキングシール
図 19
20. 値札
図 20
21. リボン
図 21
並外れたレイアウト
数か月前の 40 の革新的なデザイン レイアウト: 並外れたレイアウトで実証されたように、よりパーソナライズされた革新的なレイアウトへの強い傾向が見られます。デザイナーは、伝統的な箱のようなレイアウトを使用する代わりに、情報を構造化し、提示し、表現する新しい方法を実験しています。
このような並外れたレイアウト デザインでは、特定のコンテンツよりも全体的な創造性の方が重要で記憶に残ることがよくあります。それでも、ユーザビリティ、タイポグラフィ、ビジュアル デザインが無視されることはほとんどなく、慎重に実行されます。革新的なレイアウトは、大規模プロジェクト、Web サイト デザイン会社、プロモーション Web サイト (大企業の商業活動など) で特に人気がありますが、ブログでも人気があります。
図 22
創造性に関して言えば、使えるデザインと使えないデザインの境界線は非常に曖昧です。新しいアイデアは Web サイト上の既存のものを打ち破る可能性があるため、ユーザビリティ テストは特に重要です。多くの場合、クリエイティブ、クラシック、伝統的なデザインのバランスを取ることが良い考えになります。これは、「壊れない」(または究極的には退屈な) 使えるデザインと、クリエイティブではあるが使えないデザインとの間のバランスを見つけようとすることを意味します。アイデアが成長するには時間がかかることを覚えておいてください。再考、改訂、微調整、改良を経て、最終的にデザインに統合されます。
デザイナーには、従来のボックス レイアウトの慣習から脱却し、新しいアプローチや独自の大胆でクレイジーなアイデアを試すことを強くお勧めします。あなたの才能を発揮してください！
図23
図24
図25
図26
図27
図 28
単一ページ レイアウト
訪問者に好印象を与えるためにデザイナーがよく使用するもう 1 つの方法は、いわゆる単一ページ レイアウトです。このレイアウトでは、単一ページを使用して Web サイトのコンテンツを表示します。これらのデザインが（「少ないほど良い」の原則に従って）ミニマリストであることを必ずしも意味するわけではありません。逆に、この種のデザインは非常に複雑であることが多く、豊富な画像や鮮やかなアニメーション効果が含まれているため、読み込みに時間がかかります。
図 32
ユーザーがナビゲーション オプションをクリックすると、ページが変更され (部分的に変更され)、以前のコンテンツが表示されていた領域に http://www.knowsky.com の新しいコンテンツが表示されます。このレイアウトのナビゲーションのスライド効果とスクロール効果は、パブリック JavaScript ライブラリでサポートされています。
ユーザーにとっての主な利点は、必要な情報を取得するために必要なマウスの移動とクリックが少なくなるという単純な事実から得られます。このアプローチは非常に新しいため、従来とは異なるナビゲーションの使用に混乱する可能性があるユーザーにとっては絶好の機会となります。 「静的」バージョンが便利な場合や、必要になる場合もあります。たとえば、JavaScript を無効にしている検索エンジンやユーザーに別のバージョンを提供する必要があります。
図33
図34
図 35
複数列のレイアウト
複数の列 (3 列以上) は、必ずしも複雑なデザインを意味するわけではありません。逆に、複数の列が正しく設計されていれば、表示されるナビゲーション オプションの概要がわかりやすくなり、ユーザーが探している情報をすぐに見つけられるようになるため、訪問者にとって非常に役立ちます。
過去数年にわたり、Web サイトのコンテンツが爆発的に増加し、ユーザーが Web サイトに費やす注目と時間が減少しているのを目の当たりにしてきました (詳細については ReadWriteWeb を参照してください)。したがって、訪問者ができるだけ長く Web サイトに滞在し、コンテンツをより簡単に見つけられるように、デザイナーが情報を表示するためのより簡潔な方法を見つけようとするのも不思議ではありません。
図 36
これを実現する 1 つの方法は、複数の隣接する列を含むレイアウトを使用することです。この考えは完全に理にかなっています。近年、画面の解像度が向上しており (ただし、Asus Eee PC のようなネットブックが普及すると状況は変わる可能性があります)、ユーザーに水平方向のスペースが増え、デザイナーにコンテンツを入力するためのスペースが追加されました。
この結果は、ますます多くの設計者が設計内でより多くの列を使用していることを示しています。私たちの調査では、通常は 1000 ピクセルの画面上で 850 ピクセルの固定幅を持つ、いわゆるマルチカラム レイアウトに向かう強い傾向があることがわかりました。雑誌のレイアウトや大規模なプロジェクトでは、複数の列がよく使用されます。これらのレイアウトでは、構造的なバランス、階層、順序を確保するためにグリッドがよく使用されます。
複数列レイアウトを使用する場合、アクティブな空白スペースと個々の列間の重要性は、どれだけ強調してもしすぎることはありません。 (ページの構造をよりよく表現し、コンテンツのさまざまな領域を強調するために、アクティブな空白は意図的に空白のままにされます。)
この目的のために、デザイナーはよく「シュナイダーマンのマントラ」 (「最初に全体像を示し、後で詳細を示す」) を利用します。 , まずユーザーに機能の概要を説明し、その後、リンクがクリックされたときに、オンデマンドで詳細を提供します (Mozilla Labs がその代表的な例です)。
図37
図38
図39
図29
図30
図31