グラフィックデザイナーと仕事をする正しい方法は何ですか？[閉まっている]

最近、グラフィックデザイナー（クライアントが手配）と協力して、作成したDjango + Bootstrapアプリケーションのスキンを提供しました。デザイナーは、いくつかの技術的属性（フォントサイズ、色、いくつかの寸法など）を説明するドキュメントとともに、新しいレイアウトの一連の静的画像を提供しました。

これを実装するには非常に時間がかかることが判明しました。サイト全体は基本的にフロントページ、インデックスページ、および6つの詳細ページでしたが、CSSとHTMLの変更を実装するだけで少なくとも5日間を費やしました。それで、私は手足に出て、これを間違った方法と呼びます。

私の基本的なアプローチは：

1. 静的な画像と現在のレンダリングを比較して、違いに注目してください。
2. CSS / HTMLでどのような変更が必要かを推測します
3. その変更を行う
4. 手順1に進みます。

特定の問題のいくつかは、デザインに8列から12列への変更が含まれていることを理解していないことでした。ピクセルパーフェクトレンダリングなどを実現するために通常のCSSレスリングを使用します。また、特定の動作を得るために、HTMLテンプレートを再編成しなければならない場合がありました。

正しい方法は何ですか？

私の会社では、この仕事に特化した人が何人かいます。

彼らはデザイナーです。そして彼らはHTMLを知っています。それらは、設計者とフロントエンドエンジニア間の架け橋になります。彼らは通常です。この方法では、HTMLを統合するだけです。

これは大変な仕事です。「PSDからHTMLへの24時間」などのサイトがうまく機能する理由があります。弊社の解決策は、これを専門とする人々を雇用することです。私たちにとって、HTMLの操作は簡単です。

特効薬はありません。

「正しい方法」があるかどうかはわかりませんが、デザイナーと協力する合理的に効果的な方法は、最初にテンプレートを使用し、すべてのテンプレートを簡単に交換できるスタイルのないシステムを構築することです。次に、機能的であるがスタイルが設定されていない（または最小限のスタイルが設定された）インターフェースを作成したら、結果をスタイリングのためにデザイナーに引き渡します。

この種のデザインパターンの適切な例は、jQueryUI（http://jqueryui.com/）です。

まず、これまでウェブフロントエンドで作業したことがないことを認めなければなりません。

しかし、最終的なデザインがどのように見えるかについての散文を書くことは、あなたとデザイナーにとって良い習慣になると思います。そうすれば、ページごとに異なるテーブルを記述していると臭いがするので、一貫性がより確実になります。散文を使用すると、実際にコードを記述しているため、実装が簡単になります。これは、イメージよりも実装に近いものです。

また、デザイナーがページ全体ではなくコンポーネントに注目するようにしてください。ページのコンポーネントを正しく取得すれば、ページ全体にコンポーネントを構成するのがはるかに簡単なステップになります。

私はHTML / CSSを複数のデザイナーで開発してきましたが、すでに述べたように、「特効薬」はありません。一緒に仕事をしたデザイナーは、html / cssについてあまり（何も）知りませんでした。一部のユーザーはWebデザインの経験があり、その知識があれば、特にUXのレスポンシブネスが関係する場合、開発が容易になり、「より良いWebサイト」になります。

ウェブサイトを探している企業が知らない/無視するものは何だと思います：誰でも彼が基本的な知識を持つグラフィックデザイナー/ webdevelopper / webdesigner / UIデザイナーであると言うことができます（あるいは、まったく見ていません）。一方、「本物の」ものはさらに努力して、保守可能で効果的なWebサイトを作成できます。私はクライアントを「教育」し、グラフィックデザイナーにはない「印刷のみ」のスキルがWebdesigningに関係していることを説明しようとしています。これが機能するとき、私は通常、すでに作業したことがあり、共通のワークフローを持つデザイナーにクライアントを送ります。

これは、多くの理由で、グラフィックスキルを持ち、Webデザインスキルを持たない人でWebサイトを構築することがよくあることです。このような状況で、私はコーディングの時間を節約し、undevellopableレイアウトで終わるしないことを発見した最良の方法は、することです設計プロセスに関与することやデザイナーと通信し、あなたが/できないことができ、何が良い/単純どうなるかを説明あなたの観点から。

これは状況によって整理するのが難しい場合がありますが、クライアントとデザイナーに「ウェブデザインがウェブプロジェクトの始まりを形成すると思うなら、時間とお金と頭を節約できる」と説明することは重要です。その時間とお金を節約するために、設計プロセスに参加できてうれしいです。

これは私がほとんどのプロジェクトで従おうとしているワークフローです：

1. デザイナーは、存在しない場合はグラフィック標準を作成します（通常、ここには関与しません。デザイナーにWeb準拠のフォント（Googleフォントなど）にヒントを与えようとするだけです）
2. デザイナーが作成したMokup。私はここに参加し、デザイナーと協力して、クライアントに表示される前に Web準拠のレイアウト（特にレスポンシブなレイアウト）を構築します。
3. クライアントはmokupを検証します
4. mokupをコーディングします

デザイナーとのコミュニケーションと作業に費やした時間は、コーディングプロセス中に節約されます。これは、よりシンプルで、保守しやすく、新しいコードになります。

これは、金曜日の夜にクライアントが電話し、クライアントがこの文で望んでいる非常にかわいいモックアップであなたを呼ぶ幸せなデザイナーからあなたを救うものではありません。 」その後、理論全体がばらばらになり、その瞬間に仕事を探しているなら、あなたはすべての週末にヘッドピーチに適しています。

結論：

私はこれがプロジェクトではないことに関連するコードと非常に異なるとは思わない。他の人と仕事をする最良の方法は彼らと通信することだ。

グラフィックデザイナーがフルスタックのWeb開発者になったので、私にとってこれは簡単な部分でした。多くの場合、UX設計チームと製品を実装する開発者との間にコミュニケーションのギャップがあります。確かに、ドキュメントは役立ちますが、戦略に関するいくつかの対面の会話が発生すると、プロセスはより自然に感じるようになります。また、私は誰にとっても時間が不足していることを知っていますが、設計とレイアウトの段階で関与するようにしてください。これは、デザイナーと開発者の間でコミュニケーションが必要な場合に非常に役立ちます。このプロジェクトは、より統一されたチームの努力を引き継ぎ、「まあ、私は自分の役目を終えました。壁を越えて」シナリオです。設計と開発の作業を並行して行うことは非常に有益であることがわかりました。プロセスの早い段階でワイヤフレームを提供するように設計チームを奨励します。そうすれば、レイアウトと配置のみを扱う1つのスタイルパスを実行できます。その後、ディーンがより豊かで完全になります。外観とその他のスタイル属性に別のCSSパスを使用します。少なくともこれにより、一度にすべてに集中する必要がなくなります。

同様の問題に直面しています。GreasemonkeyやTampermonkeyのようなツールをその目的に使用できるという考えがあります。先週、私はこのアイデアについてコメントを求めました：動的WebアプリケーションのUIをどのように外注するのですか？、しかし満足のいく応答が得られませんでした。

これらのツールを使用すると、CSS、HTML、およびJavaScriptをページに挿入できます。私の考えでは、作業サイトのURLをデザイナーに渡し、Greasemonkeyスクリプトが返されることを期待しています。理論的には、既存のサイトにそれらを非常に迅速に統合できるはずです。このように、HTMLとCSSを記述し、サイトを実際に機能させるのはデザイナーの仕事です。ただし、これにはデザイナー側でより多くのプログラミングスキルが必要です。

このアイデアには多くの精緻化が必要であることを知っています。しかし、私はまだそれを試していませんし、他の誰かがこれをやっているかどうかも知りません。実装に問題がある可能性があります。