During my first project at my company, I faced the new challenge of communicating with my client’s designer. I was quite anxious about interactions with a designer and the unknowns about their company culture. I want to share with you my experience and give you confidence as you build a collaborative developer-designer relationship.
What if the design cannot be engineered?
First of all, investigate and research. Right away I ran into something problematic in a design which to my knowledge could not be achieved. I anxiously tried to communicate to the designer that I had doubts about the design being possible. I should not have gone to the designer first. After pairing with my team’s senior developer, I learned some css magic and completed the task. Investigate all of your resources before going to your designer with the conclusion that design cannot be implemented.
What if there are mistakes or inconsistencies in the design?
Designers are human too. They have a lot going on and make updates based on the product team’s decisions. Detailed as they are there can still be some inconsistencies in the design. Your role is to be gracious and curious. One example that I ran into was the typography not being consistent with style patterns that had been established. I like to approach a situation like this is by asking the designer about their preference. For instance,
“I noticed that over here the design references typography.bodySm, but here it references typography.body2Sm. Could I get some clarity on your design preference? I want to implement your designs accurately.”
Establish that you want to understand them and implement their vision for the overall benefit of the team.
What should I be looking for in the design?
Before writing any code, take some time to explore the design. There are some assumptions that you can make about styling patterns. One of them is layout spacing. Many times spacing between elements will be a factor of an even number like 8. If the entire page uses spacing of 12px apart and only one is 13px, you may want to question it. It’s safe to expect inputs and buttons to have style guides for pseudo states such as :focus, :active, and :hover. For colors, assume that if it looks white/black that it probably is not. Many designs favor an off-white shade or a more grey-toned color in place of black. Typography should include line height and font weight specifications. If you know to look for some of these details, then you will be saving the designer’s time when they are reviewing your code.
Go out with confidence now that if you investigate and research, approach your designer with a gracious and curious attitude, and explore their design with expectations that you are well on your way to being a dream teammate to a designer.
