Cooperation between a designer and a developer is about exchanging a very large amount of precise information about the app or website’s interface, e.g. the choice of the color pallette, the size of the spaces between specific elements, the shades applied, typography, etc. Good communication influences the efficient execution of the whole project and delivering it on time and with expected high quality. There are many tools which make this process simpler. In this article, I am going to present five of them, namely InVision (which we use here at Appchance), Zeplin, Avocode, UXPin, and Sympli. I hope I’ll help you to choose the right one for you.
Where design ends and development begins
Starting the project process, the designer does the initial research, collects requirements, creates mood boards, and personas. Then, they prepare a flowchart and the first mockups. After all of these steps, they finally start to work on the design of the mobile application, web application, or website. After accepting the graphic design from the client, next comes the stage of implementation and the creation of the ready product. Before this happens, the developers need to receive the right graphic files and access to the structure of the ready design (in order to check all of the design’s parameters, margins, spaces between sections, type and size of fonts, etc.).
A designer is reluctant to share an open graphic file with the polished up design. It is probably due to the fear that something may be changed, “broken”, or exported incorrectly. After all, it may cause more problems than the benefits that may result. How to share the files then?
Research, which tool to choose?
At the moment, there are many tools on the market which offer a range of features, each having their pluses and minuses. To choose the best-suited program for the project requirements at your company, you need to find out what the particular tool will be helpful with, and where it may disappoint.
Exporting the design
In order to check individual programs regarding the file export, I created a text file in Sketch with 50 artboards and one really extensive style guide. InVision, Zeplin, UXPin, and Sympli all make it possible to efficiently export files from Sketch. Only large files are an exception here, e.g. when the artboard has a large number of embedded elements – then you have to be more patient.
In the case of Avocode sending graphic files from Sketch to an app takes a lot of time and is an element that Avocode needs to work on.
Integration with Sketch and Slack
Each of the tested apps has its own Sketch plugin. This is a great advantage when sharing the graphic design, we can do it directly with one click.
All of the programs also synchronize with Slack, which helps you integrate your design with a project channel already in place. Thanks to that feature, people on a given channel receive notifications about design updates or new comments in the project.
Working on an exported graphic design
After exporting graphic files, Sympli, InVision, Zeplin, and Avocode give the developer the freedom to check layers in the design (it is very important that the designer applies the appropriate names for each layer and component). They also let you check margins, fonts, and everything else that is of interest at the moment.
UXPin lets you read the values, but only within a superior component – If in the sketch we have created a component you don’t have the option to break it down in UXPin and check the smaller atoms. In order to check the elements embedded deeper, such as a font or picture, the component should be separated in the Sketch and only then exported to UXPin.
Sharing assets
In the cooperation between a designer and developer, there is intrinsically the subject of sharing all of the elements needed to carry out the project, such as icons, pictures, etc. (the so-called assets). After accepting the graphic design from the client, there is also the export of assets to a “go-between” in the exchange of information. InVision, Sympli, and Zeplin all let you download files right after the export, which is very convenient. Avocode, on the other hand, lets you create a component from the app, independently from what we’re doing in Sketch. The app itself analyzes what is an asset and gives you the option to download it.
In UXPin after adding the style guide with the assets you created, the program changes their names on its own, which is burdensome and creates chaos (e.g. an asset named icon.png changes to: 6B3F4A9C-A3C2-4DA4-96B1-D4FE498BA394.png).
Organizing the project
While creating the design, the designer organizes it adequately so that a proper hierarchy and structure of the design are kept. It’s very important for the integrity of the cooperation to correctly and transparently present this structure so that the developer will know how to move within the design and have no problem finding what they need the most at any given moment.
In the case of InVision and Zeplin, you can easily organize exported artboards and assign them to the group you created (Zeplin gives you the additional option of tagging artboards). Moreover, the exported screens get ordered in the same way as they are in Sketch.
After exporting to Sympli we can organize artboards manually, by date, by name and by the position they had in Sketch. Artboards are grouped by tagging the subsequent screens.
Unfortunately, in UXPin you don’t have the option to group individual artboards or change their order after the import to the app. It makes handling the design really difficult.
Updating the design
It’s also worth mentioning the updates of the design after further iterations. The best at this are InVision and UXPin, where updating the design is problem-free. Individual artboards during the first export have a “unique ID”. This ID is permanent. Thanks to that, changing an artboard’s name from Sketch doesn’t distort the structure of the exported design. InVision also has a timeline feature with a history of changes and each artboard is enriched with information about when the latest update took place.
The Sympli application also assigns a “unique ID” to the artboard and enables collision-free updating regardless of whether you’ve changed its name in Sketch. You also have a timeline with the history of changes. With each artboard, there is information about the number of the current version. There is an option to compare consecutive iterations on a specific screen thanks to the “Changes” option which sets the new and old artboard next to each other.
In the case of Zeplin, the updated screens must have the same names as their counterparts which are currently in the program. Then, the update goes smoothly. However, if you want to update an existing screen but you’ve changed but a letter or a digit in Skech and the artboard doesn’t update, it shows as a new, additional screen, which distorts the structure of the exported design. On the other hand, there’s an interesting option for versioning, which lets you log what has been changed in the particular iteration. The program itself only marks that a change has been made.
Avocode has a really comprehensive option for versioning the design. After each screen update, the program creates another version of the design – the artboards where changes were made are now replaced and marked with a different number. All the rest are duplicated and keep their number. You always know which artboards are up-to-date, which is undoubtedly a plus. What’s more, at any moment, you can go back to the previous versions of your designs. A disadvantage of this solution is that during the progress of work, at some point you may end up with too many different versions of the design. A design will be numbered as 5, and some of the designs will have earlier numbers because they haven’t been updated. Exporting artboards updates individual screens even when you change the name of a specific design.
Describing the design features
In every project that has the cooperation of specialists, it’s very important to exchange notes, thoughts, and suggestions. (You can read more about effective communication in our article: The art of listening, i.e. the basis of good communication).
An interesting and convenient solution is the option to make comments directly on a specific artboard within a given design. It’s simpler to address an individual screen. Each of the tested programs gives you the option to add comments. Moreover, you have the option of assigning team members to send them email notifications about changes made in a suggestion/comment. Additionally, each such note may be marked as “resolved”, thanks to which you have the option to view the history of all comments (and you don’t have to remove them).
Summary
Each of the programs described here is well-known in the designer and developer worlds. Each has its pluses and minuses. It makes it difficult to call any of them an ideal one. It’s very important that the app you choose is convenient and the most helpful to the whole team. It’s supposed to simplify, not make it harder to work. Luckily, each of the above-mentioned programs has the option to test it out without buying it right away. And so, InVision and Zeplin have a free version, which limits the number of active designs to one. UXPin has a 7-day trial, Avocode, a 14-day trial. I just encourage you to explore and check the programs described above (or get to know each different one). I wish you great success in choosing the right one for you!
You might also like
Increasing mobile app retention focuses on the users returning…
Most marketing and e-commerce experts agree that m-commerce applications…
The number of people shopping through mobile devices is…
There has been much talk of e-commerce in recent…
App Store Optimization, or ASO, entails the process of…
