Pride in Craftsmanship — Windows 8 Development Part 2

Sonal Mane, a Microsoft startup technologist in Chicago, provides us with the second chapter in a series on effective and efficient Windows 8 development. This series helps members in Microsoft BizSpark move quickly through the design of an app in Windows 8.


One of the key reasons for apps being rejected or sent back for fixes is Design. This is a five part series where I will cover five key highlights for each design principle that aims at helping developers build a high quality app.

Today's topic will be Pride in Craftsmanship

Literally translated, to take pride in the work you are doing, you will naturally want to focus on the details. Every pixel matters. Think through and iterate as you build out your design. The easiest way to accomplish high quality craftsmanship is to use a design language based on typography and the grid system. Let's dive a little bit into these two areas, the Grid and Typography.

1. Grid

The Grid is a simplified system of grouping user experience elements together and works for the web. It provides a rhythm to your app and makes it look structured and easy to navigate. Across various screen sizes and devices, the Grid makes it easy for your app to scale and look great at the same time.

Three things to keep in mind while designing with the Grid are,

*  Focus on cleanliness, readability and alignment.

* The grid is formed by the content itself and the space around it. There are no visible gridlines around the content. Use space to create groupings and communicate the sense of relationships and structure in your content.

* Use the power of the grid to design with size, proportion and position. Use proportions to create visual hierarchy that allows users to easily scan and see the structure of information.

2. Typography

Great typography is not only beautiful and readable, but it also conveys structure and information hierarchy.  Windows 8 designers looked at print and the web and applied the same principles to Windows Store apps. Windows is based on clean, beautiful typography which creates a sense of structure and rhythm. It also establishes information hierarchy while consistently using a small set of fonts, font sizes weights and colors.

Three things to keep in mind while designing with typography are,

1. Use the Segoe UI font as it is the most recognizable font.

2. Use only four font sizes to establish information hierarchy. The Windows UI is a great example to look at. The font sizes are 42 pt, 20 pt, 11 pt, 9pt.

3. For Chinese, Japanese and Korean, you can use the Meiryo UI.

Here's a screenshot that explains the typography using font sizes and weights. 

Here's an example of an app that uses the Grid template and enhances it to create a beautiful user experience while maintaining a clean, content-first and proportionate look and feel. 

At minimum, if you keep use these two things - Grid and Typography, you app design will be a lot cleaner and structured. Here’s a video that dives into the layout around grid and covers more details on typography.  

Comments (13)

  1. John Finch says:

    This is such a great resource that you are providing and you give it away. I love seeing websites that understand the value of providing a quality resource.

  2. ewwrewree says:

  3. jeaniestein says:

    I learned a lot by reading your post I have been reading your website a lot over the past few days.

  4. laura says:

    if you need the driver printer, you can check at unless you need to alter settings; loads of alternatives are accessible

  5. Robby says:

    I love seeing websites that understand.

  6. lyondiaz says:

    It is a very informative and useful post thanks it is good material to read this post increases my knowledge on canada goose retailers .

  7. Marinduque says:

    I really loved reading your blog. It was very well authored and easy to understand. I also found your entries very interested in canada goose jacket online

  8. dj says:

    I really loved reading your blog.

  9. PhilipBrown says:

    your article is very nice. i like this article is very much this is useful for every one. there are many of this should provided for all information degree provided.
    i am working at online college my position is professor. an my major is">online supply chain management degree. there are many students study for online colleges especially study with supply chain management degree. this is very effective one there are many this in will be provided.

  10. Keithware says:

    [url=]custom essay writing service[/url] is providing only experienced writers. They can write paper on any subject and on any complexity. Do you need good custom paper writing serviceto
    write a customized paper on topics such as business, communication and media computer

Skip to main content