Photoshopモックアップでウェブサイトのレイアウトを開始することはできますか？

Question

これはベストプラクティスのトピックです。

私はそれを一部のWeb開発者にとって好ましい方法と見ていました。 CSSレイアウトを一から行う代わりに、まずはPhotoshopモックアップを開始し、それをCSSにデコードします。

このアプローチについてどう思いますか？

ベストセラー

Answer 1

速いです。これが私がいつもこの方法を使う理由です。あなたが実際にレイアウトに設定されるまで、クロスブラウザCSSを構築する時間を費やしたくありません。

Answer 2

Agile methodologyは、お客様と相談して簡単に変更することを示唆しています。 Dave ThomasのAgile Web Development with Railsは紙に書くことを示唆しています。しかし、あなたが本当にあなたが望むものを本当に知っていなければ、何かが手作りのCSSで直接欠けているよりも優れているはずです。

私は「落書きが正式なプレゼンテーションのためにそれをカットしない可能性があります」と言って考えていたが、あなたがそのように生産している場合は素晴らしいSO群衆が、なぜ、...コメント欄でそれに

Answer 3

私を打ちますない？たくさんの山括弧で入力しているので、誰もがWebサイトを完全に想像することはできません。

もっと真剣に言えば：それはあなたの仕事なので、効果的に行うことができるようにすることはあなたの責任です。

Answer 4

モックアップは素晴らしいですが、Photoshopが最初にやってみたいことはわかりません。最初から、サイトのさまざまなページ（外観は&cです）を除いて、ドライイレースマーカーとポストイットノートが付いたホワイトボードは、初期のブレーンストーミングのための非常に高速で繰り返されるモックアップ再編成を可能にします。 1つの（またはごく少数の）可能な情報の取り決めに合理的な合意が得られたら、視覚的により正確なツールが使用されます。

これを変更する前にホワイトボードを撮影するのを忘れないでください。（まともな携帯電話は何もしませんが、いつでも再訪したいアイデアや提案がある場合はここで高品質をお試しください。将来熟考！

Answer 5

プロトタイプを作成するときは、正しい忠実度を選択することが重要です。 This article from BoxesAndArrowsは、さまざまなオプションとその使用方法を紹介します。

I特に記事が引用しBill Buxtonすることにより、この行のように：

は、そのようなもののような高または低忠実度、唯一の適切な忠実性はありません。 this TechTalk by the Facebook Design Teamで

、彼らは（IIRC、それはどこか途中ですが、私はビデオを通じて転送するように見えることはできません）、その設計プロセスでのPhotoshopを使用する方法に言及。

Answer 6

ほとんどのwebdesignグラフィックアーティストがこの方法で動作します。

多くのプログラマーは、時間の無駄だと感じています。

これには利点と欠点があります。

利点：

• 多くグラフィックアーティストは、彼らがDreamweaverの操作を行うよりも多くのフォトショップ/イラストレーターを完全に理解します。

• お客様はのすべての場所で動作する最終製品のプレビューを表示します：mac、pc、firefox、safari、なにか。 MSIEを使用してFirefoxを使用する開発者とプロダクションの初期段階でhtmlプレビューを送信すると、常にトラブルが発生します。
  
  そして、スマートな側にいるとは思わない、MSIEによるhtmlを書くこと。非標準のhtmlから始まり、標準に変換することは、他の方法よりも苦痛です。
  もう1つキャッチがあります：多くのウェブサイトのお客様は、Macをお持ちの方がSafariです。 Webコミットメントは平均よりもグラフィックの味が強い傾向があるので、マックマニアックにぶつかる機会は他のものよりもこの分野で高い。

• さらに多くのデザインの選択肢は、それぞれの時間を短く費やして準備することができます。これは、顧客側の指定された意思決定者がいない幹部の暗い雲に対処しながら、劇的なメリットをもたらす可能性があります。 1つのデザインで一般的なコンセンサスに達するまで、別のモックアップが手渡しになります。

短所：

• HTMLにグラフィックデザインは、追加作業になり、それはその余分な時間のためのつもり支払う誰はっきりしていない「カット」。

• グラフィック中心の、堅牢なデザインワークフローがに適しています。顧客は特定のプレビューで先制的に同意し、それは契約によって得られるものです。すべてのグラフィックの変更はお金、行動、プログラミングを意味するのではなく、よく定義されていないか、または最悪の場合、が定義されています。がモックアップによって定義されています。

• モックアップへのピクセル完全なクロスブラウザの遵守のための探求はあなたを狂ってしまうかもしれません。顧客との厳格な設計に同意した場合、それは追求する喫緊の課題になる可能性があります。

• ダーティーCSSトリックシューズをデザインに入れます。 HTMLモックアップを使用することで、顧客は、より少ないトリックでコードによって駆動されるデザインを承認することになりました。

とにかく、私はモックアップのためのフォトショップを提案したが、Inkscapeのないでしょう。 （またはイラストレーター、あなたが真夜中に魔法のサークルに火の束を燃やすことによって崇拝する場合）

落書きのステージも良いです。

私は、鉛筆と紙をフェルトチップにするのが好きで、ウェブカメラはアーカイブや電子メール転送のアイデアを撮ります。落書きになると、誰もがと感じるのはです。

サンプルのサイトに依存していないため、グラフィカルリファレンスのサンプルとスクリーンショットは常にオプションです。

Answer 7

個人的に、私が仕事をしてくれたすべてのウェブデベロッパーで、私はいつもPhotoshopで嘲笑してしまいました。 CSSとマークアップにまっすぐジャンプすることはボトムアップのアプローチであり、多くのプログラマーにとって理にかなっていますが、Web開発では、考慮すべき美学と追随するクリエイティブな方向があることを覚えておく必要があります。あなたの製品は機能的ではないだけでなく、プロのクリエイティブディレクター/グラフィックデザイナーの意見が必要です。

私の経験上、問題は常にチームメンバーの柔軟性に欠けています。グラフィックデザイナーは、美学に焦点を当て、デザインの完全性を損なうことを拒否します。不可能または非常に困難で意味のないレイアウトになることがあります。実行可能なソリューションがある場合に、コードの完全性を妥協することを断固として拒否する開発者 - 少しエレガントかもしれません。重要な点は、CSSに精通していることと不可能であることを理解しているクリエイティブチームと、デザインと美学の重要性を認識しているエンジニアリングチームを持つことです。

私のフリーランスライフ（両方のキャンプで働くことの恩恵を受けていました）では、私ができることとできないことを知っているので、まずフォトショップでモックアップするほうが簡単です。また、Photoshopのモックアップは、CSSやマークアップよりもクライアントのフィードバックを変更する方が簡単です。また、あなたのクライアントにモックアップを見せることができれば、彼らのお金が明確な方向性を持ってうまく計画されたプロジェクトに進んでいることを知っているので、より安全です。

希望すると便利です。

Answer 8

私はhtmlとcssをよく知っているウェブプログラマーです。私は基本的な機能のグラフィックプログラムを使用することができますが、完全なグラフィカルなWebサイトをdesinging私のものではありません。

私はグラフィックデザイナーに自分のグラフィックプログラムを使って見栄えの良いレイアウトを作成させ、htmlとcssで手作業でコードを作成させました。

これは私の作品で、私の顧客に好きなデザインを与えます（グラフィックデザイナーは、ほとんどのウェブプログラマーよりもはるかに見栄えの良いデザインになるでしょう）。