The bridge between Design and Code

The never ending problem. On the one hand a designer creates the design, while on other, the developer needs to develop it. Where does the front-end coding falls upon? Is it a designer’s task or a developer’s task?

I will tell my story. About 9 years ago I started with front-end coding and designing and it was very easy to build my own static websites. However in the last 2/3 years web technologies have changed so much that I decided not to keep track anymore. Being a GUI/UI/UX designer, plus taking care of coding is simply too much.

Nowadays I face another problem. The developers that I hand over my designs are not able to translate design into code and my live websites ends up looking completely different. I’ve tried designing style guides, writing brief UX documentations, but to no avail. Things that seem evident to me that are not well executed, they don’t even notice. For instance if a button has a rounded corner of 3px, they might boost it up to 6px and say they do not see a difference. A quick 300ms background transition from default to hover state for them translates as a 1 second transition by default. Using sans-serif font for body text translates to them as Times New Roman at 12px. Increased kerning on subtitles for them does not makes a difference then a normal kerning.

I’m sure many of you designers reading this had faced these issues and feel empathic with me. But did someone solved this problem, built this bridge? I know there are some rare lads that are one-man-show and can do design + code, but I don’t want to spend so much time in front of the monitor. Perhaps some of you had found a solid developer who has a keen eye toward design.

So, what would you suggest me?

I would expect that the CSS (and enough of the HTML tags that it references to produce the design) would be the designer’s responsibility.

Adding that HTML into the code in a way that can generate the layout provided by the designer is the developer’s responsibility.

If the designer can’t produce basic HTML styled by CSS to produce their design then the developer certainly is not going to be able to do so.

If the developer cannot ensure that the HTML they are generating from their code matches the design requirements then they are not very good developers.

1 Like

That’s good reasoning @felgall. I actually have no problem writing HTML5 and CSS. I even wanted to install SASS in order to get the full power of variables and mixins, but here is where I got stuck. It was too much technical, especially the installing process, command lines and the like. That’s not my cup of tea.

So ideally, if the developer can set up the coding environment for me (installing SASS or setting up Bootstrap) I will have no problem to create the CSS architecture. In fact I would love to, because I really pay attention how I write the CSS architecture in order to be maximised for modularity. And for the HTML I really pay extreme attention to semantics.

But I guess it’s just me, who ends up working with developers who do not even know what SASS is and still use HTML5 tags in their code. Semantics is still an abstract thing for them.

This is a constant bug-bear to me at work – the number of supposedly intelligent people who just don’t even see glaring inconsistencies in documents, and can quite happily produce a report that has paragraphs in different fonts, with different line spacing, different indentation and in some cases in varying shades of grey, without even being aware of it.

How can you train people to have that kind of eye for detail? Is it a trait that some people will never be able to learn?

1 Like

In the light of this topic, I think I just found my developer http://webflow.com/cms A long-awaited tool that can replace front-end coding and CMS. Wuhuu! I think, by far, this is the only visual tool that does semantic code and has a CMS integrated. It’s s till not even in public beta, so I’ll need to wait and see.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.