How to establish work between designers and developers?
Have you ever struggled with a misunderstanding between designers and developers?
Let’s be honest, almost everyone has.
“Why are these developers asking so many questions? Can they just build the website as I have designed? Why are the fonts not the size I wanted?”
“Does anyone really care about the font size? It’s impossible to implement your design. Is there any difference between those 2 colors?”
It appears that developers and designers often see the world from nonidentical perspectives and speak different languages.
Have you ever realized that you have no idea, what developers are talking about? Do you still feel scared of words like API, polymorphism, pull requests, etc?
As for the developers, listening to designers’ discussion of empathy maps, wireframes and perfect shade of blue is definitely driving them crazy.
Let’s just accept that, okay?
However, we’re still playing on the same team, aren’t we?
Both designers and developers have the same important goal in mind: “Deliver a great result to the end client”. So, how to achieve this goal most effectively together and avoid getting stressed?
Here are 6 crucial tips for designers that will help to optimize and accelerate designer-developer collaboration:
Communication
This point is the most important one. Talk, discuss, ask and answer questions during the whole design process! Be patient and offer as much help as it is possible. Don’t forget, that both designers and developers are on the same team. Communication is a key factor when it comes to collaboration with other team members. Before starting designing any product or software, make sure you’re on the same page with developers and understand all technical restrictions. Make regular check-ins with the dev team to be sure that everything is moving smoothly according to the plan.
Check out more useful tips on how to arrange designer-developer communication productively here:
“Working Together: How Designers And Developers Can Communicate To Create Better Projects”
Now, let’s move to some practical tips:
Component-driven Design
I hope everyone uses components nowadays. If you for some reason don’t use them, check out the following article and START USING COMPONENTS!
“Why component-driven design drives great software products”
Using components, in general, is a great starting point, but I want to take you further. Have you ever heard about the component design system/UI kit? I’m sure, you have. It’s basically a collection of components, you’re using within your design.
Component design systems provide better collaboration between design and development, allowing your design language to evolve. It’s crucially important to “document” your design with the help of components to reduce misunderstanding with the dev team.
Typography
Define a type system for your project. Sometimes designers use too many font sizes and styles, which slows down the developer’s workflow. It’s your choice how to define the scale(using linear, modular, or hand-crafted methods), but it’s definitely the right thing to do.
If you don’t know, how to define your text scale correctly, here are some references for you:
“Defining a Modular Type Scale for Web UI”
After defining your type scale and style, make sure you visualize it (by making a table, for example). Don’t forget to make a similar scale for the mobile world!
Then, make sure you have applied those styles to your design. Create a collection of text styles in your design file and use them! Check out references on how to add those styles to your design file:
“Create Styles for Colors, Text, Effects and Layout Grids” — Figma
“How to Create a Text Style” — Sketch
The type system will speed up your designing process, make your design more flexible and clear for developers in the future.
Color Styles
“You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colors to choose from” (Refactoring UI, A. Wathan & S.Schoger).
“Essential color theory for UI design”
We all know how many colors and shades are usually used even in the simplest designs. Don’t you feel lost sometimes? I do. Just imagine how developers feel, when they open your design with 30 shades of grey. Frustrated? Annoyed? Angry?
How to avoid it? Easy!
Thoughtfully define your color palette and then create color styles in your design file.
“Create Styles for Colors, Text, Effects and Layout Grids” — Figma
“How to Create a Sketch Style Guide, Library, and UI Kit” — Sketch
Layout Grid
Grids can be really confusing and feel restrictive, but in reality, they are incredibly powerful and liberating design tool.
Setting up a grid layout in most design programs is pretty straightforward and your general grid sizing should be based on the most prevalent screen size for your desired platform.
Cool article about layout grids here:
“Building Better UI Designs With Layout Grids”
Make sure you always create layout grid styles in collaboration with your developers. Layout grids are often used by programmers(CSS grid for example). That’s why, it’s important to ensure that grids are discussed, documented, and appropriately used in your designs.
Pitch Your Design
Are you done with your project and ready to pass it to the dev team? Design system is defined and well-documented, what’s next? Make a short pitch in order to share the design system, the goals of the project, research findings, etc.
If you want to learn more about presenting your design, check out this link:
“11 tips for presenting your UI/UX designs”
Conclusion
I hope this article would be somehow helpful for both designers and developers. It is based on my personal experience as a UX/UI Designer Intern at Weavik. All of those tips helped our team to improve designer-developer collaboration and build high-quality software faster.
Thanks for reading this article!
I wish everyone to find common ground with your dev team and create stunning projects together!
Cheers.
