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

logoSome 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:

vermont

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:

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.

rulers

rulers bar

vertical guide

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

text

snap

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