ウェブデザインのセンスを磨く! 2012年下半期洗練されたディテールのUIデザインのまとめ
Post on:2012年12月12日
2012年下半期、チェックしておきたいUIデザインをdribbbleから紹介します。
PSDやPNGファイルをダウンロードできるので、勉強にもなりますよ。
下の方は、さまざまなエレメントが揃ったUI Kitです。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-01.png)
Future Camera app UI
近い未来こんな素敵なUIがくるのでしょうか。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-06.png)
Slide from The Bricks presentation
各エレメントが立体的に浮かび上がってます。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-54.png)
Tile based navigation concept
Windows8のModernUIみたいなタイルベースのナビゲーション。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-42.png)
Weather Pop up
磨りガラスのような繊細なパネルデザイン。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-40.png)
Media Center
ぼやけた背景も今年のトレンドでした。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-02.png)
Start of an awesome new app.
パキッと折れる感じが新鮮なUI。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-55.png)
Meniooo
繊細な色使いが素敵なパネル。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-56.png)
Wunderlist 2 - iPhone Sidebar
こういったグレーの使い方は取り入れたいですね。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-57.png)
Dropdown Menu UI
色使いも素敵ですが、それ以上に繊細なシャドーが美しい。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-58.png)
The Third Place
ぼやけた写真を背景にしたタイポグラフィがかっこいい。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-59.png)
Hover
ホバー時のエフェクトで、写真自体にもカラーエフェクトが適用されます。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-60.png)
Timeline Post
半透明のエレメントを使ったタイムライン。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-61.png)
Slidedown Menu
清潔感のあるカラーとレイアウト。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-62.png)
D3
フラットな各パネルに繊細なカラースキームを設計しています。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-63.png)
Social Stream
ソーシャルメディアがまとめられたポータル。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-64.png)
Focus Lab v3
トレンドのブラーな背景とはちょっと違った使い方が面白いです。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-03.png)
Landing Page
こちらもブラーな背景とシャープなエレメント、そして幾何学的なエレメントが新鮮。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-04.png)
Minimal Light User Interface Freebie
レトロ風の立体的な面白いデザインのボタン。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-07.png)
Amp
金メッキを磨いたような美しいテクスチャを使ったアンプ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-08.png)
riverstone apps Home Page
アプリ紹介で、デバイスをスケルトンにしてるの面白いですね。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-09.png)
Create New Album PSD
直感的に操作ができるアルバムのUI。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-10.png)
Style
見た瞬間、かわいらしいイメージが伝わってきます。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-11.png)
Player Widget
ディテールが素晴らしいミュージックプレイヤーのウィジェット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-12.png)
Range Selection
料金の幅を設定するスライダー。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-13.png)
Music App UI iPhone
レコードをモチーフにしたミュージックアプリ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-14.png)
Recent Happening
実線・点線・シャドーを巧みに使っています。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-15.png)
Mochila Mail
アイコンがかわいらしいメールアプリ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-16.png)
And it's live
操作が分かりやすいミュージックコンテンツ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-17.png)
Rebound This Buy Tickets
デザインが素敵なチケット購入パネル。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-18.png)
Snowbird.com is Live
必要な情報を的確に伝えつつ、デザインも素晴らしいスノボーのページ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-05.png)
Snowbird Widget updates
スノボーページの右上の拡大。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-19.png)
Mtn Report Mobile Updates
スノボーのスマフォアプリへの展開。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-20.png)
Gauge Needles
計測器用の針のコレクション。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-21.png)
Food Icons
食べ物をかわいくデザインしたアイコン。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-22.png)
Colors
直感的な操作が可能なカラーパレット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-23.png)
Menu Interaction
ピンチアウトで真ん中からぱかっと開くインタラクション。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-24.png)
Subscribe
こんな美しいデザインだったらすぐに購読してしまいそう。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-25.png)
Our Team
レッドを巧みに使い、視線をコントロールします。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-26.png)
Popover Sign In
パネルが重なってるのはなんでだろう、気になる。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-27.png)
ページをリアルにめくるiPadアプリ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-28.png)
Comments
必要な情報を美しくデザインしたコメント。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-29.png)
Sign Up Interface
アイコンを効果的に使ったサインアップのUI。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-30.png)
F Top Right Header Ui
細部までしっかりデザインされたヘッダ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-31.png)
Admin UI Control Panel
管理画面のUI、クローズがめくれてデザインされてるのいいですね
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-32.png)
Dropdown Rebound
フロスト風デザインのドロップダウン。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-33.png)
Category Icons
ビビットな色使いがかわいいカテゴリのアイコン。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-34.png)
Encide Jobs
求人サイトのインターフェイス。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-35.png)
Simple Todo App
シンプルなデザインのTODOアプリ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-36.png)
Hotels Search & Booking Portal
背景に写真を大胆に使ったホテルの検索ページ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-37.png)
Portfolio
シンプルでかわいいアイコンを使ったポートフォリオ。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-38.png)
Pop up Menu
六角形を使ったポップアップメニュー。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-39.png)
Airbnb Search
何を検索するかメッセージを配置した検索ボックス。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-41.png)
Contacts
繊細なブラックの色使いがかっこいいです。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-43.png)
Khareedo
カテゴリごとに印象深いカラースキームを使っています。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-44.png)
Blog Design
ハイライトにブラーのエフェクトを使ってるのが面白いです。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-45.png)
Mini Price Table
シンプルなデザインの価格表。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-46.png)
Tiny UI Elements
ミニマリズムなUIエレメントのコレクション。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-47.png)
Dark Chart UI Kit
ダークなカラースキームを使ったチャートのエレメント。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-49.png)
Interface
蛍光色が目に鮮やかなダークのUIキット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-51.png)
UI Kit
ヴィンテージ風デザインがかっこいいUIキット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-52.png)
UI Kit
ゲームのようなデザインのUIキット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-66.png)
Untitled UI Kit
カラーにくすんだグリーンを使ったUIキット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-65.png)
Blui Design Kit
カラーに美しいブルーを使ったUIキット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-53.png)
UI Kit
ソフトなデザインのUIキット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-50.png)
White UI Kit
白が鮮やかに映えるUIキット。
![UIのキャプチャ](/wp-content/uploads-2012-2d/2012121201-48.gif)
Milky UI Kit
ミルキーなデザインのUIキット、検索が動きますよ。
sponsors