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.

  • I guess you may get more answer posting your question on the User Experience pages at: ux.stackexchange.com/?as=1
    – NoChance
    Commented Mar 26, 2012 at 23:06
  • While I don't think the question entirely fits with UX SE (UX != UI), this UX SE question does have some workflow tips that could be applied to your situation: ux.stackexchange.com/questions/18069/… Secondarily, when I've worked in dev teams where designers' deliverables were big ol' image files (sub-optimal), they also had to deliver a list of font sizes and padding/margins so as to limit the fiddling time.
    – jcmeloni
    Commented Mar 27, 2012 at 0:28
  • You're lucky: in small startups, both areas are often done by the same guy.
    – wildpeaks
    Commented Mar 27, 2012 at 16:10

7 Answers 7

  • 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.
  • pap, thanks for the reply. We are using web safe fonts (mostly Arial) still many times the font looks a bit different in Photoshop than it is in the browser. Thanks for the reuse and labeling size on elements
    – mbdev
    Commented Mar 27, 2012 at 14:56
  • 2
    @mbdev: You're probably seeing the difference between css/web font smoothing + anti-aliasing vs photoshop. Commented Mar 27, 2012 at 17:21

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


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.

  • If you are also working with designer in making web pages. Can you write a bit how the process works at your work place? I am curious how it works at other companies
    – mbdev
    Commented Mar 27, 2012 at 14:54

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.




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.

  • Yes, the assets are delivered separately. The designer is part of the team.
    – mbdev
    Commented Mar 27, 2012 at 14:58

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


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.

  • I think most designers use Photoshop as design tool. Usually than the task to convert it to css/code is easier for developers.
    – mbdev
    Commented Apr 13, 2012 at 5:08
  • Not if you define their deliverable as working html / css. Commented Apr 13, 2012 at 11:39
  • That is why there are graphic designers and web designers. If you are talking about web designers than yes, you should get HTML and CSS.
    – Megacan
    Commented Jan 23, 2014 at 19:20

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