How do you ensure that the dev team understands the design?

How to show your design to developers

Frank Rapacciuolo
The Startup

--

Illustration by Nico Encarnacion

Make sure the design works, get empathy with the developers, communicates with them using the same language and if you know C #, Objective-C or Swift, you will have the development team in your hands.

A few days ago I had an interesting idea about the new interface of the app I’m working on. After observations about usability and design I described my idea to one of developers. I received a quick answer: “We cannot do this!”. It doesn’t mean that my comments were wrong. My idea would compromise the whole architecture of the code implemented, the stability and cleanliness. And to build it would take about two months.

I am, therefore, constantly in the position of having to calculate any technical constraint due to the limits of development, the timing, and finally to the developers that tend to keep the code clean. So teamwork is the result of continuous negotiation and respect of small basic rules to avoid wasting time.

How do I not piss off developers?

  • Don’t be too visionary. The ideas must work.
  • Shows the flow of the app. Where I go after the tap?
  • Work with real data in mind and think about a “scalable design”. If there is a long text, what happens? how it works in other languages? and if in the future will be adding more items to the menu, what happens?
  • Empty states if you don’t know what they are, find out!
  • Explain the reason of your choices about the layout, the colours and interactions.
  • Style guides and assets are crucial to the work of developers. You have to show which are the colours, fonts and interface. It’s also necessary to collect the assets in the right way and in folders with the right name.
  • Create a working prototype and understand by yourself if your design works or not.
  • Working prototype? Okay, show it to developers.
  • PLUS If you speak the language of developers, you can get respect. If you have a good knowledge of programming languages (HTML, CSS, Java, PHP, JavaScript, C #, Objective-C or Swift) you can be one of them and they listen to you with pleasure.
  • Never forget the user

These are the rules that I keep in mind every day to work at best with the development team.

Prototype of a playlist made with Principle, by Frank Rapacciuolo

Lately the rule that is helping me the most of all about the working prototype. It works because I understand if my design can work and it is easier to understand for developers. With prototype you can test the gestures, interactions, flow, usability, typography and the look & feel, all in one shot. Extraordinary!

There are several tools that allow you to create working prototypes, including: Invision, Marvel, Pixate and Principle. The best of them is Principle, in my opinion, because it allows you to create prototypes with realistic animations.

I think the day that Principle will allow me to reach 100%, will be an everlasting love!

Conclusions

As in every sphere, the teamwork is crucial to have a good result. A serene atmosphere where each member works in empathy with the rest of the team shows that each gear of the process works. If all the team respect the rules, the final product can be amazing.

I have included some of the rules that I have learned over the years, taking into account both the management side and the human side. With them I’m sure that the development team has clear what the design team has done.

I hope this medium will be helpful.

_
Who am I? I’m product designer at
Musixmatch. On a mission to make products attractive, functional and simple to use. Dribbble Twitter Linkedin

--

--