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

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

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

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

1.エイタニ

このサイトはKelseySpectreによって提出されました。 ターゲットオーディエンスにアピールするために、エレガントな写真、ゴールドのテキスト、ゴールドのハイライトがたくさん含まれています。 ゴールドのテキストとグラフィックは、白、黒、黄褐色などの明るい背景と暗い背景に最適です。 彼らのアプローチを示す宣伝文のセットには、アニメーションアイコンがあります。 そのセクションには、コーナーグラフィックを備えたスタイル付きの境界線があります。 ハンバーガーメニューには、さまざまな幅と太さの線が表示されます。 ナビゲーションメニューが開き、黒い背景と金色のハイライトが表示されます。 ギャラリーには、クリックするとライトボックスでビデオを再生する製品画像が表示されます。 私は特に、2列が交互に配置された紹介文のページが好きです。

サイトを訪れる

2.デビーと話す

このサイトはMichalTeskaによって提出されました。 フォントと色の選択に特別な注意が払われたすっきりとしたレイアウトになっています。 フォントは正しい方法で目立ち、赤いハイライトはサイトにバランスの取れたデザインを与えます。 コースに関する情報はカード内に表示されます。 それらにはホバー効果が含まれ、最も人気のあるオプションは上部に赤い境界線とテキストで強調表示されます。 情報の要求により、背景画像の上に緑色のオーバーレイが付いたフォームが提供されます。 また、赤いハイライト付きの紹介文スライダーを表示するレビューのセクションも気に入っています。 シンプルですが、サイトのデザインと完全に連携します。

サイトを訪れる

3.しわの寄った作家

このサイトはJulieRickによって提出されました。 これは、黄褐色と白の背景を交互に使用し、全体に赤いハイライトを含むすっきりとしたデザインを使用しています。 赤いハイライトは、メニュー、スクロールバー、およびトップに戻るボタンの召喚にまで及びます。 一連の宣伝文は、訪問者のニーズとホバーで提供されるサービスへの変更を説明します。 別のセクションには、サイト所有者に関する情報が表示され、一方の側に所有者の漫画があり、もう一方の側に箇条書きとカスタムアイコンがあります。 作品のセクションには、タイトルと説明を含むクライアントのロゴが表示されます。 注目のプロジェクトはスライダー内に表示されます。 また、注目の画像を片側に配置した1列のブログレイアウトも気に入っています。

サイトを訪れる

4. DuoGeeks

このサイトはLovishGulatiによって提出されました。 全体に青と紫のグラデーションを使用し、緑または赤のハイライトを使用して、デザインに遊び心のあるエキサイティングな雰囲気を与えています。 ヒーローセクションには、メールフォームと見積もりフォームの両方が表示されますが、それらを整理して理解しやすくする方法が見つかります。 召喚状には、一方の側にグラデーション上のテキストが含まれ、もう一方の側にモザイクを作成するグラフィックを使用した宣伝文句のセットが含まれます。 ホバーするとスクロールするウィンドウに作品を表示するサンプルのセクションが好きです。 お客様の声はグラデーションの背景の上に配置され、グラデーション自体が含まれます。 レイアウト全体に適切に配置されたCTAがたくさんあります。 ショップページも同様のデザインの商品ページと同様に目立ちます。

サイトを訪れる

5.マーベリックス

このサイトはFlavioMesterによって提出されました。 たくさんの黒または赤の背景と大きな白いテキストを使用して、プロ並みの大胆なデザインを作成します。 ヒーローセクションには、タグラインが所定の位置に残っているフルスクリーンスライダーと、ロゴが重なっている赤と黒のメニューが表示されます。 ドロップダウンメニューは、同じデザインに従い、背景が赤で境界線が黒です。 スケジュールのあるセクションでは、片側が黒、反対側が赤で、スケジュールを表示したり登録したりするためのボタンがあります。 最新のニュースは、太い枠の大きなボックス内にテキストとして表示されます。 ギャラリーページには、大きな背景画像の上にInstagramの投稿が表示されます。 このサイトは、色とフォントをうまく利用しています。

サイトを訪れる

6.ビダマウンテン

このサイトはMeganDorienによって提出されました。 ヒーローセクションには、エリアの全幅画像が表示され、メニューにCTAと連絡先情報が含まれます。 葉の画像は、レイアウト全体の背景の要素として使用されます。 スイートは複数列のレイアウトでカードとして表示され、ホバーすると別の写真に変わります。 レイアウト内のカードには連絡先情報が含まれています。 興味深いCTAは、テキスト付きのボックスと、その上に丸みを帯びた角と赤い背景が目立つ別のCTAを表示します。 片側にギャラリーがあり、反対側にテキストが交互に重なっている情報デザインが大好きです。 ギャラリーはInstagramフィードから作成されます。

サイトを訪れる

7. EvelynVinocur博士

このサイトはGuiVinoによって提出されました。 これは、大きなテキスト、黄褐色の背景、ピンクと黄色のハイライト、およびモバイルファーストのレイアウトデザインを使用しています。 ヒーローセクションには、斑点のある背景グラフィックの上にサイト所有者の絵が含まれています。 ほとんどの要素はピンクのハイライトを表示します。 治療法のリストは、仕切りで区切られた大きなテキストで表示されます。 画像は広い額縁内に表示されます。 ミッションに関するセクションでは、簡単なメッセージとともに、グラデーション上の額縁内にグラフィックを表示します。 私はそれがどのように機能するかについてのセクションが特に好きです。 両側に情報が表示され、中央にグラフィックが表示され、その後に連絡先情報が表示されます。 このセクションは、背景を新しい色に変更するスタイル付きセパレーターを含む背景グラデーションの上に配置されます。

サイトを訪れる

8.ビレッジスパ

このサイトはPaulinaRitchieによって提出されました。 グレーの柔らかな色合いとタンニッシュオレンジのエレガントなフォント、および写真を使用して、ターゲットオーディエンスを引き付けます。 ヒーローセクションには、CTAを予約したフルスクリーン画像が表示されます。 いくつかの全幅CTAは、一方の側に製品を表示し、もう一方の側に製品の画像に溶け込む背景画像の上にテキストを表示します。 他のCTAは、大きな画像を片側に表示し、テキストを反対側に交互のレイアウトで表示します。 トリートメントは、スタイル付きタブ内に情報を表示します。 予約は埋め込みフォームを介して行われます。 ギフト券は、サイトに一致するグラフィック要素を備えたスタイル付きフォームを通じて購入されます。 このサイトは写真を上品に利用しています。

サイトを訪れる

9. Createur2Site

このサイトはCreateur2Siteによって提出されました。 このサイトのスクロール効果はこの世のものではなく、私が見た中で最も興味深いマウスカーソルの使用法です。 マウスカーソルは特大のドットで、ホバーしている領域の反対の色（ピクセルレベルまで）を表示します。 ヒーローセクションは、中央に円形のグラフィックとタグラインが付いた黒い背景を表示します。 スクロールすると中央にズームインし、次のセクションを上にスクロールします。 スクロールを続けると、中央がズームインして画面上のグラフィック要素の1つになります。 別のスクロール効果は単語を2つにスライスし、他のスクロール効果はセクションセパレーターをアニメーション化し、ホバー時に単語をスクロールし、グラフィカル要素を開きます。 スクロール効果がサイトの使いやすさを妨げることはありません。

サイトを訪れる

10.私たちはウェブデザインです

このサイトはJustineCarterによって提出されました。 全体に濃いオレンジ色のハイライトと濃い黄褐色の背景を持つ明るい黄褐色の背景を使用します。 より太い色は、サービスの画像、クライアントのロゴ、ポートフォリオの画像とともに追加されます。 サービスのセクションでは、興味深い背景パターンの上にタイトルを配置します。 サービスの画像はパターンと重複しています。 ソーシャルリンクは右側に垂直に配置されます。 タイトルに使用されているフォントは、サイトの色と完璧に調和する大きくエレガントな線で、サイトにエレガントな雰囲気を与えています。 ブログのデザインが大好きです。 タイトルに背景パターンが含まれており、ブログ投稿では、背景が黄褐色の画像の下に、注目の画像とそのタイトルが表示されます。

サイトを訪れる

最後に

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

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

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

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