Finally, the first chapter is about to unfold.

Last week our team started to manually onboard first Phase Beta users.

Phase v1 is all about interactions. Import your Sketch files and quickly create more powerful prototypes than ever before — visually, with the building blocks of interaction design.

Those are a handful of early adopters (friends and community members) helping us to smash beta-bugs, and providing us with invaluable insights.

We also showed Phase on community meetups in Berlin, London, and Warsaw, with more coming soon! 😍

Phase v1 Demo In Warsaw

The feedback we’ve received has been incredibly positive, though there are certainly plenty of bugs that are blocking people’s work (especially on importing).

It’ll take us some time to get it solid. We still have a lot to improve. Quite a few 🐛 to squash, and few minor features we need to add to make it fully usable.

We’ll keep at it. Working with early beta users for the following few weeks, before eventually releasing a more-stable beta to the full early access list.

All are welcome to follow updates in #beta-testing on Phase Community 🤗

We’re building Phase out in the open, transparently and hand-in-hand with the designer community, so want to pass thank you’s to those of you helping us shape the future of Phase.

We’re a small startup — and yup, we’re a bit late shipping our v1. We thought we could ship by early summer, but were off a few months and only now shipping, toward 2019.

What we really care about though, is the openness we can bring to this process. Have any questions, or want to check the status? You can always shoot us a message 📨

In the meantime, let’s take a sneak peek at how Phase beta-v1 works.

Phase beta-v1 — Interaction Come To Life

Trodding The New Path

Most existing (visual) prototyping tools, use some variation of a duplicate-screens model. You must create a separate artboard or duplicate element for every state, then insert pre-made transitions between only very basic interactions.

The end result is a prototype where you must tell users “you can click here, oh, but don’t click over there…that doesn’t work.”

It’s limiting and extremely time-consuming. It’s unfeasible to get 100% of our design’s interactions, buttons, states, flows, etc. all actually working in this kind of duplicate-screens prototype.

Complex projects quickly break down.

With these limitations, it’s not until engineering has completed a live prototype-in-code that we can use (and users can test) something with full function, where everything actually works like a real (mocked) website or app.

Duplicate-Screens Model

No wonder many of us choose instead to prototype directly in code. It’s cumbersome and slow to design directly in code … but at least it’s not limiting us at every step.

We (try our best) to learn to code comprehensive interactions ourselves as designers, so we can get it done when we need it.

Well, at Phase we believe it’s time we get back to design’s visual, creative roots.

Connecting The Dots ☋

We can do better than duplicated-screens.

With visual and intuitive products we can create complex video games or Hollywood special effects. Heck, take a second to look around you. Everything you see — moving parts and all — can be modeled in visual 3D CAD.

We can work visually — with the same power as working directly in code — but more fluidly, more quickly, helping us to return to our creative flow in digital design. Our digital design tool should not have any blocks or limitations that websites and apps themselves do not have.

To get full-power visual (keyword: “full-power”) we have to ask: how do interactions work in the real world? In real digital products?

What are they composed of, in other words, what are their building blocks, and how can we translate those into an intuitive editor?

That’ll get us to the ‘Building Blocks’ of interaction design.

Well, it’s quite simple really. The building blocks of interactions are the same ones we would use in code: States, Selectors, Events, Conditions (if/else), Expressions, and instant-operations we’re calling Operations.

⦿ Selectors

Selectors help you target (or select) elements in your design, dynamically. Dynamic selection can mean (for example) targeting all instances of Component-X, but only when they’re children of Component-Y, and only every 3rd one.

Perhaps you’ll want to target in a much more complex way than this — and you can, if you need to. Most of the time though, quick and simple selectors will get the job done.

If you’re familiar with code these work similarly to jQuery selectors, but visually.

✎ States

Web and mobile elements are not static — they have multiple states (styles, classes).

So digital design must also support the stackable Element States like hover, click, disabled, or any other custom state you can imagine.

Element States In Phase

We can do this in a very simple, intuitive, and easy to learn way using the property panel we designers already know.

➢ Events

Websites and app Interactions are (mostly) event-based. Our Digital Design product must therefore be the same, with enough flexibility to tie events dynamically, and conditionally.

Combine a Selector and an Event, and you get what we call an Action and a Sequence.

Creating Interactions In Phase

⊘ Conditions

Simple if/else logic — done visually. Websites and apps are dynamic, so we need to be able to model that dynamism in our Digital Design tools. We’re not designing movies, after all.

So we create Conditions, without code, simplified into intuitive UI.

Prototype With Conditional Logic — Visually

⁍ Operations

Insert Operations anywhere on your Sequence’s timeline to perform instant-actions, one after another.

Set variables, add or remove States, navigate to a new page, start new sequences, insert or remove elements, play or pause a video or audio elements, interact with forms… all kinds of things.

These interactions building blocks are first-class citizens in Phase. Only when we break down interaction design’s most fundamental building blocks, can we create powerful interactions at lightning speed.

And we can do it visually, code-free.