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

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

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

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

1.モーションユニバーシティ

このサイトはAndrewBartlettによって提出されました。 このサイトでは、暗い背景に白いテキストを使用し、黄色とオレンジ色（技術的にはダーティブラウン）のハイライトを使用しています。 背景画像はすべて暗いです。 ヒーローセクションには、サイトを説明する背景画像が表示されます。 オーバーレイのテキストには、左側にタグラインとCTA、右側に再生ボタンが含まれています。 再生ボタンはホバーすると変化し、クリックするとポップアップでビデオを開きます。 他のセクションでは、テキストと画像を含む2つの列に情報が表示されます。 スクロールするとレイアウトが交互に変わります。 セクション間には、紹介文用の吹き出し付きの小さなサムネイルがあります。 全幅CTAは、サブスクリプションフォームを使用して画像を提供します。 より多くの証言の吹き出しは、明らかにされたフッターを作成します。

サイトを訪れる

2.JDデザイン

このサイトはJamesDawsonによって提出されました。 背景画像と暗いオーバーレイを含むフルスクリーンスライダーが表示されます。 オーバーレイは大きなテキストを使用してサイトを説明し、CTAを提供します。 スクロールすると、会社を説明する白い背景の上に大きなテキストが表示された別のセクションが表示されます。 サービスは、タイトルと説明の間に興味深いドット区切りが付いたテキストで表示されます。 ポートフォリオセクションには、オーバーレイ付きの画像が表示されます。 このセクションでは、波状のセクション仕切りと、レイアウトの他の部分から十分に目立つ灰色の背景を使用します。 他のいくつかのセクションではこのデザインを使用していますが、背景は青色です。 私は特大のクライアントロゴのあるセクションが好きです。 それらは4列に濃い灰色で表示されます。

サイトを訪れる

3. Swwwish

このサイトはDanielNeumannによって提出されました。 このサイトでは、フルスクリーンの背景が表示され、片側に濃い青色のオーバーレイと白いテキストのCTAが表示されます。 サービスは、ボックスシャドウとアニメーションアイコン付きの宣伝文で表示されます。 背景パターンは宣伝文句を通して見られます。 ホバーするとボックスシャドウ効果が強まり、目立つようになり、宣伝文句が完全に不透明になります。 いくつかの2列のセクションは、一方の側にテキスト、もう一方の側に画像を使用してレイアウトを交互に配置します。 これらのセクションのテキストには、アニメーションアイコンと強調表示されたテキストが表示されます。 価格設定ページでは、白の価格表を使用したシンプルな青と白のデザインをうまく利用しています。 価格表のボタンからの赤い輝きが好きです。 赤いハイライトはちょうど十分な色をもたらし、完璧に目立ちます。

サイトを訪れる

4.HHインスツルメンツ

このサイトはMathiasRueによって提出されました。 このサイトでは、オレンジから赤のグラデーションの背景とアイコンを使用して、エンジニアリングデザインを作成しています。 オーバーレイには、会社情報、ボタン、検索機能が一方に表示され、連絡フォームがもう一方に表示されます。 ドロップダウンメニューには、連絡先ページへの全幅ボタンが含まれています。 パートナーのロゴは、サプライヤーのページへのリンクとともにスライダーに表示されます。 宣伝文は、サービスや情報へのリンクに使用されます。 アイコンとして2色の画像が含まれており、宣伝文句を目立たせるための興味深い境界線があります。 参照用のセクションは同様のデザインを使用していますが、それらははるかに大きく、画像のクライアントロゴが含まれています。 このデザインはブログセクションにも使用されています。 レイアウトには、ヒーローセクションと同じ背景にLinkedInからの埋め込み記事も含まれています。

サイトを訪れる

5.IQアニメーションスタジオ

このサイトはSaurabhPatilによって提出されました。 ヒーローセクションでは、片側にタグライン、情報、CTAが表示され、反対側に濃い青色の背景のグラデーションの上にアニメーショングラフィックが表示されます。 アニメーショングラフィックは見るのが楽しいです。 これらのコーヒーディスペンサーの1つが欲しいです。 残りの背景とボタンには、さらに濃い青が使用されています。 宣伝文の4列には、タイトル付きのアニメーションアイコンが表示されます。 濃い青色の背景と、互いに離れるのに十分な明るさ​​の灰色の境界線を使用しています。 宣伝文のいずれかにカーソルを合わせると、背景がオレンジ色に変わります。 同様のデザインは、情報を提供する他の宣伝文にも使用されます。 興味深いセクションでは、視差のあるクールなアートワークのアニメーションを紹介しています。 これらのページには、クールな読み込みアニメーションも表示されます。

サイトを訪れる

6.ミス幼稚園

このサイトはChrisCadalzoによって提出されました。 このサイトでは、メニューの下の中央に特大のロゴが表示されています。 次のセクションでは、上部と下部に波状のセクションセパレータを使用します。それぞれデザインが異なり、背景色の色合いが複数あります。 このセクションでは、トピックをズームアウトしてホバー時に境界線を変更する正方形の画像として表示します。 リソースのセクションとブログセクション（ただし、背の高い画像）は、これと同じデザインを使用しています。 aboutセクションには、サイトの所有者が丸で囲まれた画像とロゴと同じスクリプトフォントスタイルで表示されます。 サインアップフォームには、タイトルのスクリプトフォントが付いた景品が表示されます。 ブログとサイドバーも、サイトのブランドデザインに一致するようにスタイル設定されています。

サイトを訪れる

7.デルメイン

このサイトはJakeBraughtによって提出されました。 タグライン付きのオーバーレイの背後でビデオの背景が再生されます。 スクロールすると、特定のタイプのクライアントにサービスのマルチカラーアイコンが表示されます。 同様のサービスセクションがページの下部に表示されます。 推薦状は、角度の付いたセクション仕切りのある緑の背景の上に全幅で表示されます。 このセクションは完全に際立っています。 お客様の声のより大きなセクションは、レイアウトの下部に複数の列で交互の色とスタイルの画像で表示されます。 いくつかのセクションでは、大きなテキストの埋め込みビデオと統計、および詳細情報へのリンクを使用して、クライアントのストーリーを示しています。 ビデオの画像は、複数のデバイス上のWebサイトを示しています。 フッターの近くは、山の切り欠きの後ろにある視差のある山、角度の付いたセクション仕切りのある連絡フォーム、および統計カウンター付きのレビューサイトのロゴを表示するセクションから始まります。

サイトを訪れる

8.スパインターナショナル

このサイトはBenDaleによって提出されました。 これは2ページのデザインです。 製品のラベルは、背景に視差で表示され、オーバーレイにはタグラインとCTAが表示されます。 次のセクションでは、一方の側に小さなフォントで詳細情報を示し、もう一方の側に大きなテキストで短縮されたステートメントを示します。 次のいくつかのセクションでは、タイトルとテキストを含む製品の画像を示します。 画像は互いに垂直方向にオフセットされており、デザインに興味深い視覚スタイルを与えています。 サービスは、タイトルと番号付きテキストのオーバーレイを含む画像で表示されます。 より多くの製品が大きな4列のギャラリーに表示されます。 このサイトは、大きなタイトルのテキストと画像を大いに活用しています。

サイトを訪れる

9.ヒーローフォーユー

このサイトはBramChauvinによって提出されました。 このサイトはグラフィックを面白く利用しています。 ヒーローセクションは、実際にヘッダーのスタイルを設定する上部セクションの仕切りを使用します。 タイトルテキストは大きく、タグラインといくつかのボタンが表示されます。 背景は真の視差で表示され、次のセクションの雲セクションの仕切りによって重なっている雲が含まれています。 宣伝文は、丸で囲んだグラフィックを使用してサービスを表示します。 宣伝文のボタンは宣伝文と重なります。 スーパーヒーローのスマートフォンの大きなグラフィックを表示するCTAが好きです。 フッターも面白いです。 角度の付いたセクションディバイダーとオーバーレイのコンタクトCTAを使用して、真の視差でグラフィックの背景を表示します。 ブログは同じデザインに従い、ヘッダー要素とフッター要素を使用しています。

サイトを訪れる

10. VS＆アセンブル

このサイトはMJSwartによって提出されました。 このサイトでは、グラフィカル要素と大きなブロックを興味深い方法で使用してレイアウトを作成しています。 ヒーローセクションでは、暗い背景にさまざまな色のブロック、ドット、縦のテキストを使用して視覚的なパターンを作成します。 これらのパターンは、レイアウトの残りの部分に従います。 次のセクションでは、背景の色のブロック、スタイル付きのタイトル、特大のタイトル、スライダーを使用した複数列のレイアウトを使用して、サービス、会社に関する情報、経験、文化、オフィスなどを表示します。 メニューの連絡先リンクをクリックすると、メニューの連絡先フォームが開きます。 このサイトでの色、テキスト、スライダーの使用が大好きです。

サイトを訪れる

最後に

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

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

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

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