We as designers are the architects of the digital experiences we find everywhere today. We are creators by nature yet the creation part has always been left to engineers, they are the ones that could bring our concepts to life.

In the past, design tools emerged on the idea of enabling designers to move quickly. By just plotting pixels, we could concentrate on design with ease. And this separation of concerns was good. It changed the process of designing and with it, design boomed. We learned how to communicate through interfaces, and it became a key role in almost any company.

But time goes on and today drawing interfaces it’s just not good enough. It’s too far apart from implementation and reality, and it doesn’t tell the whole story. Prototyping tools helped us get closer to something that’s somewhat interactive, but the main problems have always remained untouched: we are still as far apart as can be from the medium we design for, and developers and designers are too disconnected.

As everything else is changing, we are still using the same design methods we started using more than 20 years ago. A necessary evil, all because coding is hard, right? Well, we believe it’s time for a change!

A better world for designers… and developers.

The idea of designing using code it’s not new. In fact, its been around for decades! because somehow, we have always known that designing in the user’s environment would solve so many problems, think about it:

Designs would stop being a disposable asset but the real product itself. Not just what it looks like, but how it works too.

itself. Not just what it looks like, but too. Designers and developers would communicate, share and work together through the same channel.

would communicate, share and through the same channel. Because designing would be done in the end-user environment, instead of drawing “what I wish it were”, I would be creating the thing for real, so it will look exactly as I envision it. We would kill the step in which a developer has to (miss)interpret a bunch of images, and that means fewer questions and meetings! 👏

By sharing the same code base, design iteration would get much much better.

Responsivity is native to the web, and so are components, animations, and interactions. Un-opinionated, standard, future-proof solution out of the box.

We would have shared components made by designers that behave and look as intended to, in any device and situation. Designers and developers will help and complement each other, and development will become to be more about assembling and less about crafting. (This idea was discussed in detail in this great talk by Monica Dinculescu)

But of course, the design process has to be visual, simple and fast. And coding has always been slow, hardly visual and not so simple.

But why now?

How do you make design simple, fast and visual while using code? Well, it turns out that the Web is today such an awesome platform thanks to so many amazing people that work in making it better and better.

Web Components make easy the creation of new elements with encapsulated styles and behavior, that can be reused and share. They are the building blocks of modern web apps.

CSS Grid and Flexbox are the end of the complex laying-out problem of the past.

Web animations make animations easy to describe from Javascript, and because any behavior can be wrapped in a Web Component, we can create animations using HTML and CSS only too!

Service Worker, Cache Storage, IndexedDB and some others Web APIs allow us to keep all your project files locally and offline available.

And those are only few of the things that were needed to make it possible.

Meet Hadron! ✋ 🎉

Hadron is a tool aimed to make designing through code visual, fast and easy by embracing the web platform.