Web mock up to Dev

I was curious what is the process/ workflow for a web project. Specifically if you as a designer created a mockup in a (.psd or .ai), and you need to hand it of to the developer.

Do you annotate the whole document like what is the… (font size, color codes, etc.) Or what other methods do you use, considering it could lengthy if you have a responsive website along with multiple pages.

Thoughts and feedback appreciated. Thanks.


“what is the process/workflow”

There isn’t one. Or rather, there isn’t just one. It will vary from project to project, team to team.

Common processes I’ve seen.

1. Send a large PSD to Dev

The designer spends all their time in Photoshop then sends the file to the developer to figure out how to turn it into HTML. This can work when the designer has zero development skills and the developer has a good enough eye for design that they can make the proper call as to what parts of the PSD need to be images vs. text vs. CSS, etc.

2. Create mockups, wireframes, style guides

This is like option 1, but tends to be used on much larger teams. A design team will create various detailed documentation (Photoshop files, wireframes, prototypes, style guides, etc) and then will send it to development teams to build from.

3. Designers are the developers and/or developers and designers work side by side

In some cases, the web designer is a capable front end developer. Or the web designer is on the same team as the front end developer. In this scenario, there’s a lot less formal documentation and a lot more collaboration and the design gets tweaked in the actual code that it will be delivered in.

and many others…

There are of course as many workflows as there are web design and development teams, but I think you’ll find most will fall into one of the above 3 camps.

Option 1 works well on very small teams.

Option 2 rarely works. But tends to be the ‘norm’ in fortune 500 companies that invest heavily in outsourced development and design.

Option 3 is what I enjoy the most and feel produces the most solid end results.

Source : Link , Question Author : Pminister , Answer Author : DA01

Leave a Comment