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

Browse By

Category Archives: UI Design

[UI Design] Apple Watch GUI for Sketch – Sketch用のApple Watch GUIテンプレート

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

Sketch用のApple Watch GUIテンプレート。全てベクターデータで作られているようで、ファイルサイズも軽いです。サイト内にはUIテンプレートの例が掲載されてますが、いやぁ美しいですな。早く触りたいですな。200万オーバーの試着列に並んでみたいもんですな。「貧乏人お断り」とか書いてあるんでしょうか。並んでみてぇなぁ・・・。わたくしこの前思いつきでダイソンの扇風機買ってしまいまして、もしかしたらApple Watch初日に買えないかもしれません( ´・ω・)

[UI Design] MaterialUp – マテリアルデザイン作例のギャラリーサイト

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

Googleが提唱するマテリアルデザインの手法に沿ったデザイン作例を、日ごとに紹介するデザインギャラリー。Web作例も少しありますが、ほとんどがMobile AppのUI作例、もしくはコンセプトの画像です。自分はAndroid使ってないのでマテリアルデザインの定義みたいなものはよく分かりませんが、早い話が「そこにある物のように振る舞う」という事ですよね? Androidアプリをデザインする際のネタ帳として使えそうです。

[UI Design] Awesome UI – クールなUIのデザインギャラリー

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

クールなUIデザイン作例のギャラリーサイト。Web、MobileAppなどのUI作例がTumblrを使って紹介されています。UIそのもの以外に、作例の見せ方としても参考になるものが多いです。ただiOS前提のUIデザインにハンバーガーメニューがあるのって、なんか違和感あるんだよなぁ・・・。あれはAndroidの文化であってiOSには必要ないでしょ?とか思っちゃう。

[UI Design] AppreciateUI – クールなモバイルUIのデザインギャラリー

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

クールなモバイルUIのデザインギャラリーサイト。この手のサイトでは一般的な、場面ごとに分けて閲覧する事ができるタイプです。ただこのサイト場面の分け方がスゴく細かいので、求めてる場面の作例をわりと具体的に探す事ができそうです。UIデザインのネタ帳としてイイ感じです。

[UI Design] User Flow Patterns – よく出来たユーザーフローを動画で紹介するデザインギャラリー

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

Mobile App内において、よく出来たユーザーフローを動画で紹介するデザインギャラリー。ユーザーがアプリを使って、何かしらのゴールに至るまでのプロセスを考える際の参考になりそうです。各アプリはジャンルごとにカテゴリ分けされており、見た感じユーザーが最初にアプリを使いはじめる際のチュートリアルものが多い印象。動きも含めた確認って、普通アプリをインストールしないと見れないんですが、ここなら動画で紹介してくれるので便利です。

[Sketch] An index of the most useful resources for Sketch – Sketchに関するリソースのまとめサイト

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

Sketchに関する様々なリソースのまとめサイト。多くはGithubにリンクされており、プラグインやチュートリアル、Tipsなどが紹介されています。「PhotoshopユーザーがどうやってSketchに移行するか」なんて記事もあったりします。Adobe系ソフトに比べるとSketchのリソースはまだまだ少ないですが、最近急激にこの手のサイト増えてきましたね。自分もUI系のデザインはこっちに移行しようと思ってます。

[UI Design] Material Palette – マテリアルデザインに対応したカラーパレットツール

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

Googleの新しいデザインルールであるマテリアルデザインに準拠した、カラーパレット生成ツール。表示される各色の中から2色を選ぶと画面右側にプレビュー画面が出るので、それを見ながら配色を選ぶという仕組み。チョイスした色は画面右下の「Your Palette」エリア内に残るので、そこをクリックするとHEX指定で色の値をクリップボードにコピーできます。Androidアプリ作る際の配色決めに使えそうです。GoogleアプリのiOS版にもこのデザインルールは部分的に導入されつつあるので、Android AppっぽいUIのiOS Appを作る際にも使えそう。個人的にはiOSの文化にAndroidのルールを持ち込むのってあんまし好きじゃないですが。ハンバーガーメニューとかiOSユーザーには「???」ですしね実際。

[UI Design] Designers guide to DPI – デザイナーのためのDPI入門

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

4Kなどの高解像度ディスプレイ向けにコンテンツを作る際に役立つ、DPIに関する入門的な知識をまとめた記事。DPI(Dots Per Inch)とPPI(Pixels Per Inch)の違いとは何か、同じピクセル数でPPIが違うとどう見えるのか、ディスプレイ解像度についてと、4Kディスプレイとは何か、Retinaディスプレイとは何か、各種iOSデバイスのPPIについて、AndroidデバイスのPPIについて(9-patchに関する記述もあります)、MacやChrome OSのPPI、そして最後に高解像度環境向けのコンテンツ制作に必要なデザインアプリケーションについて述べられてます。英語リソースで、かつなかなかの長文なので読むだけでも大変ですが、DPIに関する基礎知識が1ページにまとまっているので、勉強するには最適のリソースかと。今まで1pixel 1dotでデザインしてきたデザイナーにとっては(まぁ俺なんですが)、結構難しいんですよねこの手の話。けどまぁ今後必要とされる知識だと思うので、計算機片手に勉強するのもイイんじゃないかと。