Stop designing pixel-perfect UI — let the developer do his job

There are different design/dev team cultures. Working with those that have pixel-perfect design-to-dev policy totally drives me crazy. It just shows how designers arrogantly refuse to accept that UI is not a static picture, and developers absolve themselves of responsibility of the visual outcome. That’s how we end up with 12px paragraph font size on Mega screens, footers in the middle of the screen (but precisely 36px from the last block), and yes, that 992px container on 27’’ retinas.

Pixel-perfection in the “Sketch” phase kills designers' creativity because instead of solving the real problem they spend hours on making sure that all spaces are multiple of 6px (or whatever grid system you use). It also kills developers' creativity — instead of switching on their sense of taste, they copy-paste pixel-by-pixel. Design in Sketch and the result in Browser will never look the same! Sketch, Figma, Invision (any design tool) output will always remain more static compared to the “coded” version, it’s impossible to consider all screen ratios, every typeface renders, to prototype every single interaction. I don’t mean they should not be used, but only until it makes sense. It makes sense to visualize a new complex interaction, layouts structure on different devices, a flow that needs to be tested. But no one in his right mind should make a prototype with 300 views, 13 different screen sizes, every action motion, etc..

As soon as the basic layout and the visual style are set, designing should be continued in code. The question is how. Most the designers can’t code, or even more dangerous — they learned the basics (Bootstrap and 12 columns grid) and think that it ends there. A lot of Frontenders (especially “The True Engineers”) don’t have much or visual taste and afraid to take design decisions. And too often they don’t want to spend time together.

There is no silver bullet here, every team should adjust their work processes to complement the team member’s strengths. I believe in every good team there should be a creative coder — it can be a designer who deeply understand frontend (so that he can write such pieces “font-size: calc( 16px + (24–16) * (100vw — 400px) / (800–400) );” (for responsive typography)), or a frontend developer who can make a decision to write a piece like “font-size: calc( 16px + (24–16) * (100vw — 400px) / (800–400) );” (the same) without designer telling him (he probably don’t know that it’s even possible).