In complex projects, whether web or mobile, there comes a time when managing screens and the graphical elements that compose them becomes a real headache for the interface designer and the coder. Indeed, in so-called "agile" projects, adaptations of visual components can be frequent. Keeping a clean and understandable history for the developers can be extremely difficult.

The risk is to create a significant gap between the graphic version of a project and its "coded" version. We have put in place a number of tools that we will share in this article.

1. The design tools

A few years ago we chose to develop the majority of our interfaces on the graphic design tool Sketch. Although other solutions have been developed since, such as Adobe XD, Sketch remains an extremely powerful solution for web and mobile interface design.

Indeed, it offers a number of important tools, such as the creation of fluid and dynamic components that allow to easily replicate visual elements, but especially to "easily" simulate several screen sizes. These variations in screen resolution are often a nightmare for most designers and developers. Fortunately, Sketch provides a series of answers to these challenges and allows to create complex and rich custom designs in a very ergonomic way while respecting the fundamentals of user experience (UX).

Sketch does have its limitations, however, and the biggest of these is its compatibility. Indeed, the software is only available on Mac OS, which is not ideal when some of our developers work on Windows.

2. A solution for sharing and dialogue

When our developers (let alone our clients) don't have Sketch available, we need to consider other options when it comes to sharing and discussing a design.

Initially, we could have started with annotated PDFs. But these quickly reach their limit when long discussions take place. That's why we have invested for several years in the Invision cloud solution. This platform allows you to visualize web and mobile designs directly from your browser. In addition, it offers an extremely powerful commenting tool with a practical "Kanban" approach for the validation of modifications. 

Getting the designer and the developer to share a common language has created a lot of value within Talk to me

The icing on the cake is that this solution integrates ideally with Sketch through a plugin that allows direct export of screens from our favorite software. An undeniable time saver for us, but also for our customers who can see our designs as if they were coded.

These solutions, although very mature, have been put to the test for some time by the Adobe suite and more particularly Adobe XD. This one integrates on one hand a design tool, but on the other hand interesting sharing tools. However, at Talk to me, Sketch + Invision remain our favorites!

3. A library of components available to developers

Once the interfaces have been validated, the challenge lies in managing the publication and versioning of the visual components, so that they are coded as closely as possible to their original design. To do this, we set up what we call component libraries that will serve as a visual dictionary for the developer.

We chose to work with the Zeplin.io platform. It also integrates perfectly with Sketch using a plugin that allows you to export components or symbols to a secure cloud in one click.

Each component is then listed in the library in a visual form, but also in the form of CSS or SCSS code or even in React Native depending on the needs. This is an undeniable time-saver for our team. In addition, this library serves as a reference for all future developments. It lists not only the screens and components, but also the text styles and color codes. 

A process that puts design and user experience back at the center

We are passionate about interface design (UI) and user experience (UX). The implementation of these tools has allowed us to always put UI and UX at the center of our development process and has given us the agility to tackle important projects with serenity and quality.

If you would like to know more, please contact us at lets@talk-to-me.ch. We would be happy to discuss your project with you.