Icon Express - GUI Design Sample


Icon Express is the icon editor application that comes with GUI Design Studio. This is the exact same project that was used to design the real application (with a bit of junk removed).

Sometimes, the end result can be quite simple but this example shows that it can take many design attempts to achieve that simplicity. Take a look at the "CompleteAppX" and "CompositionX" designs within the project to see what's meant here.

Things to note

  1. Even within this simple design, some of the features didn't make it into the final product. These are annotated with "V2" symbols (for "Version 2"). With other prototyping tools it's hard to design features for future versions without leaving parts of them within the build but with GUI Design Studio, it's easy.
  2. Scenario boxes have been used twice in the design, not to offer alternate program flows (the usual use for them) but to allow the simple evaluation of different versions of a dialog box. In fact, without those variations, the design would be even simpler.
  3. Some trickery was used to hide the large colour palette when switching to 16 colours and to display it again when switching back to 256 colours. This was achieved using a couple of background-coloured rectangles and a new combo box overlay. It was probably an unnecessary level of detail in the prototype and the intention could have been annotated or documented in the notes instead but it works well.
  4. The main image is actually a copy of the exact same icon shown actual size at the bottom of the right-hand panel, but stretched to make it big with a visible grid placed on top to show the pixels. Icons and images can be stretched to any size in GUI Design Studio so you don't need to create multiple, different sized versions of an icon at design-time.
  5. It would be nice to say that Icon Express was used to create all of the icons in the Tools palette but of course the application hadn't been created yet. Instead, we used GUI Design Studio's ability to integrate with another icon editor that we had available.

GUI Design Viewer

Use the free Viewer to open distributed design projects (.gdd files) such as the samples on this site.

Download Viewer EXEFREE Viewer Download
Installer EXE
Download Viewer ZIPFREE Viewer Download
Installer ZIP