: 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

@Sue6373160

We are in similar situation working with PSDs to produce high fidelity web sites and our approach was to build an app to visually mark up layouts to quickly create a comprehensive spec. We're still fine tuning it, but if anyone is interested I'll be happy to share a link once it's ready - trying to keep blatant self promotion in check here.

Vote Up Vote Down

@RJPawlick971

As someone working with a developer I think it would be really useful to share with them the PSD in Creative Cloud (and I don't only mean it from being a Product Manager at Adobe) because not only can you enable people to download the PSD but you can also see at a single glance all the fonts/font sizes, the colors, the gradients used and use measurements within the browser to get values out (and the text) and collaborate better from there on.

Here is more info about this: helpx.adobe.com/creative-cloud/help/extract-css-images-psd-files.html

Vote Up Vote Down

@RJPawlick971

"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.

Vote Up Vote Down

@Steve758

I agree with Matrosov Alexander, and being a newbie here cannot comment, but have something to add.

Many web designers have different workflows. In my experience it is best to ask the developer what their preferred documentation would be. For example, as a web developer if I cannot be directly involved when UI decisions are made I like to see storyboards/thumbnails of how elements interact or animate. Most designers I work with already create these so they just take screenshots or pictures of them and send it with the design.

Vote Up Vote Down

@Ann6370331

As a developer I can say that you only need to send a file to a developer and be sure that developer has appropriate software to open this file like photoshop or other.

About fonts:

Of course if you use some main font you can describe it, but if developer has a psd a developer can check it without any your comments in case if layer represented as a text not as just a graphic layer.

About #colours

As in case with fonts I think it's more simpler for developer check it using photoshop.

Just one note here that I've noticed during the work. For example photoshop allows designers create some layers with float value like 33.33 pt and etc. But for example if we says about web site or mobile application we can't divide for example layer with width 100 px into 3 parts, just if some part will have one extra pixel, like 33, 33, 34 or any other order of these values. Just be aware about this things.

Vote Up Vote Down