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:
- Lay out the distinct parts using html elements.
- Style each element very roughly (floats, minimal fonts and padding) so I can modify it using inspection.
- Using Chrome Developer Tools (inspect) add/change css attributes while updating the css file.
- Refresh the page after X amount of changes
- Use Pixel Perfect to refine the design more.
- 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.