6 Things Designers Can Do To Make Devs Happy

For thousands of years there has been a war raging between developers and designers.

Designers build for one, maybe two, screen sizes, developers build for every screen size between 320px and >9000 px. Designers know how colors affect our emotions. Developers don’t. Designers use shadows and contrasting colors. Developers just draw a border around it. Hey, we have our differences.

As a developer, I often feel like I’m the “last in the chain” of work, which can be frustrating especially if I’m not consulted during the design process.

“You can just stack those for mobile, right?”

Here’s an open letter to the designers of the world on six little things they can do to make us developers happier.

Make an Assets Folder

Don’t make me export everything, please. Removing shadows, rearranging items, and figuring out how to select that SVG (the whole thing not just the pieces) seven layers deep with its own fill can be a challenge, actually. I’m not a Figma god, but I feel like I’m quickly becoming one.

It feels so good to get handed a folder of assets that are cropped properly and compressed to reasonable sizes. It lets me dive straight into the building, which I love.

Structure and Name Everything Consistently

If you know the Client-First naming system even better. If not that’s fine as well but just as devs are ridiculed for Div 3448 in their HTML, designers should be organized too. Aren’t you guys and gals paid to make things look ~~ ✨beautiful ✨ ~~ ??

Designers may know how whitespace can breathe life into a layout, but do they know that in development whitespace lives two lives as margin and padding? These are not the same! Having a basic understanding of margin and padding goes a long way in making a developer's life better. Designers should know that a margin is a space around an element's border, while padding is the space between an element's border and the element's content.

Provide a Styleguide. Consider Actually Using the Style Guide

This one got to me. I now require all my clients to ship designs with style guides. This is mentioned up front. It forces the designer to QA his or her own work as well, which helps me not run into issues where I’m trying to decide between using that 31px text or that 33px text.

Modern design software all comes with ways to manage styles and swatches. Please use them. I have turned down clients because designs are all over the place - it can get to be that bad.

Beyond that, how the developer implements styles can factor into website size and layout shift, which ultimately affects performance and SEO. To build the best websites, let’s start with good style guides. Also keep in mind that fonts can be large assets. Having more than two should be a deliberate decision made with performance in mind.

Use a Spacing System

Developers can agree that having consistent spacing blocks for the desktop design is helpful and from there it can easily be adjusted for mobile during development.

However, designers working on Figma can use the auto layout which will give consistent spacing and padding. The auto layout helps to arrange your design in sections, containers, and divisions.

Incidentally, lots of designers and design teams have complained that working with auto layout is unintuitive and hard to manage. No doubt the auto layout is ideal from the developer's perspective which is why a designer using it can make a developer's life so much better. Autolayout is a very close approximation to the tools the developer has (flexbox, css grid) so understanding it will be key to understanding what options the developer has to implement your design in the first place!

Good spacing can affect website usability and readability, which affects how long a user stays on your page. The story is the same here: design that works well in development translates to webpages doing their jobs better.

Collaborate

OK, this one affects us too. Devs, to keep from being “last in the chain” like I mentioned above, ask for access to the Figma file while it’s in development. Comment on stuff. Let your expertise shine. I find that the earlier I raise a concern on design elements, the easier it is to have it changed.

Don’t call it a handoff.

I repeat, don’t call it a handoff.

Both sides, that is the designers and developers should not see the design as a handoff. There should be an open line of communication to ask questions so that assumptions are not made and mistakes are not overlooked.

Call it something like a peaceful transition of power.

Many developers struggle with how to collaborate efficiently, they assume that their job is to build exactly what is provided as provided. But it would make the developer's job a lot easier if the designer leaves a line of communication open so developers can ask questions and avoid assumptions.

Also, designers need to not assume that the developer will figure it out. The open line of communication will help as "developers are better developers with design knowledge and designers are better designers with development knowledge."

Be Like Water. (Be Willing to Change)

Since developers need to code designs for different devices, there may be the need for designers to work with developers in making the necessary changes so that they can fit the device.

And if designers are willing to make changes when needed, it would make the developer's life a thousand times better.

This blog post was inspired by a Twitter post by the great Max Joles - be sure to check him out!