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

Browse By

Category Archives: UI Design

[UI Design] 50 Useful UI Design Free PSD Files – UIパーツ作例のPSDまとめ

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

UIデザイン作例のPSDをまとめた記事。50の作例が紹介されています。最近流行りのフラットデザインのものからスキューモーフィックなデザインまで色々あります。またアイコン、ボタン、リボン装飾、ハードウェアのモックアップ、テーブル装飾など、MobileAppのUIデザインだけでなくWebデザインに関する素材もチラホラあります。UIのレイアウトに関する物よりはパーツ装飾に関する作例が多いです。デザイン作業のネタ調にナイスです。

[UI Design] The best free iOS 7 resources on Dribbble – iOS 7向けUIデザインのリソースまとめ

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

iOS 7向けUIデザインのためのリソースをまとめた記事。ソースはDribbbleから。アイコン、Appモックアップ、ユーザーインターフェースの3つのカテゴリに分けて紹介されています。iOS 7はフラットデザインとは言われてるけど、実際どう新しいOS純正のUIのに合わせて行けばいいのか、そのへんの参考になる作例がいっぱいあります。まぁAppによっては以前からフラットデザインだったものも結構ありますしね(Google系とかPocketとかFlipboardとか)。UIデザインの参考に。

[UI Design] The iOS Design Cheat Sheet – iOS 7におけるUIデザインのチートシート

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

iOS 7におけるデザイン制作に役立つチートシート。まずは各種iPhoneのハードウェア詳細について。ディスプレイのサイズや解像度、色傾向の寒暖、アイコンのサイズについて紹介されてます。次にiOS 6以前と比べてアイコンのシェイプがどう変わるかについて。角丸のRがちょっと大きくなってるんスよねこれ。最後にステータスバーやタブバーなどのUIパーツのサイズについて解説されてます。7になってどこがどう変わるのか、デザイナーはどの点に注意してUI制作をすべきなのかについてひと通り学べる感じです。わたくし最初iOS 7見た時は「ううーん」って思いましたが、Beta触ってみたらわりとこれアリだな、とか思うようになりました。まぁAppによってはアイコンださかったりするんですが、そのあたりは些細な事かなと。

[Icon Design] iOS 7 App Icon Template – iOS 7用のアイコンテンプレート

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

iOS 7用のアイコンテンプレート。いつもお世話になってるPixelResortが配布してます。デザインする際に便利なグリッドが入っているあたりiOS 7用って感じがします。この手のテンプレートPSDは他にもあるけど、PixelResortのものはアイコン本体がスマートオブジェクト化されていて、かつホーム画面やAppStoreに並んだ時のスクリーンショット用のものも付属している点が便利。自分アイコン作る時いつもここのテンプレート使ってます。ナイスです。

[UI Design] 36 High-Quality Flat Design Resources – フラットデザインのためのリソースまとめ

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

フラットデザインのためのリソースがまとめられた記事。アイコンやテクスチャなどの素材、PSDテンプレートなどが紹介されてます。まぁほとんどがPSDテンプレートですね。フラットUIと一言で言っても実際のあしらいについては様々な手法があるため、多くのデザイナーの作例がまとめて見れるのは便利ですね。そういやPSDリソースは多く見るけどAIリソースってあんまし見かけないなぁとか思いました。

[Cheat Sheet] iOS and Android Design Guidelines Cheat Sheet – iOSとAndroidのガイドラインまとめ

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

iOSとAndroidの各種インターフェースに関するガイドラインをまとめたチートシート。ここに書いてある内容はどれも純正のガイドラインに載っている類の事ではあるんだけど、iOSとAndroidそれぞれを並べて紹介している点に意味があるかと。例えばiOSでは「ナビゲーションバー」って呼ばれるものがAndroidでは「メインアクションバー」って呼ばれる等、それぞれのプラットフォームの習慣やマナーについて比較する事ができます。自分の場合Appleの犬なので仕事じゃなければAndroidなんて使う気が全く起きないんですが、そのせいもあってAndroidの事何も知らないんです。なのでこういうまとめ方はスゴく仕事に役立ちます。ナイスです。けどそろそろAndroid端末1台くらい持っておくか・・・的な感じになってきたので、HTC oneが塩漬けプランで買えるようになったら確保しとこうかなぁ、みたいなアレではあります。まぁ言うてもどうせ使わないんだろうけど。

[Hardware] Viewport Sizes – 各種モバイル端末のハードウェアスペックを網羅したサイト

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

様々なモバイル端末のハードウェアスペックを検索できるサイト。ズラーっと並んでますが、画面上部の「Filter」エリアにタイプする事で抽出ができます。iPadなども掲載されているのでモバイルフォンだけでなくタブレットも対応内のようです。掲載されている情報はプラットフォーム、出荷時のOSのバージョン、縦と横のディスプレイドット数、発売日の5つ。端末のハードウェア情報としてはミニマムではあるけど、OSのバージョンとディスプレイ解像度だけでもこれだけ簡単に検索できれば便利っすね。MobileApp作る時などに重宝しそうです。

[UI Design] iOS 7 Wireframe Kit – iOS 7のワイヤーフレームキットAI

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

iOS 7のワイヤーフレームキットが配布されてます。PSDではなくAIなので、Illustratorを使ってワイヤーフレーム作る人向け。自分もワイヤーフレーム段階ではIllustrator使う事が多くて、それをデザインに落としこむフェイズになってPhotoshopに切り替えたりします。実際にダウンロードしてみたけど、モノクロでシンプルに作られたUIパーツ類は使い勝手が良さそうです。デザイナーだけでなくディレクターの人にもオススメ。