Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Category Archives: UI Design

[UI Design] PortKit: UX Metaphor Equivalents for iOS & Android – iOSとAndroidとのUIパーツを比較し、それぞれのPSDツールへのリンクを掲載した記事

  • Pocket
  • このエントリーをはてなブックマークに追加

iOSとAndroidの各種UIをパーツごとに見比べて、それぞれのUIデザインに役立つPSDキットへのリンクを掲載した記事。iOSのPSDキットへのリンクは、昨日紹介したTeehanlax PSDです。iOSのバージョンは6系と7系それぞれ紹介されているので、合計3プラットフォームでの比較がされています。この3つが並ぶとなかなか興味深いです。iOS 7がAndroidに似てると言われる理由というか根拠というか、そういうのが良く分かります。俺みたいなAppleの犬から見ても実際似てると思うもんなー。黒系がライトグレーになって明るい印象ではあるけど、意匠そのものが似てるんだよね。まぁ良い部分の模倣は良い事だとは思うけど。あ、けどiOS 7でダイアログかっこ良くなってますね。前のテカテカのやつ個人的にはあんまし好きじゃなかったのです。

[UI Design] iOS7 GUI PSD – iOS7のインターフェースPSD

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 7のUIをPSDにしたデザインキットがもう配布されてます。配布元はTeehanlax。俺もいつもここのPSD使ってます。いやしかし仕事早いっすね。まだBeta1という事でパーツの種類こそあんまし多くないけど、今後増えて行くんでしょう。iPhone Appをデザインする現場にも、今回のフラットUI化は大きく影響しそうですな。ぼちぼち準備しないといけませんな。

[UI Design] iOS Music Concept – iOSのミュージックアプリのコンセプトデザイン(Not Official)

  • Pocket
  • このエントリーをはてなブックマークに追加

多分来週発表されるiOS 7ではガラっとUIが変わると噂されてますが、その中のMusicアプリのコンセプトデザインを作った人の記事。いわゆる「作ってみた」系のものなのでAppleオフィシャルのアレではありません。MusicアプリのUI変化の変遷を紹介し、そこで問題提起をします。次にFlatデザインを取り入れたコンセプトをワイヤーフレームで紹介し、プロトタイプ制作、テストという工程を経てリニューアルデザインを紹介してます。これね、デザイナーの人なら途中のプロセスで楽しめます。実際にリデザインした案の紹介を読むと、これがまたよくできてる。最後に新しくなった事を伝えるAppアイコンを紹介して終了。よくできてると思います。来週の発表でこの作例以上にハァハァできるといいんですが、さてどうなんでしょうね。

[UI Design] SketchMine – UIデザイン過程のスケッチをまとめたギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

デザインコミュニティから、UIデザインの過程におけるスケッチをまとめたサイト。スケッチというだけあって荒削りだったりザックリしてたりするけど、なんかこう他のデザイナーの仕事のプロセスが見れるという意味で興味深いです。MobileAppやWeb、イラストなどの作例が紹介されてます。プロトタイピングのネタ帳(っていうのも変な表現だけど)みたいな感じでしょうか。

[UI Design] SIX UX – クールなUIデザイン作例を動きで紹介するデザインギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

クールにデザインされた動きのあるモバイルアプリやWebサイトを動画で撮影したデザインギャラリー。オモしろいのは動画の撮影とアップロードをVineでしてるという点。カメラで撮影しているので画質はそれほど良くないけど、なんかこういうの新しいなーって思いました。動きも含めてUIデザインと考えると、なかなか興味深いというか資料的価値のあるギャラリーサイトなんじゃないでしょうか。

[UI Design] 25 Trendy Free Flat UI Kits for User Interface Designers – フリーのフラットUIデザインキット

  • Pocket
  • このエントリーをはてなブックマークに追加

フリーで配布されているフラット系のUIキット。全部確認したわけじゃないですが、だいたいPSDで配布されているようです。WebやMobileAppで使い勝手の良さそうなUIパーツが素材としてダウンロードできます。タイトルに「トレンディー」と付いてるあたりがアレゲな感じではありますが、まぁ実際流行ってますしね。一口にフラットUIとは言っても、この記事見てるといろんな手法があるなぁと思います。デザインのネタ探しにも良いかもしれません。

[UI Design] Guifff – クールなUIやアイコンなどのデザインパーツを、アニメーションGifで紹介するギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

クールなUIデザインやアイコンなどのデザインパーツを、アニメーションGifを使って動きと一緒に紹介するデザインギャラリー。サイト内にアニメーションGifが直で置かれているため重いです。なかなかロードが終わりません。けどこれイイですね。トランジションもひとつのインターフェースというか、アプリ側からユーザーへのフィードバックだとも言えるのでUIデザインには欠かせない要素だと思います。作例クリックで元記事に行く事もできます。アプリ制作のネタ帳にナイスです。

[UI Design] 50 Beautiful Mobile UI Design with Amazing User Experience – 美しいUIデザインのモバイルApp

  • Pocket
  • このエントリーをはてなブックマークに追加

優れたユーザーエクスペリエンスを併せ持つ、美しいUIのMobile Appをまとめた記事。50の作例があるようで、なかなか見応えあります。紹介されているAppの質が高く、UIデザインの際の参考になりそう。こうして見てるとフラットUIって確かに流行ってんだなぁ・・・とか思います。実際クールなデザインが多いし。デザインがフラットに向かえば向かうほど、ボーダーとかトランジションなどの、テクスチャ&グラデーション以外のパーツがデザインの主役になってくるあたりが興味深いです。