デザイナーと開発者のワークフローを改善するには？
私は2人のフロントエンド開発者と1人の設計者がいる小さなスタートアップで働いています。現在、プロセスはデザイナーがページ全体のデザインと必要に応じてアセットを含むpngファイルを送信するところから始まります。フロントエンド開発者としての私の仕事は、それをHTML/CSSページに変換することです。私のワークフローは現在次のようになっています：
- HTML要素を使用して、個別のパーツをレイアウトします。
- 各要素のスタイルを非常に大まかに（フロート、最小フォント、パディング）し、検査を使用して変更できるようにします。
- Chrome開発者ツール（検査）を使用して、cssファイルの更新中にcss属性を追加/変更します。
- X回の変更後にページを更新する
- Pixel Perfectを使用して、デザインをさらに洗練させます。
- 最後の調整を行うためにデザイナーと一緒に座ります。
試行錯誤を使用してパディング、マージン、フォントサイズを推測するには時間がかかり、プロセスがより効率的になる可能性があると感じていますが、どのように改善すればよいかわかりません。
現在、開発者ごとにPhotoshopを購入することは考慮されていないため、PSDファイルを使用することはできません。デザインはまだ進化しており、新しい機能が導入されているため、デザインガイドも利用できません。
上記のプロセスを改善し、プロセスが社内でどのように見えるかを共有するためのアイデアは素晴らしいでしょう。
- デザイナーがWebセーフフォントを使用していることを確認してください。多くのデザイナーは、印刷および/またはレンダリングされたデザインの背景を持ち、見つけたフォントから選択できることに慣れています。ウェブは違います。
- デザインでは、各テキスト要素のフォントタイプ、サイズ、太さ、装飾を明確に示す必要があります。
- デザイナーと一緒に座って、テキストがそのコンテナーの境界をオーバーフローしたときに何が起こるかを示し、デザインで展開できるテキストコンテナーを識別することがどれほど重要であるかを説明します。
- デザイン要素を再利用します。リンク、ボタン、パネル、メニュー-あなたは何を持っています。新しいページまたはコンポーネントが既存のデザインに準拠し、同じルックアンドフィールコンポーネントを使用することを確認するのは、デザイナーの仕事です。
- コンポーネント間の距離とパディングをピクセル単位でマークします。デザインは、家を描く建築家によく似ています。完全なピクセルが必要な場合は、ピクセル距離と寸法をデザインで示す必要があります。
デザイナーは、デザイン内のモノのコピーにfont/color/line-heightを配置できます。例えば：
タホマボールド20px/26px＃000
ため息、私たちには非常に似た問題があります。開発者は、デザイナーの3倍の時間を単純なものに費やすことがあります。
最初に、デザイナーとコーダーが半日または新しいデザイン/プロジェクトの初期段階で互いにそばに座ります。これは非常に役に立ち、問題の大部分は一緒に解決されました。設計者は、すべてを「完璧」にするためにどれだけの労力が費やされたかを理解した後、さらに前向きな努力を惜しみなく費やしました。 PSD/PNGをhtml/cssに近づけるには、開発者としての困難を彼らに認識させる必要があります。
2つ目は、設計者（コーダー以外）がCSSスタイルをリアルタイムで表示/プレビューできるようにするための優れたツールです。これは、ブラウザーで何かがどのように表示されるかを確認するための優れた方法であり、デザイナーがCSSの専門家でなくても、簡単に「スタイルガイド」を作成する方法です。
http://www.panic.com/coda/img/screenshots/css-screenshot_02.jpg
解決策はデザインまたはスタイルガイドであり、チームの準備ができていない場合は、準備が整うまで大まかに検討する必要があります。
私は、設計標準文書を作成し、設定された期間ごとに繰り返し再検討することをお勧めします。
すべてのボタンのパディングが10であることがわかっている場合は、ボタンを実装するたびにデザイナーに確認する必要はありません。
最初のドラフトが間違っていたとしても、それは開始であり、クロスチームを単一のファイルで調整する方が簡単です。これが、プログラマーがインターフェースを使用する理由であり、設計者は時間の経過とともにそれを変更できます。 CSSをできるだけきれいに維持するのはあなた次第なので、時間の経過とともにこれらの微調整を行うことは、ひどい雑用ではありません。
また、デザイナーがチームを去った場合や、将来のデザイナーが堅実なスタイルガイドを使用および保守できる場合。
私はスタイルガイドを2番目にします。明確ではありませんが、デザインがフラット化されたpngとして出荷された場合、css非対応のアセットはどのようにして派生するのでしょうか。理想的には、これらはデザイナーが最初の引き渡し時に提供するのではなく、開発者に時間をかけて単一のイメージからスライスしてもらうことです。
また、デザイナーがいくつかの大まかなスケッチと最初のコンプから始める間、あなたはおそらくあなたが部屋にあなたの開発者を置くことから利益を得るでしょう。これにより、開発者は迅速に対応できるだけでなく、設計上の制限を提示する声を開発者に与えることができます。
ワークフローを最小限に抑えるためにできることはほとんどありません
livereload.comを使用します。保存時にWebページを自動更新し、更新せずにCSSの変更を更新し、sass、less、coffee ...のスクリプトをコンパイルします。
フレームワークから始めるので、浮動小数点数、位置、サイズについて心配する必要はありません...私は3番目のフレームワークを記述しただけです http://devric.co.cc/lab/jelly/_presentation/ =
- または http://foundation.zurb.com のようなものを使用できます。
しかし、私のフレームワークの理由は、それを基盤よりも小さい、本当に小さな断片に分割したことです。各プロジェクト間で簡単に管理および置換できます。 config.cssを管理し、最後に縮小して1つのcssファイルに圧縮する必要があります（23ファイルのようなものを圧縮するには3秒かかるjuser merge app.cssを使用します）。
たとえば、デザイナーと一緒に座ってグリッドサイズを統一する必要があります。ピクセルパーフェクトが必要な場合は、グリッドサイズ内で設計してワークフローを効率化します。
ピクセルパーフェクトの場合は、psdの上に透明度80％のオーバーレイのサイトのスクリーンショットを撮るだけです。gimpを使用してpsdファイルを比較するか、jpgとして保存して、スクリーンショットを
デザインチームが正しい媒体で物事を提供できないのはなぜですか？フォトギャラリーの展示ではなく、ウェブサイトを構築しています。 HTMLとCSSを使用して、開発者と一緒にプロジェクトで直接機能させます。
これが実用的でない場合は、フォント、フォントサイズ、マージン、パディングなどを示すデザイナーからのスタイルガイドが必要です。空白が彼らにとって重要である場合、彼らは少なくともそれがどれほど大きいかをあなたに伝えることができます。