2016年の5つの実際のWebデザインのトレンド

今年のWeb Design Trendsというリンクが表示されるたびに、数分以内にがっかりするだけで幸せにクリックします。必ず、昨年からのトレンド、またはイラストなどのトレンドではありません。たとえば、アニメーションが明らかに大きなトレンドであることを知っていましたか?真剣に、トレンドリストを作成し、2016年のトレンドとして全画面の背景ビデオを含める場合、リストに書き留める前に、実際にオンラインにアクセスしてWebサイトを確認する必要があります。クリックベイトのような人はいません。とにかく、これ以上苦労することなく、今年の前半の5つの実際の傾向のリストを以下に示します。

1)全画面でスクロール不可

スクロールできないサイトがついに注目を集めています。最上部にスティッキーアンカーリンクヘッダーが付いた、永遠にスクロールする1ページのWebサイトが、ほとんどの場合、ホームページの標準的な方法になりました。人々がスクロールジャッキングを嫌うのと同じくらい、それは時々実際に素晴らしいことがあります。これらのサイトを設計する際の鍵は、制限のために画面を使用することです。基調講演のプロトタイプ。これらのサイトではキーボードナビゲーションが一般的です。

Facebookプライバシーの基本

スクロールなしのフルスクリーンサイトの3つの例:

  1. Facebookのプライバシーの基本—応答性はありませんが、すばらしいサイトです。Facebookがサービスのプライバシーの仕組みを段階的に説明しています。素晴らしいイラスト!
  2. ファンタジー—設計代理店のファンタジーの待望の新しいウェブサイトが今年初めに立ち上げられ、期待を裏切らなかった。特に、作業セクションをチェックしてください。すべてが画面に表示されたままになります。
  3. KLM 50 Travels — KLMの美しいキャンペーンサイト。一度に1つの画面で、50の目的地に移動できます。キーボードの矢印とスペースバーを使用して移動します。

2.横に付く見出し

ウェブデザインの最新のトレンドについては、代理店のサイトを見るのが賢明です。むしろスタジオをデザインするのが賢明です。最近では、見出しをテキストの横にスクロールするモードが一般的です。すべてのクールな子供たちがやっています。これはデスクトップのみのトレンドです。お使いの携帯電話でこれを読むには、サンプルリンクにアクセスせずに、これについて私を信頼する必要があります。

コードと理論

サイドのスティッキーな見出しの3つの例:

  1. コードと理論—この美しいウェブサイトのオープンポジションをスクロールしても、街の見出しは写真に残ります。
  2. スタックオーバーフロー—これは法案に100%適合しませんが、代理店のサイトではないため、合格します。スクロールすると、サブナビゲーションは右に固定されたままになります。いいね
  3. DDB Sthlm —私はスウェーデン出身なので、スウェーデンの例も紹介します。メニューで[仕事]を押して下にスクロールすると、垂直の見出しが横に表示されます。

3)ロゴはローダーです

これは大きなトレンドであり、今年代理店のウェブサイトとほぼ同義語になりました。誰もが持っています。それで、彼らはそうするべきです、なぜならそれは見栄えが良く、それは訪問者にウェブサイトがブランドの一部であるという感覚を与えるからです。非常に賢い。

楽器

ロゴをローダーとして使用する3つの例:

  • インストゥルメント—このサイトは、ページがロードされているとき、およびナビゲーションメニューを開いたときにのみロゴを表示します。それは新しくて、大げさだ。
  • Fubiz —このサイトは、立ち上げ時に大きな衝撃を与えましたが、それには十分な理由があります。サイトにはセクションごとに異なるロゴがあり、すべてに非常に素晴らしいアニメーションがあります。
  • これも—エージェンシーサイトのアートディレクターの前に見たことがない多くの素晴らしいデザインスタジオのウェブサイト。技術的にはロゴではありませんが、ナビゲーションアイコンはここのローダーですが、通常ロゴが収まるように配置されています。

4)乱れた背景画像

ブラウザウィンドウ全体に背景画像が表示されることは新しいことではありません。おそらく、過去の投稿であるActual Web Design Trends 2013の最上位にありますが、これは新しいレベルに引き上げています。背景画像にマウスホバーエフェクトを追加すれば、準備完了です。

アクティブ理論

乱れた背景画像の3つの例:

  1. 脈拍を立てる—マウスを背景の上に移動すると、山が生き生きとしているのがわかります。
  2. Active Theory —代理店向けのWebサイトを作成している場合、Googleの実験のように見せることよりも、狂ったWebスキルを持っていることを示すより良い方法は何ですか?無し。
  3. 詳細—これにはスクロールが必要です。このスイスのデザイン会社はアンカーリンクを信じていないようです。4/ 4 Nos Expertsページの一番下までスクロールして写真にカーソルを合わせると、わずかな歪みが見られます。いいね!

5)トップアニメーション

これは現在技術的に可能であるので、なぜそうではないのですか?正しく行われた場合、これは非常に視覚的に楽しい娯楽体験になる可能性があります。間違って行われた場合は、Flashサイトが再び表示されます。賢者からの言葉:慎重に使用してください。しかし、使用するときは十分に注意してください。

ワーアーク

オーバーザアニメーションの3つの例:

  1. Waaark — Lol、この小さなデザインスタジオは、今年の最も素晴らしいビジュアルエクスペリエンスをプロデュースしました。アニメーションに関しては、フランスに任せてトップを超えてください。
  2. アニモコン—これは見事なクリックアニメーションのアイコンの例であり、すべてWebコードを使用して行われます。
  3. Rally Interactive Beta — Rallyは、サイトに適切な量のアニメーションを持たないという素晴らしい仕事をしています。彼らはトップで夢中になり、クリックして何かを選択したときにそれをまろやかに保ちます。

ボーナス:まだトレンドではありません。1か2か所でしか見られませんが、無制限にスケールするレスポンシブWebサイトの構築は巨大になるでしょう。つまり、このサイトはiMac 27インチRetina 5100+ pxの画面と1280pxの画面でまったく同じに見えますが、それよりも大きいだけです。ブラジルの通信事業者Oiのすばらしいサイトを例で確認してください。

私の名前はニルスで、スウェーデンのストックホルムにあるデジタルスタジオのエイプでデザインディレクターをしています。私たちは素晴らしいデザイン、テクノロジー、コミュニケーションを求めて生きています。私たちについてもっと知りたい場合は、残念ながら上記の傾向のどれも持っていない私たちのウェブサイトをチェックしてください。

また、この記事を楽しんだ場合は、以下の推奨を押してください。それは大いに役立ちます。