Hello all.
I am doing a lot of conversion rate optimization work at the minute, which inevitably involves working with other designers’ design files. Whether they are produced in Figma, Sketch, Adobe XD or (god forbid) Photoshop; they all seem to share one thing in common, they seem designed to infuriate developers.
Are Designers Trying to Annoy Developers?
These files are riddled with inconsistencies in everything from color use to typography and margins. Then there are the inevitable layouts that are unnecessarily complicated to create.
I wouldn’t care so much if this didn’t directly impact the projects’ profitability and delivery speed. But I have had more than one project held up at the moment because developers have to pick through convoluted code created to accommodate a designer’s whim.
Developers have to spend hours either correcting all of the inconsistencies or, worst still, coding them in, no matter the impact on things like performance or maintenance.
Look, I can forgive missing elements in a design file. For example, I have no problem if the designer hasn’t mocked up every button state or responsive size. These are things that are often easier to fix in the browser.
Stop Showing Your Ignorance
However, I cannot abide design files that demonstrate an utter ignorance of how websites are built!
I have said before that I believe designers should be able to code. I am not saying they should code, but they need to understand how a website is built.
This knowledge is not just important from a theoretical point of view. Knowing this stuff means you can create design files that actually help developers, not hinder them.
How You Can Help Your Developer
For a start, we as designers need to ensure we are consistent in using colors and typography. We have no excuse as most modern design tools have styles built-in that we could use.
Next, we need to think in terms of reusable components. I am not saying you need to create an entire design system for every project, but we should use the tools baked into our software to reuse components across pages, especially with things like headers and footers.
Finally, and probably most importantly, designers should stop positioning elements ‘by eye’ but instead position elements in the same way they will be positioned when they are built.
Stop Positioning Elements By Eye
Although ‘absolute positioning’ is possible in code, it is rarely a good idea, especially on a responsive site. Instead, elements are positioned within a grid made up of containers.
Each container has its padding and margin and rules in terms of how it behaves and how elements within it behave. This is known as the box model in CSS.
Containers can be nested to create complex layouts, and elements are positioned based on a grid, not arbitrarily based on what looks right to the designer.
Again modern design tools encourage layout this way, but most designers ignore it. For example, Figma allows you to build entire pages using an auto-layout feature that mimics how developers code the page. If only designers used this feature, rather than just dropping elements on a page, it would save time and money.
In short, designers need to design like developers. We must use modern design packages’ tools to ensure designs are easy for developers to build.
Beware You Don’t Get Left Behind.
The problem is that you have to think differently and learn new approaches to use these features. It is easier to just do what you have always done and let the developers sort out your mess.
However, this is a dangerous road. Younger designers who learn these features in modern design tools will come along and help projects deliver faster and more efficiently. You will quickly become left behind.
I would say I am sorry if this is coming across as me criticizing you. But to be honest, I am not sorry, and I am criticizing. The idea that there are designers who don’t even understand the basics of how a webpage is built and structured blows my mind. It is like calling yourself a painter but never having picked up a brush. You have to know the medium you are designing in, and in our case, that is code.
Thanks,
