GUI: An example skin

The advantage of GUI skins is that developers (and users too) can change the appearance (theme) of their GUI to suit their target userbase or their personal taste.

I've posted some images from the R3 GUI project that use a development skin. It's brightly colored, to keep me awake during those long coding nights.

It didn't take long for REBOL GUI artist Henrik (from Denmark) to build a better looking skin -- something you would actually use in an application. Along the way, he built a skin "material" management component that will be part of the GUI.

Here is a comparison of how the GUI test panel looks between the two skins, using exactly the same application code:

First, Henrik's new skin looks like:

Compare that to the original developer skin I wrote for debugging:

Even though these two images use the same GUI panel for layout, note the difference between these skins is more than just a change of colors. It includes differences in shading, rounding, highlights, coloration, and much more.

Note it should be mentioned that these GUI's are built descriptively in R3 scalar vector graphics (SVG) DRAW format. Neither one of these uses a single image file.

5 Comments