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

公開: 2018-09-23

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

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

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

1.ピクセルと鉛筆

このウェブサイトはタイラーディアスによって提出されました。素敵なフルスクリーンヘッダーは、このサイトがグラフィックと色を興味深いデザインとともに使用することについて何であるかを示しています。次のセクションでは、詳細を確認するためのボタン付きのクライアントロゴを示します。注目の作業セクションでは、プロジェクトが画像、テキスト、ボタン、および影の効果を持つカードとして表示されます。私は最後のセクションが大好きです。これは、角度の付いたセクション内に配置された簡単な召喚状とソーシャルボタンを備えた別のグラフィックセットを示しています。作業ページには、プロジェクトカードの拡大版が表示され、各カードで訪問者はシンプルでエレガントなプロジェクトの詳細ページに移動します。また、色とグラフィックの単純化された使用法も気に入っています。

ウェブサイトを見る

2.アンドレア・マソッティ

このウェブサイトはAndreaMasottiによって提出されました。このサイトは、Diviのモジュールを興味深い方法で利用しています。 3行は、右端と左端にテキスト、中央にグラフィックを含む3つの列を示しています。テキストとグラフィックスは、背景と調和する色に白と黒のアウトラインを使用しています。各行は黒い線で区切られています。行だけにカーソルを合わせると、そのすべての要素が黒になります。行内の特定の要素にカーソルを合わせると、その色が赤（テキストの場合）または赤と青（グラフィックの場合）に変わります。赤と青のグラフィックは、ポートフォリオページのヘッダー要素として使用されます。このウェブサイトは、単純なものがいかに大きな声明を出すことができるかについての優れた例です。

ウェブサイトを見る

3.アドリアーノアルファロ

このウェブサイトはアドリアーノアルファロによって提出されました。タイトルと説明が記載されたフルスクリーンヘッダーが表示され、その後にソーシャルフォロー付きの短い概要セクションが表示されるため、サイトの内容を即座に把握して、デザイナーと交流することができます。大きなアイコン、説明、リンクが付いた宣伝文句は、サービスを示しています。次のいくつかのセクションは私のお気に入りです。片側に画像を、反対側にテキストを全幅で表示し、ポートフォリオへのリンクを含みます。スクロールすると、それらは交互になります。ビデオの背景は、引用とCTAで賞の背後に再生されます。クリック可能なプロジェクトの壁一面の画像を表示するポートフォリオページが大好きです。個々のプロジェクトページは、このサイトが本当に輝いているところです。それらは、モダンなレイアウトデザインの美しい例です。必ずフィアットのページをご覧ください。

ウェブサイトを見る

4.エミリー商人

このウェブサイトはエミリー商人によって提出されました。これは、CTAを使用して興味深いヘッダーを作成します。 CTAは、画像、境界線、提供された作品の種類、タイトル、およびボタンを使用して作成されます。この下に3つの画像があります。オーバーレイにタイトルが含まれます。ホバーすると色が変わり、境界線が表示され、エレガントなプロジェクトページCTAが作成されます。 aboutセクションは、引用とテキストで作成されます。別のポートフォリオCTAは、スクロールするとグラフィックを描画します。ポートフォリオページは、各画像が独自のオーバーレイカラーを持ち、ホバー効果を継続する複数列のレイアウトを作成します。

ウェブサイトを見る

5.はじめに

このウェブサイトはVincentValentinoによって提出されました。これは大胆な色と視差効果をうまく利用しています。フルスクリーンヘッダーは、テキストとボタンを紹介する素敵な背景でサイトを開始します。それらが何をするかを示すセクションは、影の効果を持つブロックを表示する宣伝文のセクションからそれを分離するためにギザギザのエッジを持つ地形図を表示します。ケーススタディのあるセクションが大好きです。完全なデザインの画像が背景に表示され、テキストが重なり、画像が視差でスクロールします。最近のプロジェクトは、複数列のレイアウトで表示されます。このサイトは、1ページのデザインをうまく利用しています。

ウェブサイトを見る

6.ウェザーステーション

このウェブサイトはPierreLannoyによって提出されました。アプリのウェブサイトです。デザインをシンプルに保ち、色を生かします。私は特に、デザイン全体で使用されている微妙なグラデーションのある青い背景が好きです。波状のセクション分離はヘッダーを際立たせ、利点は画像とテキストモジュールで示されます。このサイトはまた、ダウンロードとパブリックインストールの有用な統計を実際に表示する番号カウンターをうまく利用しています。このすぐ下には、アプリの評価を表示し、星評価のグラフィックを含むセクションがあります。お客様の声はきれいで、影の効果が含まれています。また、ボックスの影、タイトル、ボタンが付いた2列のカードとして画像を表示するブログページも気に入っています。ホバリングすると、投稿からの抜粋を含む青いオーバーレイが表示されます。最新の投稿は、1つの列にフルサイズで表示されます。個々の投稿もボックスシャドウ効果を使用し、投稿ナビゲーションとコメントモジュールが含まれています。

ウェブサイトを見る

7.グッドマリスト

このウェブサイトはDaraghWallaceによって提出されました。このサイトはブログのレイアウトに焦点を当てています。ロゴの前面と中央を示す特大のヘッダーが表示されます。この下には2つのナビゲーションメニューがあります。メイントピックはプライマリメニューに配置され、サブトピックは少し小さい緑色のフォントでセカンダリメニュー内に配置されます。注目の投稿では、左側に画像が表示され、右側にタイトル、カテゴリ、抜粋、続きを読むボタンが小さなボックスに表示されます。一緒にそれらはコンテンツ領域の全幅を取ります。これに続くのは、3列に9つの投稿があるブログセクションです。投稿には、注目の画像、タイトル、カテゴリ、短い抜粋、ボタンが表示されます。私の作家は、ウェブサイトのタイトルの定義を示す全幅のセクションが大好きです。ブログの投稿は、注目の画像、テキスト、CTA、画像スライダー、ビデオ（一部の投稿用）、および3つの投稿があるブログセクションを備えたすっきりとしたデザインも維持しています。このサイトは、すっきりとしたブログデザインの良い例です。

ウェブサイトを見る

8.ジェリックス

このウェブサイトはJeroenRottyによって提出されました。それは私の好きな色のいくつかを使用しています（私はテネシー出身で、私はオレンジに部分的です）。ヘッダーはCTAで視差を使用します。スタイル付きセクションセパレータは、次のセクションの空白を作成するのに役立ちます。これにより、リンクと丸で囲まれた写真とともに「概要」情報が提供されます。サービスは、オレンジ色のハイライトとホバー効果を利用した大きな2色のアイコンで表示されます。最近の作品のスクリーンショットもホバー効果を使用しており、シャドウボックス効果が含まれています。ポートフォリオページは、最近の作品デザインを続けています。いずれかをクリックすると、ウェブサイト自体に移動し、作品を直接見ることができます。 WordPressページには、メリットが2列で表示され、ページ全体に手描きのグラフィックが含まれています。私はこのサイトの色が大好きです。

ウェブサイトを見る

9.危険にさらされている母親

このウェブサイトはSwagDesignFactoryによって提出されました。複数列のレイアウトのボックスデザインを使用します。ヘッダーには、ロゴ、メニュー、ソーシャルフォローボタンが片側に垂直に表示され、反対側にはビデオとタグラインが表示されます。画像と情報のセクションは同じ行レイアウトを使用しますが、画像とテキストを交互に使用します。いくつかの2列のセクションには、ボタンが重なっている画像とCTAが付いたテキストが表示されます。全幅の紹介文は、サイトのロゴと色を利用して完全にブレンドしています。個々のブログ投稿には、ヘッダーのタイトルとソーシャルフォローボタンの後に投稿とサイドバーが続く背景パターンが表示され、サイトに合わせてスタイルが設定されます。サイト全体で使用されているダークグリーンとピンクのハイライトが大好きです。

ウェブサイトを見る

10.ウェムズワイヤレス

このウェブサイトはPhilipWantlingによって提出されました。このビジネスWebサイトを説明するために、ブランドカラー（オレンジとグリーン）と電子機器の画像（同じブランドカラー）を使用しています。これは、フルスクリーンヘッダーとサイト全体に見られます。 2列の4つの画像は、さまざまな製品にリンクしています。タイトルとボタン付きのアニメーションを提供するCTAが大好きです。これは（クライアントロゴの）前のセクションと重複しており、利点を説明するための一連の宣伝文が付いています。デモ用のCTAは、画像の隅に目立つリボンを使用しています。製品は、製品リンクにつながる複数列のレイアウトで表示されます。個々の製品ページには、製品の説明とページの背景パターンのためのいくつかの甘いDiviスタイルも含まれています。このサイトは、レイアウトのデザインと色をうまく利用しています。

ウェブサイトを見る

結論は

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

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

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

Koksharov Dmitry /shutterstock.comによる注目の画像