• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • AI/ML
    • Backend
    • Frontend
    • Dev Life
    • DevOps
    • Soft Skills
  • Talent
  • Partners
  • For Companies
Home » Frontend » Design/UX » The eternal struggle between designers and developers
Design/UX

The eternal struggle between designers and developers

Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.

Last update February 28, 2019 by Vito Gentile

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.

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Codemotion Milan GraphQL

Leaving no one behind: building apps for the next billion users
Previous Post
CTOs in a data-driven world: interview with Thomas Holl
Next Post

Related articles

  • GraphQL Testing With Karate
  • 7 Ways to Use UX Design to Enhance User Data Security
  • Move Over DevOps! Time for DesignOps and UX Engineers
  • What Are the Main Areas of Development for Web Designers to Land Their Dream Job?
  • 10 Tips for Your Next eCommerce Web Design Project
  • How to Bring UX Designers and Developers Together
  • Inclusive Design and the Value of Emerging Tech in UX
  • Why you should care about inclusive design
  • The ultimate UI design guide
  • How a mouse and keyboard can improve your life as a coder (discount inside)

Primary Sidebar

The IT Industry in Italy: Trending Positions, Salaries, and Main Skills for 2022

Codemotion and Adecco’s guide to understanding the IT working environment in Italy. Download here:

Adecco Whitepaper IT Report

Latest

grpc, http, rest

GRPC Approach for Improved Software Development

Web Developer

Using the Twelve-Factor Methodology in Cloud-Native Microservices

Microservices

svelte, javascript frameworks, vue.js, angular

Svelte: Why Is It an Innovation to Javascript Frameworks?

JavaScript

blockchain, avascan, avalanche, defikingdom, subnet

How to Deploy a Subnet on Avalanche Blockchain: The Case of DeFi Kingdom

Blockchain

automation, security, cybersecurity

How to Implement a Security Testing Program For Web Applications

Cybersecurity

Related articles

  • GraphQL Testing With Karate
  • 7 Ways to Use UX Design to Enhance User Data Security
  • Move Over DevOps! Time for DesignOps and UX Engineers
  • What Are the Main Areas of Development for Web Designers to Land Their Dream Job?
  • 10 Tips for Your Next eCommerce Web Design Project
  • How to Bring UX Designers and Developers Together
  • Inclusive Design and the Value of Emerging Tech in UX
  • Why you should care about inclusive design
  • The ultimate UI design guide
  • How a mouse and keyboard can improve your life as a coder (discount inside)

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN