Telerik blogs

We, at Telerik, are trying to be the first facing the challenge to adopt the newest technologies - and here we are now designing and developing a WinRT demo application at this early developer preview stage of the OS and developer tools.

As a UX designer I was eager to start with the design and in the same time a little bit scared in front of the challenge. However it turns out it’s not as big of a challenge as I thought. Two of the most important reasons for that are: our RadControls for Windows Phone 7 completely working on WinRT (with a little fine tuning), and the Metro UI!

The first reason was clear for me from the very beginning :) As a matter of fact the second too and I will tell you why.

My first introduction to the Metro style UI was a year and a half ago in Windows Phone 7 and I absolutely fell in love with it. I was blown away by the clean lines, open space, typography and the fact that all content is alive and in motion. (Imagine my excitement when the first screenshots from Windows 8 came out!) But my personal favorite of all is the grid system.

Don’t break my build grid

 

Without a doubt designing with a grid system in mind is a must. The grid enhances the visual hierarchy of the information, keeps your content structured, and the most important thing – maintains the responsiveness on the all different devices and screen sizes. A year and a half ago there was only one screen size where Metro UI lives. Now the possibilities are huge (from the smallest sizes to the biggest) and every year with the advance of the technology they are growing. That is why the grid is so important. However, the smart folks from Microsoft made the grid flexible enough to ensure the same quality of experience on different devices. You should design only three different layouts for three basic resolutions:

  1. The absolute minimum: 1024 x 768 px

    Telerik chart demo - 1024x768px

  2. The wide screen view: 1366 x 768 px

    Telerik Chart for WinRT - 1366x768px

  3. The snap view: 320 px wide

    Telerik Chart for WinRT - 320px

  4. The portrait view (optional): 768 x 1366 px

    Telerik Chart for WinRT - 768x1024px

They are all looking great (right?) not only for preserving the grid but for the second distinctive characteristic of the Metro UI.

White space

Margins

The left and top margins between content and the edge of the screen give the consistency of the Metro style app. Make sure to preserve the margins and your application will look professional, consistent and belonging to the Metro environment. Important thing is to not overdo it – you have this bigger screen and flexible grid – let your content breathe, let it has enough white space between logical sections. I was so relieved to finally have this amount of space to work with after so much time on 480 x 800 px screens.  Let me share a dirty little secret from Metro UI design point of view.

Size does matter. Especially the font size.


Typographic grid

Combining four different font sizes with color, weight and alignment to the grid, giving your type the right amount of space around them - that is the secret of creating the visual hierarchy and taking the user through the content to the important stuff.

These are the 3 simple steps that give your application the Metro style: grid, margins, typography. No secrets left to share, just as simple as that. It’s up to you to innovate on such a solid base.

Let us help you with that – take a look at the demo and give our fully Metro styled RadControls for Windows Phone 7 a try.


About the Author

Nina Zayakova

is UI & Interaction designer in Windows Phone team in Telerik since the early days of the new Windows Phone (and later Windows 8) style UI. She thinks that Microsoft "modern" UI has a lot of possibilities yet to be invented and its full power yet to be revealed. She strongly believes that user experience should never be compromised in any circumstances. You can read more from Nina on Twitter at @myninka.

Comments

Comments are disabled in preview mode.