ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ
Post on:2014年12月17日
sponsors
2014年、チェックしておきたいUIデザインをdribbbleから紹介します。
高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。
2014年を振り返りつつ、来年はどんな素敵なデザインが生まれるのか楽しみですね。
まずはUIの動きも楽しめるシリーズ。リンク先ではGIFアニメーションで動いています。
お天気アプリのコンセプトで、一日の天気をアコーディオン型のパネルで楽しく見せます。
軽快なアニメーションでコンテンツを傾け、ナビゲーションを表示します。
ブログアプリのコンセプト、各記事やパネル全体にパースをかけ気持ちいいアニメーションで閲覧できます。
スマホでの指の動きに合わせたアニメーションでコンテンツがスライドします。確かに指はまっすぐより、ちょっと斜めに滑べらせて動かしますね。
2014年はパースペクティブも流行りました。さらにアニメーションを加えたコンセプトの素晴らしい見せ方です。
目を惹くグラフィック、かっこいいアニメーションを備えたポートフォリオサイト。コンセプトの詳しい説明も→The True Illusion。
顧客サービス用のダッシュボードのUI。コンセプトの詳しい説明も→Customer Care UI/UX。
Training Application Marketing
ヘッダの区切りの斜めのラインは、エレメントや写真などにも利用されています。
美しいグラデーションの半透明のパネルを使った旅コンテンツのコンセプトデザイン。
上記の最初のコンセプト。こちらの方が好みという人もいそう。
Landing Page for Travel Agency
これも旅をテーマにしたランディングページのデザイン。たっぷりの余白にパネルの重ね方がかっこいいです。
スタートアップ用のランディングページのデザイン。ホワイト・ブルー・ブラックと定番カラーがセンスよく使われています。
繊細なカラーとソリッドなラインが絶妙なコンビネーションを生み出しています。
ヒップスターを取り入れ、木目やグランジなどさまざまなテクスチャを巧く使ったフラットながら味のあるデザイン。
カード状のパネルに配置されたソーシャルメディアのアイテムがデザインの邪魔をせず、いい感じです。
アップルストアのリデザインコンセプト。スマホやタブレットにも最適化されています。
OS Xのリデザインコンセプト。角丸を適度に取り入れソフトな感じに仕上がっています。
くすんだパステルを使ったカラースキームやぎざぎざのラインがかわいいデザインです。
夏をイメージしたUIキット。サークルの使い方が非常に面白いです。
通常時は鍵がぶら下がって表示されているだけですが、スマホを傾かせると鍵も傾きます。
グラデがかかった半透明のパネルがとっても素敵。
清潔感のあるクリーンなレイアウト、デザインを壊さないソーシャルメディアの使い方がかっこいいです。
Material Designを取り入れたニュース一覧。波紋のエフェクトから詳細記事へ切り替わるアイデアが面白いです。
縦長ページのコマース用のレイアウト。水平方向のスライダーが違和感なくデザインされています。
ミニマルな配色、ホワイトスペース、タイポグラフィ、これはかっこいい。
Yalantis.com — Redesign & Interactions
スクロールにすると要素が次々に表示される縦長ページで、こういうエフェクトだと気持ちいいですね。
ブルー、グレー、ブラック、ホワイトを使った美しいレイアウトはコーポレイトサイトにも応用が効きそう。
アイコンやアローの使い方が分かりやすいだけでなく、非常にかっこいいです。
ブルー・グリーン・グレーのカラーも好きですが、一見フラットながらかわいいシャドウが付いているのもいいですね。
シェアボタンをタップすると各シェアサービスが表示するアニメーション。
プロダクトを俯瞰した状態で配置したレイアウト、アイデアが面白いだけでなく、シンプルで非常に美しくデザインされています。
各パネルの背景の写真とコンテンツの見せ方が美しいです。シャドウも単にシャドウではなくブラーがいいですね。
カード型のレイアウトに角丸やサークルを使い、かわいく仕上げたデザイン。
写真や動画、テキストなど貼り付けるのが楽しくなるピンボードコンテンツ。
iPad Magazine Table of Contents
美しいスライドのエフェクトで次々にコンテンツを表示するマガジンスタイルのレイアウト。
写真好きのコミュニティで、タイムラインベースに写真を見せるのがうまい。
たっぷりのホワイトスペースにカラフルなタグラインがとてもかわいいデザイン。
カラフルなバブルを浮かび上がらせ、次々にフルーツを形作ります。
Ui Phone Listing Layout Design
右肩の写真の使い方がかっこいいです。
Handsome Navigation Animations
メガナビゲーションの新しいタイプ。オンにするとコンテンツがズームし、スライドなど多彩なエフェクトが使い勝手を向上させています。
Android Wear - Clock App [GIF]
最後はウェアラブルデバイス。
時計のアプリで、時間がくるとスケジュールをかっこいいアニメーションで表示します。
sponsors
