クリーンでフラットなビデオを効果的に利用したポートフォリオWebデザイン

bkwld-video-flat-Webデザイン_003

BKWLD

Webデザイン3つの良いとこ : 3 Good Point!

  1. スクリーンショットの代わりにビデオを利用
  2. クリーンでフラットなWebデザイン、タイポグラフィ
  3. 音で魅せるプロフィール!

私はWebデザインのココを見た!

クリーンでフラットな軽いベタ塗りがかった、企業のポートフォリオWebデザイン。トップページにアクセスして突如動き出す映像がとても印象に残ります。

画像ではなく映像で訪問者にメッセージを与える

bkwld-video-flat-Webデザイン_004

たいていこのビデオがある箇所には、大きなスクリーンショットか、スライドショーがくるところ。どうせ画像がきて、なおかつ動くなら映像でも確かに良いですよね。業務の風景を撮影している動画は、企業の一面を訪問者に簡単に知らせることが出来ますし、メッセージを効果的に自然に与えることが出来ます。

また、ビデオについては激しく動かずゆっくり撮影された動画を利用すると、videoタグで埋め込む場合は良いのかなと思いました。

クリーンでフラットなWebデザインとタイポグラフィ

bkwld-video-flat-Webデザイン_005

クリーンなイメージとフラットなベタ塗りが非常にマッチしています。色彩を抑えた背景に、伝えたいことをシンプルに的確に伝えるデザインが施されています。

bkwld-video-flat-Webデザイン_002

ホバー時の演出も一工夫。画像は各所丸く切り抜き表示されていますが、マウスが乗ったら、その周りの白背景を使用カラーである淡いエメラルドグリーンに変色しています。

なるほど、周りを切り替えることで強調する方法はとても良い。

bkwld-video-flat-Webデザイン_001

また、タイポグラフィが秀逸です。

に指定されているh1のフォントファミリーには、

font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif

が設定されています。

proxima-nova、Helvetica Nuue、良いですね−!!とてもクリーンでフラットなWebデザインの演出に貢献している要素です。

音で引き寄せる

bkwld-video-flat-Webデザイン_006

また、プロフィールページでは、ページ上部のみサウンドが流れます。

そのフェードアウトとフェードインが絶妙で、下にスクロールするほど音が小さくなるのです。

また、動画もクリエイティブ精神あふれるとっても見ていてなんか不思議なキブンになっちゃうような構成になっています。プロフィールページはぜひ一度ご覧ください!

ビデオタグ、フラットなWebデザイン、とても勉強になるWebサイトでした。

今日参考にさせて頂いたサイト

BKWLD

    この素敵なWebデザイン、「いいな」と思いました?
    その気持ちをポチッと残しておきましょう!

  • このエントリーをはてなブックマークに追加

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

あなたにとっての素晴らしいWebデザインが見つかりますように。

Webデザインレビュータグクラウド

ホバーしてね