ウェブデザインのセンスを磨く! 2012年下半期洗練されたディテールのUIデザインのまとめ
Post on:2012年12月12日
2012年下半期、チェックしておきたいUIデザインをdribbbleから紹介します。
PSDやPNGファイルをダウンロードできるので、勉強にもなりますよ。
下の方は、さまざまなエレメントが揃ったUI Kitです。

Future Camera app UI
近い未来こんな素敵なUIがくるのでしょうか。

Slide from The Bricks presentation
各エレメントが立体的に浮かび上がってます。

Tile based navigation concept
Windows8のModernUIみたいなタイルベースのナビゲーション。

Weather Pop up
磨りガラスのような繊細なパネルデザイン。

Media Center
ぼやけた背景も今年のトレンドでした。

Start of an awesome new app.
パキッと折れる感じが新鮮なUI。

Meniooo
繊細な色使いが素敵なパネル。

Wunderlist 2 - iPhone Sidebar
こういったグレーの使い方は取り入れたいですね。

Dropdown Menu UI
色使いも素敵ですが、それ以上に繊細なシャドーが美しい。

The Third Place
ぼやけた写真を背景にしたタイポグラフィがかっこいい。

Hover
ホバー時のエフェクトで、写真自体にもカラーエフェクトが適用されます。

Timeline Post
半透明のエレメントを使ったタイムライン。

Slidedown Menu
清潔感のあるカラーとレイアウト。

D3
フラットな各パネルに繊細なカラースキームを設計しています。

Social Stream
ソーシャルメディアがまとめられたポータル。

Focus Lab v3
トレンドのブラーな背景とはちょっと違った使い方が面白いです。

Landing Page
こちらもブラーな背景とシャープなエレメント、そして幾何学的なエレメントが新鮮。

Minimal Light User Interface Freebie
レトロ風の立体的な面白いデザインのボタン。

Amp
金メッキを磨いたような美しいテクスチャを使ったアンプ。

riverstone apps Home Page
アプリ紹介で、デバイスをスケルトンにしてるの面白いですね。

Create New Album PSD
直感的に操作ができるアルバムのUI。

Style
見た瞬間、かわいらしいイメージが伝わってきます。

Player Widget
ディテールが素晴らしいミュージックプレイヤーのウィジェット。

Range Selection
料金の幅を設定するスライダー。

Music App UI iPhone
レコードをモチーフにしたミュージックアプリ。

Recent Happening
実線・点線・シャドーを巧みに使っています。

Mochila Mail
アイコンがかわいらしいメールアプリ。

And it's live
操作が分かりやすいミュージックコンテンツ。

Rebound This Buy Tickets
デザインが素敵なチケット購入パネル。

Snowbird.com is Live
必要な情報を的確に伝えつつ、デザインも素晴らしいスノボーのページ。

Snowbird Widget updates
スノボーページの右上の拡大。

Mtn Report Mobile Updates
スノボーのスマフォアプリへの展開。

Gauge Needles
計測器用の針のコレクション。

Food Icons
食べ物をかわいくデザインしたアイコン。

Colors
直感的な操作が可能なカラーパレット。

Menu Interaction
ピンチアウトで真ん中からぱかっと開くインタラクション。

Subscribe
こんな美しいデザインだったらすぐに購読してしまいそう。

Our Team
レッドを巧みに使い、視線をコントロールします。

Popover Sign In
パネルが重なってるのはなんでだろう、気になる。

ページをリアルにめくるiPadアプリ。

Comments
必要な情報を美しくデザインしたコメント。

Sign Up Interface
アイコンを効果的に使ったサインアップのUI。

F Top Right Header Ui
細部までしっかりデザインされたヘッダ。

Admin UI Control Panel
管理画面のUI、クローズがめくれてデザインされてるのいいですね

Dropdown Rebound
フロスト風デザインのドロップダウン。

Category Icons
ビビットな色使いがかわいいカテゴリのアイコン。

Encide Jobs
求人サイトのインターフェイス。

Simple Todo App
シンプルなデザインのTODOアプリ。

Hotels Search & Booking Portal
背景に写真を大胆に使ったホテルの検索ページ。

Portfolio
シンプルでかわいいアイコンを使ったポートフォリオ。

Pop up Menu
六角形を使ったポップアップメニュー。

Airbnb Search
何を検索するかメッセージを配置した検索ボックス。

Contacts
繊細なブラックの色使いがかっこいいです。

Khareedo
カテゴリごとに印象深いカラースキームを使っています。

Blog Design
ハイライトにブラーのエフェクトを使ってるのが面白いです。

Mini Price Table
シンプルなデザインの価格表。

Tiny UI Elements
ミニマリズムなUIエレメントのコレクション。

Dark Chart UI Kit
ダークなカラースキームを使ったチャートのエレメント。

Interface
蛍光色が目に鮮やかなダークのUIキット。

UI Kit
ヴィンテージ風デザインがかっこいいUIキット。

UI Kit
ゲームのようなデザインのUIキット。

Untitled UI Kit
カラーにくすんだグリーンを使ったUIキット。

Blui Design Kit
カラーに美しいブルーを使ったUIキット。

UI Kit
ソフトなデザインのUIキット。

White UI Kit
白が鮮やかに映えるUIキット。

Milky UI Kit
ミルキーなデザインのUIキット、検索が動きますよ。
sponsors