Diviで構築されたデジタルコンサルタントWebサイトの16の例

公開: 2017-08-04

デジタルコンサルティングは、人気のあるオンラインビジネスモデルです。 多くのデジタルコンサルタントが、彼らとそのクライアントの両方のためにDiviを使用して開発しています。これが、DiviがWordPressのトップ開発テーマの1つになっている理由の1つです。 これは、創造的なインスピレーションを提供するためにDiviで構築されたデジタルコンサルタントWebサイトの例がたくさんあることを意味します。 この記事では、そのうちの16個を見ていきます。

デジタルコンサルタントがウェブデザイン、ロゴ、グラフィックデザイン、アプリ開発などのサービスを提供するかどうかにかかわらず、これらのサイトは次のデザインのインスピレーションに役立ちます。 サイトは順不同です。

1.スマートコーダー3

Smart-Coder-3.png

Smart Coder 3は、チェスの背景画像と引用符がオーバーレイされたフルスクリーンの画像スライダーを使用します。 赤いフォントは視覚的な強調表示を提供します。 About Meセクションには、開発者の素敵なデジタルペインティングが表示されます。 複数のセクションは、有名な名前からの引用を提供します。 その他のセクションには、番号カウンター、プロジェクト、紹介文スライダー、お問い合わせフォームが含まれます。 赤、白、黒の配色は、サイトのデザインに適しています。

2. XDWebデザイン

XD-Web-Design.png

XD Web Designには、ヘッダーのスライダー内にいくつかの興味深いトランジションが含まれています。これには、CTAとソーシャルボタンが含まれます。 宣伝文句は、画像とテキストに重なる影、ホバー効果、アイコンが付いたカードとして表示されます。 CTA(召喚)モジュールもシャドウとホバー効果を使用します。 大きなアイコンは、サービスや連絡先情報に注目を集めます。 プロジェクトプロセスは、横番号のリストで説明されています。 このサイトは、色、アニメーション、レイアウトデザインを最大限に活用しています。

3. Zachery Nielson

Zachery-Nielson.png

Zachery Nielsonは主に、黒い背景と白いテキスト、画像、および視差のあるフルスクリーンの背景を使用します。 選択した作品は、モニターとモバイルデバイス内に表示されます。 これらのサイトでは、大きなフォントを使用した最小限のアプローチを使用しています。

4.ビセンテラタグジュニア

Vicente-Latag-Jr.png

Vicente Latag Jrは、スクロール時に反対方向に移動する視差で全幅のビデオ背景を表示します。 オレンジと白のブランドで、大きなアイコンがサービス、紹介文、お問い合わせフォームに注目を集めています。 プロジェクトは全幅グリッドで表示されます。

5.タルツール

Taltool.png

Taltoolは、RTL(右から左)のテキストを含むヘブライ語のサイトです。 ズームアニメーション付きのフルスクリーンスライダーを使用します。 ほとんどのセクションはフルスクリーンで、いくつかの最近のプロジェクトセクションと、CTAを使用した開発者の色鉛筆スタイルのデジタル描画を含むAboutセクションが含まれています。 このサイトは色をうまく利用しています。

6. Sensi Web

Sensi-Web.png

Sensi Webは、視差のあるハート型のグラフィック(ロゴを兼ねる)を備えた興味深い粒子の背景を使用しています。 サイト全体のセクションの背景は、この背景とグラフィックの色と一致しています。 セクションでは、2列のテキストとグラフィックを交互のパターンで使用します。 作品は、背景画像のズームバージョンを使用してプロジェクトスライダーに表示されます。 フォントとアイコンはデザインと完全に一致しており、サイトにすっきりとプロフェッショナルに見える視覚的な魅力を与えています。

7.ジョンゴンザレス

John-Gonzalez.png

John Gonzalezは、スクロールのズーム効果を備えた画像スライダーを使用しています。 各スライドには短い説明があります。 サービスは、素敵なホバー効果を使用してカードに影を付け、タイトルを赤に変更し、アイコンを拡大して太字にするタイルで表示されます。 証言は、あなたが彼らの声明を読むために選ぶことができる画像を示しています。 コースとブログもホバー効果を使用しますが、サービスとは少し異なります。 このサイトは、赤と白のカラーブランディング、アニメーション、視差をうまく利用しています。

8.ブライアントーピー

ブライアン-Torpie.png

Brian Torpieは、CTAと優れたタイピング効果を備えた視差のグラデーション背景オーバーレイを使用しています。 薄い全幅セクションは、提供されるサービスを表示する最初のセクションから始まるレイアウトの各セクションを説明します。 各サービスは、片側にテキストとCTAを含む背景画像を使用して、全幅のセクションで説明またはデモンストレーションされます。

9. Zeljko Skipic

Zeljko-Skipic.png

Zeljko Skipicは、ポートフォリオとサービスを強調するために、明るい灰色の背景のセクションと視差の暗いオーバーレイとともに、白黒(主に灰色の色合い)を使用します。 セクションは、テキストの後ろにコードグラフィックを使用するタイトルで区切られています。 右側のサイトの垂直メニューには、ナビゲーションとは別のセクションに連絡先ボタンとソーシャルフォローボタンが表示されます。 ダークグレーはライトグレーに対してエレガントに見え、滑らかで見やすいコントラストを作成します。

10. Charlotte Jourdain

Charlotte-Jourdain.png

Charlotte Jourdainは、マウスに続く要素またはマウスに反応する要素を含むアニメーションヘッダーを使用します。 ヘッダーの背景は、視差の他のすべてのセクションで使用されます。 ロゴのオーバーラップセクションに一致する大きな丸いパターンは、興味深い視覚的なデザイン要素を作成します。 プロジェクトは、オーバーレイ付きのズームホバー効果を使用します。 このサイトにはフランス語または英語で読むオプションがあり、カラーブランディングとセクションセパレーターを最大限に活用しています。

11.キャロネデザイン

Carone-Designs.png

Carone Designsは、ビデオの背景、CTAボタン付きの興味深いヘッダー、および両方のセクションが線で区切られた右側のメニューを表示します。 サービスは、青い背景の上に白いテキストで表示されます。 ノックスビル市の画像は、クライアントのロゴをオーバーレイで表示するものを含め、視差の背景として使用されます。 このサイトは、フォントとカラーブランディングをうまく利用しています。

12.BJキートン

BJ-Keeton.png

BJ Keetonは、視差でオーバーレイされた背景の上に、名前、説明、およびナビゲーションを右側に表示します。 オーバーレイの青と赤は、サイト全体で背景とアイコンに使用されます。 書籍やポートフォリオ画像は、太い境界線を使用して目立たせています。 このサイトはプロフェッショナルでありながらユーモアを駆使しているため、実際にはすべてのテキストを読みたくなりました。

13. MoxieCreek

MoxieCreek.png

MoxieCreekは、視差のあるCTAを使用して白黒画像を表示します。 トップバーはすべての要素を右側に配置します。 ロゴはスクロールで重なっています。 興味深い背景パターンの上に青とオレンジのグラデーションを使用して、ステートメントとサービスを表示します。 サービスの詳細はトグル内に表示されます。 テントウムシの色を示すお問い合わせフォームの後ろにある白黒写真が大好きです。

14.ジュースクリエイティブウェブデザイン

ジュース-クリエイティブ-ウェブ-デザイン.png

Juice Creative Web Designは、さまざまなCTAリンクの背景を含む、サイト全体で複雑な背景パターンを使用しています。 作品の例、リンク、お問い合わせフォームは、画像の上に線が引かれた素敵な影の効果で表示されます。 ダウンロードリンクには、単純なホバー効果が含まれています。 それらは複雑ですが、ビジュアルがサイトのすっきりとしたデザインの邪魔になることはありません。

15.情報設計

In-Formation-Design.png

In-Formation-Designは、全体にフェミニンでエレガントなデザインを使用しており、柔らかな色、セクションタイトルのエレガントなフォントの背後にある水彩画のスプラッシュ、パステルカラーの背景パターン、花、AboutMeセクションの水彩画のスプラッシュがあります。 このページには、視差のあるポートフォリオグリッド、Webデザインパッケージの価格表、トグルで表示されるFAQ、透明な紹介文スライダー、および簡単な連絡フォームが含まれています。

16.カヤデジタルメディア

カヤ-Digital-Media.png

Kaya Digital Mediaは、ロゴとサービスのリストを含むビデオの背景を表示します。 スリムなニュースレターのオプトインフォーム、交互のマルチレイアウトセクションでのサービスの説明、真の視差のウィンドウを備えたセクション、3列のセクション内の2列のポートフォリオグリッド、投稿スライダー、エレガントな紹介文が含まれています視差の背景の上。 フォントと背景色が大好きです。

最終的な考え

Diviで構築されたデジタルコンサルタントWebサイトのこれらの16の例は、Diviがクライアントの仕事で人気のあるテーマであるだけでなく、デジタルコンサルタントが自分のWebサイトで使用するのに十分強力であることを示しています。 Diviを使用すると、1ページのサイトからお問い合わせフォームを使用した表示サービス、アニメーションやポートフォリオを使用した大規模なサイトまで、複雑または単純なものに関係なく、あらゆるタイプのデジタルコンサルタントWebサイトの興味深いデザインを作成できます。

これらのサイトは、レイアウト、色の使用、画像、CSS効果、ナビゲーション、ビデオなどのアイデアを提供するのに最適であり、次のDiviデザインのインスピレーションを与えてくれます。

Diviで構築されたこれらのデジタルコンサルタントWebサイトのお気に入りの要素は何ですか? 以下のコメントでお知らせください!

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