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

公開: 2019-12-25

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

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

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

1.職人のガラス構造

このサイトはStuartHingstonによって提出されました。フルスクリーンビデオは、テキストを強調する暗いオーバーレイを使用してバックグラウンドで再生されます。オーバーレイには、CTA、タイトル、タグライン、説明、ボタンを含むロゴとメニューが含まれます。スクロールすると、固定ヘッダーと、真の視差の背景画像を持つ同様のデザインが表示されます。サービスと情報は、グラフィック付きのスリムなストリップ内に表示されます。 CTAは、片側に真の視差で円形の画像を表示します。紹介文のスライダーは、作業の例として機能する背景画像の上にテキストを配置します。サービスは、テキストとボタンで背の高い画像を表示します。プロジェクトセクションが大好きです。これは、画像のスタイル付きサイドディバイダーとズーム効果を備えた複数列レイアウトでプロジェクトを表示します。同じサイズのフィールドを使用するお問い合わせフォームも気に入っています。

サイトを訪れる

2.クレアクリエイティブ

このサイトはClaireGallagherによって提出されました。ヒーローセクションには、温かみのある背景のハンドブックCTAが表示され、サイトの内容を説明するのに役立ちます。次のセクションでは、サイト所有者の写真とそれに続くグラフィック付きの紹介文を含む別のCTAを示します。ブログの投稿は、画像とその下のタイトルが斜体で表示されているセクションに表示されます。これにより、余白の多いすっきりとしたデザインになります。私は彼らがどのように目立つかが好きです。お客様の声のセクションは同様のデザインに従いますが、より多くのテキストが含まれています。ページは全幅CTAで終わります。ブログページは、ホームページのブログセクションと同じすっきりとしたデザインに従います。 Work WIth Meページは、リード生成用に作成されており、予約フォームと価格表の独自のデザインが含まれています。プロジェクトはブログ投稿と同じデザインに従います。

サイトを訪れる

3.フレッシュライトメディア

このサイトはNicoleMarieZinnantiによって提出されました。これは、メニューにさまざまなセクションへのアンカーがある1ページのデザインです。このサイトでは、フルスクリーンヘッダーから始めて、画像のタイトルの後ろに大きな白黒の画像、大きなテキスト、黄色をたくさん使用しています。いくつかのセクションには、このデザインに従った画像が含まれています。次のセクションでは、情報を全幅で表示します。サービスは、大きなタイトル、説明、および仕切りのある番号付きのテキストブロック内に表示されます。証言には大きなタイトルも含まれており、最小限のデザインに従います。 Aboutセクションは、大きなタイトル、テキスト、仕切りのある最小限のデザインに続き、最小限の連絡フォームで終わる同様のセクションが続きます。

サイトを訪れる

4.ヒルトップクレジットパートナー

このサイトはRolandoS.Bouzaによって提出されました。ヒーローセクションは、タイトルとタグラインの背後にあるビデオを再生し、スタイル付きのセクションディバイダーで次のセクションに進みます。次のセクションでは、いくつかのCTAを交互のレイアウトで示します。最初のCTAには大きなタイトル、簡単な説明、ボタンが付いた画像が表示され、2番目のCTAには2つのボタンが含まれています。全幅のブログスライダーは、注目の画像をほぼ全画面で表示します。これに続いて、画像と引用付きの所有者に関するセクションがあります。暗い背景画像の上にスタイル付きの境界線で情報を表示する[バージョン情報]セクションが好きです。お問い合わせフォームは、ミラーで同様の形状を使用しており、無地の背景が含まれています。他のページも同様のデザインに従いますが、グラフィック内に多くのサポート情報を追加します。ブログページには、アナウンスを表示するためのスタイル付きサイドバーが追加されています。すっきりとしたレイアウトと大きなテキストのブログ投稿デザインも気に入っています。

サイトを訪れる

5.インサイトホスティング

このサイトはSteveDoigによって提出されました。テキストとオーバーレイの主要なハイライトカラーとして大胆なホットピンクをたくさん使用し、美しく目立ちます。ヒーローセクションには、画面の反対側にCTAが表示された飛行機が画面から飛び出している様子が表示されます。飛行機自体とCTAはホットピンクでシェーディングされています。プランのあるセクションには、ブロック内のプランと価格が表示されます。ホットピンクのホバーアニメーションが含まれています。全幅のCTAは、中央にピンクのチーターを表示し、テキストを片側に表示します。別のCTAは、チェスのセットとピンクの要素を含むテキストを表示します。いくつかのセクションでは、宣伝文句の利点を示しています。私のお気に入りの1つは、彼らがサービスを提供するビジネスの種類について説明するセクションです。画像は、交互にオーバーレイされる5列のグリッドで表示されます。ホバーすると画像がズームアウトし、オーバーレイが削除されます。フッターのメニューもおもしろいです。タイトルごとにスタイル付きの最初の文字が表示されます。

サイトを訪れる

6.ケレンエレーラ

このサイトはEdgarHerreraによって提出されました。このサイトは、聴衆を引き付けるためにたくさんの柔らかい色を使用しています。ヒーローセクションには、片側にCTAがあり、反対側に所有者がいるフルスクリーン画像が表示されます。これに続くのは、片面に画像とフォームの上に説明を表示するエレガントな電子メールサインアップフォームです。スタイル付きの境界線のある画像は、さまざまな情報ページへのリンクを提供します。 Aboutセクションは、中央に配置された紹介文を提供する次のセクションと重なる画像を示しています。次のいくつかのセクションには、交互のレイアウト内の複数のセクションに重なる画像が含まれています。これらのセクションでは、情報とCTAを提供します。お問い合わせフォームは、大理石のテーブルの背景画像の上に配置され、無地の背景から際立っています。本のCTAは、2列に表示され、写真が重なっています。フッターは、InstagramがCTAをフォローし、背景に複数の写真があることを示しています。

サイトを訪れる

7.フィンビンゴ

このサイトはPrashantKarandikarによって提出されました。ハイライトの色がたくさんあるすっきりとしたレイアウトです。ヒーローセクションでは、一方の側に紹介文が表示され、もう一方の側には宣伝文句の列に溶け込むグラフィックが表示されます。情報は、箇条書きを作成するための宣伝文付きの2列のレイアウト内に表示されます。いくつかの情報CTAは、片側に交互のレイアウトでグラフィックを表示します。サービスは、グラフィックとテキスト付きのカード内に表示されます。より多くの情報は、ブロックのセットを作成する色付きの宣伝文句内に提供されます。数字カウンターは、目立つように異なる色で各数字を表示します。 2列の証言は、サイトのカラーデザインと一致します。多くのページは同様のデザインに従い、目立つようにボックスシャドウ付きのコンテンツを追加します。

サイトを訪れる

8.ウクニ

このサイトはVernonJoyceによって提出されました。製品を中心としたすっきりとしたレイアウトになっています。メガメニューには、情報と画像を表示する片側への複数のリンクを含む3つの列が表示されます。ヒーローセクションには、オフィス家具の一連のグラフィックが表示されます。それらのいずれかにカーソルを合わせると、他のオブジェクトがオーバーレイで覆われ、家具を説明するタイトルの付いた小さなポップアップが表示されます。ポップアップの色はさまざまです。注目の製品は、片側に大きなグラフィックが表示され、反対側に説明が表示されます。これに続いて、全幅のコンサルテーションCTAと、注目の製品設計に一致する情報のセクションがあります。製品ページには、ポップアップに似たタイトルの製品が表示され、機能の箇条書きリストが含まれています。サービスページはおもしろいです。製品の多くのグラフィックを表示し、宣伝文句の中に利点を表示します。

サイトを訪れる

9.アーキテクテンラボ

このサイトはMischaGroenenによって提出されました。リンクをテキストとして、矢印をナビゲーションとして持つ単一の全画面ページを表示します。画面は斜めに分割され、一方の側に白い背景のタイトルとリンクがあり、もう一方の側に黄色の背景の説明があります。マウスカーソルを動かすと、タイトルが画面に描画されます。リンクにカーソルを合わせると、ズーム効果が表示されます。リンクの1つをクリックすると、メイン画面のデザインに従ったヘッダーのあるページが開きます。ポートフォリオページは、サイトのデザインに一致するフィルターを追加し、ホバーアニメーションとタイトルを含むグリッド内に画像を表示します。チームページには、片側にチームの画像、中央に人物スライダー、反対側にフォームがある3列のデザインが表示されます。情報ページには、彼らが行っている作業に関するスタイル付きのグラフィックが表示されます。シンプルで面白くてユニークなデザインです。

サイトを訪れる

10.次の老化

このサイトはNicolePrincipeによって提出されました。このサイトは、オレンジとグリーンをうまく利用しており、他にもいくつかのハイライトが追加されています。セカンダリメニューにCTAがあります。ヒーローセクションには、オーバーレイに単純なCTAが含まれる、真の視差のフルスクリーン背景画像が表示されます。ページへのリンクは、全幅のスリムなセクションの色とテキストのブロックで作成されます。いくつかの全幅CTAは、一方の側に画像を表示し、もう一方の側にテキストを交互のレイアウトで表示します。宣伝文はまた、丸で囲まれたアイコンとスタイル付きのボタンでCTAを作成します。寄付セクションには、目標と現在の金額が記載されたバーカウンターが表示されます。セクションの多くには、重複するアイコンが含まれています。片面にテキスト、もう片面に2つの画像があるストーリーに関するセクションが好きです。各画像には、情報を表示するホバー効果と詳細を読むためのリンクが含まれています。また、イベントカレンダー、スタイル付きブログなども含まれています。このサイトには、簡単なフォントサイズの制御や言語の選択など、多くのパーソナライズ調整があります。

サイトを訪れる

結論

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

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

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

SUNATTAKIT /shutterstock.com経由の注目の画像