When a discussion between a designer and a developer reaches a dead-end, it happens that both of them start talking mumbo jumbo, using big words just to close the thread in their favour, leveraging the different skills of each other. This was the baseline idea for Davide Di Pumpo, front-end developer with UX/UI design skills, when thinking about a title for his talk at Codemotion Milan 2018. While the talk (and thus the title) was taken in Italian, its title can be translated as “Like Gestalt, with Redux on the right”. It sounded interesting, but all the attendees discovered that even the title was just mumbo jumbo (a “supercazzola”, as he said referring to a popular Italian movie): there was nothing about Gestalt, nothing about Redux. It was about the eternal struggle between designers and developers.
When designers think about a project, like for instance a new layout for a website or a mobile application, they usually put it on paper with mockups and sketches, and then developers will implement their idea using the most appropriate technologies. However, many designers agree that often the output of this process is not exactly what they had in mind, as if something got lost in the implementation process. How to solve this problem? Is this due to developers’ oversights? Or did the designer do something wrong?
Davide proposed an interesting approach to fill the gap in the communication process between developers and designers. Instead of using only the traditional design tools, like Adobe Sketches or similar software, he proposes to use a single JSON file, where all the information about design details can be summed up. JSON is commonly used to allow communication among computers, and it has the advantage of avoiding any kind of ambiguity. But instead of asking developers to work on such data, why not ask designers to use JSON files as a unique “source of truth”, where all the information about design is stored? This approach was used by Davide’s company, Credimi, where designers were able to re-design the layout of their website in just eight hours.
While JSON allows us to specify some information, there is another tool that can help designers in describing a UI component. Web components can be implemented using HTML and Javascript, but they can be described by means of GraphQL, which uses a very similar language compared with JSON. You can thus define GraphQL types and the information that composes a type. By means of JSON and GraphQL types, designers can define a common language for communicating with developers, thus easing the communication process between them.
Of course, learning JSON and GraphQL is not enough. Designers still want to have tools to see what they are doing with their design ideas. For these reasons, Davide also proposed a set of useful tools for designers, which can actually also be used by developers in some situations:
- Storybook: a development environment for UI components that allows you to browse a component library, view the different states of each component, and interactively develop and test components. It is freely downloadable from GitHub
- BackstopJS: a Javascript-based tool for visual regression testing of web apps. It allows you to visualise the evolution of a web application among the various development steps. More information is available on the project website
- Framer X: an interactive design tool that allows you to design mobile applications and websites from scratch. It is useful for defining components and easily changing them on the fly. Demos and more information can be found on framer.com
In conclusion, using great tools along with good communication strategies can definitely improve the whole design process.