グラフィックデザイナーと仕事をする正しい方法は何ですか？
最近、私たちは（クライアントが手配した）グラフィックデザイナーと協力して、私たちが構築したDjango + Bootstrapアプリケーションのスキンを提供しました。デザイナーは、新しいレイアウトの一連の静的画像と、いくつかの技術的属性（フォントサイズ、色、いくつかの寸法など）を説明するドキュメントを提供しました。
これを実装するには、非常に時間がかかることがわかりました。サイト全体は基本的にフロントページ、インデックスページ、および6ダースの詳細ページでしたが、CSSとHTMLの変更を実装するだけで少なくとも5日間を費やしました。だから私は手足を出してこれをThe Wrong Wayと呼びます。
私の基本的なアプローチは：
- 静止画像と現在のレンダリングを比較して、違いを確認してください。
- CSS/HTMLでどのような変更が必要になるかを推測する
- その変更を行います
- 手順1に進みます。
特定の問題のいくつかは、デザインに8列から12列への変更が含まれていることを理解していなかった、いくつかの画像が間違った形式で提供された（.pngは異なるブラウザー/プラットフォームの組み合わせで異なるレンダリングができる）、ブートストラップのスタイルを元に戻そうとする手間、通常のCSSレスリングでピクセルパーフェクトレンダリングなどを実現しました。また、特定の動作を得るために、HTMLテンプレートを再編成する必要がある場合もあります。
正しい方法は何ですか？
私の会社では、この仕事に特化した人が数人います。
彼らはデザイナーです。そして、彼らはHTMLを知っています。これらは、設計者とフロントエンドエンジニアの間の架け橋になる可能性があります。彼らは通常そうです。このように、HTMLを統合する必要があります。
これは大変な仕事です。 「PSD to HTML in 24h」のようなサイトがうまく機能するのには理由があります。私たちの会社での解決策は、これを行うことに特化した人々を持つことです。私たちにとって、HTMLでの作業は簡単です。
特効薬はありません。
「正しい方法」があるかどうかはわかりませんが、設計者と協力するかなり効果的な方法は、まずテンプレートを使用し、すべてのテンプレートを簡単に交換できるスタイルのないシステムを構築することです。次に、機能的だがスタイルのない（または最小限のスタイルの）インターフェースを作成したら、結果をデザイナーに渡してスタイリングします。
この種のデザインパターンの適切な例は、jQueryUI（ http://jqueryui.com/ ）です。
まず、これまでWebフロントエンドを扱ったことがないことを認めなければなりません。
しかし、私はあなたとデザイナーにとって、最終的なデザインがどうあるべきかという文章を書くことは良い習慣だと思います。このようにすると、ページごとに異なるテーブルを記述しているとにおいがするため、一貫性があることがより確実になります。実際にコードを記述しているため、Proseを使用すると実装が簡単になります。これは、イメージよりも実装に近いコードです。
また、デザイナーがページ全体ではなくコンポーネントに重点を置くようにしてください。ページのコンポーネントが正しい場合、それらをページ全体にまとめることははるかに簡単なステップです。
私は何人かのデザイナーとHTML/CSSを開発しており、すでに述べたように、「特効薬」はありません。私が一緒に働いたデザイナーは、html/cssについてあまり知りませんでした。彼らの一部はウェブデザインの経験があり、彼らがその知識を持っていると、特にUXが関係しているときは常に、開発がより簡単になり、特に「より良いウェブサイト」になるということを言わなければなりません。
私はウェブサイトを探しているいくつかの会社が知らない/無視しているものだと思います：誰でも彼はグラフィックデザイナー/ウェブ開発者/ウェブデザイナー/ UIデザイナーであり、どちらかで基本的な知識を持っている（あるいはまったくない、そうだと私は見た）と言うことができます。一方、「本物」は、さらに一歩進んで、保守可能で効果的なWebサイトを作成できます。私はクライアントを「教育」し、ウェブデザインには「印刷のみ」のグラフィックデザイナーにはないスキルが含まれることを説明しようとします。これが機能するとき、私は通常、私がすでに作業していて、共通のワークフローを持っているデザイナーにクライアントを送ります。
これは、多くの理由で、グラフィックスキルがあり、ウェブデザインスキルのない人がいるウェブサイトを構築することがよくあることです。この状況で、コーディング時間を節約し、開発不可能なレイアウトにならなくなるようにするための最善の方法は、設計プロセスに関与するおよびデザイナーと通信するおよびあなたができること/できないこと、そしてあなたの観点から何がより簡単/より良いかを説明してください。
これは状況によっては整理が難しい場合がありますが、クライアントとデザイナーに「ウェブデザインがウェブプロジェクトの拡大を形成していると考えると、時間、お金、頭痛の節約になる」と説明するのは重要です。設計プロセスに参加して、時間と費用を節約できます。
これは私がほとんどのプロジェクトでフォローしようとするワーフローです：
- デザイナーが存在しない場合、デザイナーはグラフィック標準を作成します（通常、ここには関与しません。ウェブフォント（例：google fonts）にデザイナーにヒントを与えるだけです）
- デザイナーが作ったモクアップ。私はここに参加し、デザイナーと協力してWeb準拠のレイアウト（特にレスポンシブなレイアウト）を構築しますクライアントに表示される前。
- クライアントはmokupを検証します
- 私はモクアップをコーディングします
デザイナーとのコミュニケーションと作業に費やした時間は、コーディングプロセス中に節約され、その結果、よりシンプルで、保守しやすく、細かいコードになります。
これは、金曜日の夜にクライアントが見た非常にきれいなモックアップであなたを呼ぶ幸せなデザイナーからあなたを救うわけではありません、そしてクライアントは今この文章を望んでいます：「ちょっと、ちょっと、私のためにこれをコーディングできますか、締め切りは...昨日です！ 」その後、理論全体がバラバラになり、その瞬間に仕事を探しているなら、週末中ずっと頭を悩ませるのに適しています。
結論：
これはプロジェクト以外に関連するコードとそれほど違いはないと思います。他の人と作業するための最良の方法は、それらと通信することです。