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

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

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

サイトのキャプチャ

GIF for the Weather App

まずはUIの動きも楽しめるシリーズ。リンク先ではGIFアニメーションで動いています。
お天気アプリのコンセプトで、一日の天気をアコーディオン型のパネルで楽しく見せます。

サイトのキャプチャ

GIF Sticker App

軽快なアニメーションでコンテンツを傾け、ナビゲーションを表示します。

サイトのキャプチャ

GIF Blog App

ブログアプリのコンセプト、各記事やパネル全体にパースをかけ気持ちいいアニメーションで閲覧できます。

サイトのキャプチャ

GIF Exercise

スマホでの指の動きに合わせたアニメーションでコンテンツがスライドします。確かに指はまっすぐより、ちょっと斜めに滑べらせて動かしますね。

サイトのキャプチャ

GIF Animation Concept

2014年はパースペクティブも流行りました。さらにアニメーションを加えたコンセプトの素晴らしい見せ方です。

サイトのキャプチャ

The True Illusion website

目を惹くグラフィック、かっこいいアニメーションを備えたポートフォリオサイト。コンセプトの詳しい説明も→The True Illusion

サイトのキャプチャ

Team Message

顧客サービス用のダッシュボードのUI。コンセプトの詳しい説明も→Customer Care UI/UX

サイトのキャプチャ

Training Application Marketing

ヘッダの区切りの斜めのラインは、エレメントや写真などにも利用されています。

サイトのキャプチャ

Trip Organiser v2

美しいグラデーションの半透明のパネルを使った旅コンテンツのコンセプトデザイン。

サイトのキャプチャ

Trip Organiser

上記の最初のコンセプト。こちらの方が好みという人もいそう。

サイトのキャプチャ

Landing Page for Travel Agency

これも旅をテーマにしたランディングページのデザイン。たっぷりの余白にパネルの重ね方がかっこいいです。

サイトのキャプチャ

Startup Landing Page Design

スタートアップ用のランディングページのデザイン。ホワイト・ブルー・ブラックと定番カラーがセンスよく使われています。

サイトのキャプチャ

Sidebar

繊細なカラーとソリッドなラインが絶妙なコンビネーションを生み出しています。

サイトのキャプチャ

Wolf Mountain Brewery

ヒップスターを取り入れ、木目やグランジなどさまざまなテクスチャを巧く使ったフラットながら味のあるデザイン。

サイトのキャプチャ

Medium Homepage Exploration

カード状のパネルに配置されたソーシャルメディアのアイテムがデザインの邪魔をせず、いい感じです。

サイトのキャプチャ

Apple Store Redesign

アップルストアのリデザインコンセプト。スマホやタブレットにも最適化されています。

サイトのキャプチャ

Apple OSX Montauk

OS Xのリデザインコンセプト。角丸を適度に取り入れソフトな感じに仕上がっています。

サイトのキャプチャ

Warehouse

くすんだパステルを使ったカラースキームやぎざぎざのラインがかわいいデザインです。

サイトのキャプチャ

Summer UI Kit Free

夏をイメージしたUIキット。サークルの使い方が非常に面白いです。

サイトのキャプチャ

Gravity Test

通常時は鍵がぶら下がって表示されているだけですが、スマホを傾かせると鍵も傾きます。

サイトのキャプチャ

Photo Feed

グラデがかかった半透明のパネルがとっても素敵。

サイトのキャプチャ

Contractors.com Landing Page

清潔感のあるクリーンなレイアウト、デザインを壊さないソーシャルメディアの使い方がかっこいいです。

サイトのキャプチャ

Material Design News

Material Designを取り入れたニュース一覧。波紋のエフェクトから詳細記事へ切り替わるアイデアが面白いです。

サイトのキャプチャ

Ziel eCmmerce Theme WIP

縦長ページのコマース用のレイアウト。水平方向のスライダーが違和感なくデザインされています。

サイトのキャプチャ

BOSS Full

ミニマルな配色、ホワイトスペース、タイポグラフィ、これはかっこいい。

サイトのキャプチャ

Yalantis.com — Redesign & Interactions

スクロールにすると要素が次々に表示される縦長ページで、こういうエフェクトだと気持ちいいですね。

サイトのキャプチャ

Case Study Zapper

ブルー、グレー、ブラック、ホワイトを使った美しいレイアウトはコーポレイトサイトにも応用が効きそう。

サイトのキャプチャ

AppURL

アイコンやアローの使い方が分かりやすいだけでなく、非常にかっこいいです。

サイトのキャプチャ

Website Design Revamp

ブルー・グリーン・グレーのカラーも好きですが、一見フラットながらかわいいシャドウが付いているのもいいですね。

サイトのキャプチャ

Share Animation

シェアボタンをタップすると各シェアサービスが表示するアニメーション。

サイトのキャプチャ

uni Svam Ad

プロダクトを俯瞰した状態で配置したレイアウト、アイデアが面白いだけでなく、シンプルで非常に美しくデザインされています。

サイトのキャプチャ

Bino

各パネルの背景の写真とコンテンツの見せ方が美しいです。シャドウも単にシャドウではなくブラーがいいですね。

サイトのキャプチャ

Wayfaring App

カード型のレイアウトに角丸やサークルを使い、かわいく仕上げたデザイン。

サイトのキャプチャ

Chronos Pinboard

写真や動画、テキストなど貼り付けるのが楽しくなるピンボードコンテンツ。

サイトのキャプチャ

iPad Magazine Table of Contents

美しいスライドのエフェクトで次々にコンテンツを表示するマガジンスタイルのレイアウト。

サイトのキャプチャ

Photographer Community

写真好きのコミュニティで、タイムラインベースに写真を見せるのがうまい。

サイトのキャプチャ

Assembling a Tagline

たっぷりのホワイトスペースにカラフルなタグラインがとてもかわいいデザイン。

サイトのキャプチャ

Fruit Animation

カラフルなバブルを浮かび上がらせ、次々にフルーツを形作ります。

サイトのキャプチャ

Ui Phone Listing Layout Design

右肩の写真の使い方がかっこいいです。

サイトのキャプチャ

Handsome Navigation Animations

メガナビゲーションの新しいタイプ。オンにするとコンテンツがズームし、スライドなど多彩なエフェクトが使い勝手を向上させています。

サイトのキャプチャ

Android Wear - Clock App [GIF]

最後はウェアラブルデバイス。
時計のアプリで、時間がくるとスケジュールをかっこいいアニメーションで表示します。

sponsors

top of page

©2018 coliss