Skip to main content
February 25, 2011
Windows Phone Developer Blog

10 of 10 – Aesthetics and alignment matter



When hanging a picture frame, we typically strive to make it look straight, making sure all edges are aligned to the adjacent walls and ceiling. A crooked frame disturbs layout order and draws our attention. Incorporating new elements to an existing space should continue the visual balance and order already laid out.
Proper alignment is also the starting point to achieve a beautiful and approachable application. Then using the right aesthetics and a professionally created visual design should come after. This topic brings us to the last of our list of top ten things to check in your application when you think you are done.

The grid system
The Windows Phone 7 platform is structured with a grid system following design principles defined by the “Metro” guideline. When creating your application, we recommend respecting default margins offered in panorama and pivot models. All pages should respect the 24px margin on the left, providing a perimeter for all content to stay in. Content should be left aligned to the 24px margin, continuing the balance and flow of the existing controls. Elements flowing outside or inside the margin creates visual imbalance, drawing unnecessary attention to the inconsistent margin.

misalignment

Visual Hierarchy
Aside from keeping elements aligned properly, add visual interest to accentuate specific items. Hierarchy provides users with a navigational structure, while highlighting content of more importance. Consider utilizing different font sizes and proper spacing to guide users in the correct path. Enlarging the font size, for example, adds prominence to specific elements, providing a navigational guide. The combination of hierarchy and properly spaced elements will provide users with a balanced, navigable experience.

Creating a good impression.
Visual noise like inconsistent margins often gives users the feeling that an application is complex and unapproachable. Randomly aligned elements, combined with a confusing hierarchy and poorly designed graphics will cause users to view your application as less professional and will make them feel uneasy when attempting to use it. That bad feeling would quickly affect the perception of the effectiveness or performance of the application.

It has been proven that aesthetics matter and that attractive things work better. Happy people are more effective finding alternative solutions and as a result are tolerant of minor difficulties. Making sure your application gets the right level of attention to the visual components is a crucial component in creating a great holistic experience.

– Alfred Astort
Follow the Windows Phone Design Team on Twitter: @WPdesignteam