Installer Wizard - GUI Design Sample

NOTE: Due to screen capture limitations, this video may start to playback very slowly towards the end during zooming and panning. It's a lot smoother than that in reality!

Overview

This example software Installer design is inspired by the superb Inno Setup installer created by Jordan Russell and Martijn Laan.

It demonstrates the correct way to create a Wizard style design, either as part of an application or as a complete application, as in this case.

Things to note

  1. To produce the important consistency between each screen, template designs were carefully created first for the two styles. The "Duplicate Design" command was then used to create each of the actual screens.
  2. Having completed all the individual screens and dialogs, the master "InstallerWizardExample" design file was created to storyboard the Wizard.
  3. Each dialog in the chain simply links to its successor and predecessor using a "Replace Window" type navigation link directly from the appropriate button.
  4. A hidden navigation overlay was added to the "Installing" screen to simulate the passage of processing time.
  5. While it is possible to replace just the inner panels when the Next and Back buttons are pressed, because so much changes (including the buttons themselves sometimes), it is much easier and better to replace the entire dialog each time.
  6. The first screen in the sequence is set to be the 'Representative Element' (F10 key).
  7. The design shows how graphics may be inserted and layered upon one another to share resources, reduce effort and maintain flexibility.
  8. A condition box is used to handle an error condition during installation. You can add as many conditions as you like at any point in a design.

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