How to Design with Developers in Mind
Four ways designers can make a developer’s life easier.
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors, or representatives.
Like other tech companies, things move fast here at Yext. That leaves very little room for miscommunications among teams in order to deliver high-quality work within a tight timeline. Our Consulting Designers work closely with Software Engineers during the design phase to ensure we optimize our workflows and mitigate errors. To achieve a smooth handoff, our team developed an effective set of approaches to ensure our design contains little ambiguity in what it is meant to be built. Below are the lessons we learned on how to design with developers in mind.
Set Expectations
Effective teamwork can not happen without setting the right expectations.
First and foremost, designers must provide every detail developers need to pixel-perfectly build out a design. Things like the measurement of margins and paddings, grid layouts, hover and focus states, and no-data or error state are all Engineers need guidance on before development starts.
Secondly, if you happen to have a robust design system like Yext does, you’re going to need a way to convey the usage of repeatable patterns and any design deviations. This helps Engineers estimate the time to build the design during their scoping phase. Lastly, designers should be flexible and always be prepared to adapt. Design requests might flush in even after the design phase. Our designers are trained to own a project and provide guidance for Engineers every step of the way.
Dive into the World of Developers
Another way to streamline productivity and improve work quality is for designers to learn the basics of the language and framework developers are using.
At Yext Consulting, Designers are able to read and understand basic CSS and HTML code, which helps us communicate with Engineers on a more technical level. Speaking the same language and using terminology both teams can unite around is essential to make this work.
Recently, several of our Designers went through an adapted version of our Front-End Engineering onboarding process to get a deeper look at the tools, processes, and languages Engineers use. Training like this should happen periodically so designers are caught up with the newest technology updates.
Design with Intention
With our technical training and early input from an Engineer, we now need to put what we learned to use.
Every designer on the Yext Consulting Team has a pocket full of best practices to help produce developer-friendly work. For example, we avoid switching up the order of content when we transfer designs from desktop to mobile and vice versa. Our designers also make an effort to stick to an 8px or 10px spatial system. One of our most loved practices by Engineers is putting invisible spacers between elements on the mockups. With these spacers, an Engineer can easily access the measurement of padding or margin by simply hovering over the negative space.
These tips only scratch the surface and maybe only unique to Yext Consulting but they show that small helpful adjustments can earn a big thumbs up from our engineer friends.
Communicate through Deliverables
Besides a handoff meeting, Designers at Yext Consulting also include internal guides in every project to convey our mockups to the development team. These include a style guide that shows typographic hierarchy, grid measurements, and a visual guide that indicates whether a section on the page is using components from our design library or completely custom. For special cases, our designers also include an animation guide so our Engineers know exactly how an interactive element moves on the page.
These deliverables ensure every piece of the design is documented and can be traced back in the future. It saves both teams’ time and streamlines the handoff process.
Sync up Regularly
No matter how automated the process is, regular communication with developers is still essential. At Yext Consulting, designers are encouraged to consult with developers even before they start a project, whether it’s to validate an idea or just to brainstorm together. This helps designers make decisions that are feasible within timeframes. We also set up periodic review office hours that serve as a communication channel between two teams.
Beyond individual projects, Yext Consulting Design Team also regularly meets up with the Engineering Team to iron out the kinks in the overall process. Whether it’s adding a new deliverable or switching to new software, the Design Team commits to bring the Engineering Team into the discussion ahead of the changes. Consistent and continuous communication is the key to a successful designer-developer relationship.
