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

公開: 2018-07-29

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

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

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

1. Teix Web Studio

このサイトはアクセルシャノンによって提出されました。素敵な背景パターンのヒーローセクションが含まれています。パターンの上には、アニメーショングラフィックと行動の呼びかけがあります。このセクションでは、ホームページ全体に表示されるスタイル付きのセクション仕切りを利用しています。次のセクションでは、情報と宣伝文を提供します。宣伝文はモザイクを作成し、ボックスシャドウを使用します。別のセクションでは、パターン化された背景上のギャラリーに同様のスタイルを使用しています。丸められた数値カウンターはセクションとオーバーラップします。お問い合わせフォームが地図と重なっています。このサイトがオーバーラップとグラフィックを使用する方法が大好きです。

ウェブサイトを見る

2. Vity

このサイトはジョン・クーパーによって提出されました。ヒーローセクションのオーバーレイに興味深いデザインを使用して、スタイル付きの仕切りを作成し、パターンによって作成された複数の色を提供します。商品画像は2つのセクションに重なっており、説明用のスタイル付き宣伝文が含まれています。製品スライダーは画面の中央に画像を表示し、宣伝文は両側に情報を提供します。製品ページも同様のデザインを使用しており、ボックスシャドウのスタイルが含まれています。

ウェブサイトを見る

3.ニューポートコスメシューティカルズ

このサイトはJeremyGruverによって提出されました。商品の情報や画像を表示する全幅スライダーと、お店に行くためのボタンが付いています。ショップモジュールは、会社のブランドに一致するスタイルで4列に製品を表示します。 CTAは、機能のリストとショップボタンを使用して製品を表示します。ショップページには、検索の選択肢を絞り込むことができる検索フィルターが用意されています。また、非常に幅の広いボタンの横に共有数を表示する興味深いソーシャルフォローセクションもあります。

ウェブサイトを見る

4.デュアルスポーツウェア

このサイトはSimonFrostによって提出されました。おもしろいお店のデザインです。ホームページには、全画面画像、各メニュー項目の輪郭が描かれたスタイル付きメニュー、透明なCTA、およびスタイル付きセクション仕切りが含まれています。次のセクションは私のお気に入りです。手順を示すために、番号付きシステムの横に製品の写真が含まれています。各番号はクリック可能であり、それらをクリックすると、遷移アニメーションで情報が表示されます。接触セクションには、スタイル付きの仕切りを備えた真の視差の背景画像が表示されます。

ウェブサイトを見る

5. OMTVeyhl

このサイトはジョナサンマストによって提出されました。メニューの下の線は、カーソルを合わせているメニュー項目に移動する小さな矢印を示しています。ヒーローエリアには、暗いオーバーレイの背後にある製造プロセスを示すビデオが表示されます。太字の黄色のテキストはタグラインを提供します。この同じ黄色は、タイトルおよびフッターの背景として使用されます。次のセクションでは、スタイル付きの背景パターン上に1列のテキストと1組のCTAを示します。

ウェブサイトを見る

6.第18巻

このサイトはChelseyLakeによって提出されました。大規模なタイポグラフィと白黒写真に焦点を当てた最小限のデザインを使用しています。大きなタグラインから離れてスクロールすると、2つのセクションに重なる画像が表示され、会社情報が表示されます。サービスは、セクションにスクロールタイトルを使用する宣伝文で説明されています。特大の人物モジュールは、ボックスの影とテキストが交互のパターンで片側に表示され、各画像が重なっている大きな画像を表示します。番号付きのセクションは、前のセクションと重複する見出しで会社と協力することの利点を示しています。

ウェブサイトを見る

7. Amelie Frohlich

このサイトはPhilippStakenborgによって提出されました。ホームページでは、グラデーションを使用して複数の色の背景パターンを作成しています。色は写真の後ろの片側に表示され、反対側にはCTAが表示されます。このすぐ下には、メディアのロゴが付いた全幅のセクションがあり、背景は次のセクションに続き、片側に画像、反対側に情報が含まれています。宣伝文句は、サイトの色とボックスの影が付いたボタンに一致する円内に大きなグラフィックを表示します。フッターは、サイトの色を含むグラデーションを使用します。

ウェブサイトを見る

8. HighSpark

このサイトはEugeneChengによって提出されました。ヒーローセクションが何であるかを伝えるのに十分な焦点が合った暗い背景を表示します。この上に、ぼやけた影の効果を使用したCTAのタグラインと情報があります。次のセクションには、タイトル、仕切り、および会社のロゴが表示されます。次のセクションでは、スタイル付きのセクションディバイダーを使用し、3列の紹介文とヒーローエリアと同じCTAを提供します。色が黄色からオレンジ色に変わり、宣伝文、電子メールのサインアップが表示されます。その後、最終的なCTAにより、2つの色が背景画像のグラデーションとしてブレンドされます。ブログは画像オーバーレイと同じ色を使用しています。

ウェブサイトを見る

9.バブルプランナー

このサイトはGennadyBatrakovによって提出されました。ヒーローエリアにタイトル、タグライン、アプリストアへのリンク、次のセクションと重なる製品の画像が表示されると、画面全体でバブルがアニメーション化されます。宣伝文は、バブルに一致するグラフィックを表示します。埋め込まれたビデオを表示し、その上のセクションとそのセクションの2つの列を重ねる次のセクションが大好きです。ボックスシャドウはそれを際立たせます。いくつかのセクションでは、一方の側に宣伝文があり、もう一方のセクションに移動するときに交互に製品が表示されます。ブログスライダーも面白いです。左側にテキストがあり、カテゴリが画像と重なっている大きな注目の画像が表示されます。

ウェブサイトを見る

10.チャーリークラーク

このサイトはMollySeaton-Fastによって提出されました。スライダーには複数のCTAが表示され、ソーシャルフォローボタンを表示するための小さな全幅セクションが含まれています。次のセクションでは、一方にスタイル付きのニュースレター登録フォームを提供し、もう一方にブログフィードを提供し、その後にソーシャルフィードスライダーを埋め込みます。テキストの列を持つ複数の宣伝文はCTAを作成し、アニメーションの宣伝文は情報を拡張します。興味深い緑は、サイト全体のタイトル、ボタン、宣伝文のアイコン、および背景に使用されています。埋め込まれたInstagramフィードも含まれています。私はこのサイトでの色とタイポグラフィの使用が大好きです。

ウェブサイトを見る

結論は

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

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

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

ベクターの世界を介した注目の画像/shutterstock.com