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.