ディビデザインショーケース：2021年7月からの新規提出
公開: 2021-07-24毎月開催されるDiviShowcaseでは、コミュニティメンバーが作成した10のすばらしいDiviWebサイトを紹介します。 毎月、コミュニティから提出された最高のDivi Webサイトを紹介します。今日は、7月の上位10のWebサイトを紹介します。 投稿全体を通して、私を各Webサイトに引き付ける私のお気に入りのデザイン機能のいくつかを指摘します。
私はあなたがそれらを好きであることを願っています！
ディビデザインショーケース：2021年7月からの新規提出
1.ストラットンクレイグ
このサイトはPiersElliottによって提出されました。 テキスト、リンク、ボタンの赤いハイライトがたくさんあり、サイト全体に濃い青があります。 セクションには、赤と青の両方でうまく機能する白または非常に明るい緑の背景が含まれています。 メガメニューには、連絡先CTAと複数の列のリンクを含む薄緑色の背景が含まれています。 ヒーローセクションには、埋め込まれたビデオが表示されます。 ケーススタディとサービスのセクションには、片側に画像があり、反対側に情報がある小さな行が表示されます。 私はブログセクションが好きです。 投稿にはタイトルが表示され、空白と1本の水平線で区切られています。 私が面白いと思ったもう一つのことは、スクロールバーがないことです。
サイトを訪れる
2.フリーランサーのマイク
このサイトはMikeMcManusによって提出されました。 これはタイポグラフィと灰色の背景を面白く利用しています。 ヒーローセクションでは、片側に丸みを帯びた下隅の画像が表示されます。 これは、灰色の背景と重なる反対側のテキストから切断されます。 小さな黄色のボタンがサイト全体で使用されており、メニューの黄色と一致しています。 プロジェクトは、片側に画像、反対側に抜粋のある投稿として表示されます。 私は、別の宣伝文にのみ触れる境界線で区切られた宣伝文のセクションが好きです。 サイトのデザインは、ウェブサイトの説明に役立つ、目立つコードのルックアンドフィールを備えています。 このサイトには興味深いブログデザインもあります。
サイトを訪れる
3.ダジョクリエイティブ
このサイトはDavidKingによって提出されました。 これは、ブランディングのためにサイト全体で緑をうまく利用しています。 ヒーローセクションには、スクロールすると画面にズームインするピクルスの瓶の画像が含まれています。 ウェブサイトは特大のテキストで紹介されています。 要素の多くには、ホバーアニメーションまたはスクロールアニメーションが含まれます。 背景のいくつかは視差にあり、スタジオの画像を示しています。 私のお気に入りのセクションの1つは、タイポグラフィのデザインに関連するアイコン付きの宣伝文句を示しています。 私のお気に入りのもう1つは、スクロールするとズームアウトする特大のテキストを示しています。 また、複数列のレイアウトで表示される作業の例も気に入っています。 これらには、画像のホバー効果のための緑色のオーバーレイが含まれています。
サイトを訪れる
4.安全なITソース
このサイトはMichaelWhiteによって提出されました。 これは、ロゴのハイライト、ヒーローセクションの垂直バー、数字、リンク、アイコン、オーバーレイ、および水平方向の境界線として、多くのオレンジと赤を使用しています。 セクションの多くには、背景に目立つパターンが含まれています。 一部には、セクションを説明するテキストが含まれています。 私は彼らのアプローチを詳述するセクションが好きです。 アニメーションとオーバーレイを備えた番号付きの宣伝文が含まれています。 リソースページも気に入っています。 ホバーアニメーション、タイトル、カテゴリを含む注目の画像を含むブログ投稿が表示されます。 それらは短くて幅が広く、ブログにすっきりとしたデザインを与える2つの列内に配置されています。
サイトを訪れる
5.スタジオヴィータ
このサイトはSimoneVitasによって提出されました。 これには、サイト全体に興味深いホバーアニメーションがたくさんあります。 マウスカーソルが、背景が透けて見えるスタイル付きの三角形に変わります。 クリック可能なものにカーソルを合わせると、三角形が塗りつぶされ、背景が透けて見え、色が反転します。 クリック可能な要素が、目立つ濃い赤に変わります。 ヘッダーとハンバーガーメニューのフォントは特にエレガントです。 読み込み時にページの要素を明らかにするブロックアニメーションが大好きです。 作品の例として面白い画像を使うのも好きです。 召喚状は、ホバー時に三角形の大きなバージョンを表示し、サイトに合わせてスタイル設定された大きなお問い合わせフォームに移動します。
サイトを訪れる
6.サーフインドネシア
このサイトはLokeshMangyanによって提出されました。 これは表記法を面白く利用しています。 要素の多くには、要素を指す矢印の付いた傾斜したテキストが含まれています。 このテキストは、Webサイトの使用方法に関するヒントを提供します。 ホームページ全体にいくつかの召喚状が掲載されており、サイトのデザインとうまく連携しています。 CTAには、ボタン、小さなバナー、および前景に画像とボタンがある黄褐色の背景の上に大きなテキストを表示する全幅セクションが含まれます。 また、ウェブサイトのツールのアプリバージョンへのCTAも含まれています。 いくつかの日焼けの色合いは、ビーチのテーマに適したブランドカラーとして使用されています。 宣伝文のセクションは、ホバーの境界を明らかにし、黄褐色のアイコンを含みます。 レビューは、ヒーローセクションと紹介文のスライダー内に星評価付きの短いスニペットとして表示されます。 このウェブサイトでの地図の使用が大好きです。
サイトを訪れる
7.カルデジタル
このサイトはKalのPetrosによって提出されました。 これは背景とタイポグラフィを面白く利用しています。 ヒーローセクションのタイトルの後ろに真っ赤なアニメーションのバブルが表示されます。 次のセクションにスクロールしても、バブルはそのまま残り、完全な背景になるまで別の形に変わります。 その後、灰色に変わり、バブルに戻り、次に黒い背景に戻ります。 途中で、前景には情報、一方に漫画風のグラフィックを備えたサービス、もう一方に情報が表示されます。 灰色のセクションには、両側に宣伝文句が付いたコンピューター画面のグラフィックが表示されます。 他のページは、異なる色で同様のデザインを使用しています。 お問い合わせページのアニメーションペンも気に入っています。
サイトを訪れる
8.ロビンソンMD
このサイトはJonathanMoreyによって提出されました。 サイト全体のハイライトおよび背景要素として明るい色を使用します。 アクセシビリティツールは、常に手の届くところにあるアイコン内に配置されます。 一部のセクションには、片側に画像、反対側にテキストの2つの列が表示されます。 一部の画像には、2つの角の後ろに色のブロックが含まれています。 宣伝文には、Webサイトのジャンルに最適な特殊なアイコンが含まれています。 宣伝文の1つのセクションには、背景よりも速くスクロールするカードと横への宣伝文が含まれます。 フッターの近くの詳細なフォームは、サイトのスタイルと一致します。 ブログページは同じデザインに従い、提案やスタイル付きのブログカードを使用した検索が含まれています。
サイトを訪れる
9.国際予算パートナーシップ
このサイトはRajanZaveriによって提出されました。 それはすべての要素の中でたくさんのアースカラーを使用しています。 多くの見出しには、マーカーのように見えるハイライトが描かれています。 一部の背景には手描きの地図が含まれています。 人々の手描きのグラフィックがテキストの横に浮かんでいます。 メニューにはスタイル付きのボタンがあります。 トグル内に目次が作成されます。 左側に沿って、ヒーローセクションをスクロールすると表示されるスタイル付きのドットナビゲーションシステムがあります。 ヘッダーには、各セクションの名前が表示されます。 私は特にグリッドに数字があるセクションが好きです。 数字は大きな境界線で区切られています。 グリッドの中央には、タイトル付きの小さなテキストブロックがあります。 1つにカーソルを合わせると、フルサイズに拡大縮小され、情報と数値の上に表示されるオーバーレイが表示されます。 データマップのボタンが下部に貼り付けられ、ポップアップが開きます。
サイトを訪れる
10.ニャンサ
このサイトはクリスティーナによって提出されました。 これは、ロゴを含むサイト全体のブランドカラーとしていくつかの緑の色合いを使用しています。 ヒーローセクションは、全幅の画像の一部に緑色のオーバーレイを配置し、CTAを含みます。 別のセクションは、画像上のテキストのブロックと重なり、背景が緑色のタイトルが含まれています。 私は特に、角がオンになっている正方形内の緑色の丸で囲まれたアイコンを含む5つの宣伝文のセクションが好きです。 情報のセクションでは、暗い色から明るい色に変化するさまざまな緑の色合いのカードを使用しています。 フッターのソーシャルアイコンは同じ順序に従います。 ブログセクションでは、カードに濃い緑色の下枠を使用しています。 紹介文のスライダーには、テキストの背景が緑色で、大きな背景画像から目立つ太い白い境界線が含まれています。
サイトを訪れる
来月まで！
これは、7月のコミュニティDiviWebサイトのベスト10の提出物です。 これらのサイトは素晴らしく見えます、そしていつものように私たちはあなたの提出に対してみんなに感謝したいと思います！
独自のデザインを検討したい場合は、エレガントなテーマのドットコムでネイサンの編集者にメールしてください。 メールの件名は必ず「DIVISITESUBMISSION」にしてください。
コメントもよろしくお願いします！ これらのウェブサイトについてあなたが好きなことを教えてください。彼らがやったことがあれば、ブログで教えてほしいと思います。
pikolorante /shutterstock.com経由の注目の画像