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

Browse By

Category Archives: UI Design

[Freebie] iOS7 GUI PSD (iPhone) – iOS 7のPSDモックアップ

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

iOS 7とiPhone 5s、5cのPSDモックアップをTeehan+Laxが配布してます。iPhoneとかiOSのモックアップっていくつかのサイトで配布してるけど、質と場面の多さから俺はいつもここのを使ってます。ハードウェアとしてはiPhone 5sのスペースグレイとゴールド、iPhone 5cのブルーの3機種分があり、ソフトウェア面では各種UIパーツから純正マップ画面、キーボードUIなどだいたいのUIパーツが揃ってます。iPhone AppのiOS7対応もありますしね、ありがたく使わせて頂きます。

[Freebie] Free Flat UI Kits – フラットデザイン向けのUIモックアップ

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

フラットデザイン向けのUIモックアップをまとめた記事。ボタンやフォームといった各種UIパーツ類がPSDなどのフォーマットで配布されています(ものによってはベクターデータのものもあるような気がします)。フラットデザインの際のネタ調としても使えそうです。フラット言うても微妙に手法の違いってありますもんね。

[UI Design] iOS 7 UI Stencil for Omnigraffle – iOS 7を対象としたオムニグラフ用のデザイン素材

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

iOS 7を対象としたWebやMobileAppデザインの、オムニグラフ用ステンシル素材。オムニグラフって以前は廉価版がMacにバンドルされてたけど、そういやいつの間にかなくなってますね。自分以前はよくこれでWebのワイヤーフレームとか描いてたんですが、最近はイラレでやるようになりました。けどコレ系の便利な素材も結構あるし、またオムニに戻ろうかなーとも思っちょります。ちなみにステンシル素材のプレビューはこちらから。本物そっくりに丁寧に作ってあるので、プロトタイプ作る際に使えそうです。

[UI Design] Sloopy UI – なんかこれダメじゃね?というUI作例をまとめたブログ

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

なんかダメというか微妙というかヤボいというか、そんなUI作例を集めたTumblrブログ。わたくし“Sloopy”という単語を知りませんでしたので調べてみて初めて知ったんですが、“だらしない”とかソレ系の意味らしいですね。んでこのブログ内で紹介されてるのは今んとこ全てiOS 7の新UIに関するものばかり。実際細かい所まで見ていくとツッコみどころが結構多いなぁという印象。MMSの発言アニメーションは俺もちょうど昨日「これ微妙だよな」とか思ってました。やや揚げ足取りな印象もありますが、「We’re not haters」という事なので「直した方がもっとクールなのに」という立場なんでしょうかね。わたくしiOS 7の新UIは概ね受け入れてるというか、そもそも以前のスキューモーフィックなデザインってあんまし好きじゃなかったような気がしてます。それにもう慣れたしね。

[Framework] ChocolateChip-UI – iOS 7のルック・アンド・フィールに早速対応したモバイル端末向けCSSフレームワーク

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

iOS 7のフラットUIに早速対応した、モバイルデバイス向けのCSSフレームワーク。iOSだけでなく、AndroidのJelly BeanやWindows Phone 8にも対応しています。それぞれの純正UIに沿ったルック・アンド・フィールに個別に対応するというアプローチのフレームワークのようです。ファイル一式ダウンロードしましたが、それぞれの環境に個別のHTMLで対応するという手法でした。WebサイトにおいてもOS純正のUIを再現できれば、App内のWebViewによる遷移がある場合でも違和感なく作れそうです。Try on you Mobile Deviceから動作デモを見る事もできます。

[UI Design] iOS7 Before and After Pics – iOS 7、ビフォーアフター

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

いやーアレですな、いよいよ今晩ですな、iOS 7。けどまぁ日本時間だと深夜2時のようなので、まぁ明日会社来てからブチ込もうかと思っちょります。んでこのサイト、iOS 7にする前と後で、各Appがどのように変わるのかをビフォーアフター形式で紹介してます。アフターを掲載する時点で、ここで紹介されているAppはiOS 7に対応しているって前提であるとも言えますね。正直わたくしこの変化好きでございます。一部アイコンがダサくなったりアレゲな部分も少しありますが、基本的にわたくし“よく訓練されたAppleの犬”でございますゆえ、股を開いて受け入れる体制バッチリなアレでございます。今のあいぽん5、もう1年経つからクリーンインストールするにもちょうどイイ時期だしね。そんなわけでAppleの犬のみなさん、今晩を楽しみに待ちましょう。

[UI Design] Made for iOS 7 – iOS 7対応済みのアプリギャラリー

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

いよいよ明日からDL開始となるiOS 7ですが(日本時間だと深夜開始になんのかな?)、あの新しいフラットUIってAppごとに個別に対応が必要っぽいんですよね。このTumblrブログではすでに対応済みのアプリのUIがギャラリー形式で紹介されています。これからiOS 7のフラットUIに対応しようという場合の参考になりそうです。アイコン作例も掲載されているのがナイス。アプリ作る側も色々大変ですな・・・。

[UI Design] OS X Ivericks Concept – Mac OS X Mavericks‎を題材にしたデザインコンセプト

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

もうちょいで登場するであろうMavericksを題材にしたデザインコンセプト。個人のデザイナーのコンセプトなのでもちろん製品はこんなインターフェースではありませんが、俺こっちの方が好きかも・・・と思いました。iOS 7のフラットUIから多くの意匠を引き継いで、フラットでミニマルな印象にしたという感じです。まぁ言ってみりゃiOS 7そのまんまではありますが、Appleがこの両OSを異なる見た目のまま展開させようとしてる姿勢は、非タッチデバイスであるMacとタッチデバイスであるiOS機器とを全く別のものとして意識しているという印象を受けます。なんでもタッチデバイスにしようとするMicrosoftとは異なるアプローチですな。あー早くMavericks使いたい。