What materials should a web designer using Photoshop send to a developer?

Question

I have been implementing mainly web and desktop applications and this is the first time that I actually started working with a graphic designer on a web site that is for public use. In this case the graphic designer is not doing HTML + CSS, but using Photoshop.

What kind of material is normally provided as an end result in order for the design to be actually implemented?

For example, should I get something more than just PSD files? How about different states (like link hover, active state etc.) or responsive design? Am I expecting too technical details?

Any help appreciated.

Answer 1

A mock-up is usually handed over for the developer to know what to go for. This can vary from PSD file to just a flat image, depending on the workflow. In my experience, handing over flat mockup with all dimensions, font sizes and colors used plus the full set of slices and used images. Basically eveything that is required for finishing the project. But that really depends on the workflow. If the site is done mostly in CSS, other information is required (gradient values, drop shadow values, image cropping presets).

Button states should always be covered. Depending how they will be made (purely CSS or slices) you should provide either all colors, radii and sizes or the slices themselves.

Responsive design is a bit different. Designing the view is only the start. What the developer needs to know too is how elements should behave when the site is gradually "shrinked". How will a menue behave if fewer options are displayed? What is only a list element in full web view can change the screen dramatically in mobile view. What happens to all the hover elements (can't use them in mobile view)?

Answer 2

@KMSTR's answer is the 80% solution, but if your designer is a real pro, he/she will be specific about small details like when transition animations should occur or what order DOM elements should load.

If your designer is in that top 20%, ask for some UX userflows and wireframes, or in they're especially talented, a prototype made in After Effects or Flash. Ideally they leave no aspect unspecified.

Answer 3

It all depends on what you agreed upon with the graphic designer.

Some graphic designers don't know anything but PhotoShop, and will be lost if you ask for anything other than a large PSD file.

Some graphic designers are well versed in HTML, CSS and JS and can build the entire thing for you.

And then there's everything in between.

I'd recommend you lean towards the latter, as a web designer that understands the medium is going to produce designs that are much more forward thinking, responsive, browser agnostic, and flexible than the former, but the former can work too as long as the UI Developer is working closely with the UI designer.

Answer 4

You really want a designer who is well versed in HTML, CSS, and Javascript. The place where i work, we never see a single photoshop file. The designer gives us a url to the page, we copy over all his UI, and then fill in the gaps to make the page dynamic.

There's a few reasons why this is preferable:

1) There's no question about what the designer wants -- there's no interpreting numbers or notes, you see exactly what the finish product should look like before you even touch it. All CSS values are there, every javascript function or animation.

2) It cuts way down on any time you need to spend on working on that page. Yes, you still have to rewire it and maybe do mountains of work on the back-end, but it saves you a considerable amount of time on the front.

Of course, you're not always in control of the kind of designer you work with. But if you're with one that only does photoshop make sure that you really get all the button states, and know which animations the designer wants. Hopefully, if you work in that kind of environment, you can just go up and talk to your designer and ask for clarification as you need it.

Answer 5

You should state what's expected up front.

I'm fully capable of delivering psd files, html/css pages, or even fully dynamic jquery/php/mysql pages. What is delivered depends upon what is requested.

If the developer only wants a psd then that's all I deliver and it's their job to create the pages. I would never go to the trouble of building pages if they aren't wanted.

I have some clients that rely on me for fully functional pages which can be dropped into existing web sites.

I have some clients who have a developer who refuses to use any code sent to them and insists upon coding everything themselves, so I deliver psd files.

There is no solid answer for your question. It's a matter of what is agreed upon before work is started.