Vladimir Danila

Vladimir Danila

June 9, 2021
Copied to Clipboard
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8012 1.92841L20.5585 2.01243C18.9368 2.60288 9.60691 6.33964 5.30725 14.3746C6.5143 14.3641 7.68306 14.1447 8.7829 13.7929C12.3701 6.43764 18.923 2.86125 20.4714 2.08835L20.8012 1.92841ZM21.6045 2.61912L21.6626 2.51063L21.6471 2.51779C21.1883 2.72795 13.346 6.32056 10.053 13.4617C16.8164 10.8442 21.0422 3.64143 21.6045 2.61912ZM7.54066 18.5582C7.67878 17.6645 8.00855 16.4428 8.50852 14.9319C7.07047 15.1535 5.86297 15.2906 4.88745 15.3234C4.56801 15.3414 4.27169 15.5618 4.1187 15.8723L2.04144 20.3651C2.01857 20.4237 2.03154 20.5049 2.10321 20.55C2.15767 20.5739 2.21496 20.5578 2.25503 20.5204L4.94153 17.9967C5.02168 17.922 5.06741 17.8047 5.05727 17.6836L5.06151 17.6237L5.06227 17.5636C5.07149 17.4043 5.13756 17.2543 5.24443 17.1546C5.46485 16.9491 5.83592 16.9949 6.04244 17.25C6.26759 17.5065 6.23931 17.906 6.0189 18.1115C5.87863 18.2423 5.72681 18.2719 5.56061 18.2403L5.54198 18.2391C5.52477 18.2178 5.50615 18.2165 5.48752 18.2152C5.37719 18.1875 5.26262 18.2197 5.18247 18.2944L2.55326 20.802C2.49315 20.858 2.48749 20.9379 2.53912 21.0017C2.57354 21.0443 2.62942 21.0481 2.6867 21.032L6.96405 19.301C7.27193 19.1818 7.47938 18.8951 7.54066 18.5582ZM8.56733 18.3255C8.81324 17.0512 9.20286 15.8681 9.68409 14.785C17.0676 11.6292 21.2792 4.81701 21.8483 3.8503L21.9075 3.74806C21.9075 3.74806 17.2166 14.3734 8.56733 18.3255Z" fill="currentColor"/>

A Magical First Touch

Vectornator Onboarding has arrived!

How we took a different approach to teaching professional design software.

June 9, 2021
Copied to Clipboard

From the first line of code that brought Vectornator into existence, we knew that teaching people how to use a design software platform wouldn’t be easy. Professional design software can have a steep learning curve. Most people need a lot of guidance and practice time with a new design tool before they are able to create mind-blowing creations like the one below.

Art by @aleksey.rico

At the same time, one of our goals is to disrupt pixel-based design. As graphic designers, we believe that vector-based design just makes more sense.

Why would you still create something using raster graphics where

  • it isn’t infinitely scalable?
  • its file size grows exponentially as resolution increases?
  • the image loses all editing capabilities once saved?

Now, we understand that those pixel-based tools can sometimes be easier to use, feel smoother to work in, and create less friction in your workflow. But we believe that it doesn’t have to be this way.

Vector tools don’t have to be obtuse and difficult to use. They can be intuitive and fluid. Except for photography, there’s no real problem that can’t be solved with vectors, and the benefits far outweigh the drawbacks.

Since the early days, we’ve used every feature in Vectornator to challenge how a graphic design tool should look, feel, and be used, which brings us to where we are today - a totally different and unique user experience.

During Vectornator’s development, we have always had three ongoing goals:

  1. To playfully teach every new user how Vectornator works right when they open our tool
  2. To reduce the all-around complexity of Vectornator
  3. To empower the user to design faster and with less friction

Today, we’re thrilled to present the results of our first goal.

Say hello to the Quick Tour: The interactive onboarding experience that guides you through Vectornator, giving you a head start and an even faster learning curve.

We’ve wanted to have this onboarding be a part of Vectornator for quite a while. At first glance, it might not be obvious how many technical challenges lie beneath the surface of this feature.

Our goal from the start on was to have our introductory onboarding be contextual, rather than restrictive. This means that we wanted the user to be able to try out each newly-introduced feature right inside the canvas.

We also didn’t want each step to block the user from exploring the platform organically based on their own curiosity. We wanted to give the user access to the entire toolset from the first moment they open the app, but with an onboarding interface that guides them through all of Vectornator’s features.

With each step in the onboarding, we introduce a new section to the user, and with each section we want to showcase a different use case for the platform. For instance, why are masks cool, and how do they work? What about sending objects to the back or front?

Through the entire Quick Tour, the user is actually assembling a whimsical illustration as they follow the instructional steps. There are a lot of Easter eggs to uncover!

The major technical hurdle with this kind of open onboarding is that each step has its own isolated sandbox, yet must also be a fully fledged editor.

Swapping documents in real time without the user noticing what’s happening underneath their pen is quite tricky. Just look at Illustrator’s phenomenal loading times of 30 seconds or more per document 😉. In this sort of framework, the entire Quick Tour concept wouldn’t work, as it would constantly disrupt the smooth workflow of the user.

Now that we have this framework built, we’re super thrilled for what’s coming next. It allows us to build a lot of interactive tutorials at a much faster rate, and ultimately teach vector graphic design skills to new users at a brand new level of fidelity.

We can’t wait to hear what you all think of the Quick Tour! Make sure to share your creations with #Vectornator!

Until next time!



Copied to Clipboard

More from Vectornator