多くの企業が、Webサイトユーザーにとってよりクリーンでシンプルなエクスペリエンスに移行しているのを見てきました。 あなたがデザイナー、開発者、または単にウェブサイトが好きであるかどうかにかかわらず、あなたは彼らがそれをどのようにやっているかを見ることによって何かを学ぶことができます。 インスピレーションを得る準備をしてください!
- アニメーション
点滅するgif、アニメーションバー、ボタン、アイコン、ダンスハムスターで溢れかえった、ウェブの初期の派手な時代を後にして、今日のアニメーションは、ストーリーテリングを強化し、豊かなユーザーエクスペリエンスを提供するインタラクティブでレスポンシブなアクションを作成することを意味します。
リッチアニメーションの例には、アニメーションの読み込み、ナビゲーションとメニュー、ホバーアニメーション、ギャラリーとスライドショー、モーションアニメーション、スクロール、背景アニメーションとビデオが含まれます。 提案管理プラットフォームであるBeagleからこのサイトをチェックしてください。
豊かなアニメーションは、マイクロインタラクションでも見ることができます。 たとえば、LinkedInでは、ユーザーはカードにカーソルを合わせると、オプションの微妙なポップアップメニューが表示され、ストーリーをスキップするか、他のアクションを実行するかを選択できます。
GIFアニメーションは(喜んで?)復活し、コメディ、デモンストレーション、さらには装飾など、さまざまな目的に使用できます。
- 材料設計
材料設計、Googleが開発したデザイン言語は、印刷ベースのデザインの要素(タイポグラフィ、グリッド、スペース、スケール、色、画像の使用)に加えて、レスポンシブアニメーションとトランジション、パディング、照明や影などの奥行き効果に依存しています。より現実的で魅力的でインタラクティブなユーザーエクスペリエンスを提供します。
マテリアルデザインは、影、動き、奥行きを使用して、あまり多くのベルやホイッスルなしでUXを最適化することに重点を置いた、クリーンでモダンな美学を提供します。
マテリアルデザインの他の例には、端から端までの画像、大規模なタイポグラフィ、意図的な空白などがあります。
- フラットデザイン
マテリアルデザインはミニマリズムの概念へのXNUMXつのアプローチを提供しますが、フラットなデザインはクリーンなラインの愛好家にとって依然として古典的な選択肢です。 つまり、フラットなデザインは、より現実的で、本物の、快適なデジタルルックと見なされることがよくあります。
空白、定義されたエッジ、鮮やかな色、2D(または「フラット」)のイラストの原則に基づいて、フラットデザインは、線の図像や長い影などの手法を頻繁に使用する多目的なスタイルを提供します。
- 分割画面
宣伝するXNUMXつの同じように重要な領域がある場合、または写真やメディアと一緒にコンテンツを提供したい場合に最適です。分割画面は、楽しく大胆なユーザーエクスペリエンスを提供するための優れた新しい方法です。
ユーザーがコンテンツとエクスペリエンスを選択できるようにすることで、訪問者を誘惑するポータルタイプのエクスペリエンスを作成できます。
- Chromeをドロップする
クラシックカーのクロームバンパーと装飾をほのめかして、「クローム」とは、コアコンテンツをカプセル化するWebサイトのコンテナ(メニュー、ヘッダー、フッター、および境界線)を指します。
これは気が散る可能性があり、多くの企業はコンテナから解放され、境界線、ヘッダー、またはフッターのないクリーンな端から端までのレイアウトを作成することを選択しています。
- 折り目を忘れる
「スクロールせずに見える範囲」は、新聞の表紙の上半分を表す新聞用語です。 新聞は折りたたまれて箱やディスプレイに入れられることが多いため、最も説得力のあるコンテンツはスクロールせずに見える範囲にあり、潜在的な読者(およびその財布)をつかむ可能性が最も高くなります。
ウェブサイトのデザインは、スクロールが煩わしいという原則に基づいて、折り畳みのアイデアを長い間使用してきました。 しかし最近、フルスクリーンの画像とコンテンツがユーザーに挨拶し、スクロールして追加のより詳細なコンテンツを公開することを奨励しています。
- フルスクリーンビデオ
ビデオは訪問者の注意を引くための優れた方法であり、多くの場合、ビジュアルやテキストよりも効果的です。 AppleがAppleWatchに使用しているようなループビデオは、トーンを設定して訪問者を引き込むユニークな方法です。
Webデザインに関しては、特定のコンポーネントの多くは、業界、ニッチ、ターゲット市場、およびコンテンツによって決定されます。 あなたのレイアウトは、訪問者が何に反応するか、そしてあなたのメッセージにとって何が最も意味があるかによって異なります。 しかし、これらのトレンドが手元にあれば、必要なことを実行する魅力的なWebサイトを作成するために必要なすべてが揃っており、時代に遅れずについていく方法を知っていることがわかります。