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

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

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

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

1.マリー・ボウズコワ

このサイトはMichalTeskaによって提出されました。 これは、タイトルとソーシャルメディアのリンクにのみナビゲーションメニューを使用し、メニューをページの下部に配置する1ページのデザインです。 スクロールしてもメニューはそのまま残ります。 ヒーローセクションでは、サイト所有者の大きな画像が全画面の背景の片側に表示されます。 名前と統計は反対側に配置されます。 各セクションのタイトルには、タイトルの後ろに大きなテキストが表示されます。 キャリアハイライトは、一方の側に重なり合う画像を表示し、もう一方の側にハイライトを宣伝文で示し、その後に埋め込みビデオを表示します。 画像は石積みギャラリーに表示され、フルスクリーンスライダーで開きます。 チームセクションには、背景パターンのあるチームのヘッドショットが表示されます。 フォローセクションには、FacebookとTwitterのフィードが埋め込まれています。 このサイトは、色とテキストを面白く利用しています。

サイトに訪れる

2.MWSデジタル

このサイトはKaelynnMidgleyによって提出されました。 召喚状に焦点を当てたクリーンなランディングページがあります。 ヘッダーには、ロゴ、タグライン、CTAとともにページの中央に主要な情報が表示されます。 アプローチのCTAを含むグラフィックは、次のセクションと重複しています。 2列のセクションでは、モバイルの画像を1つの列に表示し、テキストをもう1つの列に表示します。 次のいくつかのセクションは、この設計に従い、ページを交互に表示します。 ブログセクションには、暗いオーバーレイとテキストを含む正方形の画像が表示され、すっきりとしたエレガントなデザインが作成されます。 サービスへのリンクのセクションが好きです。 各サービスにリンクされているラージタイプのサービスが表示されます。 このサイトは、色とレイアウトをエレガントに使用しています。

サイトに訪れる

3.ウナパパイヤ

このサイトはAndreaEl-Bardawilによって提出されました。 このサイトは、背景パターンの上に画像を含む多くの視差背景を使用する1ページのデザインです。 前景には、スクロール時に背景と相互作用する画像が表示されます。 前景には、次のセクションを説明する大きなテキストが含まれています。 情報は、適切なグラフィックを使用して宣伝文で提供されます。 番号付きのセクションには、CTAを含む情報が表示されます。 最新の作品の例は、太字の赤い背景の上に説明とリンクが付いたスライダー内に表示されます。 このサイトは、果物のテーマ、視差の画像、大胆な赤とオレンジの色をうまく利用しています。

サイトに訪れる

4.フレッシュライム

このサイトはJoshAllanによって提出されました。 このサイトでは、アイコン、ロゴ、メニューCTA（スクロール後）、ボタン、テキストなどのグラフィックのブランド色としてライムグリーンを使用し、背景とボタンには青を使用しています。 主人公のセクションでは、さまざまな色合いの濃い青の興味深い背景パターンと、人がいる建物のグラフィックを示しています。 フォアグラウンドには、タイトル、タグライン、およびCTAが表示されます。 サービスは、緑色のアイコンが付いた宣伝文で説明されています。 別のセクションでは、一方の側に建物のグラフィックが表示され、もう一方の側にヒーローセクションと一致する人々が表示されます。 各ページは、グラフィックとパターン化された背景をうまく利用しています。

サイトに訪れる

5.川沿いの牧場

このサイトはKelseySpectreによって提出されました。 メニューと次のセクションに重なる特大のロゴを使用しています。 メニューは画面上で十分に低く表示されるため、メイン画像の一部がその上に表示されます。 全幅の画像は場所を示し、画像の空を使用してタイトルテキストを配置します。 ニュースレターCTAは、手書きのように見えるタイトルとしてスクリプトフォントを使用してこの下に表示されます。 画像は情報のページへのリンクとして使用されます。 いくつかのセクションでは、場所を説明したり情報を提供したりするために、一方の側に地図または画像を表示し、もう一方の側にテキストを表示します。 さまざまなページに場所の全幅画像が表示され、地図には手描きのグラフィックまたは衛星画像が使用されます。 背景とテキストの色は牧場のテーマにぴったりです。

サイトに訪れる

6.エデンリバー乗馬

このサイトはSalmaSheriffによって提出されました。 アカウントリンク付きのトップメニューバー、大きなロゴ領域、そしてサイトの他の部分よりも狭くなった青い背景のメインナビゲーションが含まれています。 メインの背景画像には、タグラインとショップのCTAがオーバーレイで表示されます。 見出しは、サイトのデザインに合うように緑色または茶色のいずれかです。 FacebookのCTAは、目立つ色付きのボックス内のグループについて説明しています。 丸で囲んだ画像とグループにリンクするボタンを使用します。 ポッドキャストに関するセクションでは、タイトル付きの画像を使用して最新のエピソードにリンクしています。 目立つもう1つのセクションは、ホームページと同様のスタイルに従うさまざまなページにリンクする丸で囲まれた画像を含む宣伝文のセットです。 テキストとハイライトの色は、サイトのデザインとうまく調和しています。

サイトに訪れる

7.ライオンズアベニュー

このサイトはリッキーによって提出されました。 このサイトは、暗い色と落ち着いた色の両方を組み合わせてスタイルのある外観を与える1ページのデザインです。 水色のハイライトは、タイトル、背景、および境界線に使用されます。 ヒーローセクションには、CTAのセットとそれに続く大きなロゴが付いたタグラインが表示されます。 情報セクションでは、一方の側にサイト所有者の画像をスタイル付きの画像で表示し、もう一方の側に表示される情報を、タイトル、スクリプトフォント、およびスタイル付きの境界線のあるボックスに表示される情報自体とともに、より広い領域に表示します。画像と重なっています。 この同じタイトルとスクリプトフォントのデザインは、プロジェクトの画像をカードとして表示するポートフォリオセクションを含む、サイト全体のいくつかのセクションを紹介するために使用されます。 色、フォント、角度の付いた仕切りは、このサイトにすっきりとした興味深いデザインを与えるのに役立ちます。

サイトに訪れる

8.ミルキンモア

このサイトはDJWHEELERによって提出されました。 このサイトでは、黒、白、黄褐色の配色を使用して、すっきりとしたデザインを作成しています。 メニューのテキストは通常​​より大きく、リンク間に多くのスペースがあります。 ヒーローセクションでは、関連する画像が全幅で特大の波状の仕切りに透明度が表示され、次のセクションに溶け込みます。次のセクションでは、白い背景の上に大きな黒いテキストが表示されます。 別の全幅画像は、前のセクションと次のセクションに溶け込んでいます。これには、ショップカテゴリの大きなボタンと、それに続く一連の製品が含まれています。 いくつかのセクションでは、画像とボタン、または宣伝文とアイコンのいずれかで情報を提供します。 各セクションは、情報を短くシンプルに保ちます。 お客様の声とニュースレターのセクションは、同じシンプルなデザインに従います。 このサイトは、空白とタイポグラフィをうまく利用しています。

サイトに訪れる

9.プロフォトオンライン

このサイトはEugeneDimovによって提出されました。 このサイトでは、タイムラインデザインを使用してセクションを分離しています。 フルスクリーン画像には、タイトルとCTAが表示されます。 大きなセクションには、タイトルの後ろにある大きな見出しが含まれます。 スクロールすると、見出しがゆっくりと所定の位置にスライドします。 各セクションには、色のブロックと縦線の番号が付けられています。 スクロールすると、数字が所定の位置に跳ね返ります。 小さいセクションには、画面の側面に表示される縦のタイトルがあります。 セクション自体には、CTAとテキストおよび画像を交互に使用することが含まれています。 ギャラリーページのレイアウトが大好きです。 片側に太い枠で画像を表示し、反対側に写真家の情報と画像を購入または印刷するためのボタンを表示します。 お問い合わせページには、天井からぶら下がっているボード上のお問い合わせフォームが表示されます。 フォームは画像スライダーの横にあります。 彼らが置かれているボードはレンガの壁の上にあります。 このサイトはタイポグラフィと写真を大いに活用しています。

サイトに訪れる

10.ハイコラボ

このサイトはRuiSilvaによって提出されました。 ヒーローセクションには、視差のオーバーレイにCTAと角度の付いた画像が表示された大きなオレンジ色の背景パターンが表示されます。 このセクションには、次のセクションに溶け込む角度の付いた仕切りがあります。 スクロールすると、製品が一方の側に表示され、もう一方の側に説明が表示され、ページの下に交互に表示されます。 一部の画像は背景要素と重なっています。 別の興味深い情報セクションでは、画面の大部分を占めて片側に配置されている黒い背景のブロックを使用しています。 スクロールすると、表示されている背景がその下の画像に溶け込みます。 CTAは、黒い背景の上に大胆な色で際立っています。 このサイトは、色と写真をうまく利用しています。

サイトに訪れる

結論

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

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

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

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