A design tool that is also a developer tool. Introducing profiles in Hadron.

Hadron.app
Prototypr
Published in
3 min readOct 29, 2018

There is a lot of discussion about how design should evolve. On the one hand we believe that it needs to be simple and fast, just like it’s today with any vector-based tool, but on the other hand, we want it to be powerful and do complex things:

  • We want to create and work alongside developers, and not just design disposable static assets.
  • We want to have the advantages and limits of the medium, and not be limited by the tool.
  • We want to speak a common language, one that allows sharing seamlessly across teams and tools.

The answer to all that can’t be other but moving design into the medium we design for: the Web.

With all that in mind we launched Hadron, and at the time we believed that HTML and CSS could be all that was needed: it could be hugely automated and simplified, and it’ll automatically destroy the gap between development and design. As it turns out, we were underestimating the simplicity and speed that we need in the creative process of designing. We started with the powerful, now let’s make it simple and fast.

Understanding each other throughout code.

One of the things that make Hadron unique is the fact that it updates code in real time. We don’t store designs in internal data structures that are later translated into images or code.
This has enormous implications, as it means that files are shared for real.

Designers and developers have different needs. So in Hadron, they have different views that can be switched instantly.

The Designer View.

In Hadron, each “view” is a set of tools customized for one’s specific needs. Designers need to iterate fast and not to worry about implementation details.

You’ll appreciate that it looks very similar to existing vector-based tools but make no mistake, even if you don’t type, you’re still “writing” your own code. There are some differences though, like the web box model laying-out instead of direct canvas manipulation by dragging (for now..)

The Developer View.

If you’re a developer, a designer with some coding background or if you want to learn CSS and HTML, you can switch to this view. Think like DevTools but for creating and empowering your designs.

These are the default views, and in the future, you’ll be able to create your own. This can be really interesting if, for instance, you want to see both the CSS and the Styling tool together.

Wrapping up.

This latest release means a lot for Hadron. It starts a new path in the ultimate goal of simplifying the development and design of digital products by unifying both processes. A path where design comes first, it’s easy and fast. And this is the beginning so expect some big changes in the future too.

There is more to this release, like the clipboard or the new grid and import-files tools (more detailed information in the updates page)

— — — — —

Join the Hadron community

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Hadron.app

On a mission to unify design with development. Learn more at https://hadron.app

Responses (10)

Write a response