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

Browse By

Tag Archives: Prototyping

[PDF] Wireframing — generatedpaper.com: free printable papers for the daily use – ワイヤーフレーム描く時に便利なPDF

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

WebやMobileAppのワイヤーフレームを描く際に便利なPDF。WebブラウザウィンドウやiPhone、iPadなどのガワをPDFからサクっと印刷する事ができます。こういうPDF配布サイトっていくつかあるけど、ここではTVのガワも配布されてます。これアレですかね、いずれ出てくるスマートTVに対応するためのアレですかね。個人的にはAndroidベースのスマートTVとか誰得やねんって思うんですけどね。それでもAppleが出すんだとしたら「ひゃっはー!」なんでしょうけど。デザインの前段階やディレクターやってる人にちょうどいい素材。

[Design] Dotted Paper – ドットのグリッドを印刷できるPDF

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

一般的なA4用紙にグレーのドットを印刷できるPDF。ドットをグリッドとして使う事で、手書きでプロトタイピングを行う際の助けとなります。デザイナー向けのノートとかでこういうのすでにありますが、どのオフィスにでもあるただのA4用紙を使う事ができるので、コストも安く必要な時に必要な量だけ作る事ができます。プロトタイピングは手書き派の人に是非。

[Prototyping] Wireframe.cc – ちょっと変わった手順でワイヤーフレームを描けるWebサイト

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

ちょっと変わった手順でWebのワイヤーフレーミングができるWebサイト。どう変わっているのかというと、通常この手のドローツールではまずツールを選んでから描画する場合が多いのに対して、このサイトではエリアを選択後、そこが何のエリアなのかを選択する仕組みになってます。なので画面上にツールバーの類は出ていません。最初は変な感じするけど、よく考えたらこの描画プロセスの方が効率イイよな、とか思いました。現状TwitterかFacebookを使ったシェア方法しかサポートされてませんが、今後固有URLを使ったシェア方法などがサポートされるようになれば便利だなーと思いました。

[Prototyping] UI Stencils – UI設計に役立つ文房具

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

WebやMobile App制作に役立つ文房具を取り扱ったサイト。デジタル素材ではなくリアルな文房具です。定規とかノートとか製図用ペンとか。扱っているツール類はステンシルとノートとその他アクセサリー類にカテゴリ分けされており、全てサイトから買えるようになってます。iOS用、Android用、Windows 8用などの様々なツールが紹介されてます。制作の初期段階におけるワイヤーフレーム作りなどのプロトタイピング作業ってやっぱり手で描くのが一番手っ取り早かったりしますしね。デザイナーやUI制作者には欠かせない道具ですな。自分はこのあたりの型抜き定規を使っておりますが、このサイト見てたら色々欲しくなりました。

[Prototyping] OmniGraffle Wireframe Stencils – オムニグラフでワイヤーフレームを描くためのステンシル

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

オムニグラフでWebサイトのワイヤーフレームを描く際に便利なステンシル素材。フリーでダウンロードできます。ダウンロード後のインストール方法などについても記載されてます。オムニグラフ、最近あんまし使わなくなったけど、以前はこれでワイヤーフレーム描いてました。サクっと描けて便利なんすよねー。ちなみにわたくし最近ではこういうのイラレで描いております。

[Prototyping] Free Photoshop Wireframe Kit – スマートオブジェクトを使ったワイヤーフレームのPSD

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

フリーで配布されている、ワイヤーフレームを制作するためのPSD。このPSDファイルの良い所は、各オブジェクトがスマートオブジェクト(.psb)になっている点です。使い方としては新規キャンバスにこれらのスマートオブジェクトをポンポン放り込んでいきます。同一のpsbを参照している複数のオブジェクトがあるなら、1つ修正するだけで全部変わります。またワイヤーフレームからデザイン段階に遷移する際にはpsbの中身を作り込んでいけば良いので、同じpsdファイルでデザイン段階にまで移行する事ができます。いやこれとってもナイスです。ディレクターとデザイナーが同じファイルを使って作業を1本化できますね。このアイデア鼻血が出るほどナイスなので、早速仕事で使わせてもらいます。

[UI Design] 40 Handy and Free UI Kit PSDs for Smartphones – スマートフォンのUIキットまとめ

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

スマートフォンのUIデザインの際に役立つPSDファイルをまとめた記事。対象OSはiPhoneとAndroidとWindows 8 Phone。それぞれデフォルトにUIに沿ったデザインのPSDもあれば、そうでない独自のあしらいのものもあります。 また記事下部にはプロトタイピングに使えそうなラフデザイン調のものもいくつか用意されてます。デザイナーやディレクターの方に是非。一部ベクターデータのものもあるので、IllustratorでUIデザインする方にもオススメ。

[Material] Agiledesigners – Webデザイナーのためのリソースまとめサイト

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

Webデザイナーのためのリソースまとめサイト。どのようなリソースかというと、アイコン、テクスチャ、ブラシ、フォント、ワイヤーフレーム、ECサイトツール、Webアプリケーション、フォトショッププラグイン、オンラインのコーディングツール、フレームワーク、ローカルソフトウェア、CMS、サイト解析ツール、オンライン共有ツール、マーケティングツール、プロジェクトマネージメントツール、そのたブログなどの情報リソースへのリンクなどがその内容。いやー盛りだくさんです。情報量が多く、広く浅くという感じのまとめサイト。けどなかなかイイですわこれ。役に立ちそうです。