2021年の21の現代的なウェブデザインのトレンド

2021年を少し明るくするのにも役立つ21のウェブデザイントレンドがあります。

1.レトロフォント

多くの古いものが再びクールになり、さらにクールでなくなるのを見てきました。ハンドルバーの口ひげとママのジーンズを考えてみてください。アイロニーは貯蔵寿命が短い。

レトロフォントの人気はこれと同じように衰退しており、ヴィンテージのタイポグラフィを特徴とする多くのデザインは十分に古くなっていません。

しかし、先祖返りのタイポグラフィは少し復活しました。同じ疲れたフォントは見られません。むしろ、様式化と少しの芸術性は、レトロなフォントが何であるかを再考しています。

Spotifyのカーニバルプロモーションのページに、この古いものと新しいものの融合が見られます。古くて決まり文句を感じる代わりに、少し実験して、伝統的な大胆なフォントに新しい命を吹き込みます。これは、従来のフォントを使用して、読みやすさを維持しながら、少しクールでモダンなスピンを与える良い例です。

このウェブサイトには、イベント企画会社のゴリアテエンターテインメントのレトロフューチャー感があります。大胆なタイポグラフィは、今でもその瞬間を感じながら、過去にうなずきます。

2021年が始まるにつれ、より創造的な活版印刷の再想像が見られることを楽しみにしています。

2.視差スクロールアニメーション

視差スクロール効果は何年もの間ウェブサイトデザインのトレンドであり、2021年には視差で何が達成できるかについてより微妙で創造的な探求が見られることを望んでいます。

視差効果の動きが多すぎると、前庭障害のある人に害を及ぼす可能性があることを忘れないでください。奥行きと動きの錯覚が見当識障害やめまいを引き起こす可能性があるためです。視差を最小限に抑え、害を及ぼさないようにするために、より多くの設計者が考慮に入れているガイドラインを次に示します。

視差効果が重要な情報の邪魔にならないようにしてください
ユーザーが重要なタスクを完了するのを難しくしないでください
視差効果の数を最小限に抑える
各インスタンス内の視差の動きの量を最小限に抑える
画面の小さな領域内で視差効果を制限する
ユーザーが視差効果をオフにするオプションを含める
アリス・リーのポートフォリオサイトでは、マウスの位置に反応する視差効果を使用して、彼女のイラストに命を吹き込みます。動きの量は少なく、ヒーローの範囲内に含まれています。これは、制約と意図を持って視差を使用する良い例です。

すべての視差アニメーションが画面全体で壮大なジェスチャーを行う必要があるわけではありません。また、より微妙なアプリケーションも見られました。Green MeadowのこのWebデザインでは、この効果を完全に見逃す可能性があります。しかし、この穏やかなテキストの発表は、表示されるテキストの各ブロックに注意を向けるのに十分な並置を作成します。

来年は、派手な効果のためではなく、コンテンツの重要な部分を強調または強調するためのツールとして、視差スクロールが微妙に使用されるのを見ることに興奮しています。

3.水平スクロール

以前はウェブデザインの偽物と見なされていましたが、水平スクロールが復活しています。

より多くのWebデザイナーが水平スクロールの実験を続けています。それを行う人は、違いのためではなく、画像ギャラリーのように二次情報を段階的に開示するための実用的な方法として、パターンを壊すのが最善です。

2021年に水平スクロールをうまく採用した設計者は、次の考慮事項に留意します。

ユーザーに水平方向のコンテンツ内を移動するように強制しないでください。明確なラベルが付いた矢印ボタンなど、別の方法で移動できるようにします。
明確な視覚的手がかりを使用して、コンテンツが水平スクロールを使用する場所を示し、これらの手がかりをホバーの後ろに隠さないでください
水平スクロールで表示するとどのようなコンテンツが得られるかを考慮してください。水平スクロールではユーザーに小さなプレビューが表示され、ユーザーが詳細を表示したり、ページを下に移動したりできるため、フォトギャラリーは優れた候補です。
読む必要のあるテキストに水平スクロールを要求することは避けてください
独自のDesigner機能ページでは、少量の水平スクロールを使用して大きな画像を拡大し、画像のより関連性の高いビットをより大きなサイズで表示して、関連するコンテンツを添付しています。

モメントデザインスタジオのホームページには、ゆっくりとクリックの機能を備えた作品にあなたをオーバースライディング、またリンクとして動作する主なボタンの隣に明確な手がかりが含まれています。スクロールモーションはペースが良く、長すぎないため、注目の画像が輝きます。

McBride Designは、水平スクロールを使用して、ページ上のスペースを取りすぎずに、作品の大きな写真を表示します。また、右下に明確なインジケーターがあり、ページが水平方向にスクロールすることを期待できます。

 

4.どこでも3Dビジュアル

高解像度の画面の出現により、3Dデザインは、ジオシティーズのブロック状で面取りされたエッジから大きく進歩しました。高品質の3DビジュアルがWebデザインにシームレスに織り込まれているのを見てきました。派手な気晴らしになる代わりに、全体的なユーザーエクスペリエンスを向上させています。

クリエイティブエージェンシーのSennepは、ウェブサイト全体に3D要素を使って一気に深みを与えています。ここには、すべてのデザイン要素の間に素晴らしい調和の感覚があります。これは、よりミニマリストなレイアウトで、3Dがこれまで以上に大きな印象を与えることができる方法の完璧な例です。

ヤヤは、この風変わりでクールなヒーローアニメーションで、ホームページの前面と中央に3Dへの愛情を注いでいます。

そして、以下のプレゼンテーションソフトウェア会社Pitchのこの例では、3次元の形状、ドロップシャドウ、グラデーション、およびレイヤー化された要素でいっぱいのカラフルなレイアウトがあります。これらの3Dデザイン要素は、このデザインに命を吹き込みます。

3D要素は、あらゆるWebページに独自性と次元性の感覚を追加します。

5.マルチメディア体験

ほとんどの人がより速いインターネット速度にアクセスできるため、マルチメディアWebエクスペリエンスがいたるところに現れています。ビジュアル、テキスト、ビデオ、およびオーディオを統合することで、リッチなユーザーエクスペリエンスが実現します。

2021年に成功した設計では、マルチメディアエクスペリエンスに制約が使用されます。

モーションとオーディオを組み合わせる場合のように、シンプルさを優先します。あまりにも多くのことが起こっていると、認知障害のある人の気を散らしたり、圧倒したりする可能性があります。
コンテンツのアクセシビリティを最大化する方法として、さまざまなメディア形式を慎重に使用してください。
事前に録音されたすべてのマルチメディアのクローズドキャプションとトランスクリプトを含めます。
画像の代替テキストを含め、複雑な画像に長い説明テキストを添付します。
すべてのテキストが画像内にレンダリングされるのではなく、HTMLで作成されていることを確認してください。
動画やモーションコンテンツの自動再生は避けてください。代わりに、コンテンツを再生および一時停止するオプションをユーザーに提供する明確な「再生」ボタンを提供してください。
マルチメディアを効果的かつアクセス可能に使用するには、さまざまな要因に対処する責任が伴います。ビデオのアクセシビリティに関するその他のリソースは次のとおりです。

Nicolas Erreraのサイトには、美しい背景ビデオの再生コントロールが含まれています。クリックすると再生され、一時停止することもできます。また、ビデオのどこまで進んでいるかを示す微妙なアニメーションも組み込まれています。

マルチメディア体験は、非常に多くの異なる分野で機能します。以下の例では、我々はからのスクリーンショットを参照ブラック年鑑を。これは、主に白人の学校に通うアフリカ系アメリカ人の学生であることがどのようなものであるかを示すために、AdraintBerealと彼の友人によってまとめられたクラウドファンディングの本です。完全な再生コントロールは、すべてのビデオではっきりと表示されます。美しく撮影されたシネマトグラフィは、デザインの最初のシーンから次のシーンに切り替わっており、催眠サウンドトラックがバックグラウンドで再生されており、映画の予告編のように感じられます。この紹介の背後には情熱があり、本とその背後にある動きについてさらに学びたいと思うようになります。

そして、通常とは異なる何かのために、このマルチメディアの例のリストを、多くのウイルスのWebベースのドロップの背後にある悪名高い会社であるMSCHFで締めくくります。MSCHFのありふれたデザインは、残忍なラインにまたがっており、まったくのタイポグラフィ、SMSテキストメッセージ、その他の要素を組み合わせた、ほとんど不条理なデザインです。

6.拡張現実(AR)体験

また、マルチメディアエクスペリエンスでは、拡張現実(AR)を使用した驚くべき没入型エクスペリエンスをすべて忘れないでください。ARは、AppleまたはAndroidモバイルデバイスでポケモンを探すだけではありません。以下のような新しい技術WebXRので作られたAPIおよびソフトウェアWayfairテクノロジーズは、ほとんど誰のために、この分野を切り開いてきました。

ジープはこの「ジープの製造と価格設定」ページにARを利用しています。自動車販売店に足を踏み入れるのが嫌いな人にとって、これはさわやかでプレッシャーのない体験になります。より多くの小売およびeコマースWebサイトが、ARの力を利用して製品の販売を支援し、潜在的な顧客の購入プロセスを強化しています。

7.穀物に焦点を当てる

堅いグリッドと無地の平らなブロックは、ウェブデザインから個性を実際に奪う可能性があります。ざらざらした質感は、より自然な感触を与えることができます。

Studio Gustoのこのウェブサイトでは、粒状感の美しさがわかります。Lo-Fiデザイン要素を使用して、多くのWebデザインで一般的な滑らかな完璧さよりも自然に感じるラフなユーザーエクスペリエンスを実現します。

8.落ち着いた色に焦点を当てる

木目がデザインに自然な感触を与えるのと同じように、落ち着いた色も可能です。‍

Magic Theater Studioは、明るいカラーパレットと暗い緑のブロックを使用して、このWebデザインのセクション間で明確なコントラストを作成します。これらの落ち着いた色は、手描きのスタイルのテキストやイラストの完璧な背景です。背景には、ほとんど見分けがつかないわずかにざわめく木目があり、明るい背景と暗い背景に微妙な歪みがあり、デザインが非常に生き生きと感じられます。

以下のBobbyRoweのマーケティングポートフォリオは、色を祝うものであり、彼の仕事についての有益で面白い文章を特徴としています。その素晴らしさでよく丸みを帯びたウェブデザインを作成するのは難しいかもしれませんが、ボビーロウはこのウェブデザインでやって来ます。大胆な色に加えて、落ち着いた色も豊富に取り揃えています。

9.好みに基づいたデザイン

Web開発は、よりパーソナライズされたエクスペリエンスを提供する上で大きな進歩を遂げました。これは、ダーク/ライトモードの切り替えや、サイトの外観やナビゲーションを変更する他の方法から、Spotifyによって生成されたカスタムプレイリストのように自分の好みに合わせてカスタマイズされたコンテンツを提供することまで、何でもかまいません。

新しい設計手法とアルゴリズムにより、インターネットは受動的なユーザーエクスペリエンスではなくなり、ユーザー中心になっています。将来的には、ウェブサイトをナビゲートする人々のニーズ、ウォンツ、好みを満たすことにさらに焦点が当てられるでしょう。

10.ガウスぼかし

ガウスぼかしは、画像やグラデーションにソフトフォーカスの渦を提供するのに非常に効果的です。この効果はしばらく前からありましたが、デザイナーはWebデザインのより目立つスペースでこれを使用しています。

Moment Houseは、ヒーローイメージではなく、心地よいガウスぼかしでホームページを開始します。これは雰囲気を与え、それに続くロサンゼルスの街並みの写真に直接結びついています。ロサンゼルスが透けて見える黄金の光と霞のレンズを完璧に捉えています。

モノグラフコミュニケーションの背景にガウスぼかしが見られます。赤、紫、青のこのふわふわのブレンドは、直線とそれを覆う大胆なタイポグラフィの間に素晴らしいコントラストを打ちます。

私がタマラであるUXポートフォリオは、背景にガウスぼかしを少し投げるのと同じアプローチを採用しています。

Goodbooksは、ガウスぼかしの蒸気のような泡を統合します。下のスクリーンショットは実際にはこの正義を行いませんが、白い画面の後ろに隠されているもののように感じます。形が変化して回転するのはわかりますが、それが何であるかを完全に理解することはできません。これは、このような素晴らしいビジュアルアンカーになり、その下にある行動を促すフレーズに注目して、おすすめの本のトップ12をチェックします。

ガウスぼかしのように、永遠に存在していたものが、新しく興味深い方法でそれらを使用しているデザイナーの手に渡って人気が高まるのを見るのが大好きです。

11.Scrollytelling

デザイナーがウェブ体験を通じて物語を語る傾向が高まっています。ここで、スクロールテリングが登場します。ストーリーを高め、物語に引き込む視覚的なストーリーテリングです。

スクロールテリング練習制限の最良のアプリケーション:

小さな領域内で動きを保ちます。
ユーザーの条件でインタラクションを提供します。インタラクションとモーションを再生/一時停止/停止するための明確な再生コントロールを提供します。
重要なテキストから注意をそらすのではなく、スクロールテリング要素がストーリーを強調するのに役立つことを確認してください。
私たち自身のウェブデザイン美術史サイトは、美術史がウェブデザインにどのように情報を与えるかについての物語をサポートするために、小さくて微妙なアニメーションと美しいイラストを使用しています。

12.ダークモード

2021年にダークモードがより多くの画面にヒットするため、AC DCの「バックインブラック」をキューに入れます。より多くのデザイナーがダークモードの美学を採用しており、黒はデザイン要素を画面からポップさせるのに最適な暗い背景を提供します。

以下の例では、Obys Agencyは、ファッションデザイナーのPeter Lindberghへの美しい賛辞をデザインし、微妙な質感の黒い背景と美しいセリフ書体を組み合わせています。

あなた自身のデザイン作業で2021年に暗くなることを恐れないでください。

13.漫画イラスト

ウェブサイトが単なるテキストといくつかの画像またはグラフィックスであったのはそれほど昔のことではありませんでした。Webデザインは進化し​​、デザイナーはより個人的なレベルで人々とつながる作品を作成するようになりました。漫画のイラストは、人類の健康的なダッシュでウェブサイトを変革する方法として人気を博しています。

そこには非常に多くの情報源があり、アーティストは素晴らしい漫画のイラストを作成しています。Blushは、Vijay Vermaのこの素晴らしいセットのように、カスタムキャラクターのイラストを見つけるのに最適なプラットフォームです。

漫画のイラストは、創造性とブランドをより魅力的なものにするという点で非常に多くを提供します。来年、ウェブデザイン全体でキャラクターのキャストが増えるのを楽しみにしています。

14.幾何学的グリッド

グリッドは単純ですが、設計に統合する方法に多くの柔軟性があります。幾何学的なグリッドは、すっきりとした大胆な外観でレイアウトを構築する方法として注目を集めています。

Hudson GavinとMartinによるこのデザインは、ナビゲーション要素とコンテンツの両方にブロックを使用しています。これらの大きな正方形の色は、ナビゲートするのが楽しく、注意を引くのに非常にうまく機能します。

幾何学的グリッドは、均一に配置されている必要はありません。Flowmingoは、より非対称な幾何学的グリッドを使用していますが、レイアウトの基礎は正方形と線です。太い太い線は、全体の正方形を強調しています。

そして、少し軽いタッチのために、化粧品会社のスキンラボのために、この幾何学的なグリッドレイアウトで正方形と鮮明な線の素敵な配置を取得します。

堅実な構造とわかりやすいプレゼンテーションを提供するために、幾何学的グリッドはすべてのWebデザイナーのツールボックスに含まれている必要があります。

15.カスタムカーソル

カーソルはおそらくWebデザインの最も見過ごされている側面の1つであり、私たちのほとんどは昔ながらの矢印で満足しています。デザイナーがウェブサイトのこの重要でない部分を取り、それを何かクールなものに変えることができるとき、これはかなりの成果です。

HGM Legalとその幾何学的グリッドの使用について説明しましたが、この壁から外れた太字の黒いカーソルもあります。

ペンツールは、円形カーソルをさらに一歩進め、アニメーションとテキストを組み合わせて、ほぼサイケデリックスな効果を実現します。

または、Büroのこのモーフィング円形カーソルを確認してください。このカーソルは、カーソルを合わせているデザイン要素に応じて外観が変わります。

2021年には、カーソルが何であるかについて、より独創的な見方ができることを期待しています。

16.スクロールカード

スクロールカードがデザインの不可欠な部分になるのを見て興奮しています。水平方向または垂直方向のどちらにスクロールしても、Webサイトにスッキリとしたアクションを追加し、情報を表示するための優れた方法です。

Ofcinaのこのウェブサイトでは、スクロールカードに目を引く色の配列を使用しています。

カードのレイアウトはかなり前から存在しており、新しいスクロール方向に配置されるのを楽しんでいます。

17.無色のデザイン

まばらな白はすっきりとしたデザインになり、色のある要素はさらに注目を集めます。

Latinxs Who Designのこのデザインには多くの空白があり、各デザイナーの白黒画像をフルカラーに変換するホバー効果があります。

最小限のプレーンなデザインのようなものでさえ、マイクロインタラクション、アニメーション、およびその他の動的な効果を備えた魅力的な体験になる可能性があります。

ユーザーエクスペリエンスデータベースも無色のデザインアプローチを採用しているため、最小限で読みやすくなっています。

18.オーディオ

デザインの不可欠な部分としてオーディオを提供することは、視覚障害を持つ人々のアクセシビリティの障壁を取り除き、ウェブサイトで大量のテキストを聞くことを好む人々にも利益をもたらします。

ニューヨーク・タイムズ紙はその特集記事の一部に付随する音声を提供するという素晴らしい仕事をしていません。

将来的には、ウェブサイトでより多くのオーディオオプションが表示され、コンテンツをどのように体験したいかを選択できるようになることを望んでいます。

19.印刷に触発されたWeb

かつては物理的なオブジェクトであったものがデジタルテクノロジーに取って代わられることで、古いメディアが復活しました。ビニールアルバムの人気は、人々が単なるゼロとワンの束ではない何かを体験したいという証拠です。

印刷物からインスピレーションを得たレイアウトは、現実世界の何かとつながりたいという人々の欲求を満たします。雑誌スタイルのレイアウトや伝統的なグラフィックデザインの他の要素は、紙に印刷するという触覚体験へのリンクを提供します。

上記のHomeRun Studioの例と、以下のFoundamourの例は、どちらも印刷物からインスピレーションを得ており、出版に親しみとつながりを与えています。

20.一貫性のためのシステムの設計

設計システムは強力です。CMSを使用して繰り返し可能なレイアウトと関連コレクションを作成することにより、更新や編集を簡単に行うことができ、重複するWebサイトをすばやく作成することもできます。小規模でも大規模でも、あらゆる組織が設計を作成および管理するのに役立ちます。

また、設計システムのワークフローをさらに簡単にするために開発された、非常に便利なアプリもあります。Zeroheightは、タスクを管理し、コラボレーションするための集中スペースとして機能します。Figmaは、テンプレートやその他の設計システムツールを提供しています。また、WebflowのCMSコレクションは、サイズに関係なく設計システムを強化できます。
SEOやユーザー導線などの意識がなされたウェブ制作のオススメ会社は福岡にある八幡 ホームページ制作のスクリューアドベントがおすすめできます。

21.コードなし

コードがないからといって、コードが完全に削除されるわけではありません。プログラマーと開発者は常に重要です。これらの専門分野を他の方法では免除される人々に開放することを意味するコードはありません。アイデアやビジョンを持っている人なら誰でも作成できます。

ノーコード開発プラットフォームにより、設計者はフロントエンド開発者になります。作家はウェブデザイナーになります。そして、中小企業の所有者は、eコマースの世界に飛び込むようになります。あなたが誰であれ、あなたがもっと何かになる力を与えるコードはありません。それは、非設計者、設計のみを行う人、および開発者である人の間の境界線を取り除きます。それは人々を協力して結びつけます。

新しいノーコードプラットフォームの開発を見て、カリキュラムにそれについての教えを含むデザインコースを見るのはエキサイティングです。2021年にノーコード開発で何が起こるかを見るのが待ちきれません。