Collaboration Between UI/UX Designers and Developers

Collaboration between UI and UX designers and developers
Collaboration between UI and UX designers and developers

The development of a software product and software solution can be a complex process. Depending on the type and complexity of the product, the team that develops a software product can be based on a team model that includes various roles. The essential role in that team model is a software developer for sure but in a modern team, there is a role responsible for UI/UX perspective, usually called UI/UX designer.

Developers and UI/UX designers have to collaborate closely to produce outstanding results with a high quality and for less time.

The main steps in the most common scenario in the context includes the following three steps:

Common three steps that describe the flow of implemented a UI based on a graphical design

The flowchart above looks straight forward and simple, right? But in real life, there are many other steps in between. There are triggers that will require changes in the graphical design, after which the developer will have to implement the changes. This round-trip process can iterate hundreds of times depends on the working methodology applied. Not to mention the communication that happens between the UI/UX designer and developer along the process, which includes discussion about some detailed graphical elements of the design.

There are tools that can be used as collaboration tools (intermediate tools between tools for creating designs such as Adobe Illustration or Adobe XD and IDE or code editors such as Visual Studio Code).

One of the intermediate tools is Zeplin (www.zeplin.io). This tool is a great collaboration tool in the context. There is a plugin for Adobe XD that can publish a UI/UX design to Zeplin.

Adobe XD, export of the UI design

After the export of a UI design into Zeplin, which is a very simple process, a Software Developer can see the design decomposed into layers. A Software Developer can select every element in the design and see its attributes.

Zeplin.io, imported design exported from Adobe XD

Besides the possibility, the involved parties to view the details about the graphical elements organized in layers, Software Developers and UI/UX graphic designers can communicate efficiently even upon every element in the design by using notes.

By using Zeplin notes, Software Developers and UI/UX Designers can communicate upon a graphical element in a UI design

If a created UI design is for a web-based solution, then a Software Developer would be able to use a CSS (Cascading Style Sheets) for a selected graphical element, that will be generated by the tool.
That could speed the things in the development process.

CSS for a selected graphic element

At the moment of writing this document, the both mentioned tools Adobe XD and Zeplin.io have free editions.

At the end of this article, I want to share with you a valuable resource related to the UX domain. You can find valuable edX UX Courses.

Be the first to comment

Leave a Reply

Your email address will not be published.


*