Orion’s new look, and split editor

Designing a web based development tool has turned out to be a truly interesting and challenging job. Developers, it turns out, are strongly opinionated about the capabilities and behaviour of their tools, and want familiar controls at their fingertips.

It’s fascinating for me to think back through the evolution of Orion during the three years that I’ve worked on the front end. I’m really pleased with this new version of Orion’s interface, that we’ve just completed [ and will commit later this week ]. It comes close to what I’d hoped it would be when I first started making commits.

New Orion screenshot

A simpler and more modern look for Orion.

The new editor can be split to enable developers to keep open two files for editing at a time. This is especially useful for instance if you’re working with css and html or javascript, to ease hopping between files that rely on shared definitions.

New Orion editor - split view

New editor showing split view

Introducing split views forced us to relate the file name to the area that is split, and since the filename used to be part of the breadcrumb at the top of the page, we elected to show only the filename, but offer the whole path in a hover.

Relocating the breadcrumb freed more space from the old horizontal area that was devoted to it, so we were able to merge the remaining few controls ( for the login, and for the operations feedback ) into one bar.

The result is a much cleaner look. The navigation and operational controls sit on the perimeter of the creative coding area, in an L-Shape that defines the page.

You can compare it to the previous look here:

Previous version of Orion editor

Previous version of Orion editor

We’ve carried that L-Shape as a pattern into the other pages of Orion. You can see it here for example in the Git page.

New look Orion Git UI

New look Orion Git UI

Since Orion hadn’t had a facelift in a little while, we took this opportunity to shade it with a darker, more contemporary look, drawing on a consistent deep blue anchor colour, and relating it to tones from that blue swatch book. We wanted a darker look, but perhaps a departure from grey, to offer a little more interest.

As part of the design community at IBM, I’m a student of the IBM design language, and so leaned on the swatch books from the open resources offered. I also considered experimenting with some of Google’s Material Design, which I might also try if I can make some time for it.

Orion is open source, so you can colour it in however you like 🙂

I added a new ( switchable ) dark editor theme called ‘Ceol’ [ the Irish word for music, pronounced like a quick ‘ky-ole’ ].

What we’ve learned is that developers still like to see the familiar desktop approach for developing. With this latest version of Orion, we think we offer that, but in a contemporary and well thought out web context, drawing on modern navigation approaches and web layouts.

When I use Orion these days, I forget that it runs in a browser. It comes into its own when combined with Git deployment – for instance when editing GitHub pages. I can maintain my website entirely from a web browser.

It really starts to open up the power of creativity in the cloud, and now with a new more minimal look.

This entry was posted in New & Noteworthy. Bookmark the permalink.