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

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

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

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

1.スタジオリネッティ

このサイトはNicolaToffaliによって提出されました。 このサイトは興味深い分割画面デザインを使用しています。 ヒーローセクションの左半分には、カーソルをアドレスバーにスクロールまたは移動すると色が変わる背景の上に、サイトのタイトルが大きなテキストで表示されます。 右側には、白い背景の上に赤いテキストがあります。 この列はセクション内でスクロール可能です。 列の終わりを読むと、セクションがスクロールします。 次の2つのセクションには、ほぼフルスクリーンの列が含まれ、一方の側に黒い背景があり、もう一方の側に白い背景が交互に配置されており、フォントは反対の色になっています。 最後のセクションは、色が変わる背景上のユーモラスなフルスクリーンメッセージです。 このデザインはシンプルでありながら興味深いものです。

サイトを訪れる

2.カーサロカアルキテキュラ

このサイトはFreddyMaldonadoによって提出されました。 このサイトには、ボックスシャドウ、ホバーアニメーション、黄色のハイライトを含む重複する要素が多数含まれています。 分割画面のヒーローセクションの下には、片側に色のブロックがあり、画像が重なっていて、CTAが重なっています。 宣伝文は、仕事の種類に関する情報を提供します。 黄色のシンプルなアイコンがあり、宣伝文句の形がわずかに変化し、ホバーすると黄色の太い境界線が表示されます。 これにより、派手になりすぎずに目立つようになります。 私のお気に入りのセクションには、Instagramフィードと重複する画像が表示されます。 画像をホバーすると上にスライドして、青いオーバーレイで説明が表示されます。 連絡先もおもしろいです。 連絡先情報が黄色のボックスに表示され、小さな連絡フォームが重なっています。

サイトを訪れる

3.カスタマーキャンプ

このサイトはSarahHartによって提出されました。 ポッドキャストプレーヤーは、最新のエピソードで画面の下部に固執します。 紫と黄色は、背景、ボタン、アイコンのサイト全体のブランド色、およびテキストの強調表示に使用されます。 多くの個々のグラフィック要素はセクションとは独立してスクロールし、スクロール効果を最大限に活用します。 各セクションでは、画面を活用してCTAと情報を表示します。 私は特に、画像の周りに紹介文が表示される方法が好きです。 これは、紹介文セクションのレイアウトの下部にまとめられています。 GIFはいくつかありますが、気が散るほど多くはありません。 このサイトは、色、スクロール効果、および重複する要素を最大限に活用しています。

サイトを訪れる

4.アライブサービスGmbH

このサイトはMarkusBehmannによって提出されました。 このサイトでは、アイコン、ボタン、背景、ホバー効果のハイライトとして全体に多くの青を使用しています。 メニューは、リンクにアニメーションのホバー効果を使用します。 ヒーローセクションには、上部と下部の両方にスタイル付きの仕切りが付いたビデオが表示されます。 これにより、ヘッダーからエレガントに分離され、目立つようになります。 私のお気に入りのセクションには、サービスの興味深い宣伝文が表示されます。 宣伝文には、画像とコンテンツに重なるボタンが含まれています。 宣伝文自体はその上の行と重なり、上下にスクロールすると水平方向に移動します。 このセクションには、最初のセクションと一致してそれを結び付けるための波状の仕切りも含まれています。 レイアウトはすっきりとエレガントです。

サイトを訪れる

5.アーキテクトとEMUの構築

このサイトはAbdyDesignburoによって提出されました。 ボタンのロゴ、背景、境界線など、サイト全体のブランドカラーとして緑を使用しています。 ヒーローセクションは、片側に緑色の背景と円形のパターンを使用してスタイルを与えています。 ナビゲーションメニューの背景は透明で、片側に緑色が透けて見えます。 スクロールすると、メニューのテキストと背景の色が変わります。 私は、白い背景とは一線を画し、円のパターンを含む明るい灰色の背景の上にボタンで情報を配置するCTAが好きです。 画像がこれと重なって目立つようになっています。 灰色の円のパターンは、背景にテクスチャを与えるために複数の場所で使用されます。

サイトを訪れる

6.ストライドデジタル

このサイトはダグラス・エンリケによって提出されました。 これは、サイト全体に多くの空白があるすっきりとしたレイアウトを使用しています。 青と黄色のハイライトは、ボタン、アイコン、フォント、背景、およびその他のグラフィック要素に使用されます。 タイトルは小さく、ボタンのように見えますが、正しい方法で目立ちます。 CTAは、片側に手描きのグラフィックを表示し、反対側にテキストを表示します。 グラフィックは、ウェブサイトに最適な漫画風のデザインです。 私は特に、タイトルと説明、情報、次のセクションに重なる作品の画像を含む青い背景を示す成功事例が好きです。 成功事例のページも同様のデザインに従います。 レイアウトはシンプルですが、色のバランスが取れています。

サイトを訪れる

7.朝食用グリーンピース

このサイトはモニカ・ヒギンズによって提出されました。 これは、背景、テキスト、ハイライトにピンク、ダークグリーン、ゴールドをたくさん使用し、サイト全体でスクロール効果をたくさん使用しています。 マウスカーソルをペンのスタイル付きの先端に変更します。 ヒーローセクションには、次のセクションと重なるピンクの行が表示されます。 私はサービスを示すための画像が大好きです。 各画像は古いハードウェアで、画面にテキストが表示されているか、印刷されています。 ページを下にスクロールすると、テキストがスクロールします。 作業の例は、金色の境界線を持つピンクの背景を含む2列のセクション内に示されています。 作品の画像は、古いテレビ画面、Webブラウザー、またはグラフィックとして配置されます。 各グラフィック要素はスクロール効果を使用します。 このサイトは色と画像をうまく利用しています。

サイトを訪れる

8.ねえフレスト！

このサイトはJamesMiddleditchによって提出されました。 ブランドカラーとしてエレガントなグリーンを使用し、サイト全体にたくさんの写真とスクロール効果があります。 ヒーローセクションはぼやけた背景ビデオを再生しますが、サイトが何であるかを理解するのに十分に見ることができます。 タイトルとタグラインでサイトを紹介しています。 食べ物の画像には、スクロールするとフェードアウトするオーバーレイが含まれます。 画像のタグは、東部のテーマに合わせてさまざまな色で表示されます。 情報を提供する宣伝文は、スクロールすると横から所定の位置に移動し、その後にCTAの同様のセクションが続きます。 たくさんの図面や画像がサイトの端を縁取るのに役立ちます。 ベストセラーのセクションには、複数のオプションを備えた製品が含まれています。 このサイトには、スタイル付きのスクロールバーも含まれています。 このサイトの色と画像が大好きです。

サイトを訪れる

9. MVMNT

このサイトはSimonFrostによって提出されました。 ヒーローセクションには、リフレッシュレートとフィルターを備えたフルスクリーンのビデオが表示されます。これは、私の目には古いデジタル映写機のように見えますが、前景のテキストは数秒ごとにメッセージを変更するために反転します。 幅の広い画像が交互に配置された興味深いセクションには、会社に関する情報にリンクする画像の上にタイトルが表示されます。 画像にはホバー効果が含まれています。 ブログの投稿には、抜粋を示す複数のタグとオーバーレイが含まれています。 ブランドカラーには水色とピンクが使用され、タイトルに下線を引くためによく使用されます。 各ページは同様のデザインに従い、一部のタイトルの背後に黒い背景が含まれています。 このサイトは、色と背景をスタイリッシュに利用しています。

サイトを訪れる

10.ルコンブチャ

このサイトはFlorentNoelによって提出されました。 これは、サイト全体で多くの興味深いグラフィックを使用しています。 主に、背景、ボタン、およびトップに戻るボタンに表示されるブランドカラーにライトイエローとライトグリーンを使用します。 背景のグラフィックは、泡のある飲み物を作成し、周囲のセクションから目立つように波状のエッジを含みます。 サイト全体の他のグラフィックや画像は、グラスやピッチャーで飲み物を表示します。 グラフィックを使用している場合は、グラフィックを片側に配置し、テキストを反対側に配置してCTAを作成します。 これらは交互のレイアウトで配置されます。 情報は、マルチカラーのアイコンで宣伝文句内に表示されます。 スクロールすると、すべての画像とグラフィックがスライドするか、所定の位置に反転します。

サイトを訪れる

最後に

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

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

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

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