Today I am thinking a lot about what is it exactly that happens when a project goes from design and gets translated into a responsive design. I am talking specifically about going from tools that designers use such as Sketch or Photoshop to HTML, CSS (Bonus for using Sass) and JavaScript (if necessary).
I have written before at UXPin about some things that designers should be thinking about as they create designs. Now I want to address the other end of the equation.
How do you take those designs and turn them into a front-end code reality?
To address this, I think it is worth thinking about what can go wrong. What can get lost in translation and how does that manifest?
Here are a few ideas of what can go wrong:
The colors do not match the design
The spacing is inconsistent or incorrect
The typography has the wrong size, line-height or character-spacing
Image quality is poor
The project doesn’t look great at all breakpoints—mobile is the usual culprit
Hover or other pieces of interactivity are inconsistent
Alignment is off
Borders, shadows and other details are missing or wrong
This list is not meant to be exhaustive, but this is just a sampling.
So how do you fix this?
Well, if you are already in the middle of your development cycle, it might be worth taking a moment and considering if front-end code or a living (or coded) styleguide can help out. In some cases it might be worth the effort to save time throughout the rest of the project.
In other cases you might want to power through things and be thinking about how a design system might be created on the tail end, especially if this project is your responsibility to maintain.
However, just making a decision to create a design system is only part of the battle.
The real work is implementing a system that has the right balance of driving design intent along with actionable developer documentation.
An orchestrated set of colors—while looking great on your design system—don’t really help if an engineer doesn’t know how it is implemented.
This can lead to strange things such as hard coding the values in somewhere. In short, not maintainable.
You need something that hits the right balance. Something beautiful that shows off the colors as well as gives the specific Sass variable names (or token names) that a developer will use to adopt that color.
Things that are lost in translation is just one symptom of not having a solid Design Systems Engineer. Ideally you want someone that will balance out design intent with limitations of responsive design and front-end code. And someone that will bring the best quality product that serves the needs of the users to market.
