新しい人気のサイトから始める価値があります。
レスポンシブデザイン
アダプティブデザインの登場により、あらゆる種類のタブレット、スマートフォン、その他のモバイルデバイスが広く普及しています。 画面解像度が異なるため、現代のWebデザイナーは、すべてのデバイスで同じように見えるユニバーサルサイトを思い浮かべます。 レスポンシブデザインは、あらゆる解像度に自動的に適応し、機能を損なうことなく、ユーザーが情報を最大限に認識できるようにします。
アダプティブサイトを設計するときは、2つの主要なポイントに注意する必要があります。つまり、サイトが異なる解像度でどのように動作するかと、さまざまなデバイスに表示するコンテンツです。
許可
アダプティブデザイングリッドを設計する場合、メディアクエリまたはメディアクエリが使用されます。 これは何？
このテクノロジーを使用すると、使用するデバイスのモニターまたはブラウザーウィンドウの解像度にサイトが適応する特定の条件（スタイル）を指定し、必要に応じてレイアウトの幅、列数、画像とテキストのサイズを変更できます。 メディアクエリはレイアウトの幅を制限し、特定の値に達すると、規定の要素スタイルが適用されます。 Regent College 、 Skinny Ties 、 UX Londonのサイトでブラウザーウィンドウのサイズを試してみて、これが何につながるかを確認してください。
内容
コンテンツは常に特に重要です。これはレスポンシブデザインの場合に特に当てはまります。これは、2つのバージョン（モバイルとデスクトップ）がないため、デザイン段階で表示するコンテンツを理解する必要があるためです。 最も重要なことは、適応中にサイトの機能が失われることはなく、表示されるコンテンツが可能な限り迅速に人を望ましい結果に導くことです。
サイトのモバイル版では、情報を簡潔かつ明確に提示する必要があります。 これを実現するために、設計者はいくつかの方法を使用します。
1.テキスト情報の一部をビデオまたは写真に置き換えます。
2.ナビゲーションの簡素化。
3.より大容量のコンテンツの作成。
4.商品の明確な説明。
5.機能の簡素化（多くの二次要素を取り除く）など。
1ページのサイト（「パフ」）
現在、単一ページのサイトも広く人気を集めています。 このようなサイトでは、多くの特徴的な機能を区別できます。これらの機能は、Webデザインの新しいトレンドでもあります。
1.ページをリロードせずにサイト。
2.垂直、水平スクロールの使用。
3. 1つの画面-サイトの1つのセクション。
4.重要な要素（ヘッダー、バスケット、ソーシャルネットワーク）を修正。
5.大きなフォントの使用。
6.大規模なテーマ別イラスト。
7.背景として画像を使用します。
8.大きなボタン。
9.画面の分離（異なる背景画像、すべての種類の線、塗りつぶし、グラデーション、影）;
10. CSS3およびHTML 5テクノロジーを使用したアニメーション。
1ページのサイトには、 D'Angelico 、 The Enterprise Foundation 、 Tag Creative StudioおよびSnipcartが含まれます。
モジュラーグリッド
そのようなサイトでは、主な設計要素はモジュラーグリッドです。 さらに、異なるサイズのブロックとコンテンツの無限のロード（ソーシャルネットワークから借りたトリックの1つ）が特徴です。 モジュラーグリッドの外観を確認するには、次のサイトを参照することをお勧めします： Lotta Nieminen 、 La vie a la Fresh 、 Benetton 、 MAMO 、 DNabox.com 、 Langland 。
Webデザインのスタイル
現代のインターネット空間には、サイトのデザインにさまざまなスタイルが豊富にあります。 ただし、それでも主要な方向を特定することは可能です。 いくつかのスタイルについて説明しましょう。
ミニマリズム
ミニマリズムは多くのデザイナーの間で人気のある傾向です。 通常、ミニマリズムのスタイルのサイトでは、ユーザーは特定の何かに焦点を合わせようとしています。 他のすべてとは異なる個別の要素が描画されます（画面の中央の絵、または大きな碑文）。 ミニマリズムのスタイルの明るい代表者は、 イーストワークスレザーカンパニー 、 ホール 、 ラップカのサイトです。 ミニマリズムの特徴は次のとおりです。
1.シンプルさと明快さ。
2.最小限のグラフィック要素。
3.機能インターフェース。
4.黒と白の色。
5.最小限の影。
フラットデザイン
それほど人気がなく、ミニマリズムに近いスタイルです。 フラットなデザインは、2次元のスタイルに基づいています。 このスタイルの主なアイデアは、深さを与える他の方法（影、ベベル、レリーフ、グラデーション）なしで、色の助けを借りてのみ要素のジオメトリを画像化することです。 Spell Tower 、 LayerVault 、 Yep！などのリソースで実際にどのように見えるかを確認できます。 ユーザーインターフェイスの各要素は明確に認識される必要があり、そのような要素との相互作用はユーザーにとって直感的でなければなりません。 特別な機能：
1.追加の効果なし。
2.単純な形状の使用。
3.対照的な配色。
4.タイポグラフィを重視。
さらに、「ほぼ平坦な」設計などのタイプの設計があります。 「ほぼフラットな」設計では、フラットな設計手法が使用されますが、いくつかの要素にはまだ追加の効果が追加されています。 たとえば、ボタンには追加のグラデーションまたは影が含まれます。 原則として、デザイナーは何らかの効果を選択し、「ほぼフラットな」デザインのすべての要素に適用します。 Mixpanelはこの例です。
メトロデザイン
通常、軽量、シンプル、高速、オープンとして配置されます。 一般に、このスタイルはフラットなデザインに似ています。 また、高品質のタイポグラフィ、シンプルな要素、適切に設計されたコンテンツも使用します。 メトロデザインの特徴は、リンクに下線が引かれておらず、情報を視覚化するために、マルチカラーで均一に塗りつぶされたナビゲーションスクエアが使用されていることです。 これは自分で確認できます： Blocklevel 、 Microsoft SWIT 、 Etch 。
カスタムジオメトリ
今年はカスタムジオメトリも人気を博しました。 基本的に、サイトのすべての要素（背景、ハイライト、個々の要素）で追跡できます。 幸いなことに、HTML5とCSS3ではこれを行うことができます。 要素の最もトレンディな幾何学的形状は、円形、菱形、六角形（ハニカム）です。あまり一般的ではない三角形があります： Buffalo 、 V2 、 AmplifiQEstudio によって構築されています。
ヴィンテージ（レトロスタイル）
レトロなスタイルは、当時のポスター、ポスター、その他の道具で50〜80年の時代からとられています。 多くの場合、そのような仕事に触発されたデザイナーは、レトロなスタイルでウェブサイトを描きます。 人気のあるデザイン要素は次のとおりです。
1.テクスチャ（特に、あらゆる形態の紙-印刷、破れ、黄ばみ-または紙に似たテクスチャ）の使用、およびあらゆる種類の擦り傷の使用による古さ。
2.装飾要素（フレーム、パターン、フラグ、リボン、ライン-ダブル、トリプル）;
3.レトロな色（ジューシーではなく、ミュート）;
4.典型的な複雑なタイポグラフィ（ポスタータイプのフォント）。
Von Dutch 、 Kinder Forografie 、 Alex Peirce 、 Web Design Yorkshire 、 RodolpheCélestin 、 Teixidoのサイトは、デザインにおけるレトロスタイルの使用を完全に実証しています。
Webデザインの主な方向性のトピックを議論するときに最後に触れたいのは、2013年にサイトに存在する特徴的な要素です。
このような新しいトレンドではありませんが、今日のWeb環境でよく見られるのは視差です。 視差は、サイトの深さの感覚を作成し、3次元空間の幻想を作成します： スポーク 、 iUtopi 、 ミネルバ 。 異なる速度でのいくつかのレイヤーの相対的な動きにより、同様の効果が得られます。
固定メニューは、垂直スクロールによるサイトの広がりの結果です。デザイナーは、ユーザーが毎回上に戻って別のセクションに移動したり、いくつかの重要なアクションを実行したりするのは不便であることを認識しました。 そのため、サイトのスクロール中、メインメニューが上部に固定され始めました。 メニューに加えて、サイトの主要な要素は固定されています（たとえば、オンラインストアの場合、そのような要素はバスケットになります）。 同様のメニューは、 Eyal Shahar 、 Engage Interactive、およびRyan Scherfサイトで使用されました。
背景としてのフルサイズの写真とビデオは、主にサイト訪問者の注目を集めるすごい効果があります： Fifty Three 、 thinkLuke 。
バックグラウンドでビデオを見ると、ユーザーは興味を持ち、サイト（ MediaBoom 、 Orange.com 、 The Power Inside）での作業を続けることができます。
大規模なデザイナーのタイポグラフィ。 少し前までは、テクノロジーがカスタムフォントの広範な使用をまだ許可しておらず、ほとんどのサイトはArial、Tahoma、およびTrebuchetに限定されていました。 Googleのフォントの出現により、Webデザイナーの備品には約30個のフォントが補充されました。これらはGoogle自体によって最適化され、必要に応じてサイトに簡単に接続できます。 しかし、時代は変化しています。 最新のレイアウト方法では、ほとんどすべての非標準フォントを接続できます。 さらに、フォントの組み合わせは、フォントの形式でも、美しく描かれた絵の形式でも使用されます。 カスタムフォントの積極的な使用例は、 Amazee Labs 、 Denise Chandler 、 Ryan Scherfにあります。
モバイルデバイスからWebに移行したもう1つの傾向は、 大きなインターフェイスボタンです。 さまざまなガジェットで「押してタッチ」することがますます一般的になっているため、大きなボタンがWebデザインに「移動」します。 巨大なボタンはクリックをはるかに簡単にしますが、多数のグラフィックに関連付けられているため、ページの読み込み速度が低下するため、サイトビルダーは、画質とWebサイトの読み込み速度を失うことなくアイデアを解決する方法を探す必要があります。 大きなボタンの使用は、 UltraKlinika 、 The Online Gift Card 、 Precomposed Touch Gestured 、 KULT Studio 、 Simboliconsによって積極的に対処されています。
控えめな背景。 2013年、Webデザイナーはサイトの背景、特にあらゆる種類のテクスチャに多大な注意を払うようになりました。それらは最小限で目立たない一方で、奇妙なものです。 控えめな背景の使用例は、次のサイトで見つけることができます： Mangrove 、 Teixido 、 5Tailors 。
QRコード。 モバイル球からWeb球に移行した別の要素。 それだけではありませんが、今ではこれらのコードはサイトを含むどこでも見ることができます。 コードの主な機能は、訪問者の注意を引くことです。
CSS 3とHTML 5を使用したアニメーション。現在、これらの技術の開発により、設計者は簡単にさまざまな効果を作成できます。変形、フロー、表示、平面、その他多数。 ネットワークには、サイトに挿入するプレビューとコードを備えた既製のアニメーションソリューションを既に持っている多くのサイトがあります。 CSS 3およびHTML 5を使用したアニメーションがどのように見えるかを知りたい場合は、 WWF 、 3つのルール 、 Inception 、 InTacto10 、 RailUp 、 Agent 008 Ballに アクセスしてください 。
結論として、モバイルデバイスのWeb業界への影響は確実に続くと思います。インターネットテクノロジーの開発により、デザイナーが積極的に使用するさらに興味深いツールが登場します。 しかし現在、既存のツールセットにより、デザイナーは数千人のユーザーの注目を集めるWebマスターピースのような真にユニークなものを作成できます。
この資料は、Astra Media GroupのWebデザイナー、ニコライリソフによって作成されました。