Finding the Middle Ground Between Developers and UX Designers

A followup to “Working with UX and UI Designers as a Developer”

designed by Anchor Point

I received a number of responses for my previous blog post, which speaks from the perspective of a developer working with UX and UI designers. Readers asked the following questions, which I intend to do my best to approach in this blog post:

Where do you think we UX designer could be better informed/skilled in working together with developers? Should UX / UI designer know how code works for example?
Any tips on how to find the middle ground between devs and UX? What can we do to make the communication easier at the meeting table?

After reading numerous articles (all referenced at the end of this post) and conversing with designers and developers regarding this controversial topic, I give you my best, concise attempt in dissecting and “finding the middle ground” between designers and developers.


Language

When it comes to developers and designers working together, there is indeed a language barrier. There are several different coding languages that take years to master, and specific terminology that designers use to communicate with other designers. That being said, we need to find a common ground, or an intersection of vocabulary for both designer and developer to understand the other.

Does this mean that designers should learn to code, or developers should learn to design? Well, it is not crucial, but it definitely helps. Former developer turned UX designer Paul Pela believes that at the very least, designers can learn about data structures. I agree that would definitely benefit their understanding of how the different elements of code come together.

I also may suggest that even a simple paired-programming project could greatly even out the understanding of how much work goes into creating a simple functional button. I would pitch the idea of creating a “Hello World” button that changes to “Goodbye World” when clicked, that is vertically and horizontally centered on a web page and changes color on hover. Another idea would be displaying the current time a user has visited a page. This is a small time investment that may cut into the work day, but will ultimately prove its value throughout a designer-developer collaboration.

Allocating time for the reverse situation (paired-designing?) would in turn help the developers understand what the design process is like. This baseline understanding is integral to a smooth work flow, and creating highly functional and user-friendly experiences.


Communication

In response to one of my readers, I mentioned that I attended an improvisation workshop that focused on communication. The “yes, and” exercise that we practiced with a partner resonated with me, in the fact that it emphasized thinking more open-mindedly. Oftentimes, others’ inputs or ideas are put down simply because of “that’s the way it’s always been done” syndrome, or because of ego. It is natural to compare ourselves to one another, but on a team of talented individuals, it is much better to quiet down the ego and instead focus on the potential of a great product with the integration of several great minds.

Another perspective from this recent article speaks the perspective of John Maeda, head of inclusion and computational design of Automattic. As the title reveals, Maeda believes that design plays a less significant role in business success than some make it out to be. The article sites,

Airbnb’s head of design, Alex Schleifer, believes that design-led cultures tend to devalue other people’s opinions and insights. He has built his design organization so that designers aren’t given special treatment; instead, product managers are tasked entirely with representing the perspective of the user, rather than their group with the organization.

I do believe that there should not be a hierarchy of designer over developer or vice versa, but it is important to note that there are certain limitations as to what developers can produce in comparison to what designers can dream up. Thus, consistent communication throughout the entire process, from the initial mockup to the beta versions and finally production release, is key. It is good practice to determine whether a feature is actually doable or a reasonable use of time, and any changes that will be applied should be discussed beforehand. Touch base throughout every step of the sprint, if not in person, then through Slack or via other means of communication, which transitions to my final section.


Technology

Translating design to code can sometimes be a pain if screenshots are all you have to rely on. Luckily, there are a few great applications out there that help ease the handoff from designer to developer. The application you choose depends on what is best for your team and what tools your designers and developers use. Most websites offer a free trial for new users.

  • Zeplin is a popular website used to handoff designs to developers, including options to include detailed specs, color palettes, and components. It has a variety of extensions for the team to utilize in creating shortcut snippets of code. It can be used with Sketch, Adobe XD CC, Figma, and Photoshop so that designers can swiftly export their designs to the platform for the rest of the team to see.
  • Inspect by Invision claims that it willMagically better design and development collaboration”. It is similar to Zeplin, and additionally includes options for collaborative white-boarding and inspiration-boarding. At the moment it only includes integration with Photoshop and Sketch.
  • Sympli allows integration with Photoshop, Adobe XD CC, or Sketch. On top of the aforementioned assets, it features design versioning. It is made with designers, developers, product managers, and quality assurance professionals in mind.
  • Avocode can be used with Sketch, Photoshop, Adobe XD, Illustrator, and Figma. It also features versioning, and simplifies generating CSS stylesheets and exporting layers.

Personally, I have heard the most about Zeplin, but I highly recommend taking the time to learn to explore each of these platforms. Learn to utilize their tools to their full potential, as they can vastly improve the overall production process, reduce stress, and leave behind happy designers and developers.