How to Prototype Windows 7 with Axure: I

What happens when you’re asked to retrofit a web app prototype into the Windows 7 UI but you insist on using your beloved Axure to do it? First, intense fear sets in. Then, after that goes away, a whole slew of questions come up:

  • How can a browser simulate the Windows environment?
  • How can windows be dragged and sent to the foreground/background and can transparency be simulated when windows hover over each other?
  • How can I simulate the resizing application windows?
  • Can I play the paper-crumpling sound after I drag a desktop icon into the Recycle bin?

Not knowing if this tutorial series will have two, three, or nine parts to it, we’ll start with the first question:

Q. How can a browser simulate the Windows environment?A. Switch your browser to Full-Screen Mode

If you’ve been looking for an excuse to use your browser in full-screen mode, well now you’ve found one. Clearing the buttons and toolbars from your browser is the only way to enjoy the beautiful Windows 7 desktop, but you have to do some homework first.

1. Determine the End-User’s Screen Resolution

My MacBook sports a 1920 x 1200 resolution, but the end-user’s machine might not, so design with that in mind. The last thing you want to do is miss your kid’s first birthday only to realize you wasted your time designing for the wrong screen size. Shame. Among the many, sometimes funky, monitor resolutions out there, here are some common ones:

  • 1920 x 1200
  • 1440 x 900
  • 1280 x 768
  • 1024 x 768
  • 800 x 600 (Still?)

Choose wisely.

2. Find WIndows 7 Wallpaper

Search Google Images

Go to Google Images and type “Windows 7 Wallpaper” into the search field. When the results display, find the Any size section in the left sidebar and click on the “Exactly…” link. Enter the width and height of the wallpaper you need and click Search to display only the images with the resolution you’re looking for.

Browse Microsoft’s Wallpaper Collection

Microsoft provides a large collection of themes and wallpaper conveniently categorized for you, if you’re into that sort of thing. All wallpapers are sized at 1920 x 1200 making it easy to design for larger resolutions and downsize for lower ones without degrading the image quality in the process.

3. Get a Windows 7 UI Stencil

Designing the interactions in a prototype are tedious enough without having to worry about visually designing everything in Photoshop, too. There are plenty of free Windows 7 UI Photoshop templates on the web you can grab. Check out Deviant Art. Find one that uses a Windows 7 theme you enjoy and use that as the basis for your Axure file images and interactions. If you’re not picky, the PSD files I used were by Carlos Way and dj-corny. Keep in mind that all we’re setting up in this tutorial is the wallpaper and task bar with the fancy Windows orb, not the application windows and interactions.

4. Set Page Formatting Options in Axure

To set your Windows 7 wallpaper as your background click the Page Formatting button in the Page Properties Pane then the page icon next to the Page Style drop-down menu:

Create a new page style and name it Windows 7 or whatever you like. Check Page Align and set it to left, then check Back Image and click the Import button to embed your wallpaper:

Your Wireframe Pane should look something like this:

5. Browser Test

After generating your Axure prototype in Firefox, Chrome, or Opera—I haven’t tested in Internet Explorer and Safari doesn’t have a Full-Screen Mode—you’ll see the browser’s buttons and toolbars and the defaul sidebar Axure adds for the Site Map, Page Notes, and Discuss tabs. Collapse the left sidebar by clicking the gray rectangle in the top right corner so your wallpaper takes up the entire screen beneath the browser’s buttons and toolbars.

With the left sidebar collapsed, go into Full-Screen or Presentation Mode (Opera only). The shortcut is Shift-Cmd F (Mac) or Shift-Ctrl F (PC).

What you should see is an exact replica of the Windows 7 desktop. Again, my example was designed for a 1920 x 1200 screen resolution. Any other resolution would alter the final result by either exposing part of the white background because the wallpaper was too small or displaying vertical and horizontal scrollbars because the wallpaper is too big.

Preview in Browser | Download .RP file

With our Desktop ready for viewing in a browser, How to Prototype Windows 7 with Axure Axure: Part 2 will take us a step back and show you how to create the Windows 7 login screen with sound! I bet you can’t wait to hear your Axure prototype in action.