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

Browse By

Tag Archives: UIDesign

[Freebie] Sketch – Element UI Kit – iPhone XのSketch用UIテンプレート

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

iPhone XのUIデザインに便利なUIテンプレートを、Sketch Teamが配布してます。ダウンロードすると様々な場面を想定した画面テンプレートが用意されていて、全画面でiPhone Xの切り欠きや角丸の部分にマスクがされいるので、AppのiPhone X対応を行う時なんかに使えそうです。またPages内、App以外にSymbolsというのも用意されており、ここではiOSのデフォルトUIパーツに加え、独自のアイコンやシェイプ、ナビゲーションパーツが用意されています。SketchベースでUIデザイン起こす時にイイですねこれ。

[Mac App] Touch Bar Preview – MacBook Proのタッチバーに画像を表示させるアプリケーション

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

MacBook Proのタッチバー、俗に言うお触りバーに画像表示させるためのアプリケーション。起動して画像ファイルを放り込むだけでお触りバーに画像表示できるようです。普通に考えればMac用AppのUIデザインする際に使えそうなんですが、ネタ用途にもバリバリ使えそうな気もします。あと他人へのイタズラとか。せっかくのお触りバーなので、意味の分かんないものを表示させてニヤニヤするのも楽しそうです。アニメGifとかイケると最高なんですけどね。

[Freebie] uipixels – ハードウェアのモックやUIテンプレートを配布するサイト

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

ハードウェアのモックアップ素材や、WebやAppのUIテンプレートを配布しているサイト。素材のフォーマットは作例にもよるけど、Sketch、PSD、Aiなどがあるようです。いくつか詳細を見てみたんだけどどれも無料のようで、ダウンロードボタン押すとすぐに落とせます。面倒なメアド入力とかTwitterでリツイートするとか(あれ大嫌い)、わずらわしい手順がないのがステキ。素材探しに使えそうです。

[UI Design] Android Nougat Free GUI – Android 7.0 ヌガーのUIテンプレート

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

Android 7.0 NougatのUIテンプレートが配布されています。フォーマットはPhotoshop、Sketchというおなじみのものに加え、Craftのライブラリーという形でも用意されています。Android AppのUI制作や、Material Designに準拠したWebサイト作る時なんかに使えそうです。

[Design Resource] Designer Mill – デザイナーのための素材紹介サイト

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

デザイナーのための様々な素材を紹介するサイト。モックアップやアイコン、UIキット、フォント、Webテンプレートなど、デザイナーにとって役立ちそうな素材が紹介されています。変わったとこだとNintendo Switchのモックアップなんかもあります。デザイナーの皆様、お役立てください。ちなみにSwitch、秋にSkyrim出るらしいので、お外でもSkyrimできる専用機としてちょっと欲しいです。

[UI Design] Design Guidelines. – IT企業各社のデザインガイドライン資料まとめ

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

AppleやGoogle、Microsoft、Airbnb、IBM、Salesforce、Ubuntuなどの各IT企業が展開するプラットフォームに関するデザインガイドラインをまとめたサイト。AppleならiOS、GoogleならMaterial Design、MSならUniversal Windows Platformにおけるガイドラインが紹介されており、サイト内から直接資料に行く事ができます。各プラットフォーム用にUIデザインする際の資料として知っておくと便利ですねこれ。

[Web Design] Use Your Interface – アニメーションで見るインターフェース作例

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

動きに関するクールなUI作例を、アニメーションで紹介するデザインギャラリー。サイト内ではドラッグ操作、ロゴのアクション、円形エフェクトの3つのカテゴリに分けて紹介されていますが、最新のものはLatestでまとめて紹介されています。各作例はアニメーションGifを使って紹介されているので、サイト内でそのまま動きを見る事ができます。WebだけでなくMobile AppのUI作例集としてもイイ感じです。

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

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

クールなUI作例を、動画を使って紹介するデザインギャラリー。各作例のサムネールに付いてるPlayボタンを押す事で動画が再生されます。アニメーションやトランジションもUIの大事な要素なので、ソレ系のネタ探しする時に使えそうです。また各作例はパーツごとにタグ付けされているので、探したいパーツを見つけるのもサクっとできます。コレ系のギャラリーに多い「場面」ごとではなく、「機能やユーザーによる行為」による分類という点が特徴的だなーと思いました。