Meet Phase — { hi! }

Team Phase

Published in

Prototypr

7 min readFeb 7, 2018

Digital Design Reinvented

Phase.com

Digital Design — From Scratch.

We want to help you spend more time being creative.

The Creative Process — that root of our passion and joy as designers. It’s oh so hard to describe, that feeling when your ideas take on an energy of their own. When your creativity starts to flow. Words fall short.

It’s the electricity we feel when we design. It’s what hooked us. It’s embedded in our DNA. It makes us — designers — who we are.

It sure is an exciting time to be a designer. Modern design and the design tools that have come with it seem to have changed more just in the past few years than they did in full decades past.

But…are we moving in the right direction?

With each turn of the design tools ecosystem it seems like we spend a little less time in the Creative Process, and a little more struggling with problems that really have nothing to do with creativity, or design.

When did we start spending more time struggling with our tools, than we spend solving design problems? Than we spend, actually doing design?

Some think this is just the nature of modern design — digital design is more complex and dynamic than static print, so the complexity we have to deal with has naturally grown.

Maybe that’s partially true, but only partially.

We believe the truth is that after years of supposed progress, we are still essentially dealing with print design tools. Sure we’ve duct-tapped a thing or two onto them, but their foundations are still essentially the same.

We deserve better. It’s time our products finally, truly evolve.

Phase is a Digital Design product — Re-worked from the ground up.

Designing websites and apps — what we at Phase call Digital Design — is fundamentally different from Print Design. That’s not news, but despite deep and obvious differences we’ve tried for years to tweak and transform existing Print Design-products into digital tools, piece by piece.

The resulting Frankenstein-products seem to do less than half of what we really need, and do poorly at that.

It’s time Digital Design got the attention it deserves.

Let’s build a product that finally rethinks things from first principles. Let’s build a product that…gets out of our way. That fits modern Digital Design so snugly, that we forget it’s even there.

And of course, let’s start with the basics.

Back to Basics ⇱

When we think about re-working Digital Design, there are a few basics we need to nail right off the bat.

We’re designing screens, not pages. This means dropping the idea of fixed page sizes that is a a legacy from our print tools’ past. It means a workspace that dynamically adjusts, and adapts.

With Adaptive Layouts that are more than constraints. Websites and apps are dynamic. They adapts and flow based on content, and context. It’s time our design tools catch up with real, adaptive layouts.

Element States — everything website and app has them. From basics like a click, hover, or scroll to the most advanced element interaction states.

Yet existing tools still can’t handle state?

At least not with something better than copy paste? Duplicate elements, and make changes. Oh, don’t forget to label the new layer ‘hover’ so we know what it does. We deserve better than that.

Elements in websites and apps have states — our design products should too.

Component Libraries and Design Systems real in websites and apps work very differently from how libraries work in today’s design tools.

Real Component Libraries are so much more than SVG symbols. They’re so much more than just Elements, and rigid Text styles.

Colors, Properties like fills, borders, and shadows…border radius, width, and height — everything is a component now. Create components at the level of composition you need, to keep your design consistent, fast.

Let’s design libraries in the same way we’re going to use them in the real world, with deep and dynamic composition.

Real Digital Elements are video, audio, form inputs, etc. These are elements that have a behaviour. Yet our design products still mimic them with Print Design-esque placeholders? It’s time we get real.

The output of digital design is <Code />. We may be working visually and not directly in code, but we still need code to come out the other side when we hit the export button.

But…just any code? — no.

Every project and every team is different, and generated code is only actually useful if it’s generated exactly the way we need. So it’s time we start building exported code with fully customized configurations, and not generating gibberish code that can’t actually be used in the world.

Design is Visual → It’s Human Nature.

Beyond the Basics— It’s Time We Rethink Interaction Design.

They say that today every modern designer must today become a designer-coder hybrid. Switching back and forth between visual design tools and working directly in code in modern design.

Some take things even further, urging us to drop visual tools altogether and design from scratch directly — and exclusively — in code.

Modern design is just so dynamic, they say, that visual tools will never be powerful or flexible enough. Code is flexible. Code is dynamic. It can do anything we need. So let’s use code!

Code is great — but in the Creative Process it slows everything down.

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 modelled in visual 3D CAD.

We can create some pretty darn complex things with visual tools. Can it really be true that websites and apps — i.e. modern Digital Design — is just too dynamic and too complex to be done in visual tools?

Visual tools for Digital Design have been tried before, but they’ve always been painfully limited in what they could do and cumbersome to use. So working directly in code — at least so far — really has been a better way.

But let’s step back and think about this…how do these visual tools, so cumbersome and restrictive, actually work?

Well, they created lists of pre-made interactions. Fade-out, slide-up, rotate, scale, drag, etc. — as many pre-made interactions as possible. Now let’s stop again and think about that. Is that how any design actually works?

Well no, not really. Pre-made lists of interactions like fade-in, or scale up? That’s really just the Interaction Design form of clipart.

No, it’s not how we actually design.

When we design we take design’s core building blocks — things like paths, text, fills, borders, shadows, colors, etc. — and compose designs mixing these core building blocks together, to create designs with as much or as little complexity as we need.

Print design, video games, animation, CAD — it’s always the same. We don’t piece designs together exclusively from pre-made templates. We compose designs with the basic building blocks for that type of design.

It’s time we think about Interaction Design the same way and finally make the basic building blocks of Interaction Design — things like selectors, events, conditions — first-order citizens in our Digital Design products.

When we do we’ll finally be able to take our Creative Process back, with visual and intuitive tools that make your designs a reality fast. That let you focus on being creative, and not struggling with your broken tools or code.

Working Together → The Designer Way

The days of working in silos are behind us.

Today we’re part of teams that work alongside engineers, marketers, managers, and scores of other designers on shared projects.

But what does working together really look like, in design?

Is the answer git? Well, sort of.

We designers need some kind of version control. But what about real-time collaboration? Realtime collaboration…that’s not git. Do we need version control? With branching, masters, and merges? Or do we need realtime collaboration?

Hopefully, the answer is obvious - we need both.

Thought of a new idea you want to experiment with? Create a branch with slimmed down and visual version control — and collaborate in realtime on it with your team. Or, work on your own in a private branch, to experiment freely without the feeling of someone looking over your shoulder.

That’s designer collaboration. We’re been force-fed developer collaboration workflows and for too long. It’s time we make designer collaboration, well…for designers.

Prototypes — That Actually Work

Why aren’t we building prototypes that actually work? Fully-functional mock apps that pull real live data. Where every button, every page, every navigation, and every interaction actually works.

Let’s 10x the speed of of design → user testing → feedback with prototypes that actually work. Without wasting time writing code.

It’s as simple as sharing a live URL to your design’s prototype — it’s that simple. Need to update your prototype in real time? Go right ahead ;)