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

公開: 2019-01-27

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

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

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

1. Swyft

このサイトはSuzieTawneyによって提出されました。オレンジはブランドカラーであり、サイト全体で目立ちます。片側にオレンジと白の情報があり、反対側にビデオがある興味深い分割画面を使用しています。大きな宣伝文は、マルチカラーのグラフィックとタイトルでサービスを示しています。ホバーすると背景がオレンジ色に変わります。スライダーには、オレンジ色のオーバーレイとスタイル付きのセクション仕切りが含まれています。ブログのセクションは特に興味深いと思いました。これには、パターン化されたセクションの背景、行のオレンジ色の背景が含まれます。ブログと行の両方に、背景から離れて立つためのボックスシャドウがあります。ブログページには、ページを交互に繰り返す重複するカードが含まれています。

サイトを訪れる

2.エンパイアエンジニアリング

このサイトはRossPopeによって提出されました。このサイトでは、ブランドカラーとしてダークブルーを使用しています。次のセクションに溶け込む青いオーバーレイを備えたフルスクリーン画像から始めます。サービスは宣伝文で表示されます。それらには、白いテキストとアイコンが付いた濃い青色の背景が含まれ、ズームホバー効果があります。宣伝文のリストに会社の長所を示すWhyセクションが好きです。ブログセクションでは、最新の投稿が1つの列に表示され、背景が海のトップダウンビューに溶け込んでいます。各ページはこのデザインを続けています。私は特に、画像と重なるボックスに箇条書きが表示されているサービスページが好きです。

サイトを訪れる

3.傘税ソリューション

このサイトはManiO'Brienによって提出されました。このサイトでは、デザイン全体で黄色、白、青のハイライトが付いた濃い青を使用しています。説明とCTAを含む全画面画像から始まり、電子書籍のインセンティブを含む全幅のニュースレターCTAを提供します。サインアップフォームは十分に目立つので、サイトはポップアップを必要としません。情報は、上部の境界線のデザインとマルチカラーのアイコンを含む大きな宣伝文句の中に表示されます。これと同じデザインがサービスにも使用されます。興味深い丸で囲んだ図は、それがどのように機能するかを示しています。私は特に、一方の側に人がいて、もう一方の側に証言が背景にある全幅の画像を表示する証言セクションが好きです。

サイトを訪れる

4.水に勝つ

このサイトはVictorDuseによって提出されました。このWebサイトでは、ハイライトとオーバーレイ内で、通常は2つのグラデーションとして、ブランドカラーにライトブルーグリーンを使用しています。ヒーローセクションは、グラデーションの背後にあるビデオを再生します。情報は、青緑色のグラデーションで色付けされた有線の地球儀のアイコンを使用して宣伝文句内に表示されます。ぼやけた背景画像とその上の紹介文を表示する紹介文スライダーが好きです。ブログセクションには、エレガントなホバー効果のある投稿が表示されます。統計セクションは興味深いものです。それぞれが異なる色と異なる高さの3つの大きな数字を示しています。水の画像は背景内で使用され、画像内に青緑色が含まれています。

サイトを訪れる

5.ヘルケウィーナー

このサイトはOliverGehrmannによって提出されました。このウェブサイトでは、背景、メニュー、ハイライトにワイルドウォーターメロンと呼ばれる色を使用しています。ヒーローセクションには、次のセクションと重なる画像の上にロゴが表示されます。見出しはエレガントなスクリプトフォントを使用しています。いくつかのセクションでは、テキストと画像が2列に表示され、片側にテキスト、反対側に画像が表示され、スクロールすると交互に表示されます。フルスクリーンのスライダーに関連画像が表示されます。連絡先セクションはCTAとして機能します。ニュースレターの登録では、背景にブランドカラーを使用しています。メニューはシンプルですがユニークです。ハンバーガーアイコンが表示されますが、クリックすると通常どおりメニューがヘッダーに表示されます。このサイトは、色と空白をうまく利用しています。

サイトを訪れる

6.フルーツ

このサイトはMichalTeskaによって提出されました。これは、青、緑、赤、黄色のフルーティートロピカルな色合いをブランドカラーとして使用し、背景やハイライト内で使用する1ページのサイトです。また、各セクション内のトロピカルフルーツの画像を背景と同じ色で使用しています。各セクションは全画面表示で、画像は真の視差で表示されます。グラフィック、箇条書き、仕切りには反対の色が使用されます。サービスはトグル内に表示されます。フッターには連絡先情報が表示され、トップに戻るボタン用の小さなバナナのグラフィックも含まれています。色や余白を生かしたすっきりとしたシンプルなデザインです。

サイトを訪れる

7.ピレラコンサルタント

このサイトはLeopoldoPirelaによって提出されました。ヘッダーの背景の紫のパターンから始まる背景、オーバーレイ、ハイライトのブランディングに青紫の色、緑、黄色を使用しています。注目のプロジェクトは、ホバーに関する情報を明らかにする3つの画像として表示されます。お客様の声は、フルスクリーンのスライダー内に表示されます。考えやヒントは、関連するアイコンを示す緑色の宣伝文で表示されます。このサイトのCTAが大好きです。濃い緑色の背景パターンの上に、情報とダウンロードボタンが記載された本が表示されます。フッターはヘッダーと同じ紫色の背景パターンを示し、連絡先リンクとソーシャルフォローボタンを提供します。サービスページの交互のレイアウトが大好きです。

サイトを訪れる

8.マウリ

このサイトはMauricioCedrazによって提出されました。ランディングページは、紫/赤のグラデーションの背景と、中心から少しずれた大きなテキストを含む単一のフルスクリーンです。テキストは実際にはリンクされており、ホバーするとアニメーション化されます。ホバーすると、テキストが反転して色が変わります。1つの文字が他の文字とは異なる色で後ろ向きになります。テキストのいずれかをクリックすると、ページに移動します。テキストの下には、ウェルカムメッセージ付きの単一のトグルがあります。このページには、メニューアイコン、連絡先リンク、ソーシャルフォローボタンも含まれています。他のページも同様のデザインを使用していますが、一部のページには、グラデーションのある背景の上に画像を含む複数列のレイアウトがあります。色は大胆です。ヘッダーとメニューでの色と大きなテキストの使用が大好きです。

サイトを訪れる

9.1フィートオーバー

このサイトはStephenBrentMayによって提出されました。テキスト、ハイライト、グラフィック、および背景内のブランド色に紫と緑を使用します。ヒーローセクションには、情報が記載されたボックスと、フラットデザインの背景グラフィックと重なるボタンが表示されます。次のセクションは、2行と2列のセクションを示し、モバイルグラフィックはブランドカラーで表示され、もう一方の列には会社情報が表示されます。行はそれらのレイアウトを交互にします。紫色のグラデーションでパターン化された背景に会社情報を表示する次のセクションが大好きです。別の紫色の背景は、CTAおよびフッター内で使用されます。サービスは、マルチカラーのアイコンを使用して宣伝文句内に表示されます。

サイトを訪れる

10. Extempra

このサイトはChetanGuptaによって提出されました。テキストとオーバーレイ内の青緑色に近い青、ハイライト用の明るい黄色、背景内の大胆な黄色、ヘッダー用の紫のオーバーレイなど、いくつかのブランドカラーを使用しています。私は特に、タイトル、テキスト、ボタンを含む青いオーバーレイで2つの画像を表示する[プログラム]セクションが好きです。オーバーレイにより、画像とテキストがポップになります。お客様の声は、2つのセクションに重なるスライダー内に表示されます。ブログセクションには、角が丸く、ボックスの影が付いた投稿が表示されます。他のページも同様のレイアウトを使用しており、フルスクリーンヘッダー、重なり合うセクション、太字の色が使用されています。ブログは、ブログ投稿に1列、2列、および3列のレイアウトを使用し、注目の画像を最大限に活用しています。

サイトを訪れる

結論

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

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

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

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