Backstage Window System

There are some pretty huge changes coming to Flightmap soon: we're updating the user interface big time!

We believe that design is just a important as function, and consequently we've spent a lot of effort on designing the brand of our company and our main product liquidFOLDERS. Being as design-centric, we've been arguing profoundly against the flat design fad, and have firmly entrenched oursleves in the skeuomorphic/realistic UI camp.

It's always very easy to write a rant on something: the author takes little risk, but enjoys superiority over those who he criticizes. Negative reviews are most rewarding as they are fun to write and amusing to read. But there are times when people risk something: when they dare to create something new and better—a task much more daunting than mere criticism!

Consequently, over the course of the past months, we have developed something that we think is one of the best UI themes in the world—and it'll ship with the next version of Flightmap!

Considerations

Traditionally, a window is divided in two areas: the client area, which is controlled by the application, and the non-client area on the outside which is rendered by the operating system. In recent years, this line blurred when more and more applications use tricks to place some controls (mostly for navigation) in the non-client area of their window: e.g. the Windows Explorer and older versions of Firefox.

The non-client area is problem for design and brand recognition alike, as the operating system is solely responsible for it. There's quite a variety of window styles across all varieties, ranging from the gray classic theme still used on servers, the deep blue Windows XP “Luna” theme, Aero Glas with different color tints, all the way to the ugly flat theme of Windows 8 and 10.

To make things worse, liquidFOLDERS (our relational file system) has a sidebar with filter controls. This sidebar is hidden when the window is too narrow, but a click on the “Hamburger” toolbar icon swipes the client area out of the way to reveal it. This sidebar has to be visually distinct from the client area, but also from the non-client area (hence the dark color). So this makes three window areas now, which have to form a clear, consistent and visually pleasing experience in line with the brand—a tough task!

Backstage Window System

It is my pleasure to present our world-class “Backstage Window System” to you, which has been successfully deployed with liquidFOLDERS since December 2015. It will be available in Flightmap in spring.

Window areas

Our UI returns to two distinctly different window areas, but instead of separating them by a technical aspect (client and non-client area), we separate them by their use: the frontstage is the main area where your content (like a document) is placed. It has a light color, just like any desktop application. The frontstage usually has a toolbar with frequently used commands.

The second area is the backstage (hence “Backstage Window System”). The backstage holds all controls that don't manipulate your content directly, but provide navigation or file commands. These commands are used much less frequently than those on the frontstage toolbar. The backstage is deliberately rendered in dark gray with a linen texture and realistic shadows to provide a rich, skeuomorphic visual experience. The dark colors automatically direct attention to the frontstage with your content, and look gorgeous in fullscreen mode!

Shadows

Speaking of shadows, have you noticed that the shadows of Windows' Aero Glas are somehow awkward? This is one of the things you can't un-see: they are not realistic shadows, but mere gradients from black to transparent, fading from the window frame. Our UI works without any window frame, but relies on a beautifully rendered shadow to give the impression of a panel with rounded corners floating above your desktop—even on Windows XP! And you just wouldn't believe how much time you can spend on designing those tooltips!

We're really looking forward to deliver this world-class UI to Flightmap in a few weeks.