A lot of designers can be intimidated by anything related to code and I am certainly guilty of this. However, the value that even a basic knowledge of development can have at every stage of designing a product, from design execution to development hand-off, is meaningful! As designers, by dipping our toes into the world of implementation and learning more about how it works, we can alleviate unnecessary friction and improve the way we communicate and collaborate with developers.
For a recent project at Raizlabs, our team defined a font palette of text styles to design within the constraints of, that streamlined the web app we were building. A very basic knowledge of CSS and willingness to try something new allowed us to minimize a great deal of guesswork and resulted in a stronger design system and front-end. This is one example that was easily attainable for us. However, there are many ways designers can get involved in implementation, at whatever level you are comfortable. Watch the video or read below to learn more about the steps our team took to make collaboration with our development team smoother.
Making the Palette
Early on in the project we defined a set of font variations that consolidated all of the text styles used in the designs up until that point. Our team agreed on a palette of 9 font variations that would scale sufficiently to the remainder of the app. Each font variation was defined by a set of CSS values and guidelines regarding usage.
This is not a new concept for designers or developers. Defining and maintaining text styles is an existing practice in both disciplines. However, by adhering to an agreed upon palette, we avoided discrepancies and inconsistencies down the line. We also created an in-app style guide that could be referenced and used as a source of truth for developers throughout the project.
How are we already meeting each other halfway?
We are always looking to improve upon our design and development handoff process, but here are a few steps we have taken to improve collaboration:
We have libraries like BonMot that give developers greater flexibility and control over native typography. BonMot simplifies the complexity involved to style text in the way the designer had envisioned.
We regularly have hack days where the design and development teams can partner on fun projects that push boundaries of their knowledge. These give us opportunities to not only work on our crafts but also on how we work together.
We’re constantly thinking of new and better ways to communicate efficiently. The more knowledge we develop of one another’s craft, the more effectively we can communicate. Simple steps like working together to define a font palette have proven to improve our team communication and overall, the outcome of the products that we’re building.
Better communication=better products
At the end of the day, how we collaborate is reflected in the end product. Here at Raizlabs we strive to be continually improving how we design and build and what makes us work best together. If you have any great tips that your team uses, we’d love to hear them!