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

公開: 2018-10-28

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

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

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

1.オルビコン情報学

このサイトはJanusLockによって提出されました。ヘッダーの背景ビデオとして再生される興味深いアニメーションがあります。青地に青は、サイトのブランドと完全に一致します。大きなヘッダーフォントは、技術的なテーマでうまく機能します。スクロールすると、垂直方向に配置されたテキストが画面の左側に表示され、ホームページに戻るリンクが提供されます。レイアウトはすっきりしていて、シンプルなグラフィックを使用してプロセスをガイドします。各ページには番号が付けられています。これらの数値は、フルスクリーンメニューに反映されます。アーカイブページのデザインが気に入っています。アーカイブページには、ホバーのオーバーレイの背後にある画像を示すテキスト付きの大きな青いブロックと、関連するアイコンを使用するモジュールページが表示されます。

サイトに訪れる

2. Growmodo

このサイトはPaulPreislerによって提出されました。このサイトは、すっきりとしたレイアウトを作成するために、多くのフラットなデザインのグラフィックと余分な空白を使用しています。仕組みのセクションでもフラットグラフィックを使用しています。画像は、テキストが重なっている大きな画像と、お客様の声モジュールの丸で囲まれた画像の両方で、お客様の声にグラデーションオーバーレイを使用します。上部と下部に角度の付いた仕切りがあり、影の効果がある複数のサイズの丸い画像と、それらをつなぐ線があるクリエイティブな才能のセクションが好きです。ブログの注目の画像もグラデーションオーバーレイを使用しています。サービスは、緑色の箇条書き、ホバーアニメーション、および影の効果を使用したカードで表示されます。

サイトに訪れる

3.ソルビッド

このサイトはDmytroによって提出されました。このサイトでは、さまざまな濃い青の色合いを使用して、興味深いグラデーションの背景を作成しています。ヘッダーは、サービス、ブログ、および製品へのリンクをブロックに提供する方法が独特です。ブロック内の各要素には、ホバー効果が含まれています。いくつかのセクションは仕切りに角度を使用し、いくつかは複数の方向に進んでいます。私は彼らが彼らのリーチについて議論するセクションが好きです。円の中に会社のロゴが表示され、ロゴはわずかに移動しています。サービスは、アイコンとタイトル、および境界線のホバー効果だけで、単純なブロック内に表示されます。同様のブロックがメガメニューに表示されますが、それらはグラデーションの背景を使用して区別されます。ブログページのカテゴリや注目の画像にも同様の画像が使用されています。

サイトに訪れる

4.コック＆ブルフェスティバル

このサイトはRossPopeによって提出されました。このサイトは全体に大胆な色とフラットなデザインを使用しています。ヘッダーの端には、低木と手のグラフィックが飾られており、中央のCTAに注意を向けることができます。 Lightningグラフィックは、次のセクションのテキストに注意を向けるのに役立ちます。太い境界線とズームホバーを含む画像を含むマルチレイアウトセクションが好きです。このセクションには、画像と重なるより多くの低木グラフィックがあります。電子メールのオプトインは、手描きのように見える境界線を使用します。無地のシルエットで人を映すフッターも好きです。このサイトの色は本当に際立っています。これは、色、フォント、グラフィックがWebサイトの雰囲気をどのように設定できるかを示す優れた例です。

サイトに訪れる

5.ウォーキングドッグトレーニング

このサイトはジェレミアロイドによって提出されました。ヒーローセクションでは、サイトの残りの部分のデザインを設定する分割画面に画像と行動を促すフレーズが表示されます。画像は、ボタンのスタイルに一致する3Dのカラフルなダークピーチボーダーを使用しています。別の画像では、青と濃い桃の両方を使用したお客様の声と結びついた青い境界線を使用しています。白から淡い黄褐色に変わる背景色が大好きです。色はフォントや仕切りとうまく調和して、エレガントなスタイリングを作成します。ブログもこのスタイルに従いますが、ブログカードに細い線の境界線を追加します。ブログのサイドバーは、私が見た中で最もすっきりとしたデザインの1つであり、気を散らさない、または無視しやすいブログに関する情報を提供します。

サイトに訪れる

6.ウッズホールタイル会社

このサイトはNelsonMillerによって提出されました。これは、ホームページ上に3Dの境界線があり、タイトル、テキスト、ボタンが重なっている多数の画像を使用してコンテンツを表示する1ページのデザインで、ブログカードのデザインを作成します。スクロールすると画像が交互に表示され、プロセスを進めてフッターの連絡先フォームに移動する垂直線で結ばれます。これは、ページの中央近くで中断され、それに続くサービスセクションを紹介する宣伝文の濃い青色のセクションが表示されます。サービスセクションも、この青いセクションと同じアイコンを使用してそれらを結び付けます。このウェブサイトでフォントと色がうまく連携しているのが大好きです。

サイトに訪れる

7.ブリナートデザイン

このサイトはサブリナローランドによって提出されました。誰かが絵を描いている背景ビデオが黄色のオーバーレイの後ろで再生され、サイトの内容を示しています。タイトルは背景と重なっており、タグラインは注意を引くために黄色のブロック内に完全に配置されています。黄色はサイト全体で背景色に使用されています。サービスセクションには、セクションのタイトルが縦に印刷されている間、CTA付きの3列の宣伝文が表示されます。連絡先セクションのシンプルさが気に入っています。これは、角度の付いた仕切りのある黄色の背景と、次のセクションに重なるシャドウ効果のある小さな連絡先フォームを使用して連絡先情報を作成します。

サイトに訪れる

8.ハッピーデジタル

このサイトはDjayaDeVriesによって提出されました。 CTAは、マルチシェーディングされた丸みを帯びたセクション仕切りを備えたフルスクリーンの背景画像の上に配置されます。プロジェクトとサービスへのリンクは、ホバー時に影の効果で白に変わる濃いオレンジ色のボックス内に配置されます。このオレンジは、ボタンとテキストのハイライトとして、メニューで、利点を示す背景として、およびサービスページ内の2つのマルチカラーアイコンとしてサイト全体で使用されます。ホームページで私のお気に入りのセクションの1つは、2つのセクションに重なるスライダーです。セクションとスライダーは無地を使用してエレガントなデザインを作成します。オレンジと白は、サイト全体の濃い青とうまく機能します。

サイトに訪れる

9.ジェレミームラ

このサイトはJeremyMuraによって投稿されました。私は大胆な色がうまく機能するのが好きで、このサイトは大胆なオレンジを完璧に使用しています。ヘッダーには、オレンジ色のグラデーションと白いテキストのCTA、影の付いた青いボタン、白い境界線のあるオレンジ色のボタンの上の城の漫画の背景が含まれています。 4列のプロジェクトセクションには、プロジェクトの正方形の画像が2行で表示され、間にスペースはありません。ステップに番号を付け、各ステップに大きなアイコンを使用する設計プロセスに関するセクションが好きです。また、白のテキストが付いた太字のオレンジ色の全幅CTAも気に入っています。ブログでは、白い背景にオレンジ色のタイトルを使用しています。

サイトに訪れる

10. Ad Conseil

このサイトはFJLAHIANIによって提出されました。これは、オフホワイトとライトグレーの背景の上にダークグレーとグレーがかった青のテキストとグラフィック要素をうまく利用して、エレガントなデザインを作成します。グラフィックは、専門知識とスキルを示すために使用され、シンプルなタイトルと縦棒で区切られています。宣伝文句は、境界線、影、またはホバー効果を使用しません。チームページは、これと同じデザインに従ってチームメンバーを表示します。リファレンスページとトレーニングページもこの宣伝文句スタイルを使用し、トグルで箇条書きのテキストを表示します。このサイトのデザインの焦点はシンプルさであり、それはうまく機能します。

サイトに訪れる

結論

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

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

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

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