Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Recently, we worked with a graphic designer (arranged by the client) to provide the skin for a Django+Bootstrap application we had built. The designer provided a series of static images of the new layout, along with a document describing some technical attributes (font sizes, colours, a few dimensions etc).

It turned out to be incredibly time consuming to implement this. Although the whole site was basically a front page, an index page, and half a dozen detail pages, I spent at least 5 days just implementing the CSS and HTML changes. So I'll go out on a limb and call this The Wrong Way.

My basic approach was:

  1. Compare the static image and current rendering, and notice a difference.
  2. Guess what change would be need in the CSS/HTML
  3. Make that change
  4. Go to step 1.

Some of the particular issues were me not understanding that the design included a change from 8 columns to 12, some images provided in the wrong format (.png's can render differently on different browser/platform combinations), hassles trying to undo Bootstrap's styling, the usual CSS wrestling to achieve pixel perfect rendering etc. And occasionally I had to reorganise the HTML templates to get a certain behaviour.

What's the right way?

share|improve this question
5  
+1 Running into this myself, fantastic question –  Brandon May 29 '13 at 2:16
1  
Seems to me like you need a better designer. Someone that understands the web. –  Mark0978 May 30 '13 at 20:32

4 Answers 4

In my company, there are a few people specialized in this job.

They are designers. And they know HTML. They can be a bridge between the designers and the front-end engineers; which they usually are. This way, we just have to integrate their HTML.

This is a hard job. There's a reason sites like "PSD to HTML in 24h" work well. The solution in our company is to have people specialized in doing this. For us, working with the HTML is a breeze.

There's no silver bullet.

share|improve this answer
    
Interesting - mypsdtohtml.com . Wonder what the HTML is like - and whether they can handle things like Django templatetags. –  Steve Bennett May 29 '13 at 13:17
1  
@SteveBennett they have a portfolio :) Why do you want them to handle django template tags? They have a PSD, they give you an HTML. I don't see what more they'd do. You don't expect them to integrate your code, do you? ;) –  Florian Margaine May 29 '13 at 13:23
1  
Ha, do you put your average quality work in your portfolio? :) Anyway, if they converted a bunch of static images into a bunch of static HTML pages...it's still a fair bit of work to turn those into dynamically generated pages, decomposing them into nested templates etc. I wonder what kinds of sites this process would actually be useful for. –  Steve Bennett May 29 '13 at 13:26
1  
@SteveBennett, I feel like decomposing fully-build html pages into dynamic templates and partials would be relatively easy -- it's essentially a straightforward code refactor. For most designs, I think would be a much easier job from the standpoint of a programmer than building up the html/css directly from the psds. –  Ben Lee Jun 3 '13 at 18:27

I'm not sure there is a "right way", but a reasonably effective way of cooperating with a designer is to first build an unstyled system that uses templates and allows for the easy interchange of all templates. Then, once you have a functional-but-unstyled (or minimally styled) interface, you hand the results over to the designer for styling.

A decent example of this sort of design pattern would be jQueryUI (http://jqueryui.com/)

share|improve this answer
1  
Yeah, one mistake we made was building unhelpful layers of skins. 1 Raw bootstrap, then 2 minor tweaks, then 3 a fairly rough skin for a demo, then 4 the professional skin - which looked absolutely nothing like step 3. Some of that extra CSS really started to get in the way. –  Steve Bennett May 29 '13 at 7:17
    
mistakes get made, just make sure you learn from them, in general, try to keep things as simple as possible while staying modular :) –  Evan May 29 '13 at 7:29

First, I have to admit that I never have worked with web front ends so far.

But I think it might be good practice for you and the designer to write prose of how the final design should look like. That way you can be more sure it is consistent, because it would smell if you were describing different tables for every page. Prose can make your implementation easier, because you are actually writing code, which is closer to your implementation than images.

Also try to make the designer focus on components, not whole pages. If you get the components of a page right, then composing them to the whole page is a much easier step.

share|improve this answer
    
+1 for "focus on components, not whole pages". Good idea. –  Steve Bennett May 29 '13 at 7:20

I am facing a similar problem. i have the idea that tools like Greasemonkey or Tampermonkey can be used for that purpose. Just last week, i asked for comments about this idea: How to outsource the UI of a dynamic Web application?, but didn't get satisfactory responses.

With these tools you can inject CSS, HTML and Javascript to a page. In my idea, you give the URL of the working site to the designer and expect Greasemonkey scripts in return. Theoretically you should be able to integrate those very quickly to the existing site. This way, it will be the designer's job to write the HTML and CSS and make the site actually work. This requires much more programming skills on the designer side though.

I know that this idea requires much elaboration. But I haven't tried that yet and don't know if anyone else is doing this. There may be some problems with the implementation.

share|improve this answer
2  
Sorry to generalise, but a lot of 'graphic designers' don't know HTML and CSS, they know Photoshop, Corel/Illustrator, InDesign, Quark, etc. This is backed up by the OP saying the design was delivered as a 'series of static images'. If they did know HTML and CSS, they would be 'front-end developers'. –  David HAust May 29 '13 at 6:21
    
In this case, the designer claimed to know a bit of CSS and HTML, and expressed parts of the design that way (eg, #abc colours) but not enough to make a big difference. And some of the terms (eg, "padding") ended up being ambiguous - not their CSS meanings. –  Steve Bennett May 29 '13 at 7:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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