A whitespace theme for Pharo (work in progress)

Whitespace is the most basic variable of graphic design. We embrace it as soon as we see it. In particular, modern web pages offer good examples of whitespace usage. Yet, when we turn to the desktop, and in particular to development tools, whitespace tends to disappear, as if it would be a wasted space. There certainly are exceptions to the rule, such as LightTable, but to a large extent, the world of development tools is dominated by thick borders. I believe we can do better.

As an experiment, I started to work on a new look for Pharo and Moose that tries to maximize whitespace (I even chose a white whitespace). I started from the existing Glamour theme and removed color and lines where I did not see a good reason for having them.

My experiment is a primitive one: first, I started from a filled space; second, I only touched the theme of existing widgets without affecting the widgets themselves. Still, I believe it shows potential. Take a look at the pictures below (please try to ignore the thick gray buttons from the Pharo code browser).

Moosetools.png

Devtools.png

You can reproduce the pictures by executing the following code in a recent Moose 4.8 image:

MooseImageSetupCommandLineHandler new
installFonts;
installAthens;
installGLMWhitespaceTheme.

To exploit whitespace at its full potential we need to make our widgets less dependent on lines and delimiters. During this experiment, I realized that our interfaces get often cluttered because we rely on fine-grained widgets that are designed to work independently from each other. As a consequence, to ensure their independence they have to be distinct which often leads to explicit delimiters. A way out of this trap is to approach the design globally and construct interfaces out of higher level patterns based on widgets that work tightly together.

Whitespace is a resource. We should fill it only for a good reason. Carefully.

Posted by Tudor Girba at 22 May 2013, 9:51 pm link

Comments

Hi! Excellent idea! We cannot click on the screenshot to have a larger version?

Posted by Alexandre Bergel at 23 May 2013, 3:28 am link

Well, the screenshots show just a hint. You can try the real thing in the Moose image :)

Posted by Tufor Girba at 23 May 2013, 6:52 am link

Is this the same idea as with the default UI of VisualStudio 2012 (remove the colors) ?

If I remember it correctly the (developer) user experiences were pretty bad.

Posted by Marten Feldtmann at 29 May 2013, 7:12 am link

Looks good!

Posted by Gary Chambers at 29 May 2013, 8:13 pm link
Posted by Tudor Girba at 1 June 2013, 11:24 pm link
Posted by Tudor Girba at 1 June 2013, 11:25 pm link