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

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

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

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

1.エナッシュ

このサイトはニコラスによって提出されました。 このサイトでは、タイトルと行動の呼びかけに非常に大きなテキストをたくさん使用しています。 ヒーローセクションには、タイトルとタグラインが付いた大きな緑色の背景が表示されます。 テキストのある行は、ユーザーにスクロールするように通知します。 スクロールすると、2列のセクションが表示されます。 左側は、大きなテキストと特大のブロックボタンを備えたCTAを示しています。 右は真の視差の画像を示しています。 別の大きなセクションには、各サービスのセクションと宣伝文を紹介する大きなテキストを使用して、サービスに関する情報が表示されます。 別の大きなセクションには、クライアントの名前が表示され、その後に連絡先情報とメニューを含む公開フッターが表示されます。 視差のある画像の上に不透明度の高い大きな色のオーバーレイを使用するプロジェクトページのデザインが大好きです。

ウェブサイトを見る

2. Ljuba – Riflessi Digitali

このサイトはLjubaによって提出されました。 サイト所有者の全画面画像を一方の側に表示し、もう一方の側にタイトルとロゴを表示します。 ヒーロー画像の下には、スクリプトフォントのタグラインとメールオプトインフォームを備えた薄い全幅セクションがあります。 アバウトセクションでは、所有者にCTAを紹介し、続いて、多くの柔らかい色、スクリプトフォント、エレガントなグラフィックを備えたいくつかのCTAを紹介します。 ブログセクションには、ブログのタイトルを含む小さなオーバーレイが付いた投稿が表示されます。 シンプルなコンタクトフォームがパターン化された背景の上にあります。 フッターにはInstagramフィードが含まれています。 私はポートフォリオページが好きです。 机の上のコンピュータ画面内に例を表示し、下部のオーバーレイにタイトルを含めます。

ウェブサイトを見る

3.成功モード

このサイトはアーロンロバートソンによって提出されました。 このサイトでは、背景、グラフィック、ボタン、タイトル、リンク、メニューのCTAなど、全体に多くの太字が使用されています。 ヒーローセクションは、視差のある画像の上にオーバーレイを表示します。 オーバーレイは、一方の側で製品への情報とリンクを提供し、もう一方の側でモバイルデバイス内の製品の定型化された画像を提供します。 特徴は、アイコンとしてカラフルなグラフィックを使用して宣伝文句内に表示されます。 全幅CTAは、大きなテキスト、大きなグラフィック、および暗い背景の上に太字のボタンを使用します。 別のCTAは、ヒーローセクションと同様のデザインですが、モバイル上のアプリの単一の定型化されたグラフィックを使用しています。 他のページの多くは、同様の太字の色でDiviモジュールのスタイルを設定しています。 私は特に背景画像とオーバーレイを備えたオーディオモジュールが好きです。 このサイトは色をうまく利用しています。

ウェブサイトを見る

4.エリックフーパー

このサイトはTyHooperによって提出されました。 ヒーローセクションの背景として画像モンタージュを表示し、中央にロゴとタグラインをオーバーレイで表示します。 これに続いて全幅のaboutセクションが表示され、一方に画像が表示され、もう一方に情報が表示されます。 章のセクションには、ブログの投稿がグリッドで表示されます。 章自体は、片側にテキストがあり、反対側に画像がある古紙の背景画像を表示します。 テキストと画像は、章全体で交互に配置されます。 ブログのナビゲーションボタンには、サイトのロゴが含まれています。 [画像]ページには壁一面のギャラリーが表示されます。[ドキュメント]ページも同様ですが、タイトルが追加されています。 インタビューページには、複数列のレイアウトで埋め込まれたビデオとドキュメントの画像の組み合わせが含まれています。

ウェブサイトを見る

5.ハルモナビーチホテル

このサイトはGeorgeParatsokisによって提出されました。 サイトが読み込まれると、ロゴのプリローダーが表示されます。 ロード後、ヒーローセクションには、画像の大部分をカバーするオーバーレイ付きの大きな背景画像が表示されます。 画像の左側に表示されているのは、片側が部分的に開いているアニメーションボックス内のタイトルとタグラインです。 メニューのボックス、ロゴ、タイトルテキスト、ボタン、ソーシャルアイコン、およびCTAは、サイトのブランドに一致する素晴らしい日焼けです。 アバウトセクションには、ホバー時にテキストに下線を引くようにアニメーション化する円のリンクが表示されます。 部屋は、画像の下部にタイトルが付いたカード内に表示されます。 ホバーすると、画像の上にオーバーレイが表示され、タイトルが中央に移動して、[続きを読む]リンクが表示されます。 全幅CTAは、ヒーローセクションと同様のオーバーレイを表示し、ボタンと重なるようにテキストの周りにボックスを描画します。

ウェブサイトを見る

6.プロのウェブサイトバーゼル

このサイトはBennyHozjanによって提出されました。 これは、セクションに続いてメニューのセクションを強調表示する紫色のドットや、それに対応するスタイルのナビゲーションバーなど、多くの詳細を備えた1ページのデザインです。 ヒーローセクションには、中央にタグラインがあり、次のセクションと重なるグラフィックが続く色付きのパターン化された背景が表示されます。 アバウトセクションは、カーソルを合わせていなくても跳ね返るアニメーションアイコン付きの宣伝文を使用してどのように機能するかを示しています。 いくつかのセクションでは、片側にテキスト、反対側にグラフィックを含む情報が表示されます。 サービスは、ホバーアニメーション、画像、タイトル、下部のスタイル付きドットを含む宣伝文で表示されます。 全幅CTAは、短いテキスト行を大きなタイプで表示し、片側に小さなタグライン、反対側にアニメーションボタンを表示します。 クライアントロゴのセクションは、ヒーローセクションと同じ背景を使用しますが、視差で表示して異なる外観を作成します。

ウェブサイトを見る

7.ただVR

このサイトはReinhardWedemeyerによって提出されました。 このサイトでは、ブランディングのために暗い背景と明るい背景の両方に多くの赤を使用しています。 上部のバーには、FAQといくつかのソーシャルリンクが追加されています。 ヒーローセクションには、フルスクリーンの背景とシネマグラフが表示され、一方の側に製品が強調表示され、もう一方の側にタイトルとCTAが強調表示されます。 次のセクションでは、宣伝文句内の情報とスライダー内の製品の画像を示します。 宣伝文の別のセクションには、サイトのブランドに一致するマルチカラーのアイコンが含まれています。 全幅CTAは、一方の側にテキストとボタンを赤い背景の上に表示し、もう一方の側に製品のグラフィックを表示します。 私のお気に入りのセクションの1つは、中央に説明が付いた製品の8つの小さな画像を示しています。 ヒーローセクションで使用されている背景画像の上に、詳細な連絡フォームが配置されています。 個々の製品ページには、太字の赤い背景の上に製品が表示されます。 隅にあるCTAポップアップは、製品の画像を含むFAQに案内します。

ウェブサイトを見る

8.ニコライソレンセン

このサイトはNicolaiSoerensenによって提出されました。 中央にオーバーレイとCTAが表示された大きな背景画像が表示されます。 スクロールすると、片側にCTAがあり、メニューのCTAと一致する緑色のボタンがあり、反対側にオフィスの画像がある2列のセクションが表示されます。 このページには、同様のCTAがいくつか含まれています。 [概要]セクションには、一方の側に丸で囲んだ画像と賞のもう一方の側に情報が表示されます。 宣伝文のいくつかのセクションには、サイトのブランドに一致する緑色の線で描かれた画像が含まれています。 ケーススタディは、仕切り、タイトル、説明付きの大きな画像として表示されます。 続きを読むボタンがホバーに表示されます。 私は、外側の端が閉じられていない、裏打ちされたグリッド内の灰色のロゴのセクションが好きです。 それは大きな影響を与える最小限の要素です。 マーケティングページには、詳細な統計を含むクライアントイメージが表示されます。

ウェブサイトを見る

9.出現

このサイトはChristianSchickによって提出されました。 緑の背景に波状の仕切りが表示され、片側にCTAがあり、反対側に画像が重なり、次のセクションに画像と詳細情報が表示されます。 画像は互いに離れた角度に配置され、対角線上に配置されており、興味深い視覚効果を生み出しています。 次のセクションでは、片側にテキスト、反対側にアイコンを表示します。 アイコンは、目立つようにスタイル付きの形をした無地の背景を使用しています。 形はロゴと一致します。 私はプロジェクトのセクションが好きです。 各プロジェクトは、複数列のレイアウトでテキストのブロックの横に画像を表示します。 テキストモジュールは、CTAにつながる次のセクションと重なる波状の仕切りのあるセクションの中央にあり、波状のパターン上の単純な電子メールフォームでスタイル設定されたフッターになります。 各ページは、タイトルのオーバーレイにグラデーションのある波状の背景を使用しており、アイコンとタグラインも含まれています。

ウェブサイトを見る

10.朝の人々

このサイトはルーシーによって提出されました。 ホームページは、複数列のレイアウトの画像のモザイクです。 画像は、芸術的なオーバーレイや他の画像を一緒にトリミングして様式化されています。 講演者の画像は、個人のページにリンクしています。 それらにカーソルを合わせると、名前とタイトルが記載されたテキストボックスと、両側に緑色の境界線が表示されます。 会社の他の画像は、必要に応じてスペースを埋めるために使用され、何にもリンクしていません。 スピーカーのページには、大きな画像がグリッドに表示され、その下にタイトルが表示されます。 個人ページはブログ投稿のように機能し、フルスクリーン画像の後にコンテンツが表示されます。 コンテンツ内の引用は緑色で表示され、ブログのナビゲーションリンクと一致します。 コンテンツには、左側にロゴがあり、中央にメインコンテンツがあり、右側にサイドバーに情報がある3つの列が含まれています。

ウェブサイトを見る

最後に

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

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

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

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