Witbe

Solarized updated

Javascript developers and Technicians spend a lot of times looking at tables, numbers, and graphics on a screen. We wanted to address the issue of eye fatigue by using a color scheme that is not too aggressive, as pure white and pure black can be, and that has enough contrast to draw attention. This is the reason why we decided to give another application to the Solarized color scheme by Ethan Schoonover, which was at first designed for terminal usage. As the Solarized color scheme is consistent across calibrated and uncalibrated monitors, it was the perfect candidate for handling data all day long. However, in order to make a real difference with the palette, we also gave a fresh touch to the color palette to make graphics more appealing to deal with.

Down with green color

It can be unorthodox to ban green as a "everything is alright" color. Yet, after testing with users, it appears that keeping it creates more confusion. Indeed, users need to be able to instantly spot where are the issues. However, green has been kept for only two actions: dismissing a false positive, and checking an issue as resolved. We also came up with the idea of displaying a horizontal calendar for the last 3 months: it helps users to spot recurring patterns, and to react accordingly.

Flat design, data visualization, and intuitivity

When Windows released its Metro tiles in 2011, flat design was not at the peak we know today. However, this mix between Swiss Design and minimalism is a great way to emphasize on data and actionable content. Moreover, we were inspired by data visualization, and we worked to make the most of important data by accentuating numbers and relationships between them. The interface is also fully intuitive: users can select and type the date, or the range, they want to review, they can compare indicators on graph simply by clicking on the indicators. They can measure loss or gain of activity simply by hovering, or dragging through a period, and so on...

Inspired by annual reports

In order to support data visualization and give a sense of reporting, we used Gotham font family for headings, and body text, and call to action, Verlag family for annotations and legends. Numbers are displayed in Tungsten Medium for reporting, Vitesse Medium for errors. All fonts have been created by Hoeffler and Frere Jones, for Typography.com.

Gotham is a sans serif typeface, inspired by a form of architectural signage that achieved popularity in the mid-twentieth century, especially throughout New York City. It has been commisioned by GQ magazine. Their editors wanted to display a typeface with a "geometric structure" that would look "masculine, new, and fresh". GQ agreed that they needed something "that was going to be very fresh and very established to have a sort of credible voice to it," according to Jonathan Hoefler.