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

24 Weeks of Windows Phone Metro Design | #10 Layout & Composition in Windows Phone Part III

 24 Weeks of Windows Phone Design Index

Twitter   

Loooong video - I promise to keep them to less than 10 minutes in the future. I hope this is useful as I share some of the thinking behind layout in Windows Phone. Some comments:

Use the grid to layout elements in Windows Phone

Respect the 24 pixel margin to the left and right

For text, deploy or set the baseline of the first line to match the grid but then do not worry about the rest of the text lines to match the grid… just let it flow naturally.

Swiss design always (almost) flushes text to the left (flushing meaning aligning). I prefer the layout I do in this video where I keep items aligned to the left. Always look to flush text left.

In layout, you want to create the feeling of “unity” so in our case we have an image, a title and a description. We use the same padding between these objects (12 pixels) to create the feeling of cohesion. Then we use 24 pixels of vertical separation between different items.

Next video we’ll get more into lists design,

One Response to “24 Weeks of Windows Phone Metro Design | #10 Layout & Composition in Windows Phone Part III”

  1. 24 Weeks of Windows Phone Metro Design | Layout & Composition in Windows Phone Part III | azkafaiz.com Says:

    […] source: ux.artu.tv […]

Leave a Reply