In my last post, I covered some Windows 8 UX basics. Now comes the fun part. Let’s look at some tips and tricks for quickly modeling for Windows 8. I’ll focus on key shortcuts I found using Axure, but some of the resources I’ll highlight can be used in any number of visualization tools.
1. Widget Library Downloads – The first thing I always check for when beginning a project in Axure is whether or not the Axure Widget Library has anything I can leverage. In this case, there’s a handy Metro UI Library in the Widget Libraries by the Community section:
The library was created by Netcraft, and houses all kinds of useful widgets:
Go ahead and download the library– it’s free! Then unzip the file and upload to Axure like so:
Voila! You can access the uploaded assets just like any of the standard Wireframe and Flow widgets in Axure.
Now that you have some assets to help you create the Windows 8 look and feel in no time, let’s set up a grid to help stick to the standard Windows 8 layout.
2. Custom Grid/Guides
Windows 8 uses a grid system comprised of 20 X 20 pixel units, each of which can be divided into subunits of 5 X 5 pixels. The Windows 8 User Experience Guidelines do a great job outlining page layout standards. Here’s a helpful image included in the PDF:
I like to have a sense of the subunits and units, so I’ll show you how to customize your grid to display the 5 X 5 subunits, and also how to set up some guides to represent the 20 X 20 units.
To customize your grid, select Wireframe > Grid and Guides > Grid Settings from the top menu in Axure. Then arrange your grid settings like so:
Alternatively, if you just want to see the main units, you could change the spacing setting from 5px to 20px and call it a day. If you’re like me and want to have the option to see both, save your grid settings and access Wireframe > Grid and Guides > Create Guides from Axure’s top level menu. For the 20 X 20 units you’ll want to set up your guides like so:
Select ‘OK’ and you’ll be all set for a pixel-perfect prototype. (Or tweak the grid/guide settings in a way that makes it easier for you to model.)
Also note if you’re using a Mac you can toggle guides on and off using “⌘.”
3. Layout Standards
Here are some handy standards from the Windows 8 User Experience Guidelines:
Page header should be 6 units in, 5 units from the top.
Horizontal padding works as follows: hard-edged items should be separated from accompanying text and other hard-edged items by 2 subunits (10 pixels). Items in vertical lists should be separated by 2 units (40 pixels), and separate groups of content should have 4 units (80 pixels) between them:
For vertical spacing, separate list items (tiles or text) by 1 unit (20 pixels), and hard-edged objects by 2 subunits (10 pixels):
Now aren’t you glad you set up a grid?!
4. Wireframing Toolkit
Lastly, I’ll share with you a great resource one of my clients clued me in on. This wireframing toolkit was created for Powerpoint. It houses a number of valuable assets and icons, which can be copied from Powerpoint and pasted straight into Axure. The work is licensed under Creative Commons, so you can use it how you please, privately or commercially, so long as you give credit where credit is due (I copied the last screen of the deck– the credit screen– straight into my prototype.)
Check out some of the included slides:
The icons (above) are extremely useful. They can be grouped/ungrouped so you can use the image with or without the circle around it. You can also resize and change the color by selecting ‘Format Shape’ in Powerpoint. And like I said before, these icons can be copied and pasted straight into Axure, making modeling a breeze!
Just don’t forget to cite the license for such a nifty tool as this. In case I haven’t driven the point home, I’ll include it here:
I hope this helps you pinpoint some practical means by which to speed up the modeling process. It’s great to have so many powerful (free!) resources to draw from. A sincere thanks to the community of folks willing to create templates and share their work with the rest of us. If you have any other Windows 8 or prototyping resources you’ve found particularly useful, please drop a line and let us know about them! Happy modeling!
