Design and develop at the same time?

Relate is the first interface design tool that empowers design and development teams to create 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.

It’s for teams to create interfaces that run on the browser and are powered by actual code.

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 and 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.

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

The web is maturing

Web design and development have evolved rapidly in recent years. Methods that were once just a convention or “best practice” are now at centre stage. We automated processes with the rise of front-end technologies.

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

And though we are repeatedly saying things like…

“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 at the end of the day — Designers do not affect the actual product.

We’ve used the wrong metaphors.

The truth is: current design tools discourage systematic thinking.

When we sketch, we create in a “fixed position” reality.

In much the same way, artboards, pencils, shapes and generally the concept of “canvas” or “page” lock 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 alive — it breathes, dances, and communicates. By its nature, it’s adaptive, constantly changing. It tells stories.

The internet is designed for content, and designing for content is designing for meaning.

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 behaviour 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.” We’ve patched these inherent weaknesses for years by using the wrong tools to translate our design into a form developer 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 anything valuable to handoff. Letting the developer copy some CSS is excellent, but it’s not in context to anything and makes 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 didn’t make sense! But now it does, thanks to new advancements such as CSS Grid (and we have some big plans for this, too).

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

The “handoff” part is a temporary fix, and 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, and 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, directly connecting 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 exact source of truth. They are 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 Stage. The 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.

Who’s “We”?

We are a small team that breathes design and code. We’ve had the privilege of creating many digital products for leading companies, and now we’ve emerged to create Relate.

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

Significant developments are occurring in our field, and it’s the very beginning! The next generation of design tools is on the horizon — tools that will bring us closer to developers, powered by actual code.

With Relate, we’ve imagined a future where designers and developers work harmoniously to create beautiful, functional products for the web.