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

公開: 2019-03-31

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

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

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

1.クナニを歩く

このサイトはSarahCrawfordによって提出されました。場所のフルスクリーンの背景の上にオーバーレイでタグライン付きのスタイル付きテキストとグラフィックスを表示します。スタイル付きのテキストとグラフィックは、スクロールの左下隅に表示されるリンクを含め、サイト全体に表示されます。場所の写真は、タイトル、説明、および詳細情報を表示するためのボタンとともに2つの列に表示されます。ボタンは、メニューのCTAに一致するようにスタイル設定されています。また、今後のイベントを表示するための埋め込みカレンダーも含まれています。場所の詳細は、画像、テキスト、ボタンのある2列の交互のセクションに表示されます。

サイトを訪れる

2.レモネード

このサイトはTeckSengChanによって提出されました。このサイトでは、ヒーローセクションとCTAのマテリアルデザイングラフィックを、青、緑、オレンジのブランドカラーで使用しています。テキスト、ボタン、およびCTAは、サイト全体のブランド色と一致します。私は特にグラフィックの宣伝文句が好きです。それらには、シャドウ効果とスタイル付きの下部境界線が含まれます。別のセクションでは、真の視差でモバイルデザインを使用したWebサイトのデザインを示しています。このサイトは、色と空白を最大限に活用しながら、レイアウトをシンプルでクリーンに保ちます。

サイトを訪れる

3.GillespieShieldsの法律事務所

このサイトはRobbyDoyleによって提出されました。このサイトでは、大胆な赤、大きな灰色のアイコン、および多くの空白を使用して、ポップなドラマチックなデザインを作成しています。 CTAは簡単に見つけることができます。ヒーロー画像の下にある、タイトル付きの仕切りのある4つの列を示すセクションが好きです。 1つにカーソルを合わせると、そのトピックへのリンクが表示されます。お客様の声は、シールドカットアウトデザイン内の写真付きのスライダーに表示されます。完全な見積もりの上に大きな灰色のテキストで要点が表示されます。また、お問い合わせフォーム、認証アイコン、フッターに青灰色を使用するのも好きです。認定アイコンは、ホバーするとカラーで表示されます。

サイトを訪れる

4. Forside C2IT

このサイトはJanusLockによって提出されました。このサイトでは、片側に濃い青色のオーバーレイがあり、中央に大きなタグラインがあるフルスクリーンのビデオが表示されます。ブランディングにはダークブルーとグレーを使用しています。スリムな縦型メニューが右側に残ります。タグラインも含まれていますが、縦書きのテキストです。ホバーするとアニメーション化され、クリックすると全画面に拡大して、濃い青色の背景にリンクと目立つ検索機能が表示されます。サービスはアニメーショングラフィックで表示されます。個々のブロックはボックスを作成します。それぞれがホバーを拡大し、サンプルプロジェクトにリンクします。イベントセクションは、リンク付きのユニークなカレンダーデザインを作成します。

サイトを訪れる

5.iShopクローバーデール

このサイトはクリスティヒルによって提出されました。スライダーは、ヒーローセクションの中央に、製品、CTA、およびソーシャルフォローアイコンを太字の境界線とボックスの影で表示します。デザイン全体のブランドカラーには、グリーン、オレンジ、イエローが使用されています。注目の取引は、濃いオレンジ色の背景にボックスの影が付いたショップセクション内の商品として表示されます。私はそれがどのように機能するかについてのセクションが大好きです。プロセスを順を追って説明する大きな手描きの地図が表示されます。 [お得な情報を購入]ページには、お得な情報がフィルタリング可能なプロジェクトとして表示されます。アプリのダウンロードページは興味深いものです。携帯電話に商品が表示されます。スクロールすると、前景が視差で画面上をスクロールしてメニューが表示されます。

サイトを訪れる

6.FLL航空

このサイトはフアンパブロパロディーによって提出されました。これは、CTAを作成するために、前景にいくつかの興味深いカラーパターンのブロックを含む全幅の背景画像を表示します。色は、ウェブサイト全体で使用されているブランドの青い色です。スクロールすると、画像とテキストのセクションが交互に表示されます。テキストはさまざまな色の背景の上に配置され、サイトのデザインと完全に調和します。フッターのコンタクトセクションも気に入っています。左側に被写体、右側に色のブロックが表示された全幅の画像が表示されます。この画像には、すべての連絡先情報とソーシャルフォローリンクが含まれています。このサイトは大きなテキストを大いに活用しています。

サイトを訪れる

7.野生の秋

このサイトはKelseySpectreによって提出されました。このサイトはランディング画面で多くのことが起こっていますが、それはうまく機能するクリーンな方法でそれを行います。フルスクリーンの背景画像は、被写体を中央に配置します。画面の両側には、テキストとして提供されるさまざまな種類の情報があります。左側はナビゲーションメニューです。右側はCTAです。下部にはナビゲーションメニューがあります。このメニューは、スクロールすると上部に表示されます。レイアウトでは、画像を含む多くの空白と、テキストを含む（単色または色付きの境界線の）重なり合うボックスを使用します。それらのいくつかは、重複するグラフィックを持っています。大きな引用符は空白の要素を追加します。私はこのサイトで使用されている手書きのフォントが大好きで、このサイトは写真を大いに活用しています。

サイトを訪れる

8.インサイトデザイン

このサイトはSteveDoigによって提出されました。レイアウトに大胆な色と多くの空白を含む薄いスタイルのテキストを使用して、すっきりとしたデザインを作成します。ヒーローセクションでは、片側にタグラインとCTAが付いた画像が表示されます。このすぐ下には、提供されるサービスの種類へのスタイル付きメニューを作成するためのリンクのリストがあります。各リンクは、サイトのブランドに一致するように垂直線で区切られています。サービスのCTAには、詳細を確認するためのボタンが付いたさまざまなタイプのサービスの画像が表示されます。これらのセクションは、ページの下に交互に表示されます。このサイトには、大きなテキストにリンクが付いた明るい灰色の背景を持つ興味深いフッターがあります。テキストの最初の単語は、それぞれ異なる色のロゴのスタイル付きバージョンです。メニューのソーシャルアイコンが好きです。

サイトを訪れる

9.ベクセル

このサイトはAgustinaOuvinaによって提出されました。このサイトには全幅スライダーが表示されます。各スライドには、視差のある製品の背景画像、中央の大きな検索ボックス、左下のCTAリンク、右下のソーシャルアイコンが表示されます。注目の製品のセクションでは、4つの列に製品が表示されます。各製品の画像は、ホバーでタイトルとソーシャル共有リンクを示しています。計画を示すセクションでは、視差の青い背景に製品の宣伝文句が表示されます。注目のカテゴリのセクションが好きです。それらは、ホバー効果のある紫色の背景の上にグリッドのベクトルアイコンとして表示されます。スクロールすると、メニューに大きな検索ボックスが表示されます。

サイトを訪れる

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

このサイトはRickyLionettiによって提出されました。これは、サイト全体で単色の背景を使用する1ページのデザインです。緑は、サイト全体のテキストにも使用されます。ヒーローセクションには、ポートフォリオへのリンクを含むスタイル付きテキストのタグラインが表示されます。大きなグラフィックが次のセクションに重なっています。 [概要]セクションには、丸で囲まれた画像とCTAが表示されます。この下には、ハッシュタグを使用してサイト所有者について詳しく説明する興味深いセクションがあります。現在のプロジェクトがスライダーに表示され、続いて画像とリンクを含む最近のプロジェクトが表示されます。サンプルロゴは、グリッド内の画像として表示されます。お問い合わせフォームは一杯のコーヒー（うーん、コーヒー…）の上に表示され、興味のあるサービスの種類を示す選択肢が含まれています。このサイトの色が大好きです。

サイトを訪れる

最後に

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

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

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

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