The designer who doesn't code

The Should designers code debate is nonsense yet popular. The search query returned 27,800 results.

I've been long waiting for a case study which speaks for itself. Let's see it.

Comps

Yes, in 2019 we still receive comps from designers. Either coming from Photoshop or Sketch, wrapped or not into Zeplin — for the modern front-end developer they are in the same way unusable.

One has to slice, calculate, convert pixels to elastic measures like in the nineties. Has to figure out the responsive grid structure, the responsive typography, all the reusable design elements — code them — and start adding all the exceptions every comp comes with blowing the source code and the project.

If no design thinking there is no design system and code, project, budget, people gets bloated.

The task

It sounds simple: list the latest posts on the homepage in a responsive way. On large screens there should be 8 posts displayed 4 in a row, on medium screens 6 posts / 3 in a row, on tablet 4 posts / 2 in a row, on mobile 2 posts each on its own row.

The comps are blurred out to protect the designer and the company. The black and red boxes are ad placeholders, and, there are gray vertical lines between columns the blurred screenshots can't show.

The comps were replicated using mockups. You can check it live on Codepen to better sense the task.

Problems

Since the designer doesn't code ...

The designer doesn't knows content cannot be get in a responsive way only displayed in a responsive way.

... and creates comps which makes the developer to fetch all 8 posts on the back-end and hide some of them on the front-end — such a performance waste — put to be supported by those devices which have the poorest resources.

The designer doesn't knows the CSS Grid specification

... and spices up the design with vertical lines separating the columns. CSS Grid has no support for grid gap styling and a nasty hack has to be used to accomplish this original design idea.

The designer doesn't knows exceptions are painful and bloat the source code

... and inserts an ad between the rows. The ad has different dimension and positioning which breaks the grid. An exception has to be added to support this design decision bloating the code during development time and later during maintenance.

Solutions

If the designer were coding the following design decisions were taken:

1. Do not hide posts on smaller screens — wrap them into a navigation element. This way the resources used to get all posts on the back-end would have been not wasted on the front-end.

2. Forget the vertical column separator lines. They can't be implemented with current best practices and they need workaround. Let form follow function even if function is coding standards.

3. Put that ad elsewhere. Combined with 2.) it's dangerous. Moving out of the grid will spare around half of development time and budget.

With these practical design decisions the implementation would have been easy: use the CSS Grid. Time spent would be from minutes to around half an hour.

With vertical borders the CSS Grid technique — used across the site up until now — cannot be re-used. A research has to be done to see if the specification added the grid gap styling feature recently, or if there is a polyfill, or a nice workaround.

It turned out only a workaround exists which won't fully solve the problem since the suggested bordering is ... complicated: it applies to middle columns treating columns at the edge as exceptions.

Time spent with research and workarounds: around an hour.

To implement the comp a loop has to be created over grid elements adding border only where necessary. For that I've already had a component built on Flexbox. Importing, adjusting to this current project took around half an hour. If it had to be written from scratch it would take at least an hour in plus.

Inserting the ad between the posts is way more complicated. It's about adding exceptions to an existing well working code. The back-end code displaying a post list has to be modified to insert the ad; on the front-end the grid has to be re-drawn and re-bordered.

The final front-end code is so ugly it is worth a look.

Time spent: around an hour.

Numbers

Pain

This project has a good few dozens of sections like this Latest posts depicted above. More than half of them is designed in the same unimplementable way. Or, in the same costly implementable way.

Remember: on this component alone we've spent at least 2.5-3 hours instead of half an hour. Yes,

5 times or 500% more than usual.

That's immense. And if you add them up, and consider the long term technical debt you would immediately know the answer for "Should designers code?".