How to use guides in Expression Blend to design beautiful Windows Store Apps.

Some developers think in terms of “cleaning up” the UI when their app is almost finished. Sometimes they just don’t care and sometimes they do, but don’t know how to create compelling user interfaces. And while a big part of beautiful interfaces is a matter of creativity some aspects are just rules that can be learned.

One of them is the use of a grid system

A grid system (or typographic grid) is a structure used to organize text and images. The image below from wiki will explain it immediately:

You see that every element is “glued” to help lines. In design software these lines are called guides. Expression Blend for Visual Studio 2013 introduces guides and you will learn how to use them to improve your UI designs!

Following the windows 8 grid system Let me first show you a baseline:

With this knowledge we can start with the page header

The baseline of the page header is placed 100 pixels from the top. Let’s create a guide for this.

• Start Expression Blend for Visual Studio 2013 and notice the new rulers area:

• To create a guide at 100 pixels, click and drag from the rulers bar to the artboard like this:

• Create a vertical guide at 120 pixels.

If you have trouble dragging it exactly to 120 pixels, zoom in with CTRL +. OK, with the guides in place,

• add a textblock
• and set the style to LocalResources > Pageheaderstyle:

• Drag it until it snaps to your guides:

Guides will help you to layout your UIElements. Keeping everything tight on a grid will greatly improve the overall design.