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

I'm hardly qualified to answer your question as I have very limited experience with projects done in larger teams. But I will give you my opinion anyway.

 

Since you are referering to conflicts between, and problems in, the flow between designers and developers I am asuming you are talking about UI elements, typography and layout, rather than branding elements (which are almost exclusively the designers domain)

I would say that designers today should be expected to produce that sort of work directly in the browser instead of PhotoShop and Illustrator which IMO should mostly be used to produce and refine imagery (& the branding elements mentioned before).

Here's the reasons why:

• Layouts has to be fluid today and work on all sorts of screen sizes. A PSD is NOT fluid.
• Simple graphic effects like rounded corners, gradients and shadows can (and should) be created with CSS today so there is no need to create buttons and similar UI elements in PhotoShop/Illustrator.
• Typography has many restrictions on a web page. First of all the license: There is nothing worse for a developer than to receive a PSD with a font that is not allowed for embedding. On a webpage most font-embedding techniques means that the font is downloaded by the client while loading the page which is the reason for the restrictions. Designers who does not understand web typography because they create everything in PS will always make things hard for developers.

Finaly a word about sending work abroad to save money.

Like in most other trades; you get what you pay for

Edited August 31, 201511 yr by Nillervision

Firstly - there is no such thing as pixel perfect in web, and while I've built many designs that have originated from Photoshop the design tool itself is highly lacking as it is a very inaccurate representation of the medium that final product will live in.

 

For a print design things are easy - you have a fixed canvas.

 

In the web you do not, you have a vast array of screensizes and more to come. We also have to deal with the fact that the content is highly likely to change, a responsible developer will build a UI that is archtiected in such a way that it can adapt to the screensize and content. This in iself renders pixel perfect impossible and any attempts to force it to work are futile. We also have to ensure that the code is well structured and able to scale up or down - With this in mind I regularly change aspects of the design if it would save us having to write bad code - some things are just not possible to write in a responsible manner because of browser limitations.

 

The ultimate responsibiliy is to build a product that maximises the clients needs and a part of that is keeping bugs and maintenance to a minimum, minimising page load time. Of course making an accurate representation of a design is paramount and we should show attention to detail. The problem is when designers do not understand how the web works.

 

We used to outsource a lot of our designs but we had endless problems with designs done by print designers, and requests from them which were just not practical. Now everything goes through our in-house designer who over time has built up a great understanding of designing specifically for web applications.

 

One final point - just because something might be possible does not mean that it's the most sensible route to take. It's upto a designer to callaborate with a developer during the design process to get feedback. Don't just create an entire design and hand it over, unless you have a clear understanding of UI development. Ideally you work side by side with a developer and develop in the browser. Then only use photoshop for what it was intended for - photo editing.

 

I totally agree with Nillervisions points too.

Edited August 31, 201511 yr by rbrtsmith

This is also a great article related to the discussion: http://jonyablonski.com/2015/front-end-principles-for-designers/

Thanks for the info and advice Niller & Robert - much appreciated! I will definitely take this info to heart.

So, I guess this brings me to a couple more questions, if you don't mind:

- Since it seems I may be a bit behind on the times here, do you know of any resources that I might be able to get myself up-to-speed on some of this stuff? I have general Design skills and have been a Designer for about 20 years now, but in a multitude of fields - not strictly web.

- Is there any way of designing websites without coding? Or does it always come back to that? I've taken a number of classes over the years and the coding seems a little different than the way my brain works.

Whatever advice you can offer would be helpful - Thanks again!!

Ben

I believe the best way to learn to design for the web is to learn to code in it - at least HTML and CSS to understand the limitations, they shouldn't be too difficult with the right resources and time. There's no need to learn any programming such as JavaScript.

 

Alternatively if you design with a developer so you're getting consistent feedback, that should help you learn too, but IMO the first is the better option.

 

https://teamtreehouse.com/ is a highly recommended place for you to start.

Awesome - Thanks much Robert! I'll look into this!

- Is there any way of designing websites without coding?

There has been developed many tools and frameworks in the attempt to do this but they always generate code that is poorly formatted, bloated and hard to maintain. In a way it is ironic that in a time where you can produce a complex 3D animated movie without writing a single line of code you can not do the same with a relatively simple media like a website. Web hosts often offers CMS solutions that you can install with a mouseclick and you can also install readymade themes for these systems without coding. But if you want your own custom design there is really no way around coding.

Edited September 1, 201511 yr by Nillervision

- Is there any way of designing websites without coding? Or does it always come back to that? I've taken a number of classes over the years and the coding seems a little different than the way my brain works.

 

"Code" - at least HTML/CSS - is the medium of the web in which we work so it's logical to learn about that to help with design decisions, plus of course it's important to get into the mindset of designing for the content!

I'm coming from the same angle as the solid advice from the WDF regulars. You don't need to learn so much that you can code the entire thing yourself (although it's no bad thing) but you will certainly need to know what's possible with html / css / js in order to breathe life into your designs. The same goes for any web related role; SEO specialists must know some html, backend developers must know some of the designers role, even social media bloggers must understand open graph and how it can be applied.

 

Out of curiosity do you design one desktop concept or do you make a few showing how you would like it to appear on a mobile etc?