2018年にサイトで人気の高いもの:ウェブデザインの7つの主な傾向

この記事では、VRテクノロジ、ゲーム、インタラクティブマップ、およびWebデザインで使用されているその他の最近の機能について説明します。これらすべての例は、Webデザイナーのためのサイトやコンペ、さらにはトップスタジオやデジタルエージェンシーのポートフォリオで集められました。一般的に、読んで、見て、インスピレーションを得てください。

アニメーション

サイト上のアニメーションは2000年代に発見されるかもしれません。しかしここ2、3年の間に、それは「美しさのための」ステータスから、テキストや写真よりも効果的に情報を提供するのを助ける解決策に移行しました。

工業用研削盤

ドイツの会社WEIMAのサイトにたどり着き、産業用グラインダーと廃棄物プレスを製造しています。あなたはすぐに何が提供されているのか、それがどのように機能し、そしてなぜそれが必要なのかを理解します。

最初のスクリーンでは、機械の操作が実演されました。また、画像の上にマウスを移動すると表示されるヒントから、この機器の主な利点がわかります。

保険会社

SVGアニメーションの助けを借りて保険会社 "アーセナル"のプロモーションサイトで最も一般的な被保険者のイベントが示されています。そして、それらが描かれている等尺性のスタイルは、3D効果を生み出しながら、建築物と自動車のより正確な表現を可能にしました。

装置および化学薬品製造業者

Medlexは化学試薬、医療機器および洗剤を製造および供給しています。サイトのメインページの画面にサービスが表示され、アニメーションによってイラストがより鮮やかになります。

サービス設計の例については、Alexey Alexandrov氏の記事「サービスページの設計方法:さまざまな事業分野の14社の例」を参照してください。

オンラインオークション

インターネットオークション部のウェブサイトでは、アーティストが写真をオークションすることができ、世界の反対側のコレクターがそれを購入する。そしてアニメーションの助けを借りて、システムの複雑な仕組みと段階を説明します。

インタラクティブ

ここ数年で、ますますインタラクティブなサイトが登場し始めました。ユーザーには、ページ上の要素(プッシュ、ストレッチ、接続、描画など)に連絡する機会が与えられます。このような解決策は常に際立って注目を集めるのに役立ちます。

エンターテイメントチャンネル

Adult SwimはCartoon Networkチャンネルのブロックです。その上で午後11時から午前6時までショーと大人のための漫画。このチャンネル専用のサイトの最初の画面では、漫画「Ricky and Morty」からメインキャラクターの弾力性のある顔を伸ばして、約5分間貼り付けることができます。

ウェブスタジオ

AEROウェブスタジオのウェブサイト上で、カーソルはヒートマップ "Yandex.Metrica"を模倣します - インターネットマーケティング担当者を分析するための主要なツールの1つ。これはおそらくあなたがこのページについて知る必要があるすべてです。さらにスクロールします。

ブランディングエージェンシー

ラテン語から翻訳されたブランドエージェンシーReveléの名前は、未知のものを開示することを意味します。

そして同社は、名前だけでなくサイトでもその位置づけを反映しています。内容を曖昧にするインタラクティブな円は、テキストを読むために押し戻される必要があります。また、連絡先のあるセクションの情報を見るには、カーソルでページをクリアする必要があります。

イラストレーターの個人用サイト

イラストレーターの個人用サイトの最初の画面には、ランダムに点在する7つの点があります。それらは任意の順序で接続することができ、その後行は変な文字に変わります。そして、あなたが点をつなぐことができるすべての組み合わせに、さまざまなイラストが描かれています。私の意見では、このような決定は、サイトの所有者については、販売用のテキストやUTPよりも優れています。

ゲームとテスト

情報ノイズに関しては、最もやる気のある訪問者だけがコンテンツを詳しく調べます。したがって、現代のユーザーのまさしくその振る舞いは、デザイナーとデザイナーをこの傾向に追いやった。確かに、読書とは異なり、誰もがインターネットでプレイしてテストを受けるのが大好きです。結果が友達と共有され、ソーシャルネットワークで共有されるので、これは出席を増加させます。

求人会社

ロシアでのFIFAワールドカップでは、AncorはHR-Landingを使用して欠員の申し込みを収集するボランティアと従業員を募集しました。そして報道を増やすために、彼らはゲームの仕組みを実装しました。

2番目の画面から、私たちは通常の2Dアーケードであるゲームで閉じたセクションに行くことを申し出られます。そして彼らは裸のフットボールのファンが道に沿って走っている障害物を飛び越えるのを可能にします(正直なところ、私は彼に追いつくことができませんでした。成功した場合、起こることにコメントを書いてください)。

洗車

洗車場のウェブサイトではジョークテストを受けることができます。これはあなたの車との関係について教えてくれるでしょう。また、結果を共有する機会があると、面白い質問やGIFが増えます。

ウォーターパーク

そして最後の例は、ウォーターパークサイトでのミニゲームです。訪問者には、スライド、プール、ビーチでの乗り物など、地域を散策する機会が与えられます。そして、それは退屈でした、開発者は多くのおもしろいインタラクティヴォフを思いつきました。あなたは最も高い丘から転がり落ちるか、水の大砲を撃つか、透明なボールで泳ぐことができます。そのような決定は訪問者を含むだけでなく、最も重要なことが感情によって伝えられるということも含みます。

視差効果

おそらくあなたは、スクロール時に前景と背景のオブジェクトが異なる速度で動いていて、三位一体のように見える場所を見たことがあるでしょう。実はこれが視差効果です。それはあなたがより面白くて活気のある効果を作成することを可能にする技術CSS3とHTML5の出現で広まった。今、ますます多くのサイトが現れ始めました。それらは装飾のためだけでなく、その利点を明らかにしたり情報を伝えたりするのにも役立ちます。

リベット

「K2エキスパート」 - オンラインストアファスナーとハードウェア。彼らの主力製品を収益的に販売するために、彼らはリベットのためのプロモーションサイトを立ち上げました。そして文字通りの、そして比喩的な意味でのそれに対するリベットが注目を浴びています。ページ全体を通して、それは静的なままですが、残りのコンテンツはスクロールします。この技術は文字通り最後のスクリーンにそれを解放することなく、ページへの訪問者の注意を引く。

時計ブランド

一連の時計を表すページでは、この手法を使用して商品をより効果的に実演しています。ページをスクロールすると、時計機構によって詳細が取得され、それぞれの説明が表示されます。

化粧品会社

Awwwardsの化粧品会社Mowellensの指名 "Website of the Day"に2回以上登場した。そのウェブサイト上で、視差は滑らかな移行と目を楽しませるアニメーションで共生を創り出します。これはリソースをユニークで思い出深いものにします。

バーチャルリアリティ

これはリスト全体からの受信を実装するのが最も難しい方法ですが、最も一般的な方法の1つです。サイト上に仮想空間を作成するために、彼らはWebGLやWebVR、3Dモデリング、テクスチャリングといったテクノロジーの全セットを使用します。

デジタルスタジオ

Studio Little WorkshopはビジネスのためのVRテクノロジーの使用を扱います。彼らのサービスを実演するために、彼らは提案された技術の可能性を完全に明らかにしたところで仮想部屋でウェブサイトを作成しました。

VRシネマ

CINEVRバーチャルシネマ専用のページでは、好きな映画のセッションのチケットを購入して、VRメガネを使って鑑賞することができます。そしてこの技術のすべての利点をもたらすために、サイトはインタラクティブな3Dシネマスペースを実装しました。

「カスペルスキーラボ」

「Kaspersky Lab」の20周年を記念して、将来を予測するプロジェクトを立ち上げました。

誰もが2050年に私たちを待っているものの彼らのビジョンを共有することができます。そして最高のアイデアがサイトに追加されます。

あなたが芸術家やデザイナーであれば、あなたはあなたの未来的なプロジェクトのためにVR空間を描くことができます。これを行うには、あなたがイラストを描く助けを借りて、サイト上の特別なグリッドをダウンロードしてから、それをあなたの個人アカウントにアップロードします。その後、あなたのイラストは球体に投影され、インタラクティブな地球上に配置されます。

カスタム力学

現在、設計者は、フラットページ、垂直スクロール、おなじみのナビゲーションなど、サイト構築の標準からますます離れています。

この傾向は特定の技術やレセプションに結び付けられていません。さまざまな例で - さまざまな解決策。それはすべてあなたが伝えたいという考え次第です。

エネルギー会社

行われた作業の退屈な説明ではなく、RTEは彼らが参加したプロジェクトとの対話型マップの形式でポートフォリオを設計しました。そして、各オブジェクトの上にマウスを移動すると詳細な説明が表示されます。

出版社

Rhombus Pressの出版社のウェブサイトに掲載されている傾斜したページは、印刷機からの刻印を模倣して、すべてのユーザビリティの規範を破ります。古典的なメニューも提供されていません:あなたは画面の隅の一つにある領域をクリックして別のセクションに行くことができます。

それにもかかわらず、このサイトの概念上の性質により、他のどの発行元サイトよりもはるかに面白く思い出深いものになっています。

物流会社

運送会社GUS-TRANSのウェブサイト上のセクションでは、マウスで直線上の円を移動して移動します。優れた視覚的隠喩と非標準的な表現は、会社を際立たせるのに役立ちます。

イラスト

この傾向は2017年以降勢いを増しており、2019年も続くと思われます。イラストの大きなプラスは、ストックフォトとは異なり、ページをユニークで思い出深いものにすることです。

カンファレンス

ヨセミテ国立公園で開催されたクリエイティブカンファレンスEpicurrence№8のプロモーションサイト。それはデザイナー、イラストレーター、アニメーターそして他の創造的な味を引き付けます。彼らはそこで彼らが望むことをします:彼らは共同プロジェクトを作成し、クライミング、釣り、宝探しに行き、そして夕方には彼らはインスピレーションを与える会話のためにキャンプファイヤーの周りに集まります。

一般的に、このイベント専用のサイトのデザインは、デザイナーがクリエイティブに反応しました。正しい感情を伝えるために、彼は準備の美しさとイベントの雰囲気に触発された主題図を描きました。

イラストレーターのポートフォリオ

Mariano Pascualは、アルゼンチン出身のイラストレーター兼デザイナーです。標準的な名刺サイトの代わりに、彼は自分のデスクトップ、ウィンドウ、バスケット、ブラウザでページを表す、オペレーティングシステムのパロディを描きました。彼らの作品を見せるのは面白くて見本ではないことがわかった。

オンライン貸出サービス

クレディ - 興味のあるローンや投資を得るためのサービス。このサイトのイラストは顧客と企業の比喩です。それらの中のイメージは、プラスチックで開かれた会社の印象を与えます。そして、各オーディエンスに正しい感情を伝えるために、2つのアクセントカラーを使用しました。赤 - 借り手用、灰色 - 投資家用です。

衣料品ブランド

新しいグッチ春夏2018コレクションに捧げられたページは、アニメーションとインタラクティブな瞬間によって補足されて、イラストの連続的なシーケンスです。そして、画像上の何かをクリックすることによって、私たちはオンラインストアで彼女のカードに行きます。

次は何

ほとんどのファッショントレンドは、デザイナーのビジョンだけでなく、ユーザーの行動にも基づいています。今、人々は読むのが好きではなく、みんなが見て参加するのが好きです。そのため、Webサイトの現代的な傾向は、視覚化と対話型に限られています。これは無視することができ、あなたは現代の現実に適応することができ、結果をより高いレベルにすることができます。選択はあなた次第です。

Loading...

コメントを残します