ウェブデザインのセンスを磨こう! 2013年洗練されたディテールのUIデザインのまとめ

2013年、チェックしておきたいUIデザインをdribbbleから紹介します。
高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。

2013年のデザインを振り返りつつ、来年はまたどんな素敵なデザインが生まれるのか楽しみですね。

サイトのキャプチャ

iPhone 6 Infity
iPhone 6発売前のコンセプトデザイン。発表される前のワクワク感はいいですよね。

サイトのキャプチャ

UI Kit Metro
Windows 8がリリースされ、一気にフラットなスタイルが加速しました。Metro UIは後にModern UIに名称変更。

サイトのキャプチャ

Green point
サークル状のエレメントとサークル状のアニメーションの組み合わせが素敵です。アニメーションgifで楽しめます。

サイトのキャプチャ

Geo Tagging
美しいカラーとホワイトスペースを巧く使ったUI、背景のマップも美しい。

サイトのキャプチャ

Slide Concept
紙をモチーフにしたインタラクションも数多くリリースされました。

サイトのキャプチャ

Student Guide
今年よく見かけたカラーの一つ、レッドをくすませたサーモン(#f38268)。

サイトのキャプチャ

COVERT INBOX
サイドバーにナビゲーションを固定配置し、次々にパネルをアニメーションでスライドさせます。

サイトのキャプチャ

Digital Menu
半透明のパネルを使ったフラットなスタイルの未来のUI、早く使ってみたい!

サイトのキャプチャ

Augmented Tourist
写真画像を活かすブラーな背景と美しいカラースキームがクールです。

サイトのキャプチャ

Profile
人物の写真画像を効果的に使うデザインも増えてきました。

サイトのキャプチャ

21 Degress
カードを使った美しいレイアウト。矩形を単に並べるダサいのも多くありますが、これは非常に上品です。

サイトのキャプチャ

Close landing page
ミニマルにデザインされたランディングページのレイアウト。

サイトのキャプチャ

UI Kit
落ち着いたパステルカラーを使ったUI Kit。無料版のボタンやフォームのエレメントをダウンロードできます。

サイトのキャプチャ

Music
階層を意味づけるホワイトスペースの使い方、フォントやボタンのサイズやカラーの使い方、美しい。

サイトのキャプチャ

Scavenger Hunt
エメラルドグリーンも今年多かったカラーの一つです。

サイトのキャプチャ

Travelling WIP
細部まで丁寧にデザインされたレイアウト、ブルーのベタ塗りに見えるとこはドットの世界地図になっています。

サイトのキャプチャ

UI Kit Music
音楽のポータルサイト用のUI Kit。ブラーな背景と半透明のパネルが美しいですね。

サイトのキャプチャ

PassPic
写真共有アプリのコンセプトデザイン。リンク先ではさまざまなインタラクションがアニメーションで楽しめます。

サイトのキャプチャ

Profile Sreen
サークル状のエレメントを随所に使ったかわいいレイアウト。

サイトのキャプチャ

Dining time
食事やおやつの時間を知らせるUI、時計とスライドするメニューの動きがかわいいです。

サイトのキャプチャ

Cloud Storage
3Dにデザインされた円グラフや折れ線グラフを使ったクラウド用のUI。

サイトのキャプチャ

Radio Experiments 2
ソリッドなラインと半透明のパネルを使った美しいレイアウト。

サイトのキャプチャ

Chat App
サークルのエレメントを使ったミニマルなチャットアプリ。

サイトのキャプチャ

Recipe widget
料理画像と料理名、アイテム4つをセンス良く美しくデザインしています。

サイトのキャプチャ

Blog/'Magazine UI Kit 2
カードを使ったブログのレイアウト。PSDファイルもダウンロードできます。

サイトのキャプチャ

Trns Widget
シンプルながら緻密に計算されたレイアウト、ブルーもきれいですね。

サイトのキャプチャ

Highlights
そのカラーも目立ちますが、斜めのカットがエレメントに躍動感を与えています。

サイトのキャプチャ

Weather Dashboard Global Outlook 5
ダッシュボードのお天気表示、タッチしやすいように大きくデザインされています。

サイトのキャプチャ

Bureau Oberhaeuser Homepage Redesign
カードを使ったレイアウトで、空白とオーバーレイを効果的に使っています。

サイトのキャプチャ

Pricing Table
単調になりがちなフラットなスタイルに、右下に折り目をちょっとだけつけてるのがいいですね。

サイトのキャプチャ

Menu Concept iOS
最後は、これからじわじわ増えてきそうな多角形のエレメントを使ったナビゲーション。

top of page

©2017 coliss