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.
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:
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.
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.