NOTE: I'm perfectly aware that this can be subjective, but I think it's a very common task and any advice is potentially useful for other readers. Feel free to edit the title and/or question, if it'll make it less subjective.

I am a frontend developer and I convert designs into web/mobile applications.

One approach is to export Photoshop's mockups to HTML but it looks like Photoshop exports mostly using tables for layout, which is not at all acceptable in a modern web application (and even less so on mobile).

Also, it can be very tricky to match colors (unless using a color picker, not even Brackets [Linux] helps with this) and sizes (responsive web - bootstrap, et al.).

What is an effective approach, used by a graphic design, when working with a dev team?


Interesting question, and it is an oportunity to debunk the use of Photoshop.

Yeap, Photoshop sucks at exporting elements. Almost all graphic designer's tools does. Either use tables or use absolute positioned divs or use an irrational ammount of classes and id.

What is an effective approach used by a graphic design when working with a dev team?

The real answer is inside the question. Working as a team with a dev team, so ask them!

As a lone ranger designer is easy to think that you can make a cool design, and then someone will solve the problems you proposed. Yeap sometimes designers propose things that are not optimal.

The designers can think that their photoshop file is pixel perfect. But the nature of a web design is totally diferent of a print design.

A printed design is delivered as a final form, so all you did or did not is delivered as is.

On web the things that you deliver are the instructions on how the clients computer should re-create based on the instructions you provided.

This part is where a web developer comes into play. How to optimize the instructions so the result is re-created as exact as possible as planned.

So the answer could be depends.

For example, if the dev team is using a framework, for example bootstrap, as a designer could base the design on how the bootstrap looks like. then the design is implemented fast.

The same if you are adapting for example some template for a CMS.

This are two cases where the designer needs to know the tools the other developers are using.

Then you probably have a low resolution mockup on Photoshop, but at the end the elements need to be provided on a more specific form, image size, logo format, etc.

If you have the case where the developers are not working close to you, you can just deliver the psd file and they will take whatever they need, hopefully they will stay in touch with you to ask aditional material.

| improve this answer | |
  • since I need to discuss this with the designer, are you aware of the fact that structuring it the bootstrap way (for example), allow a better export (no tables for example)? – dragonmnl May 27 '16 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.