I submitted my first phase of graphical UI polish to the VISTAS codebase.  This is an initial overhaul of icon choices.  It may seem a trivial thing to be spending much time on, but icons are actually very important cues to your users.  Subtle enhancements in iconography and color choice can greatly improve how intuitive an application feels to a novice user.  Additionally, better-looking icons can make a program more of a visual joy to use.

VISTAS has had a very prototype look to it thus far.  Behold, the application as I first came to it:

The VISTAS UI, before my changes.

There are some eyesores here.  The icon on the title bar is just a default filler icon.  The icons on the toolbar are difficult to parse, and some are not even fully relevant to what they do– for example, the camera icon takes you to the “Create Flythrough” window, and the lock icon is really to sync all of the viewer windows.  Futhermore, the overall lack of color makes it hard to distinguish some icons from their neighbors… i.e. the play button on the animation controls on the bottom.

In my overhaul, I not only selected new representations but also introduced more color, so that neighboring icons stand apart from each other.  The “Create Flythrough” icon is now just a picture of a plane, and “Sync Viewers” is properly a picture of a split screen with sync arrows between them, mirroring what it actually does in the application.  There are a lot of other little graphical embellishments throughout the program, but this main program window shot gives you a good idea.  Note that my blog substantially scales down screenshots, but hope this gives you a good sense of the style of my update:

The VISTAS UI, after my changes.

Note that I have not yet addressed icon placement; only image choice.  I still plan to overhaul the menu bar and icon placement in a later update.

While I was at it, I updated the main program icon.  The old icon was functional, but had pixellation around the edges and was just generally not too easy on the eyes.  So, I created a more colorful version in the spirit of the original.  Here they are, sitting side-by-side on my desktop:

Finally, I also created a new pair of methods to ease loading icons and bitmaps from file.  Previously, when creating a new control with a graphical element, you had to embed a big long resource string in your function call and pass it the type of the image.  Now, with my GetBitmapFromImage() method, you can just call gApp->GetBitmapFromImage(“legend.png”) and it’ll handle the rest.  Here’s the source code; it’s short, but sweet.

A pair of methods to load external resources.

Still being a rookie to the project and source control, it took me a lot of revisions to get an update of this size pushed through and approved by the other devs… but I’m already feeling a lot more excited to use VISTAS!