ディビデザインショーケース：2020年10月からの新規提出
公開: 2020-11-01毎月開催されるDiviShowcaseでは、コミュニティメンバーが作成した10のすばらしいDiviWebサイトを紹介します。 毎月、コミュニティから提出された最高のDivi Webサイトを紹介します。今日は、10月の上位10のWebサイトを紹介します。 投稿全体を通して、私を各Webサイトに引き付ける私のお気に入りのデザイン機能のいくつかを指摘します。
私はあなたがそれらを好きであることを願っています！
ディビデザインショーケース：2020年10月からの新規提出
1.エピックエッグレストラン
このサイトはAbelMcBrideによって提出されました。 背景要素、アイコンの背景、ボタン、ブロックテキスト、フッターの背景のblobを含め、サイト全体でオレンジを使用しています。 緑は、テキストの背後およびグラフィック内のハイライトとして使用されます。 食べ物はサイトの側面に表示され、大きな写真が目立ちます。 メニュー項目は、片側に鋭い角があり、反対側に丸い角があるスタイル付きの境界線を使用するトグル内に表示されます。 フードメニューページは同じトグルを使用し、コーナーに価格を追加します。 このサイトは、空白、写真、色をうまく利用しています。
サイトに訪れる
2.ポンデンタル
このサイトはBrittanyHurdleによって提出されました。 色はジャンルに完全にマッチしています。 ヒーローセクションには、タグラインと説明が前景に表示された背景動画が表示されます。 さまざまなカテゴリのアイコンを含むメガメニューが含まれています。 セカンダリメニューには見積もりが表示され、重複するCTAボタンが含まれます。 宣伝文句、アイコン、テキスト、および背景要素は、ブランディングに薄緑または青を使用します。 要素の多くには、テキストまたはボタンの下部の境界線を表示するホバーアニメーションが含まれています。 私はサービスのセクションが好きです。 これには、サイトに一致する背景の大きな画像が含まれており、サービスをテキストとして片側に表示します。 ブログには、検索機能を備えたシンプルなデザインが含まれています。 このサイトは、テキストと境界線をうまく利用しています。
サイトに訪れる
3.レボリューションデパレ
このサイトはAmalVaeskenによって提出されました。 サイト全体で大胆な色をたくさん使用しています。 ヒーローセクションには、サイトの色を使用した画像を含むフルスクリーンスライダーが表示されます。 会社情報は大きな青いテキストで表示され、スクロールすると視差の次のセクションが表示されます。 視差のセクションでは、画面の中央に青い背景のメッセージが表示されます。 スクロールしても、この画面は所定の位置に留まり、最後のメッセージが表示されるまでメッセージが数回置き換えられます。 仕事の例があるセクションが好きです。 大きな画像、アニメーション、スライダーがWebサイトの色で2列に表示されます。 また、ホバー時にグラフィックを変更し、ボタンを表示して詳細を表示する、下部にある大きなCTAも気に入っています。
サイトに訪れる
4.マイクのカントリーミート
このサイトはマーカス・ジールによって提出されました。 このサイトは漫画のグラフィックを驚くほど利用しています。 最初から最後まで、すべての色、フォント、ボタンは漫画のスキームと完全に一致しています。 ヒーローセクションには、木の板を使用したスタイル付きのサブメニューを備えたフローティングメニューが表示されます。 雲が背景図の空を横切って浮かんでいます。 スクロールすると、漫画のキャラクターがカットアウトとして表示され、CTAを作成したり、特定のセクションに注目を集めたりします。 製品はこれらのセクションの1つに表示され、サイトに一致するスタイルが含まれています。 要素の多くは、マウスのスクロールに一致するようにアニメーション化されています。 連絡先情報でさえ、デザインに合ったグラフィック要素の上に配置されます。 これはスクロールするのに楽しいサイトです。
サイトに訪れる
5.デンタルセンターオストジック
このサイトはBorisZakulaによって提出されました。 これは、サイト全体のハイライトとして多くのオレンジ色のグラデーションを使用しています。 ヒーローセクションでは、画面中央のタイトルの後ろに、スクロールすると縮小するグラフィックが表示されます。 メニューは全幅のメガメニューで、片側へのリンクをアイコンで表示し、反対側に画像を表示します。 このサイトでは、情報、CTA、ビデオ、ブログ投稿などのために、場所と労働者の写真をたくさん使用しています。 ストーリーと紹介文のセクションが好きです。 クライアントの画像を、テキストのブロックを別の色の上に表示します。どちらもボックスシャドウを使用します。 ブログ、CTA、および連絡先情報も、ボックスシャドウを使用して目立たせています。
サイトに訪れる
6.インクリメンタル
このサイトはNavmeetSinghによって提出されました。 ハイライト、背景、グラフィックスにサイト全体で多くの青とオレンジを使用しています。 それがどのように機能するかについてのセクションは、ステップを導く2色のアイコンで宣伝文の中に情報を表示します。 別のセクションには、スクロールしながら電気コードが差し込まれているグラフィックが表示されます。 これにより、2色のアイコンが付いた別の宣伝文のセットが導入されます。 情報の大部分は、一方の側にグラフィックを使用し、もう一方の側にテキストを交互のレイアウトで使用しています。 また、スクリーンショットや画面の丸で囲んだグラフィックなど、グラフィック内に情報を表示する機能ページも気に入っています。 このサイトは、色、空白、および手描きのグラフィックを最大限に活用しています。
サイトに訪れる
7.グリーン
このサイトはLibertoLopezによって提出されました。 このサイトでは、背景、グラフィック、タイトル、ボタン、お問い合わせフォーム、トップに戻るボタンなどのブランドカラーに緑と青を多く使用しています。ヒーローセクションには、パターン付きの緑の背景が表示されます。 前景には、片側にメッセージが表示され、反対側にグラフィックが表示されます。 スタイル付きのセクションディバイダーは、ホバーでズームする宣伝文で次のセクションにつながります。 いくつかのセクションでは、片側に複数のグラフィックが表示され、反対側にCTAが表示されます。 また、オフセットパターンの大きな2色のアイコンと、ホバー時に表示される青と白のグラデーションを使用する宣伝文のセクションも気に入っています。 次のセクションの背景に、角度の付いたグラデーションが表示されます。 お問い合わせフォームには、グラデーションと目立つボックスシャドウも表示されます。 このサイトは、色とグラフィックをうまく利用しています。
サイトに訪れる
8.HRチーム
このサイトはMarwannAlSaadiによって提出されました。 ヒーローセクションには、ホバーを拡大する前景にハッシュタグとCTAが付いたアニメーションの背景グラデーションが表示されます。 この背景のグラデーションは、CTA、セクション、宣伝文などの背景としてサイト全体に表示されます。 宣伝文句は、チームメンバーの画像をデュオとして表示し、画像は互いにメッシュ化され、分割線で区切られています。 私は彼らの方法についてのセクションが好きです。 片側に大きな円で背景のグラデーションを表示します。 反対側は、大きなブロックタイトルと目のアイコンを使用して情報を箇条書きとして配置します。 アイコンも宣伝文で表示されます。 このサイトには、ハンバーガーアイコンをクリックすると広がる興味深いメニューも含まれています。 また、タイトルに背景のグラデーションとブロックテキストを使用します。
サイトに訪れる
9.ストレスは許されません
このサイトはAntreekによって提出されました。 このサイトは全体に大胆な色のグラフィックをたくさん使用しています。 ヒーローセクションには、片側にタグラインがあり、反対側にグラフィックがある都市景観の背景グラフィックが表示されます。 背景が端まで届かないため、四方に大胆な黄色が表示されます。 メニューは、ヘッダーとサブメニューに太字の黄色の背景を使用しています。 黄色は次のセクションに溶け込み、一方の側に情報を表示し、もう一方の側に、丸みを帯びたエッジと太字の境界線を持つスマートフォンのグラフィックを模倣したビデオを表示します。 価格表も太字を使用し、ページの両側にグラフィックが含まれています。 連絡先セクションには黄色の背景が含まれ、大きなソーシャルアイコンが含まれています。 このサイトは、色とグラフィックをうまく利用しています。
サイトに訪れる
10.ローラメンテ
このサイトはTheoSalomoniによって提出されました。 このサイトは、ターゲットオーディエンスにアピールするためにいくつかの柔らかい色を使用しています。 色には、ハイライト、オーバーレイ、背景色、および戻るボタン用の淡い銅のバージョンが含まれます。 ヘッダーはこれを使用して、アクティブなページとホバー要素を識別し、CTAを識別します。 ヘッダーは、特定のリンクのロゴから緑の色合いも使用します。 このグリーンは、フッター近くの背景にも使用されます。 フッター自体は、カーテンのように見える淡い銅色を使用しています。 2番目のセクションにスクロールすると、紹介文が所定の位置にスライドします。 別のセクションでは、淡い銅のオーバーレイとのリンクとして画像を表示します。 ブログの投稿はスライダー内に表示され、上隅に日付が含まれ、ホバーでズームします。 このサイトは色をうまく利用しています。
サイトに訪れる
最後に
これは、10月のコミュニティDiviWebサイトの投稿ベスト10です。 これらのサイトは素晴らしく見えます、そしていつものように私たちはあなたの提出に対してみんなに感謝したいと思います！
独自のデザインを検討したい場合は、エレガントなテーマのドットコムでネイサンの編集者にメールしてください。 メールの件名は必ず「DIVISITESUBMISSION」にしてください。
コメントもよろしくお願いします！ これらのウェブサイトについてあなたが好きなことを教えてください。彼らがやったことがあれば、ブログで教えてほしいと思います。
Mascha Tace /shutterstock.comによる注目の画像