Bridging the Designer-Developer Divide

Chris van Raay offers practical advice on how app designers and developers can work together more effectively


This is part of a series of notes from from YOW! Connected conference where leading experts presents their thoughts on all things mobile and IoT.


At the heart of the discussion is the fact that designer’s goal of UI consistency and the developer’s goal of cleanly architected code are not opposing desires, but in fact the same goal spoken in a different language. The team need to get rid of us vs them attitude.

Ideally, designer should be expert in the platform they are designing for. And developer needs to be transparent about what is impossible vs what is just hard.

During the talk, Chris highlighted that user experience is not something you hand over in a document, waterfall model simply does not work. Design is not always measurable.

Some general advice and recommendations for structuring design deliverables and UI code:

  1. Speak the same language — Come up with a consistent language to communicate. Same lingo. Use the same measure of unit, refer to points and screen density instead of pixel.
  2. Be in communication frequently — geographical separation often leads to strong reliance on handover document. Rely on interactive prototype (Axure/InVision) as single source of truth and communicate the intention of the design.
  3. Deliverables as a system — Chris’s team use Confluence for UI style guide, colour and font measurements. The team work with colour variables using consistent naming convention. As well as style variables, which is a combination of font, spacing and the aforementioned colour variables. This approach reduces testing effort as any changes are applied to one file only and flow on.
  4. It’s important to have buy in from the rest of the team
  5. Have a dedicated UI developer on the team to work closely with the designer.

Lastly, as an advise on how to approach the fragmentation of screen sizes, take the lessons learnt from web development. Mobile First. Target smallest screen device first. Design a visual system in resolution independent way.

Takeaway from the talk: Design system not screens — coming from a web development background, I think the underlying concept resonates with Brad Frost’s Atomic Design. Increasingly there is a view the idea of a page does not make sense anymore, and that designers should be crafting design systems instead of page based pixel-perfect designs.
Like what you read? Give fionnayao a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.