ディビデザインショーケース：2021年1月からの新規提出

毎月開催されるDiviShowcaseでは、コミュニティメンバーが作成した10のすばらしいDiviWebサイトを紹介します。 毎月、コミュニティから提出された最高のDivi Webサイトを紹介します。今日は、1月の上位10のWebサイトを紹介します。 投稿全体を通して、私を各Webサイトに引き付ける私のお気に入りのデザイン機能のいくつかを指摘します。

私はあなたがそれらを好きであることを願っています！

ディビデザインショーケース：2021年1月からの新規提出

1.ベールインダストリーズ

このサイトはDJWheelerによって提出されました。 それは、セクションの背景、宣伝文句や紹介文の背景、さらにはテキストの濃い灰色のいくつかの灰色の色合いで、工業的なルックアンドフィールを持っています。 ボタンとドットナビゲーションの赤いハイライトが目立ちます。 ロゴは色を結びつけます。 ヒーローセクションは、片側にCTAがあり、反対側にビデオがあるトピックに注目を集めています。 ボタンは平行四辺形です。 メニューのCTAは、ホバーすると黒に変わり、CTAのテキストの色と一致する灰色の背景を持つ別のボタンを開きます。 トピックは大きな宣伝文で示されています。 真の視差の全幅画像は、作業現場の例を示しています。 他のページも同様のデザインに従います。 色とすっきりとしたレイアウトは、この工業用地に最適です。

ValeIndustriesにアクセス

2.アルカインタラクティブ

このサイトはジャスティンアルカラによって提出されました。 サイト全体に紫、赤、青がたくさんあります。 ほとんどのセクションには、2列の背景が含まれています。 ヒーローセクションには、片側にCTAがあり、反対側に画像がある2列のデザインが表示されます。 どちらもタイトルと説明が重なっています。 宣伝文は、2色のアイコンでサービスを説明します。 いくつかのセクションには、背景とは異なるスクロールをする画像やその他の要素が含まれています。 最近のプロジェクトは、タイトルを水平方向にスクロールし、プロジェクトを画像とともに表示します。 証言には、片側に画像、反対側にテキストがあり、ロゴが重なっています。 また、スティッキーな電子メールリンクを備えたスタイル付きのトップに戻るボタンも含まれています。 このサイトは、大きなテキスト、大きなアイコン、色、およびレイアウト要素をうまく利用しています。

ArcaInteractiveにアクセス

3. Trafoos

このサイトはSamantJaitliによって提出されました。 サイト全体の背景と製品の背景に柔らかい色を使用しています。 ボタンやカードの多くには、目立つようにボックスの影が含まれています。 カウントダウンタイマーは、特別価格がいつ終了するかを示します。 ヒーローセクションには、サイトの色が角度の付いたパターンで表示され、両側のパターンと中央の2つのCTAに画像が埋め込まれています。 独自のシャツをデザインするセクションには、アイコン付きの手順が表示されます。 各製品カテゴリには、カテゴリを紹介するために左側に色付きのブロックが含まれています。 連絡先も気に入っています。 各列の背景色が異なる2つの列に情報を表示し、サイトに一致する漫画のグラフィックを表示します。 このサイトは色をうまく利用しています。

Trafoosにアクセス

4.UXデザインストーリー

このサイトはAllieWaltersによって提出されました。 タイトルに特大のテキストを使用したシンプルなデザインを使用しています。 ヒーローセクションは、黄褐色の背景の上に大きなフォントでセクションを表示します。 説明のリンクは、日焼けの濃い色合いで、よく目立ちます。 いくつかのセクションには、真の視差の全幅の背景画像が含まれています。 オーバーレイには、詳細を表示するためのリンクを含む簡単な説明が表示されます。 舞台裏のセクションには、ワークフロープロセスの画像が表示されます。 プロジェクトページには、プロジェクトに関するビデオと詳細情報が表示されます。 詳細は、プロジェクトをステップスルーする小さなセクションに分割されます。 それは私が典型的なプロジェクトページで見たよりも詳細を示しており、可能な限り最も単純でクリーンな方法でそれを示しています。

UXデザインストーリーにアクセス

5. TPress Studio

このサイトはAlexisPrestiによって提出されました。 このサイトは、白いテキストと緑のグラデーションのテキストを含む濃い灰色の背景を使用する1ページのデザインです。 本文の一部は薄い灰色です。 私は通常、黒い背景に白いテキストを目にするのは難しいですが、この色の組み合わせはうまく機能し、テキストを読みやすくします。 ヒーローセクションと次のセクションには、背景に溶け込む背景画像が表示されます。 ブレンドは非常に滑らかなので、画像がどこで終了するかを判断するのは困難です。 これにより、レイアウトにエレガントな雰囲気を与えることができます。 ヒーローセクションのテキストは、タイトルのアウトラインテキストの上に緑色のグラデーションが付いたブロックテキストを使用しています。 タイトルにはグラデーション付きの同様のテキストが使用され、一致する仕切り、ボタン、アイコンが含まれています。 このサイト全体でグレーとグラデーションを使用するのが大好きです。

TPressStudioにアクセス

6.私のコロンバス不動産業者

このサイトはGregVentrescaによって提出されました。 サイト全体の画像オーバーレイと明るい黄褐色の背景に多くの灰色を使用しています。 ヒーローセクションは、画像に溶け込む灰色の背景の上に左側にビデオを表示します。 タイトルは両側に重なっており、テキストの表示は両側ごとに異なります。 いくつかのCTAのオーバーラップ画像、または背景要素とオーバーラップする画像が含まれています。 画像の1つが背景と前景の両方に配置され、興味深いCTAが作成されます。 プロパティはレイアウトに埋め込まれ、ボックスシャドウ付きの画像が含まれます。 いくつかのページには、灰色の背景から目立つカスタムアイコンが含まれています。 色と画像はレイアウトとうまく調和し、ターゲットオーディエンスに完全に適合します。

My ColumbusRealtorにアクセス

7.ドラゴンフライアベニュー

このサイトはMarciAngelesによって提出されました。 柔らかな色の背景のグラデーションと細い線または二重線がたくさんあるすっきりとしたレイアウトを使用して、境界線を作成します。 ヒーローセクションでは、アーチのすべて大文字でメッセージが表示されます。 テキストが背景のグラデーションと重なり、アーチが作成されます。 スライダーはアーチの中央の画像を変更します。 サービスは、さまざまな形の画像内に表示されます。 いくつかの要素は、境界線の後ろの垂直形状、お客様の声のための丸いエッジを持つ水平形状、メッセージをスクロールするティッカーなど、さまざまな方法で背景のグラデーションを表示します。 交互のCTAは、背景色のバリエーションを使用して、片側に画像を表示し、反対側にテキストを表示します。 後ろから上へのボタンは、横向きに印刷された筆記体のテキストです。 トンボのプリローダーとマウスカーソルが大好きです。

DragonflyAveにアクセス

8.NEVERMVM

このサイトはDylanBoulkhrasによって提出されました。 黒の背景に大胆なオレンジ色のテキストを使用し、デザインをシャープに見せています。 スティッキーメニューは左側にとどまり、ページを結ぶ円で線を表示します。 ヒーローセクションの片側には背景画像が表示され、前景にはタイトル、説明、リンク、番号カウンターが表示されます。 メニューは全画面で表示され、同じ背景写真が含まれています。 ビデオが埋め込まれたセクションには、煙で背景から分割されているように見える背景画像が表示されます。 いくつかのセクションには番号が付けられ、太字のタイトルが含まれています。 プロジェクトは、ホバーとオレンジ色のアイコンをズームする急速に変化する画像を含む宣伝文句内に表示されます。 このサイトは色をうまく利用しています。

NEVERMVMにアクセス

9.パンダルミルモン

このサイトはPandaRemiremontによって提出されました。 これは、テキスト、色、グラフィックを使用した中国のデザイン要素を使用した1ページのレイアウトです。 ヒーローセクションには、画面上部の下にあるメニューが表示され、全画面の背景とグラフィック要素の上に浮かんでいます。 大きなグラフィックには、片側に中国語のテキストがあり、反対側にCTAがあります。 中国語のテキストを含む同様のグラフィックがいくつかのセクションに表示されます。 タイトルにはオリエンタルなデザインの大きなテキストを使用。 価格は、中華料理のメニューのように見えるスタイルの背景の上にテキストモジュールで表示されます。 連絡先のセクションが好きです。 片面に画像、もう片面に連絡先情報が記載された予約CTAが含まれています。 予約フォームはこれと重複し、スタイル付きの境界線が含まれています。 これの背景のアートワークが大好きです。

パンダルミルモンをご覧ください

10.アリアンツブルノ

このサイトはMichalTeskaによって提出されました。 それはジャンルに完全に合う緑と青のハイライトでたくさんの白いスペースを持っています。 ヒーローセクションには、片側にCTAがあり、反対側にチームがある全幅の画像が表示されます。 チームメンバーと場所には、手書きのように見えるフォントでラベルが付けられています。 サービスに関する情報は、簡単な宣伝文で提供されます。 これに続いて、ホバーすると色が変わる丸いアイコンが付いた大きな宣伝文のセクションがあります。 宣伝文は、ホバー時に境界線も表示します。 アイコンは境界線と重なっています。 私はチームセクションが好きです。 太い枠でチームの円形画像を表示します。 チームメンバーの画像はサークルの外に続きます。 ホバーすると画像が変化し、チームメンバーが笑顔になります。 埋め込まれた地図も面白いです。 軽く、片面の背景に溶け込みます。 連絡先情報が地図と重なっています。

アリアンツブルノをご覧ください

まとめ

これは、1月のコミュニティDiviWebサイトの投稿ベスト10です。 これらのサイトは素晴らしく見えます、そしていつものように私たちはあなたの提出に対してみんなに感謝したいと思います！

独自のデザインを検討したい場合は、エレガントなテーマのドットコムでネイサンの編集者にメールしてください。 メールの件名は必ず「DIVISITESUBMISSION」にしてください。

コメントもよろしくお願いします！ これらのウェブサイトについてあなたが好きなことを教えてください。彼らがやったことがあれば、ブログで教えてほしいと思います。

Andrew Rybalko /shutterstock.comによる注目の画像