Webデザインのセンスを磨く!2014年上半期洗練されたディテールのUIデザインのまとめ
Post on:2014年7月3日
2014年上半期、チェックしておきたいUIデザインをDribbbleから紹介します。
各アートワークは大きいサイズの画像やPSDをダウンロードできるので、気になったものはリンク先をチェックしてみてください。
アートワークにはアニメーションgifも多いのですが、ページサイズが大変なことになるため最初の一つだけです、アニメーションはリンク先で。

リフレッシュ時はプリローダーのくるくるっとしたアニメーションが多いですが、こーゆう遊び心のあるのもいいですね。

3つのパネルがジェスチャーに対してそれぞれ別々のアニメーションをします。めちゃ気持ちいい!

気持ちのいいアニメーションでメニューが表示します。

予約テーブルのコンセプトデザイン、デザインにあったフォントの使い方が素敵です。

サイドバーがはじけるようなアニメーションで気持ちよく表示されます。

クリーンでシンプルなUI、美しいですね。

ソーシャルサービスのFeedを表示したレイアウト、背景のグラデーションがいい演出。

OS Xをリデザインしたビジュアルコンセプト、アクティブではないウインドウにブラーの効果を与えています。

画像の使い方、カラースキーム、アイコン、レイアウトと非常に美しくデザインされています。

ヘキサゴンを使ったかわいいエレメント。

写真や動画をサムネイルで表示したシンプルなUI。

ソリッドなラインを使ったボタンやプルダウンが最近増えてきました。

ブラーな背景と半透明のパネルの組み合わせは、これからどんどん増えそうです。

半透明ではなく、同系色のパネルもいい感じです。

1ページで構成された縦長ページのさまざまなコンポーネントが含まれています。

縦長ページのコンセプトで非常に美しくデザインされています。リンク先では全コンテンツのファイルがダウンロードできます。

折り畳みやバウンドなど、操作して気持ちいいアニメーションをたくさん備えています。

エレメントごとに半透明の濃度を変えた美しいパネル。

こんなステキなデバイスが近い将来、現実になるかもしれませんね。

フラット、ブラー、ソリッド、サークルの組み合わせは、やっぱりいいですね。

Android L Gmail User Interface
先日アナウンスされたばかりのAndroid LのGmailのコンセプトデザイン。

スクリーン全体をナビゲーションにして、コンテンツを表示します。

iOS7用のタイマーのデザイン、パステルのグラデーションが美しい。

パステルを使ったカラースキームとソリッドなアイコンが洗練されています。

ソリッドなグラフとグラデーションの組み合わせがマッチしています。

白に白って難しいと思うのですが、これは非常に美しく分かりやすいですね。

日本でも最近こういったイラストを使ったサイトが増えてきました。

非常に大胆な色使いが、印象的です。

iPad Magazine Table of Contents
iPadに最適化された雑誌風コンテンツの見せ方、背景と透明パネルがパララックスになっており、めくる動作が非常に気持ちいいです。リンク先のアニメーションをチェックしてください。

ブラックとホワイトをベースに、アクセントのオレンジが映えます。

幾何学的なパターンを淡い配色で使うのも面白いですね。

Stats screen of a online football
サッカーの試合の状況を表示するコンセプトデザイン。

telemarketing365 Landing Page design
ブルーグリーンの使い方が非常に効果的です。

細部まで丁寧にかわいくデザインされたエレメントはセンスが光ります。

ランディングページとそのワイヤーフレームのセット。

Footprints Final User Interface
OS X用アプリのUI、少ない色数で美しくデザインされています。

写真画像にさまざまなカラーをオーバーレイさせるのも面白いですね。

斜めのラインを効果的に使ったアニメーションが面白いです。

ブラックとブルーの半透明、かっこいいですね。

パネル型のレイアウトもちょっと手を加えるだけで、面白く仕上がります。

きらっと光るのも最近見かけるようになりました。

大胆なレイアウトが非常に魅力的です。

スマフォ用ランディングページ、デザインもかっこいいですが見せ方もかっこいいです。

カード、フラット、パステル、ソリッドなど、トレンドを更に進化させた使い方がすごいですね。

Yosemite風のスタイルを取り入れたレイアウト。

写真とタイポグラフィが非常にマッチした素敵なデザインです。

ブルーとホワイト、半透明の組み合わせは清潔で信頼感を与えます。

サークルとソリッドのエレメントがデザインにアクセントを与えています。

シンプルなアイコンとUIが、コンテンツの写真を引き立てています。

サークルのエレメントの使い方が絶妙です。

Apple Storeをリデザインしたコンセプト、Yosemiteがリリースされるこの秋にサイトのデザインも変わるかな。
sponsors