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

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

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

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

1.あんぼ

このサイトはAlanCoxによって提出されました。 このサイトでは、背景全体にグレーの色合いの線画アートとカラフルなキャラクターの描画を使用しています。 ボタンやその他のグラフィック要素も、サイトのデザインから目立つようにカラーで表示されます。 これは、製品に焦点を合わせ、行動を起こすという素晴らしい仕事をします。 フルスクリーンのヒーローセクション、製品のデモンストレーション、2列のユーザビリティセクション、1列のミッションステートメント、お客様の声、フッターと重なるCTAにより、デザインをシンプルに保ちます。 科学のページは、デザインをシンプルに保ちながら、大きなタイトルとブランドのグラフィックで興味深いものです。

サイトを訪れる

2.ダッパータッパーマガジン

このサイトはCarlosGodoyによって提出されました。 このサイトでは、Extraを使用してエレガントな雑誌のデザインを作成しています。 視差の背景画像と中央のロゴを備えたフルスクリーンのヒーローセクションを表示します。 スクロールすると、画面の上部に到達したときに所定の位置に残っているメニューが表示されます。 記事は、3列の複数列レイアウト内に配置されます。 他の投稿は、単一列のスライダーで表示され、下部にさらに読むためのセクションが表示されます。 ブログの投稿では、テキストを片側に配置し、画像を反対側に配置します。 このサイトには、大きなドロップダウンメニューとプリローダーもあります。 これがエクストラだとは思いませんでした。

サイトを訪れる

3. BaseMap

このサイトはDustinOlsenによって提出されました。 このサイトでは、製品のデモとCTAを背景画像の上に画面の中央に配置して、読者が製品の目的を一目で理解できるようにしています。 同様のデザインの他のいくつかのセクションでは、製品を片側に示していますが、今回はスクリーンショット、アニメーション、またはビデオを含む2つのデモであり、次のセクションと重なっています。 デモは、製品の機能を示すために完全に機能します。 スタイル付きの価格表が好きです。 ブログも面白いです。 スライダーと、それに続く2列のフィルター処理されたブロググリッドが含まれます。 投稿にはエレガントなオーバーレイが含まれています。 サイドバーもサイトのデザインに適合し、Instagramフィードが含まれています。 このサイトの写真は素晴らしいです。

サイトを訪れる

4.DHマーケティングデジタル

このサイトは、ダグラスエンリケモンテイロエシルバによって提出されました。 被写体を片側に、背景を反対側にしたフルスクリーン画像が表示され、タイトル、タグライン、CTAの余地があります。 サービスは、カラフルなアイコンを使用して箇条書きで表示されます。 サービスの統計は、アイコン付きの垂直トグルの興味深いグラフィックで表示されます。 推薦状は、ボックスシャドウと星評価システムを利用するカード内に表示されます。 1つのセクションには、グラフィックの背後に背景パターンがあります。 CTAは2つのセクションに重なり、見事に目立ちます。 サービスページでの宣伝文句のエレガントな使用が好きです。 カラフルなアイコンを使用し、ホバー効果のあるスリムなカードを作成します。 このサイトは多くの空白を使用し、エレガントな色を使用しています。

サイトを訪れる

5.ユッカー

このサイトはSanderGoormanによって提出されました。 青いグラデーションを使用して全画面の背景画像を表示し、片側にサービスへのナビゲーションを含むタグラインを表示します。 宣伝文は次のセクションと重なり、各サービスに関する詳細情報を提供します。 宣伝文句は、青いアイコンが付いたきれいなカードです。 それらはホバーすると上向きに上昇し、サイトのデザインに完全に適合します。 彼らのストーリーを示すセクションでは、片側にマルチカラーの大きなテキストを使用し、反対側に通常のテキストを使用しています。 彼らの作品の例は、作品を見るためのリンク付きの交互のレイアウト内に示されています。 私はブログのデザインが好きです。 投稿がグリッドに表示され、オーバーレイ、タイトル、カテゴリ、作成者名、ボタンが表示され、注目の画像がポップアップで表示されます。 すべてが注目の画像の上に配置されます。

サイトを訪れる

6. Idiolektik

このサイトはOliverGehrmannによって提出されました。 タグラインのある複数の画像が全幅のスライダーに表示され、その後にスタイル付きのブロックタイトルが付いたaboutセクションが表示されます。 詳細ボタンは、フルページのポップアップを開きます。 詳細ボタンはデザイン全体で目立ち、多くの情報へのアクセスを提供しながらスペースを節約するのに最適です。 詳細情報は、ホバーすると色が変わり、クリックするとポップアップが開くグラフィックを使用して提供されます。 スライダー内のグラフィックと情報ボタンで、より多くのサービスが表示されます。 同様のスライダーに講師の画像が表示されます。 講師のページには、大きな写真と各人の情報が記載された2つの列が表示されます。 イベントページが好きです。 ドロップダウンボックス付きのフィルターを使用します。

サイトを訪れる

7.Bio-Bausewein

このサイトはMichaelKochによって提出されました。 これは、被写体の上にタグラインがあり、側面を飾るために木の形にオーバーレイされたフルスクリーン画像を示しています。 これらおよび類似の形状は、サイト全体の側面に沿って表示されます。 次のセクションでは、さまざまなページへのCTAを示します。 CTAは、さまざまな色のオーバーレイを備えた大きなパターン化された背景を使用します。 小さいCTAは、ブログカードのデザインと同様のデザインを使用します。 1つは傾斜したデザインを使用しています。 私は所有者を示すセクションが好きです。 一緒と下の両方のフルスクリーン画像が表示され、写真の人物の近くの画像と重なるテキストのブロックが表示されます。 イベントページには、インラインブログ投稿に似たイベントが表示され、上部に日付を示すバーが表示されます。 私はこのウェブサイトの写真と色が大好きです。

サイトを訪れる

8.エコホスト

このサイトはEmyによって提出されました。 このサイトは、サイト全体の背景とアイコンに赤、緑、青のエレガントな色合いのフラットなデザインを使用した1ページのレイアウトです。 背景やその他の要素のグラフィックは、会社の使命を説明するのに役立ちます。 大きなアイコンとタイトルのあるカードを作成するために、機能が宣伝文で表示されます。 推薦状や連絡先情報にも同様のカードが使用されます。 価格表が好きです。 トグルスイッチが含まれており、トグルをクリックすると価格がアニメーション化されます。 いくつかのカードでは、クリックして情報を表示すると、ポップアップに情報が含まれます。 このサイトは、グラフィック、背景パターン、および色をうまく利用しています。

サイトを訪れる

9.717メディア

このサイトはEikeMullerによって提出されました。 テキスト、ボタン、アニメーション、背景内のサイト全体のブランドカラーとしてライトグリーンを使用しています。 スクロールバーとトップに戻るボタンでさえ、緑色のスタイルになっています。 大きなカードは、画像、テキスト、ボタンでサービスを表示します。 カードはホバー時に影を示します。 これには、背景が全幅で、オーバーレイが暗い興味深いCTAが含まれています。 スクロールすると、テキストの周りに緑色の線が引かれ、注意を引くことができます。 Aboutセクションが好きです。 画像とテキストを使用してカードに情報を表示します。 カードは次のセクションと重なり、アニメーションオーバーレイが含まれています。 このサイトは、すべてのページで小さなアニメーションと緑色のハイライトをうまく利用しています。

サイトを訪れる

10. PicknRoll

このサイトはRobertoWagnerによって提出されました。 こちらはオンラインストアです。 ホームページには、複数の色の大きなテキストを含む背景画像を使用して、ストアへのフルスクリーンCTAが表示されます。 ショップセクションには、サイトのブランドカラー（太字の黄色）と一致するアイコンがオーバーレイに表示された3列の商品が表示されます。 情報セクションには、視差の背景画像に対する利点が示されています。 お客様の声とニュースレターのセクションは、黄色のテキストを使用した同様のスタイルに従います。 ストアページは同じデザインに従いますが、ヒーローセクションに検索機能が追加されています。 ブログには現在1つの投稿がありますが、ページのデザインはかっこいいです。 ブログ投稿はヒーローセクションと重複し、ニュースレターはフッターの上のソーシャルフォローセクションを含む2つのセクションと重複しています。

サイトを訪れる

最後に

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

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

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

L-astro /shutterstock.com経由の注目の画像