これはベスト プラクティスのトピックです。
私はこれを、一部の Web 開発者にとって好ましい方法だと考えていました。CSS レイアウトをゼロから作成する代わりに、最初に Photoshop のモックアップを作成し、それを CSS にデコードします。
このアプローチについてどう思いますか？
皆様、
8 に答える
10
モックアップは素晴らしいですが、Photoshop がその目的のために最初に試してみたいものかどうかはわかりません。サイト (外観などを改良する前) では、ホワイトボードにホワイトボード マーカーとポストイット ノートを付けて、初期のブレインストーミング用に非常に迅速に繰り返しモックアップの再配置を行うことができます。1 つ (または非常に少数) の可能な情報の配置について合理的な合意が得られると、視覚的により正確なツールが有効になります。
ところで、変更する前にホワイトボードの写真を撮ることを忘れないでください (まともな携帯電話で構いません。ここで高品質を求めているわけではありません;-) アイデアや提案があれば、いつでも再検討したり、将来考えたりすることができます。 !
于 2009-11-08T01:41:36.260 に答える
6
速いです。これが、私が常にこの方法を使用する理由です。実際にレイアウトを設定するまで、クロスブラウザー CSS の作成に時間を費やしたくありません。
于 2009-11-08T01:36:10.703 に答える
5
ほとんどのウェブデザイン グラフィック アーティストはこの方法で作業します。
多くのプログラマーは、単に時間の無駄だと感じています。
それには利点と欠点があります。
利点:
多くのグラフィック アーティストは、dreamweaver よりもPhotoshop/illustratorをよく理解しています。
顧客は、 Mac、PC、Firefox、つまりサファリなど、どこでも機能する最終製品のプレビューを入手できます。firefox を使用している開発者と MSIE を使用している顧客に、製品の初期段階で HTML プレビューを送信すると、常に問題が発生します。
また、MSIE 駆動の html を走り書きして、賢明な側にいるとは思わないでください。非標準の html から始めて標準に変換するのは、他の方法で行うよりも面倒です。
もう 1 つ落とし穴があります。Web サイトの顧客の多くは、Mac と Safari を使用する傾向があります。Web 関係者は、平均よりもグラフィックスに対する好みが強い傾向があるため、この分野では他の分野よりも Mac マニアに遭遇する可能性が高くなります。より多くの設計案を準備することができ、それぞれに費やす時間を短縮できます。これは、顧客側に指定された意思決定者がいない、重役の雲のような雲に対処する際に、劇的な利点となる可能性があります. いずれかのデザインについて一般的なコンセンサスが得られるまで、代替のモックアップは白紙の状態で渡されます。
短所:
グラフィック デザインを html に「カット」することは追加の作業になり、誰がその余分な時間を支払うかは明確ではありません。
グラフィック中心で厳格な設計ワークフローを支持します。顧客は所定のプレビューについて事前に同意し、それが契約によって得られます。すべてのグラフィックの変更は、お金、動作、およびプログラミングを意味し、代わりに、モックアップによって明確に定義されていないか、最悪の場合、定義が不十分になる傾向があります。
ピクセル パーフェクトなクロス ブラウザー モックアップへの準拠を求めると、気が狂ってしまうかもしれません。特定の厳格な設計について顧客と合意した場合、それを追求するのは差し迫った問題になる可能性があります。
汚れた CSS トリックがデザインに組み込まれます。HTML モックアップを使用すれば、顧客はコードによって駆動されるデザインを承認し、トリックが少なくなります。
とにかく、モックアップには Photoshop をお勧めしませんが、inkscape . （または、真夜中にお金の山を魔法陣に燃やしてアドビを崇拝する場合は、イラストレーター）
お客様とライブで契約について話し合う落書きステージもいいですね。
フェルトペンよりも鉛筆と紙が好きで、アーカイブやメール転送のアイデアをウェブカメラで撮影しています。落書きに関しては、誰もがより自然に感じることを行います。
何もせず、サンプル サイトの例とスクリーンショットに依存してグラフィカルな参照を行うことは、常にオプションです。
于 2009-11-08T04:45:59.743 に答える
3
あなたがそのように生産的であるなら、なぜですか？たくさんの山かっこを入力しているため、誰もが自分の Web サイトを完全に思い描くことができるわけではありません。
より真剣に言えば、それはあなたの仕事なので、効果的にできる方法でそれを行うのはあなたの責任です.
于 2009-11-08T01:38:30.197 に答える
1
私はhtmlとcssをかなりよく知っているWebプログラマーです。基本的な機能としてグラフィックプログラムを使用することはできますが、完全なグラフィックWebサイトを設計することは私の目的ではありません。
グラフィックデザイナーに自分のグラフィックプログラムを使用して見栄えの良いレイアウトを作成させ、WebサイトをHTMLとCSSで手動でコーディングします。
それは私のために働き、私の顧客に彼らが好きなデザインを与えます（グラフィックデザイナーは常にほとんどのウェブプログラマーよりずっと見栄えの良いデザインを作るからです）。
于 2009-12-30T10:58:32.273 に答える
1
プロトタイプを作成するときは、適切な忠実度を選択することが重要です。 BoxesAndArrowsのこの記事では、さまざまなオプションとその使用法を紹介しています。
記事で引用されているBill Buxtonの次の行が特に気に入っています。
高忠実度や低忠実度などというものはなく、適切な忠実度のみがあります。
Facebook Design Team によるこの TechTalk で、彼らはデザイン プロセスで Photoshop をどのように使用しているかについて言及しています (IIRC は途中ですが、ビデオを進めることができないようです)。
于 2009-11-08T03:55:35.697 に答える
0
個人的に、そして私が働いたすべての Web 開発会社で、私は常に最初にフォトショップでモックアップを作成しました。CSS とマークアップに直接飛び込むことは、よりボトムアップのアプローチであり、多くのプログラマーにとって理にかなっていますが、Web 開発では、考慮すべき美学と従うべき創造的な方向性があることに留意する必要があります。製品が機能的であるだけでは十分ではありません。見やすく使いやすい製品にするためには、プロのクリエイティブ ディレクター/グラフィック デザイナーの意見が必要です。
私の経験では、問題は常にチームメンバーの柔軟性の欠如と格闘していました。美学に重点を置き、デザインの完全性を損なうことを拒否するグラフィック デザイナー。これにより、不可能または非常に困難で意味のないレイアウトになる場合があります。実行可能な解決策がある場合、コードの整合性を妥協することをきっぱりと拒否する開発者 - それは少しエレガントではないかもしれません. 重要なのは、CSS と何が可能で何が不可能かを熟知しているクリエイティブ チームと、デザインと美学の重要性を理解しているエンジニアリング チームを持つことです。
私のフリーランスの生活の中で (両方の陣営で働くメリットがありました)、最初に Photoshop でモックアップを作成する方がはるかに簡単であることがわかりました。また、Photoshop のモックアップは、CSS やマークアップよりもクライアントのフィードバックに基づいて変更するのがはるかに簡単です。また、クライアントにモックアップを見せることができれば、明確な方向性を持つ綿密に計画されたプロジェクトにお金が使われていることを知っているので、クライアントはより安心できます。
お役に立てれば！
于 2009-11-10T03:23:59.200 に答える
0
アジャイル手法は、顧客と相談して簡単に変更できるものを提案します。Rails を使用した Agile Web Developmentの Dave Thomas は、紙に落書きすることを提案しています。しかし、自分が何を望んでいるかを本当に理解していない限り、手作りの CSS を直接削り落とすよりは、どんなことでも良いはずです。
「落書きは正式なプレゼンテーションには適さないかもしれない」と言おうと思っていましたが、素晴らしいSOの群衆がコメントで私を打ち負かしました...
于 2009-11-08T01:36:46.727 に答える