今週の気になるWEBサイト・アプリUI/UX&デジタル広告・サービス 2016/3.13~3.19

Hochburg. The Design Force.(WEBサイト)

160411_01

http://www.hochburg.net/en/

DESIGN FORCEのコピーが随所に。CEO自らメインビジュアルになり全面にブランディングさせています。ヨーダっぽいのは狙いですかね?

Sonikpass(WEBサイト)

160411_02

http://sonikpass.com/

セキュリティー関連会社のWEBサイト。CANVASで描かれたトップの波紋と背景の極太フォント、ミニマルなデザインに注目しました。

Somerset(WEBサイト)

160411_03

http://printedbysomerset.com/

封筒を明けると1枚の厚紙が。ページ内のアニメーションを全てスプライトシートで作られていて非常に手間暇かけてらっしゃいます。MAPもちゃんと動きます。

Monocromo(サンプルソース)

160411_04

https://codyhouse.co/gem/ink-transition-effect/

先ほど取り上げたスプライトシートのafter effectを使ったパラパラマンガ風アニメーションのサンプルサイト。以前書いた「png、jpgアニメーション(Javascript + AfterEffects)でデバイス、ウインドウサイズに縛られないアニメーション」と似た方法です。

Rotate(WEBサイト)

160411_05

https://studiorotate.com/

マウスインタラクションでシャドウを動かすギミックが会社名を上手く表現していますね。詳細ページのスクロール進捗度を表すUIも面白いアイディア

jQuery Hover3d(サンプルソース)

160411_06

http://ariona.github.io/hover3d/index.html

hover時の3d視差インタラクションのサンプルソース。要素毎にCSS3で異なるtranslateZを指定しておき、JSで操作する方法。

Hear My Story(WEBサイト)

160411_07

http://hearmystory.ch/#/

聴覚障害者を取り上げたWEBサイト。各記事毎にメインビジュアルにムービーが埋め込まれています。特にナビのUIに注目しました。

Vodka Alaska(WEBサイト)

160411_08

http://www.alaskavodka.com/

トップメインビジュアルに3Dに雪を降らせています。各セクションでドラッグ出来るタイムラインUIに注目しました。

Share

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

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>