Web開発者としての私の仕事の一環として、私はクライアントに見せるためにUIプロトタイプを作成するのにかなりの時間を費やしています。それは後ろの痛みですが、時にはそれをしなければなりません。
Shuttleworth(および設計チーム)が次のような画像を出力するのを見てきました。
これは Balsamiq Mockups ...と呼ばれるものによって作成されます。AdobeAirの上でバランスがとれ(yack!)、79ドルかかります。
私はそれを試してみましたが、倒れ続けました。アプリ自体ではなく、Airと関係があると思います。私のポイントは、私が何かにお金を払うなら、それがネイティブであることです。
私が理解し始めていない理由のために、その作者はそれをFirefoxプラグインとして書いていますが、 Pencil は素晴らしいFOSSプロトタイピングツールです。 Balsamiq Mockupsのように、デモ画面をすばやく一緒に作成できる多数のプレハブコンポーネントが付属しています。また、Balsamiqのように、スケッチに複数のページを配置し、それらをリンクして、プログラマーやデザイナーが特定のボタンを「クリック」し、それが発生したときに何が起こるかを感じることができます。
Balsamiqとは異なり、デフォルトのモックウィジェットセットは実際のウィジェットのように見えるため、プログラマーは画面上に表示されるモックアップをしげに模倣します。ありがたいことに、しばらくの間、スケッチウィジェットテンプレートがPencilと共に配布されています。また、Balsamiqとは異なり(Firefoxのアドオンとしては驚くことではないでしょう)、PencilはそのスケッチをFlash/FlexではなくHTMLにエクスポートします。
PencilはFirefoxの拡張機能であるため奇妙に見えますが、実際には非常にうまく機能し、使いやすいです。私はイデオロギー的にFOSSに執着しておらず、素晴らしいソフトウェアに80ドルを費やすことを気にしないので、正直に言って、私は鉛筆よりもBalsamiqを使用すると言います。 Balsamiqの一般的なワークフローと使いやすさはPencilより優れていると思います。しかし、鉛筆はまだ素晴らしいツールです。 FOSSプロトタイプを探しているなら、もっとうまくやるのに苦労すると思います。 Firefoxを起動して チェックしてください 。
個人的には Inkscape (ベクターグラフィック描画プログラム)でweb-uiプロトタイピングを行うのが好きです。使用するのはかなり簡単で、最終製品を作成するときにほとんどのモックアップを再利用できます。
Glade Interface Designer を試してください。GTK/ Gnomeインターフェイスデザイナーで、通常は実際のアプリケーションに使用されますが、プロトタイプにも同様に使用できます。
モックアップにInkscapeを使用することもお勧めします。 www.openclipart.orgからいくつかのストックウィジェットを入手できます(誰かがもっとアップロードする必要があります!)。
既存のUIをマークアップするには非常に便利です...アプリのスクリーンショットを撮り、Inkscapeに挿入してロックされたレイヤーに配置し、その上にあるレイヤーに描画を行って、変更内容を表示します表示する必要があります。
私は非常に小さなプロジェクトでMockingbirdを使用したことがあります。 http://gomockingbird.com これは、コラボレーションを可能にするWebベースのクライアントです。どうやらベータ版を離れて、数日で無料になるのをやめるようだ。