« Windows 8 and HyperSnap Corner Clipping Problems | Main | Windows 8 RTM and Wacom Tablets - Even More Flawed Than Before »
Sunday
Aug192012

Mocking up Windows 8-style Start Screen UIs with Visio  

I took a screenshot of the Windows 8 Start Screen and used that as a basis for creating a template for clearly communicating Metro or “Modern” (or whatever they are calling it now) layouts.

You can get the Visio Diagram Here:http://sdrv.ms/P8bXMD

Opening up the file you'll see this

Snap00051

I'll walk you though how this works.

MEASUREMENT UNITS: PIXELS AND POINTS

First, be aware that the Page measurement unit is in Points –  we use points as a proxy for pixels.

For example, if you want something to be 50 pixels wide by 30 pixels tall, then specify it at 50 points x 30 points.

PAGE SIZE

The document contains a page size shape. As you resize the page, this shape will automatically update.

Snap00052

 

WIDTH AND HEIGHT MARKERS

These shapes communicate pixel distances. Ad you resize the shapes, they will update their displayed value.

 

Snap00053

 

SPACER BOXES

Spacers are simple rectangular boxes they help make sure objects are separated by consistent distances.

Snap00055

The spacer in the document represents a 10x10 pixel square.

 

CONTENT BOXES

Content boxes show their width and height in pixels. Use these to indicate placeholders for layout content. 

Snap00057

EXPORTING AS A BITMAP

First look at the Page Size shape:

Snap00052

CLick File > Save As, then select the PNG output format, then click Save.

The PNG Output Options dialog will appear.

Snap00058a

In the Size section, select Custom. Set the Unit to pixels, then set width and height to what the Page Size shape reported – in this case 920x470.

And then click OK.

The exported bitmap will have the desired size, though you may notice that the sizes are often off by 1 pixel.

 

 

 

 

 

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>