Webデザインのセンスを磨く!2014年上半期洗練されたディテールのUIデザインのまとめ

2014年上半期、チェックしておきたいUIデザインをDribbbleから紹介します。
各アートワークは大きいサイズの画像やPSDをダウンロードできるので、気になったものはリンク先をチェックしてみてください。

アートワークにはアニメーションgifも多いのですが、ページサイズが大変なことになるため最初の一つだけです、アニメーションはリンク先で。

サイトのキャプチャ

Pull to Refresh

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

サイトのキャプチャ

3D Interactive Gestures GIF

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

サイトのキャプチャ

Secondary Actions Menu

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

サイトのキャプチャ

Reservation Table

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

サイトのキャプチャ

Bouncy Sidebar

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

サイトのキャプチャ

Fit UI

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

サイトのキャプチャ

Social Feeds

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

サイトのキャプチャ

Apple OSX Montauk

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

サイトのキャプチャ

Warehouse

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

サイトのキャプチャ

Web Elements

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

サイトのキャプチャ

Photo & Video Page

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

サイトのキャプチャ

Flight Search

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

サイトのキャプチャ

Sports UI

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

サイトのキャプチャ

UI Kit

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

サイトのキャプチャ

Glamour One Page Website

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

サイトのキャプチャ

Loudfund Concept

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

サイトのキャプチャ

Collago app

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

サイトのキャプチャ

Augmented Tourist

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

サイトのキャプチャ

Digital Menu

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

サイトのキャプチャ

Holiday Selector

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

サイトのキャプチャ

Android L Gmail User Interface

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

サイトのキャプチャ

Navi Concept

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

サイトのキャプチャ

Timer for iOS 7

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

サイトのキャプチャ

App Media Mockup

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

サイトのキャプチャ

Tropical Cyclone Trends

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

サイトのキャプチャ

goReact

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

サイトのキャプチャ

Web Concept

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

サイトのキャプチャ

A Splash OF Color

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

サイトのキャプチャ

iPad Magazine Table of Contents

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

サイトのキャプチャ

Portfolio V2

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

サイトのキャプチャ

Bizillion App

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

サイトのキャプチャ

Stats screen of a online football

サッカーの試合の状況を表示するコンセプトデザイン。

サイトのキャプチャ

telemarketing365 Landing Page design

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

サイトのキャプチャ

Insight Page Design

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

サイトのキャプチャ

Happy2Help Live

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

サイトのキャプチャ

Footprints Final User Interface

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

サイトのキャプチャ

Orange Landing Page

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

サイトのキャプチャ

Grace Wilsey Foundation

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

サイトのキャプチャ

SocialCeentiv Landing Page

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

サイトのキャプチャ

Prepping for launch

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

サイトのキャプチャ

Warframe Main Menu Progress

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

サイトのキャプチャ

Shop by Category

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

サイトのキャプチャ

Mobile Landing Page Preview

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

サイトのキャプチャ

Pastel Projects

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

サイトのキャプチャ

Explore Orm

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

サイトのキャプチャ

Homepage

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

サイトのキャプチャ

Web Design

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

サイトのキャプチャ

Medium Homepage Exploration

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

サイトのキャプチャ

Chronos Pinboard

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

サイトのキャプチャ

Wayfaring App

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

サイトのキャプチャ

Apple Store redesign LIVE

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

sponsors

top of page

©2018 coliss