It’s about time to design in the real world. Introducing Hadron!📢

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

Hadron.app
May 8, 2018 · 6 min read

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.

  • Designs would stop being a disposable asset but the real product itself. Not just what it looks like, but how it works too.
  • Designers and developers would communicate, share and work together 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?

  • 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! ✋ 🎉

Image for post
Image for post
Hadron

Even though you will use code, the great thing is that not only very little writing is needed to get started, but also your designs can be progressively enhanced. Meaning that you can start designing with only simple HTML and CSS, and later make your design do more by adding behavior through other Web Components or even writing JS yourself.

Hadron provides with the help needed to make everything as simple as possible:

✔️ You can use Flexbox through the alignment tool to position elements just like you have always done:

Image for post
Image for post
CSS Flex box alignment tool

✔️ Or use CSS Grid through the tool, to create grids easily:

Image for post
Image for post
CSS Grid tool

☝ But Hadron wants to help you while going hand in hand with the Web Platform. Magic doesn’t happen behind. And this is great because:

  • What you can do in Hadron keeps getting better as the web gets better too. Any other design tool out there allows you to modify the appearance of elements through their visual controls. In reality, those tools get always very complex while limiting what you can achieve.
  • It helps you to learn how the Web works, progressively.
  • It’s easier to understand and learn because it’s not specific to Hadron.

What does this mean? For instance …

✔️ When using our CSS tools such as the Flexbox, Grid, Color picker, Shadows… changes will be reflected on your CSS, and you can pick what rule is going to be affected. Those tools are there to help, not hide.

Image for post
Image for post
The Grid Tool will generate the CSS for you, but you can always write it yourself.

✔️ Same for creating responsive designs. You will use standard Media Queries, but with help, it couldn't be any easier.

Image for post
Image for post
The simplicity of adding media plus the live preview makes responsive reaaally simple! 👏

✔️ ️HTML is also accessible through the Elements and Selection panels. You can use the latter to update the selection HTML

Image for post
Image for post
Selecting and updating the HTML of an element.
Image for post
Image for post
You can also insert elements via menu instead of writing the HTML

And the best part is that while you design, you are also creating a great modern full app. In Hadron we have the concept of “engines” and we are starting with the “Polymer 2 Engine” which means that your design is a modern Progressive Web App right from the start.

Image for post
Image for post
You can see all of your project files too. It’s just like a regular app. We add no extra dependencies.
Image for post
Image for post
While working on the canvas code is updated automatically. But you can also edit it yourself of course.

On top of all this, you can work offline and sync your project whenever you have accomplished something, and then publish it to a hadronapp domain such as my-project.hadronapp.com for free.

There is so much more we have to tell you about Hadron, but this introduction is already getting too long.

What’s next

Hadron is free to use for everyone, for an unlimited period of time with no limits, because we believe in the democratization of technology and design in particular.

Looking forward to hearing your feedback!

Request Early Access
Twitter
: https://twitter.com/hadronapp

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store