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

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

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

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

1.進捗状況

このサイトはAzerGunesによって提出されました。 全体に大きな白いテキストと明るい黄色のハイライトを備えた多くの黒い背景を使用しています。 ナビゲーションメニューは透明な背景で始まり、ロゴ、リンク、および黄色の背景を持ついくつかのCTAが表示されます。 スクロールすると、ヘッダーが黒い背景に変わり、CTAにタイトルが付けられ、メニューリンクが左側に表示されるハンバーガーメニューに移動します。 ウェブサイト全体のボタンは、ホバー時に色を交換します。 ジョブはカスタム投稿タイプとして表示され、隅にクリック可能なリンクが付いた正方形の画像が含まれています。 チームメンバーは、片側の背景パターンの上に配置されたスライダーに表示されます。 フッターは黄色の背景に情報を表示し、ソーシャルメディアリンクをブロックパターン内に配置します。 私はこのウェブサイトでの黄色と黒の使用が大好きです。

サイトを訪れる

2.Neheulbeukのダンジョン

このサイトはThibaultJullianによって提出されました。 あなたがRPGゲーマーなら、このサイトはすぐにあなたを引き込みます。 背景ビデオは、あるシーンから別のシーンにスライドし、シーンをスローモーションで表示することにより、アニメーション化されたスライダーの外観を作成します。 前景には、スタイル設定されたタイトルとCTAボタンが表示されます。 スタジオのロゴは、漫画のキャラクターが部屋に入るドアの上の石のブロックの絵の上に配置されます。 そのセクションまでスクロールすると、ぼやけたテキストが横からスライドし、その場所に到達すると焦点が合います。 ゲームに関する情報は、カスタムアイコンと金色のハイライト付きのスタイル付きテキストを使用して、宣伝文句内に表示されます。 ゲームのポスターとして機能する背景の上にビデオが埋め込まれています。 スクリーンショットは石積みギャラリー内に表示されます。 このサイトは、黒い背景の上にグラフィックとゴールドのテキストをうまく利用しています。

サイトを訪れる

3. Trafoos

このサイトはsamantjaitliによって提出されました。 このウェブサイトは、色の面白い使い方を見つけるオンラインストアです。 ヒーローセクションでは、サイトの柔らかな黄色と青の色で、背景の左右に画像が表示され、中央にボタンが表示されます。 製品の画像の背景色も、これらの色や他のいくつかの色を使用しています。 一部の商品画像には、商品を背景から際立たせる影が付いています。 カウントダウンタイマーにはロゴが表示されます。 他の製品には、一方の側に境界線があり、もう一方の側に色付きの背景の上に画像が配置されており、ヒーローセクションの青と黄色を使用して色のオーバーラップが作成されます。 新着のセクションは、製品にボックスシャドウを追加します。 フッターも面白いです。 画面を青の大きな列と黄色の小さな列に分割します。 各列は異なる情報を提供します。 パンダの漫画の絵は、ロゴを含めてサイト全体に表示されます。

サイトを訪れる

4.ナンコムシー

このサイトはMarcHENRYによって提出されました。 このサイトでは、背景画像を表示する丸みを帯びたエッジを持つ形状のグラフィック要素を多数使用しています。 ヒーローセクションには、これらのいくつかが垂直に表示され、最も目立つセクションには背景ビデオが表示されます。 他の人は色や画像を表示します。 別のセクションでは、いくつかを水平方向に示しています。 これらははるかに薄く、画面のほぼ全幅を占め、交互のレイアウトで配置されます。 タイトルとして特大のテキスト、説明としてグラフィック要素の下に小さいテキストを含む背景画像が含まれます。 番号カウンターのセクションはこれらに似ており、金色のテキストを含む青/黒の背景グラデーションが含まれています。 紹介文は、テキストがオーバーレイされた背景画像の上に配置されます。 また、中央にグラフィック要素が表示され、両側に宣伝文句が表示されるセクションも気に入っています。 中央のグラフィックは、葉のグラフィックの上に配置して目立たせます。

サイトを訪れる

5.フォスター＆アソシエイツ

このサイトはFlavioMesterによって提出されました。 これは、メニューから始めて、カラーブロックを面白く利用しています。 ヘッダーは、右上隅に配置されたままの2つのブロックのセットです。 左側のブロックには、白い半透明の背景にタイトルが含まれています。 特大のハンバーガーメニューは、黒い半透明の背景の右側のブロックにあります。 サイトを下にスクロールすると、各セクションが所定の位置にスライドします。 セクションは、青いストライプでヒーローセクションから分離されています。 カラーブロックはセクションの左端にあり、黄褐色と濃い灰色の交互の色合いが含まれています。 セクション自体は、白とライトグレーの間で交互に表示されます。 お客様の声は画面の全幅を取り、暗いオーバーレイで背景画像の上にテキストを配置します。 Publicationsページには、埋め込まれたポッドキャストが含まれています。

サイトを訪れる

6.デザインアップ

このサイトはDesignupのTobijaによって提出されました。 これは、ブランディングに紫と関連する色をうまく利用しています。 ヒーローセクションには、紫色のオーバーレイの背後にあるビデオが表示され、前景に説明とCTAが表示されます。 ヘッダーには、それらの間に多くのスペースがあるリンクと、太字の赤いグラデーションのCTAが含まれています。 いくつかのセクションには、紫色の背景、背景パターン、またはその両方が含まれています。 サクセスストーリーのセクションには、作業を表示するための紫色のボタンが付いたコンピューター画面上の作業の画像が表示されます。 別のセクションでは、紫色のアイコンが付いた宣伝文を使用しています。 セクションは、目立つ緑のグラデーションの背景でこれら2つの間に収まります。 前のセクションと次のセクションの背景パターンがこれと重なっています。 コストページには、スクロール中にそのセクションに到達するまでページの下部に固定される赤いセクションを備えた独自の計算機があります。 ブランドカラーは、このデザインを結び付けるのに適しています。

サイトを訪れる

7.常に進歩し続ける

このサイトはRagzThompsonによって提出されました。 このサイトでは、ロゴとヘッダーのCTAから始めて、ブランドカラーに緑とオレンジをエレガントに使用しています。 ヒーローセクションには、フルスクリーン画像と重なる4つの宣伝文が表示されます。 それらには、丸みを帯びた角、大きなアイコン、さまざまな色合いの緑の背景、内側のボックスシャドウが含まれ、ホバーするとオレンジ色に変わります。 内側の影は宣伝文句に重なり合う効果を与え、宣伝文句が互いに重なり合っているように見せます。 緑は、タイトル、宣伝文、アイコンによく使用されます。 ボタンの背景色にはオレンジが多用されています。 ほとんどのボタンには、目立つようにボックスの影が含まれています。 フローティングソーシャルメディアボタンも緑色で、ホバーするとオレンジ色に変わります。 波状のセクションディバイダーは、背景色がディビジョンを微妙に保ちながら、セクションをスタイルで互いに際立たせます。

サイトを訪れる

8. florianboetler.com

このサイトはFlorianBolterによって提出されました。 これは履歴書のウェブサイトの優れた例です。 すべてのWeb要素に十分なスペースを与えながら、Webサイト全体のハイライトに色を興味深い方法で使用します。 ヒーローセクションの片側に大きなテキストがあると、サイトの所有者が紹介され、背景がオフセットされたスタイル付きのボタンが含まれます。 反対側のスタイル付きグラフィックには、サイト全体で繰り返される色が含まれています。 私はプロジェクトのセクションが好きです。 ケーススタディが表示され、片面に画像、もう片面にタイトル、説明、キーワード、スタイル付きボタン、グラフィックが表示されます。 プロジェクトは交互のレイアウトで配置され、それぞれが太字の色を使用した異なるグラフィックを持っています。 連絡先セクションには、ホバーすると傾く大きなソーシャルアイコンが表示されます。 ケーススタディは写真を大いに活用しています。

サイトを訪れる

9.証明を熱望する

このサイトはDijimoeによって提出されました。 これは、背景に濃い青をたくさん使用し、ハイライトに薄緑を使用しています。 色は完璧に連携して、サイトに興味深いデザインを与えます。 ヒーローセクションには、色をブレンドするための青と緑のグラデーションの背景画像が表示されます。 また、次のセクションに溶け込む下矢印セクションの仕切りを使用して、人気のある国を画像と青いオーバーレイを備えた大きな宣伝文として表示します。 前景には、名前とボタンが薄緑色で、情報が白で表示されます。 ホバーすると、オーバーレイが緑に変わり、内側の境界線が緑に、線が白に追加されます。 ホバーすると画像が拡大します。 濃い青色の背景の上に薄緑色で表示される地図も気に入っています。 これには、ホバー時に場所の名前が表示されることが含まれます。 左側には、場所の名前が付いた回転テキストが表示されます。 宣伝文句は、FASTという単語をはじくための背景要素として緑色の文字を使用します。

サイトを訪れる

10.考案する

このサイトは、DeviseのNarathipによって提出されました。 黒と白の色合いを使用して洗練されたデザインを作成します。 ヒーローセクションにはフルスクリーンのスライダーがあり、各スライドには背景画像と異なる色のオーバーレイが表示されます。 片側のテキストは、タイトルと説明を示しています。 スライドの画像は視差で表示されます。 サイトの各セクションには、左側に下線付きのタイトルがあり、中央に説明用のさらに大きなフォントがあります。 背景はオフホワイト、ブラック、またはダークグレーのいずれかです。 彼らのアプローチに関するセクションでは、説明付きのサンプル画像を示しています。 彼らの仕事に関するセクションでは、プロジェクトを大きな画像と詳細を表示するためのリンクとして示しています。 クライアントのロゴは、濃い灰色の背景の上に白で表示されます。 プロジェクトのページはさらにエレガントで、スタイルを設定した背景の上に大きな詳細な写真が含まれています。 求人は宣伝文で示されています。 私はこのサイトの写真と色が大好きです。

サイトを訪れる

最後に

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

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

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

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