Design and develop better together

An introduction to Relate

After an exciting year, I’m thrilled to introduce Relate, the first interface design tool that empowers design and development teams to collaborate in the creation of digital products — visually and straightforwardly. It outputs beautiful, semantic code and achieves the objective of creating a single source of truth for both design and development teams.

Put simply, Relate is a professional design tool for teams to create interfaces that run on the browser powered by real code.

Yes, you read it right! We embrace the web paradigm. Relate saves time by creating a direct connection to the medium, enabling the creation of live design systems powered by code, as well as styling, stating, and relating them in an entirely visual way.

Relate utilizes the same code base as developers, so the design work impacts the product rather than merely creating images of it.

It seamlessly outputs HTML/CSS/JS in real time, to virtually anywhere.

The web is maturing

As a designer, I have a love-hate relationship with code. I was fortunate to live in the era of browser wars. A time when creating for the web was difficult, and we were forced to hack so many things (and we still do).

But web design and development have evolved rapidly in recent years. Methods that were once just a convention or “best practice” are now at center stage. We automated processes with the rise of front-end technologies that embraced the notion that “UI is a function of its state” or frameworks that brought new opportunities to the table (the “V” in MVC).

Today, the way we build digital products is in flux , and the job is becoming even more demanding.

And though we are repeatedly saying: “Form follows function;” “Designers should work with developers;” “You should create a design system.”

Many things still feel wrong.

We waste time and money making a broken process work

Design and development teams struggle to manage the lack of consistency across their environments . Even when we get it right, the process is slow, requires too much manual effort, and designers have no effect on the actual product.

We’ve used the wrong metaphors

The truth is: current design tools discourage systematic thinking.

When Leonardo da Vinci sketched, he created in a “fixed position” reality .

In much the same way, artboards, pencils, shapes and generally the concept of “canvas” or “page” locks designers into a “fixed position” mindset. Our predecessors used the terms emotionally; they needed a metaphor from the physical world. When we manually position an element on the canvas, it’s static and without context to anything.

We moved beyond skeuomorphic to flat design for the same reason; we no longer required the physical metaphor.

Clinging to these metaphors hinders us.

We live in an era when our design tools enforce form over content, while the medium we are designing for embraces the exact opposite, and for a good reason. The internet is designed for content, and design for content is design for meaning.

The internet is alive — it breathes, dances, and communicates. By its nature, it’s adaptive, always changing. It tells stories.

We were bridging the gap instead of moving the tectonic plates.

Tools define our processes. The next generation of design tools should help us define our process instead of enforcing one, and there is a big difference. We’ve made progress by borrowing concepts and logic from the development side, yet today, design tools still emulate the behavior of the code running on browsers and native apps to output a collection of pictures with hotspots, animations, and transitions.

The design objective, of course, is to allow stakeholders to navigate through a series of non-functional images we call a “prototype.” For years, we’ve patched these inherent weaknesses by using the wrong tools that translate our design into a form that developers can understand. We call it the “handoff” gap, and use tools designed for this issue. First, there is a problem with the term — handing off something sounds like passing the responsibility to someone else.

“It’s not my problem anymore, I handed it off to the dev team using… tool X”

Also, there isn’t really anything valuable to hand off. Letting the developer copying some CSS is nice, but it’s not in context to anything and making a lot more manual work to the dev team.

Some designers close this gap by reinforcing their skills — learning how to code. But code is essentially a textual representation of functions, making it difficult for most designers to understand (because we’re visual people).

And maybe designers avoided web development because of CSS. Because creating layouts and aligning things just didn’t make sense! But now it does, thanks to developments such as CSS Grid (and we have some big plans for this, too).

But designers already understand the importance of grouping elements together, using components, states, and designing systematically.

The “handoff” part is a temporary fix, there is no place for this in the future we are creating.

The processes are interrelated — it makes no sense to divide them.

The future of design tools is not solely about the concept of design-to-code because this doesn’t solve the core issue.

The real problem is that the design and development teams have worked separately.

They maintain different environments, using two languages and assets to describe the same things. They function redundantly. A stroke is a border, a group is a div, media queries mean responsiveness or different screen sizes and so on. It’s a modern-day Tower of Babel.

Dividing and conquering

The latest design tools brought us to the doorstep that creates a direct connection to the medium. But they don’t open the door, so they don’t fully deliver.

With Relate, design & development teams will work together on the same source of truth. Removing the visual work for the developer by precisely providing what she needs to write functionality on top of it.

Our current challenge (which we’ve partially achieved) is what we call Stage. Stage is a highly-intuitive visual editor that supports systematic design while simultaneously outputting code. At the moment, Relate controls and manipulates only the visual aspect of the code — the HTML/CSS.

What’s next for Relate?

Relate is still an early stage project, we are here to take the long walk, and the appropriate time has come to announce it.

Our immediate priorities are:

  • Perfecting the Stage editor so you will be able to create high-end responsive interface layouts (powered by CSS Flex and Grid), manage styles consistently and apply them.
  • Completing the foundation for creating a living design system of components, states, and properties.
  • Outputting the code for you as a ReactJS package and syncing it with a Github repository, Dropbox, and Google Drive. Not using React? Not a problem. We are evolving and will adapt it to your needs.

Who’s “We”?

We are a small team of five people who breathe design and code. We’ve had the privilege of creating a lot of products for the web, and now we’ve emerged to create Relate.

We’re introducing a private beta in the coming months to be sure that we refine our tool to meet your precise needs through constant iteration and improvement.

It’s only the beginning…

Amazing developments are occurring in our field. The next generation of design tools are on the horizon — tools that will bring us closer to developers, powered by real code. With Relate, we’ve imagined a future where designers and developers work harmoniously to create beautiful, functional products for the web. And the future is now.

If you are a product enthusiast, please join our growing waiting list, follow on Twitter, and like on Facebook

References and inspiration

Create Design Systems, Not Pages
On Design Tools and Processes
A Dao of Web Design
Declarative Design Tools
Yes, That Web Project Should Be a PWA
A DevTools for Designers