モックアップ：コーディングvs描画？

これはウェブデザインではなく、インターフェースデザイン全般についてです。インターフェイスモックアップをコーディングするか、GIMP、Photoshopなどのグラフィックプログラムで「描画」する方が良いですか。

次の質問を自問してください。

• コーディングによって30分間でいくつのUIレイアウト/オプションを探索できますか？スケッチでいくつ探索できますか？

• 最初の試行で正確にUIデザインを取得する頻度はどれくらいですか？それほど頻繁ではないにしても、スケッチとコード化されたモックアップを変更するのはどれほど速くて簡単ですか？

• hex / rgbコードを確認するだけで即座に色を特定できますか（単なる球場推定ではなく、正確な色合い/色）？心の中で色を描くとき、​​すぐにそれを16進数に変換できますか？16進コードを入力することで、実際のカラーピッカーを使用するよりもどれだけ速くカラースキームを選択できますか？

あなたがこの質問をしているという事実は、あなたがトレーニングによって、デザイナーではなくプログラマーである可能性が最も高いことを教えてくれます。設計者であれば、クラス構造、データベース設計、アプリケーションアーキテクチャなどを計画せずにコーディングにすぐに飛び込むことなくアプリケーションを開発するのと同じくらい馬鹿げているでしょう。経験豊富な開発者であれば、この種のボトムアップ開発がどのような問題を引き起こすか。

同様に、最初に実際にUIを設計せずにコードに直接ジャンプすると、盲目的にコーディングして優れた設計を完成させることが非現実的であるという理由だけで、結果はきれいになりません。

最初に「絵を描く」に投票します。GUIでは、適切なレイアウト/プレゼンテーションが重要であり、視覚的な手段を設計する必要があります。GUIを視覚的に設計すると、変更を「想像」して「コードに変換」して最後にテストする必要なく、設計をすばやく変更できます。もう1つの方法も可能ですが、それが優れていることはめったにありません（たとえば、プロジェクトが非常に小さく、ボタンが2、3個あるだけで、「コード」レベルでの作業に慣れているため、設計中にいくつかのパターンが現れる場合があります。わずかな変更を加えて再利用されています）。

特定のウィジェットツールキット用に設計している場合は、「GUIデザイナ」アプリケーションがあればそれを使用することもできます。実行中のプログラムで設計されたGUIがどのように見えるかを正確に示し、プレゼンテーションレベルですぐに使用できるGUI記述をエクスポートできるため、GUI設計プロセスがさらにスピードアップします。

UIデザインには、目的の異なる3つの段階があります。

1. スケッチ。最初に、どのような要素があり、どのように組み合わされるかについての基本的な考え方を理解する必要があります。この段階での細部や美的完璧主義は、注意散漫になります。私はホワイトボードと太い消去可能なペンを使用しているので、細部に気を取られたり、さまざまなアイデアの落書きを書いたり、いつでもやり直したりすることは不可能です。小さな付箋だけでスケッチしたり、オフハンド（右利きの場合は左手など）だけを使用して、美学にまったく注意を払わずに100％集中したりする人を聞いたことがあります。アイデアと機能について。（画像は私のものではなく、Frank Prendegastから）

2. （2！）シミュレーション。2番目に、時間のかかる実装作業を開始する前に、見下ろしてフィードバックを得て、人々の直感とプロンプトなしの応答についてできる限り多くを見つけたいと思います。これは、あなたが最も効率的に作業しているものに当てはまるはずです。正しく実行している場合、批評を求め、できるだけ多くの予期しない問題をできるだけ早く特定することを目的とするため、頻繁に「設計図に戻る」必要があります。クレイジーなコーディングマシンであり、それが最も快適に作業できるものであれば、コーディングは問題ありませんが、ほとんどの人はFireworks、Photoshop、専用のワイヤーフレーミングソフトウェア、またはFlash CatalystのようなUI駆動のインターフェイスビルダーでより速く作業できます。 （最終製品がFlashでない場合は、実装を開始する前に適切なフィードバックを得ることが目標です）。

3. （3！）実装。最後に、Thingを実装し、より多くのフィードバックを早期かつ頻繁に取得できる方法で実装することを目指します。

プロジェクトサイクルのこれらの3つの部分の目的は異なるため、大きなプロジェクトの場合は、各段階のジョブに最適なツールを使用するのが理にかなっています。

この質問は少しあいまいで、そのため、回答も同様です。

その上、チームと同様に、プロジェクトは大きく異なります。

とはいえ、「ベスト」というものはありません。あなたとあなたのチームにとって最も理にかなっているワークフローですべてのツールを使用することです。

一般的に言えば、これはあなたが目指すべきワークフローのタイプだと思います：

1. スケッチ。鉛筆+紙。ホワイトボード。繰り返す。できるだけ多くのチームメンバーと協力してください。
2. ローファイのモックアップ。PSDかもしれないし、visioかもしれない。紙かもしれません。ユーザーがこれらをテストします。
3. プロトタイプを作成します。これは、コードの作業でできるだけ多くのことを始めたい場所です。必要に応じてPhotoshopにジャンプし、できるだけ早くPhotoshopからコードに変換します。ユーザーのテスト/反復を続行します。

私にとってうまくいくのは、ピクセルパーフェクトなレイアウトを作成しないことを強調するプログラムを使用してモックアップを作成することです。私にとってはBalsamiq Mockupsです。http：//www.balsamiq.com/products/mockupsで確認できます。