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.
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.
- 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?
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.
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:
✔️ Or use CSS Grid through the tool, to create grids easily:
☝ 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.
✔️ Same for creating responsive designs. You will use standard Media Queries, but with help, it couldn't be any easier.
✔️ ️HTML is also accessible through the Elements and Selection panels. You can use the latter to update the selection 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.
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
Today we are super excited to be launching Hadron Preview Release: a way to get early access to Hadron, help us polish it and shape our product roadmap.
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!
