Photoshopを使用するWebデザイナーが開発者に送信する必要のある資料は何ですか?


10

私は主にWebおよびデスクトップアプリケーションを実装してきましたが、実際に公開されているWebサイトでグラフィックデザイナーとの共同作業を始めたのはこれが初めてです。この場合、グラフィックデザイナーはHTML + CSSではなく、Photoshopを使用しています。

デザインを実際に実装するために、最終的にどのような材料が提供されますか?

たとえば、PSDファイル以外のものを取得する必要がありますか?さまざまな状態(リンクホバー、アクティブ状態など)またはレスポンシブデザインはどうですか?あまりにも技術的な詳細を期待していますか?

助けてくれてありがとう。


2
遅すぎる質問ではないですか?これらは、作業を開始する前に回答しておくべき質問です。
スコット

その通りです。契約はすでに完了しているとの印象を与えたので、私は質問を少し浮気しました。私たちは、割り当てについては何であるかという予備的な議論をしましたが、私たちは両方ともこれを行う準備ができています。今こそ、技術的な観点から要件を伝えるべき部分です。
Tx3の

回答:


10

モックアップは、通常のために行くかを知るために、開発者のために引き渡されます。これは、ワークフローに応じて、PSDファイルから単なるフラット画像までさまざまです。私の経験では、すべての寸法、フォントサイズ、色を使用したフラットモックアップに加えて、スライスと使用した画像の完全なセットを渡しています。基本的に、プロジェクトを完了するために必要なものすべてを実現します。しかし、それは本当にワークフローに依存します。サイトのほとんどがCSSで行われている場合、他の情報が必要です(グラデーション値、ドロップシャドウ値、画像トリミングプリセット)。

ボタンの状態は常にカバーされる必要があります。それらの作成方法(完全にCSSまたはスライス)に応じて、すべての色、半径、サイズ、またはスライス自体を指定する必要があります。

レスポンシブデザインは少し異なります。ビューの設計はほんの始まりにすぎません。開発者も知る必要があるのは、サイトが徐々に「縮小」されたときの要素の動作です。表示されるオプションの数が少ない場合、メニューはどのように動作しますか?フルWebビューのリスト要素のみであるものは、モバイルビューの画面を劇的に変化させる可能性があります。すべてのホバー要素はどうなりますか(モバイルビューでは使用できません)?


4

@KMSTRの答えは80%のソリューションですが、デザイナーが本物のプロである場合、トランジションアニメーションが発生するタイミングやDOM要素をロードする順序など、細かい点について具体的に説明します。

デザイナーが上位20%にいる場合は、UXユーザーフローとワイヤーフレームをいくつか要求するか、それらが特に才能がある場合は、After EffectsまたはFlashで作成されたプロトタイプを使用してください。理想的には、それらは未指定のアスペクトを残しません。


3
「After EffectsまたはFlashで作成されたプロトタイプ」=または、できればHTML、CSS、JSで作成されたプロトタイプ。
DA01 2012

これらの詳細はすべて対処する必要があります。私はデザイナーの視点から基本をカバーしていました。私にとって、これらの詳細は、過去に私が何が起こるかを指示するのではなく、協調的に解決されてきました。それは開発者とデザイナーの仕事の関係に依存しますが、私は個人的にデザインとコーディング要件を組み合わせて理想的な結果を見つけることを試みて、前後に働きたいと思っています。
KMSTR 2012

レコードの@KMSTR、私はあなたに賛成しました;)
ニッポン

2

それはすべて、あなたがグラフィックデザイナーと合意したことに依存します。

一部のグラフィックデザイナーはPhotoShopしか知らないため、大きなPSDファイル以外のものを要求すると失われます。

一部のグラフィックデザイナーは、HTML、CSS、JSに精通しており、すべてを構築できます。

そして、その間にすべてがあります。

メディアを理解するWebデザイナーは、前者よりもはるかに前向きで、応答性が高く、ブラウザーにとらわれず、柔軟性のあるデザインを作成するので、後者に傾くことをお勧めしますが、前者も機能します。 UI開発者は、UIデザイナと密接に連携しています。


2

あなたは前もって期待されていることを述べるべきです。

私はpsdファイル、html / cssページ、または完全に動的なjquery / php / mysqlページを配信することが完全に可能です。何が提供されるかは、要求された内容によって異なります。

開発者がpsdのみを必要とする場合、それは私が提供するすべてであり、ページを作成するのは彼らの仕事です。ページが不要な場合は、ページを作成する手間がかかりません。

既存のWebサイトにドロップできる完全に機能するページを頼りにしているクライアントがいます。

自分に送信されたコードの使用を拒否し、自分ですべてをコーディングすることを主張する開発者がいるクライアントがいるため、psdファイルを提供します。

あなたの質問に対する確かな答えはありません。仕事が始まる前に何が合意されるかが問題です。


1

HTML、CSS、JavaScriptに精通したデザイナーが本当に必要です。私が働いている場所で、私たちは単一のphotoshopファイルを見ることはありません。デザイナーはページへのURLを提供し、すべてのUIをコピーし、ギャップを埋めてページを動的にします。

これが望ましい理由はいくつかあります。

1)デザイナーが何を望んでいるかについては疑問がありません。解釈する数字やメモがなく、触る前に最終製品がどのように見えるかを正確に確認できます。すべてのCSS値、すべてのJavaScript関数またはアニメーションがあります。

2)そのページでの作業に費やす必要のある時間を大幅に削減します。はい、まだそれを再配線する必要があり、おそらくバックエンドで山のような作業を行う必要がありますが、それによってフロントでかなりの時間を節約できます。

もちろん、あなたはいつもあなたが一緒に働くデザイナーの種類をコントロールしているわけではありません。しかし、photoshopだけを使用する場合は、すべてのボタンの状態を実際に取得し、デザイナーが必要とするアニメーションを確認してください。うまくいけば、そのような環境で作業する場合は、上に行ってデザイナーと話し、必要に応じて説明を求めることができます。


私はデザイナーにお金を払っているので、デザイナーとしてはできないこと、デザインの部分に集中してもらいたいです。必要な情報をすべて提供していただければ、対応いたします。デザイナーに通常何が必要か、それが技術的になりすぎたときに事前に知りたいこと それは本当にデザイナーのスキルセット+顧客が求めるものについてのようです。
Tx3

1回限りの取引の場合は、必ずソースPSDを入手してください。
ハンナ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.