2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ
Post on:2013年1月29日
フラット、サークル、ブラー、ビッグ、ダークなど、2013年のウェブデザインのトレンドを探るかっこいいUIデザインをインスピレーションの宝庫Dribbbleから紹介します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-01.png)
OLD > New
ヘッダデザインの古いタイプはグラデとシャドウ、新しいタイプはフラットとアクティブのハイライト、この流れは確かに感じますね。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-02.png)
Navigation
これも最近多く見かけるダークなカラースキームを使ったナビゲーション。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-20.png)
Slide Concept
スライド時にくしゃっとなるエフェクトのコンセプト。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-25.png)
New Blog
ミニマル、ホワイトスペース、タイポグラフィ、ただただ美麗しい。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-03.png)
Flat Web Elements
フラットな形状にアイコンを配したエレメント。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-04.png)
New Site is coming Along
シャドウやグラデは使用せず、フラットなデザインにかわいいアイコンが素敵。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-05.png)
Clean User Interface
繊細なシャドウをいかしたクリーンなインターフェイスデザイン。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-06.png)
Sign UP iOS Screen
iOS用のサインアップ、左右のシャドウが紙の質感をリアルに表現しています。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-07.png)
UI elements for web site
グラフの背景の地図の使い方、カラースキーム、OS X風のパネルなどかっこいいですね。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-08.png)
P-Ops Case Study
オレンジの2カラムのテキストレイアウトに注目です、全ページもあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-09.png)
Discover
上品なカラースキームを使用したナビゲーション、拡大版もあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-10.png)
Tastebuds 2013 Nav Bar
Tastebudsの2013年のナビゲーション、フラット・アイコン・ダークがポイントですね。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-11.png)
Pふroduct Teaser
プロダクトのティザーサイトのレイアウト、アイコンの使い方が特徴的です。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-12.png)
Want
「欲しい!」と思った商品がシェアできるUIです。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-13.png)
Musix App Albums
ミュージックアプリのアルバム表示、全表示もあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-14.png)
Cv Profile
ポートフォリオを3Dを使ったレイアウトで。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-15.png)
Pineapple UI design
Modern UIを3Dにしたような「Pineapple」と名付けたUIデザイン、全表示もあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-16.png)
Trendign
フラットでミニマルなレイアウトに鮮やかなカラーのパネルがふわりと浮いています。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-17.png)
Dropdown
ダーク系のカラーを使ったドロップダウンで、十分な余白を確保しています。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-18.png)
WIP Website
サークル状の美しいエレメントを使ったレイアウト。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-19.png)
Login Form
分かりやすいアイコンを使い、シンプルながら作り込まれたフォーム。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-21.png)
CottagePages.com website design
ぼかしたブラーな背景にフラットなエレメントをのせたミニマルなレイアウト。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-22.png)
Dashboard WIP
ダーク系ブルーのカラーに見事なタイポグラフィ!
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-23.png)
PSD Remind Me More
ブラーな背景に透明度の異なるパネルとフラットなパネルをのせています。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-24.png)
Aldo Shoes App Concept
一度見たら忘れないような斜めのグリッドが面白いです。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-26.png)
Blackwire
スマフォアプリとソーシャル向け情報を提供するフィナンシャル系サイトのレイアウト。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-27.png)
Eamil App Design
こんなUIのメールアプリはいかが? フルサイズもあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-28.png)
UI Kit Metro
Modern UIスタイルを取り入れたレイアウト、拡大版もあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-29.png)
Dashboard Widget Light
フラットなリストで、ハイライトに左だけ浮かんでいるのがかっこいいですね。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-30.png)
Receipt PSD
30分ほどで作った紙のテクスチャを使ったスタディ用のUI。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-31.png)
New iPhone / IOS App design / UI interface
絶妙なダーク系カラーの使い分けに注目です。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-32.png)
Menu
3Dのレトロ風デザインがかわいいメニュー。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-33.png)
Dropdown
シンプルでクリーンなデザインのドロップダウン。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-34.png)
Menu
レトロ風のカラーが素敵なメニュー、ブルー版もあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-35.png)
Weather Pop-up
ぼやけたブラーな背景に半透明のパネル、クリアなタイポグラフィ。
![サイトのキャプチャ](/wp-content/uploads-201301/2013013001-36.png)
Squirrel Grid
最後は、リス用のグリッド!
sponsors