Vectornator 4.5

Hey Vectornators!

The 4.5 update for Vectornator is releasing today, and we’re super excited!

We’d like to introduce you to the new Color Widget! We’ve been working on adding this feature to Vectornator for a while, and now it’s here!

The New Color Widget

With our new Color Widget feature, it’s never been easier to change colors in Vectornator!

Now, you can quickly modify the color of an object by selecting it, then tapping one of the two new buttons below the Toolbar to open the Color Picker.

You can also access more options in the Color Picker, like interacting with the newly-redesigned Eyedropper, or swapping the Fill and the Stroke.

Also, you can even disable colors entirely by pressing and holding on one of the two Color Picker buttons.

Of course, you can still modify your colors from the Inspector, too.

An Interview With the Designers

We’re also bringing you another interview with two of the team members who brought you Vectornator’s new Color Picker!

Meet Igor and Maciek!

Left: Igor | Right: Maciek

What were your main goals for the new Color Widget?

Igor: Colors are a central part of most designs and illustrations, so the main goal for the Color Widget was to improve the experience of drawing and working with colors in Vectornator. The new Color Widget makes colors more accessible, as they now can be accessed outside and independently of the Inspector.

This is just a first step towards everything we want to improve about colors in Vectornator, but it's an important step in this direction.

Maciek: Actually, from my point of view, the Color Widget was basically an excuse to work a bit more on the internals of Vectornator itself. My main goal was to draw an architectural border between the UI related to the Color Picker and Widget, the underlying document, and everything else.

What was the process of developing this feature like?

Igor : It was a lengthy process and many team members participated on different stages of it, but to give a quick overview:

We initiated the project by gathering feedback from users in order to identify the main problems we had regarding color in Vectornator.

The next step was then to prioritize these user stories. In this stage, several factors influenced the decisions, but we ask some clarifying questions during this process. For example, how important is this feature for our users? And how much technical effort is necessary to implement it?

After the prioritization, the team was able to develop an initial plan about which elements should be our focus. From that moment on, the designers were able to initiate ideating solutions and the development team was able to start technical explorations.

Maciek: We started with a refactoring of the existing Color Picker. We separated the UI and moved it to a separate module to make it independently developable and available as a single source of truth for both use cases.

After that, we embedded it inside of the Color Widget. There were quite a lot of iterations and ideas of how the user interaction should look. There is a room for improvement, but we decided that the current model accomplishes our goals and lays the groundwork for better versions in the future.

What was your favorite part of this process?

Igor: I am a designer by heart, and so for me my favorite part is definitely exploring and discussing with the team all the crazy ideas and possible solutions.

It is really fun to let your imagination free and envision the perfect ultimate solution to a problem. Of course, at some point you have to come down to earth and break down the ideas into actual designs that will be implemented by the developers.

But this process initiates another cool stage of the process; when you get the opportunity to see the solutions working inside Vectornator and being tested by real users!

Maciek: My favorite stage of the process happened when we finally decoupled the UI and were able to run it outside of the main target. It was a pleasure to be able to fix some issues many times faster thanks to the rapid development cycles.

I hate waste (in terms of the duration of the development iteration cycle) and so the process of eliminating it and tightening the feedback loop as much as possible is something that brings me a lot of joy!

What was the hardest part of this project?

Igor: As Maciek already said, this topic demanded a large amount of technical refactoring, which made it somewhat unpredictable.

It is hard to from the product perspective to understand everything that it is happening under the hood and how long certain things will take, which makes the planning process quite challenging. You have stay flexible during the whole project and also align the feature iterations with the development progress.

Maciek: Refactoring is a delicate process where you have to be careful to not break something and retain the status quo of the product while you work.

On the other hand, during this process we discovered more and more issues that had been flying under the radar, which revealed themselves at this high development zoom level we were working at.

Ultimately we managed to fix a lot of those issues, or at least collect them in a backlog for future releases, but dealing with such ambiguity (is it a bug or a feature?) was a bit challenging!

What is most exciting to you about this feature?

Igor: We are aware that much still has to be done, but pretty confident that this new Color Widget will considerably improve the workflows of our users, and the fact that now it is possible to interact with colors independently from the inspector is something really huge.

This will allow users to have more screen space while drawing, but will also support more efficient workflows. For example, it is now possible to work with colors at the same time that the Layers Panel is open.

All these new possibilities and everything else we have planned make me very excited about working on this feature!

Maciek: This project helped to crystalize some low-level abstractions that we’ll be able to reuse in other parts of the app.

With more and more decoupled, fully functional UI/feature code, we’ll be able to iterate faster and ultimately bring as much value to our users as possible!

Thanks guys! And thanks to all our users for checking out our new update!

Don’t forget to download Vectornator today and try it out yourself!

Until next time, Vectornators.