How to improve designer and developer work flow?

Question

I work in a small startup with two front end developers and one designer. Currently the process starts with the designer sending a png file with the whole page design and assets if needed. My task as front end developer is to convert it to a HTML/CSS page. My work flow currently looks like this:

1. Lay out the distinct parts using html elements.
2. Style each element very roughly (floats, minimal fonts and padding) so I can modify it using inspection.
3. Using Chrome Developer Tools (inspect) add/change css attributes while updating the css file.
4. Refresh the page after X amount of changes
5. Use Pixel Perfect to refine the design more.
6. Sit with the designer to make last adjustments.

Inferring the paddings, margins, font sizes using trial and error takes a lot of time and I feel the process could become more efficient but not sure how to improve it.

Using PSD files is not an option since buying Photoshop for each developer is currently not considered. Design guide is also not available since design is still evolving and new features are introduced.

Ideas for improving the process above and sharing how the process looks like in your company will be great.

Answer 1

• Make sure that the designer uses web-safe fonts. Many designers come from a print and/or rendered design background and are used to being able to pick from any font they can find. Web is different.
• The design should clearly indicate font type, size, weight and decoration on each text element.
• Sit down with your designer and show and explain what happens when text overflows the bounds of it's container and how important it is to identify which text-containers must be able to expand in the design.
• Re-use design elements. Links, buttons, panels, menu - what have you. It's the designers job to make sure that any new pages or components conform to existing design and uses the same look-and-feel components.
• Mark distances and paddings between component in pixels. A design is a lot like an architects drawing of a house. If you want pixel-perfect, the design has to indicate pixel-distance and dimensions.

Answer 2

The designer could put the font/color/line-height in the copy of the thing in the design. For example:

Tahoma Bold 20px / 26px #000

Answer 3

The solution is a design or style guide and if your team isn't ready then you are gonna have to rough it out until you are.

I would suggest drafting a design standards document, and iteratively revisiting it every set period of time.

If you know every button will have a padding of 10, you don't have to check with the designer everytime you implement a button.

Even if the first draft is wrong at least it's a start and it's easier to coordinate cross teams with a single file. This is why programmers use interfaces, and the designer can and will modify it over time. It's up to you to maintain your css as cleanly as possible, so making these tweaks over time aren't a terrible chore.

Also, if/when the designer leaves the team a solid style guide can be used and maintained by future designers.

Answer 4

Sigh, we have very similar problems. My developers sometimes spend 3x the time of the designer on simple things.

First off have the designers and the coders sit beside eachother for half a day or during the early stages of a new design/project. I find this helped tremendously and they largely solved their problems together. The designers once they realized how much work went into making everything 'perfect' were extremely willing to put in more upfront effort. You have to make them aware of the hardship as a developer to get their PSD / PNG so close in html/css.

Second there are some good tools to allow designers (non-coders) to view/preview CSS styles in real time. This is a great way for them to see how something is going to look in a browser and this is how you can get your designers to easily construct "style-guides" even when they aren't themselves css experts.

http://www.panic.com/coda/

http://www.panic.com/coda/img/screenshots/css-screenshot_02.jpg

Answer 5

I second the style guide. One thing though that was not clear is if the design is shipped as a flattened png, then how are non-css-able assets derived? Ideally these would be provided by the designer at time of inital hand off, rather then have your developers spend the time slicing them out of the single image that they have.

Also you will likely gain from having your developers in the room while your designer starts with some rough sketches and initial comps. This gets the developers up to speed quickly as well as giving them a voice to present limitations with the design.

Answer 6

Few things you can do to minimize your workflow

• use livereload.com : auto refresh your web page on save, update your css change without refresh and script compile for sass, less, coffee ....

• start with a framework, so you don't need to worry about floats, positiong, sizes... i just wrote my 3rd framework http://devric.co.cc/lab/jelly/_presentation/

• or you can use something like http://foundation.zurb.com, their one is professional.

but the reason for my framework is that i broke it down into really small pieces, smaller than foundations. which it can be easily managed and replaced between each project. you just got to manage your config.css and do a minify at the end to compress it down to one css file ( i use juicer merge app.css, which takes 3second to compress something like 23 files. )

for example, you should sit down with the designer and unify the grid sizes with them, if pixel perfect is needed, this way they will design within your grid size to steamline your workflow.

For pixel perfect just take a screenshot of your site in 80% transparency overlay on top of psd, you can use gimp to compare psd file, or just save as jpg, and compare screenshot with the

Answer 7

Why can't your design team deliver things in the correct medium? You are building a website not a photo gallery exhibit. We make our use HTML and CSS and get them working directly in the project with the developers.

In the cases where this is impractical, we require a style guide from the designers showing things like fonts, font sizes, margins, padding and such. If the whitespace is important to them they can at least tell you how big it is.