Look and Feel Journey - From Skins to Themes By Nick Decker PDF Format

Nick Decker Engineering Supervisor

ontemporary operating systems utilize themes to define the look and feel of the operating system and its applications. While at first glance an operating system’s theme may appear to be just another pretty face, themes actually customize and enrich the user experience with their specialized graphics and effects.

This article looks at themes and skins – the origins of today's "look and feel" – and journeys through their application in the software industry. Along the way, discover other industries’ use of skins and the growing demand for themes.

Skinning’s Beginnings
The concept of themes is relatively new to the computer industry, even though a software company pioneered them almost a decade ago. In 1997, a Windows media player named Winamp introduced the world to skinning, or changing the look of an application. Winamp’s premise was fairly simple – have the main program retain the same buttons, controls, and layout but allow the end user to overlay a graphic image on top of the application, thus putting a new skin on it. This application raised more than a few eyebrows as it looked, by default, completely different than any other Windows application. In fact, it looked completely different from any other computer application, regardless of the operating system. It sported chrome buttons, digital readouts, sliders with changing backgrounds, buttons with LED indicators, and more. The default skin (Figure 1) was enough to pique everybody’s interest and soon graphic artists began churning out their own skins for Winamp. Shortly after, developers joined in and created programs to skin the player with user-supplied graphic images such as family photos, sports teams, etc. Winamp became a huge success and was, at that time, the de facto MP3 player. As a testament to Winamp’s success (and therefore the success of skinning), Justin Frankel – the 20 year old programmer and creator of Winamp – sold the franchise to America Online (AOL) in 1999 for $100 million.

Figure 1. The Winamp skinned media player with the default skin (left) and two other skin variations (center and right)

A Closer Look
Arguably, skinning made Winamp the ‘killer app’ of the time. Nobody had ever seen or used software that was capable of changing its look in such a radical fashion. Winamp and its rudimentary form of changing the look of an application was just the beginning of things to come. As mentioned earlier, Winamp merely applied a graphical image over the main application – all of the original controls remained the same. The play and stop buttons, for example, were always in the same place and were always the same size regardless of the skin used. This meant a Winamp user always knew where the play and stop buttons were no matter how wild the skin was. However, this method did impose stringent restraints on the skin artist, as there were concrete limits imposed on their creativity. Skin artists pushed the envelope by making it appear as though the controls were different sizes and shapes, but in reality, even the round buttons were still contained within the rectangle that defined the space for the play controls. This lead to the next step in the evolution of customization – themes and freeform skins that altered both the look and feel (L&F) of the application.

Look and Feel
As the term look and feel suggests, customization soon went far beyond Winamp’s method of laying a graphic image over the window. Advances in customization made it possible for the artist to have complete control over the final graphical user interface. These advances also removed all of the sizing and placement restrictions as freeform skinning made it possible to change far more than the graphical appearance. Now the artist could also determine the size, shape, and placement of the control. This meant that the familiar small rectangular play button could now be large, round, and placed within easy reach on the form. Combining all of these elements dramatically affected the usability of the user interface. Graphic designers could improve their application’s ease of use by making commonly used controls larger so that it would be easier for the end user to navigate to it with the mouse.

Another big step in usability was the introduction of hovered states. In addition to a button having just two states – pressed and unpressed – the L&F customization offered a third state, hovered. Whenever the user moves the mouse to a button or ‘hovers’ over it, the button changes its appearance. The typical hover effect may change the color of the button or add a glowing effect. Whatever the change, the possibilities are endless – all providing instant and tangible feedback to the users and enriching their experience with an application that is easier and more pleasant to use.

Skinning Gains Mass Appeal
As skinning evolved and began to show up in one application after another, it moved from a niche market with a small cult-like following to the mainstream. Soon, hundreds of applications offered customized user interfaces and even operating systems joined in by offering theme support. This should not come as too much of a surprise since people love to customize things to their liking. In fact, the exact same phenomenon was occurring in another part of the world of technology – cell phones. Consumers began buying custom cases, custom covers, downloading custom wallpapers and ring tones, all in the name of making their cell phone fit their individual personality. This trend proves yet again, that the ‘one size fits all’ mentality does not work. Similarly, this mentality has not worked for many years in the auto industry. Today’s automobile manufacturers offer a wide variety of exterior color choices, interior designs, option packages, etc. – a very long way from the Ford Model T mindset of “any color as long as it’s black.”

Themes Defined
While the definition of themes is sometimes a bit vague, the industry generally views it as a mechanism to change or customize the look and feel of an operating system or window manager (in the case of an operating system like Linux). The operating system typically comes with a stock L&F set by default, yet may offer alternatives in the form of themes. Applying a new theme has the potential to change completely the appearance of the operating system. The L&F of controls – how they are graphically represented, their size and shape, how they react to focus and hover events, how they appear when disabled, etc. – is probably the aspect of a theme that has the most impact. However, themes can go much further, replacing the wallpaper, fonts, icons, sounds, etc., to create radically different designs. Microsoft first offered themes with Windows 98 and has kept the tradition alive by offering more themes with current operating systems such as Windows XP. Their Plus! Themepack offers stylizations that include images, custom mouse pointers, sounds, and skins for Windows Media Player. Even the core L&F – the Windows XP style or Luna theme – is modifiable. Microsoft offers a "Default (blue)" theme shown in Figure 2, but users can choose an "Olive Green" or "Silver" theme. Other versions of their operating systems, such as Windows Media Edition 2005, offer other themes including "Energy Blue." Based loosely on the default "Luna" theme, Energy Blue is a much more vibrant, polished, and contemporary look. Microsoft updated most of the theme elements with more gradients, glassy reflections, etc., resulting in a fresh new appearance.

Figure 2. Windows XP Default (blue), Silver, and Windows Media Edition 2005 Energy Blue themes

Third Party Alternatives
Taking Windows XP as an example, three color choices and a couple of L&Fs do not offer many choices for those wishing to customize their computing experience. To expand the options, third party alternatives exist that raise the ante to several thousands of available themes. For Windows operating systems, Stardock's WindowBlinds offers thousands of themes. For Linux, several thousand themes are available for the various window managers and desktop environments such as the popular KDE. This mechanism is so popular and effective; it is the way that Java makes its applications adhere to the various L&Fs that are available on the many platforms.

For example, when running a Java application like BBj® on a Mac, Java provides the appropriate L&F so that the BBj application looks and acts just like a native Mac application, all the way down to the glowing gel buttons. Likewise, Java automatically transforms the same BBj application to the Windows XP L&F when running under that operating system. BBj users can take this one step further with BBj’s support of skinning via SkinLF. BBj users can easily apply new skins by specifying a desired skin on the command line and even have the ability to create their own skins, as mentioned in an earlier Advantage article BBj 2.0: More Than One Way To Skin An App.