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
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.
WIDTH AND HEIGHT MARKERS
These shapes communicate pixel distances. Ad you resize the shapes, they will update their displayed value.
SPACER BOXES
Spacers are simple rectangular boxes they help make sure objects are separated by consistent distances.
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.
EXPORTING AS A BITMAP
First look at the Page Size shape:
CLick File > Save As, then select the PNG output format, then click Save.
The PNG Output Options dialog will appear.
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.