Hey!
I’m an Art Director and I work with a number of international Devs. Lately, we’ve been having trouble getting what is produced by the Devs to match what I, the Designer create in Photoshop. Aside from creating prototypes, doing coding myself, etc, if possible, I’m curious - What is the best way to hand off work to the Developers? I’ve done it a number of ways before at past jobs. I’ve sent them pngs of the layout, and then created each asset (images, custom buttons, etc) myself to go along with it, I’ve sent them a PSD with everything in it and just allowed them to create the assets themselves. I’ve also heard that Illustrator is a better way to design layouts. I’ve created layouts in both Photoshop and Illustrator, as I feel each have their strengths, but feel like if I were to pick one to use, it would be Photoshop. So basically, I’ve got conflicting viewpoints coming at me from different angles and I’d just like to find out what other Designers are doing and what they feel is the best way to hand off work to the Devs - what format, what programs, etc. (of course I’d stay in the loop with them after, so it’s not an absolute hand-off) I’ve tried to research this online, but keep running into the same things of “What’s the difference between a Designer & a Developer” - things like that that I already know, but not a lot of solid help otherwise. Anyway - Thoughts? Any help is greatly appreciated!
Thanks!
Ben
You can’t expect a developer to know the appropriate CSS to use to replicate your design. Developers will concentrate on getting the pages to function correctly. It is the designers job to get the page to look the way they want it to.
Even then, it may not be possible to translate an image into a web page.
Of course if you are expecting the impossible, or for that matter something that adds an unusual amount of complexity, the designers should let you know so that a compromise can be reached.
The point is, you may be able to create an amazing graphic that would look great in print media, but the web is not print.
Great question, @benjithegreat. Without knowing what detail you are putting into your designs, here are some general comments.
A PSD or AI file has little to do with a website, and that’s often the first problem. I get PSDs and it’s clear that the designer is not tuned in at all to the realities of the web. For example, there are design elements that are impractical for the web. There’s no thought for what will appear on hover, focus etc. There’s no thought for responsive design, and how the layout will adapt to various screen sizes. Sometimes there are images/decorations cut off on the sides of the layout, with no thought for the fact that the browser canvas is basically infinite, and those elements would end nowhere on a wide screen etc. etc.
I also find it a huge pain to have to extract images etc from a PSD. I prefer each asset to be sent separately, but that’s possibly just me.
Anyhow, the more you can learn about how web design works—CSS and its constraints, as well as the basics of JS etc.—the better you’ll be able to design realistic layouts that a web dev can work with.
And of course, don’t just send a design without discussion beforehand. Ideally, there should be a lot of collaboration before the design is created, discussing the needs of the content, UX, functionality, etc. etc.
Hope that helps. 
Working with a lot of designers I prefer assets to be sent separately, eg:
- All image assets, sized appropriately, optimised and ready for use
- A list of key colours, font usage + font source(s)
- A list of “suggested” responsive breakpoints
- Various wireframes, style tiles, mockups etc to help me write CSS presentational style to cover common devices
- Web ready content for testing
And as ralphm said being involved right from the start of a project is always helpful - in fact when that’s been the case it’s not uncommon to have a lot of the site structure already in place during the design stage anyway.
Thanks all! This advice and information is very helpful! I will take all of this to heart and put it to good use. Thanks again!!
Ben
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.