ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #8 Layout & Composition Part I

24 Weeks of Windows Phone Metro Design | #8 Layout & Composition Part I

 24 Weeks of Windows Phone Design Index


Hello! This time I decided to record a video for you. Finishing the design series is taking me more than I’d like so I’ll produce videos to finish sooner and at the same time be able to cover all topics in depth. Here is the first part of Layout & Composition in Windows Phone.

Here is the Panorama.design file I mention in the video…

Video Notes

The key take away of this video is to leverage the Windows Phone design grid. Last year while I was at Microsoft, we started pushing strongly towards using this grid. During a casual conversation with Jeff Wilcox he picked up on the notion of the grid and created a Metro Grid Helper. Note: This helper displays a Grid that is 25 x 25 pixels… the actual grid should be from left to right: 24 pixels, 12 pixels, 25 pixels, 12 pixels, 25 pixels etc etc and finish in 24 pixels. Could any one in the community update Jeff’s helper to match these dimensions? :) Remember to respect the 24 pixels margin to the left and right in your Windows Phone design composition. The next magical number is 12 pixels which is the padding used extensively across Windows Phone. I usually set my nudge distance to 12 pixels in Expression Design (you can do something similar in Photoshop and Illustrator). With a nudge of 12 pixels I can then move, position and copy objects in multiples of 12 which is a great way of laying out items. In this video we show the Windows Phone design grid and we lay out some basic shapes. In the next few videos we’ll get deeper into how to lay out text and also on how to deal with irregular shapes or custom sized tiles.

2 Responses to “24 Weeks of Windows Phone Metro Design | #8 Layout & Composition Part I”

  1. Valeriu Caraulean Says:

    Will same rules & grid system play nicely with new resolutions supported by upcoming Windows Phone 8 OS?

  2. ArturoT Says:

    Valeriu: Very similar - I should be able to cover those in the future as well.

Leave a Reply