Windows 8 Design Principles Simplified Part 2 – Pride In Craftsmanship

Welcome to the ‘Windows 8 design principles simplified’ series. 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.

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.

cookbook

 

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.

font

At minimum, if you keep use these two things – Grid and Typography, you app design will be a lot more cleaner and structured.

To learn more, see the video below which covers the following topics in depth,

 

 

 

Windows 8 Design Principles Simplified Part 1 – Do More With Less

Welcome to the ‘Windows 8 design principles simplified’ series. 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 Do More with Less.

Designing for touch requires a few prerequisites that you would need to think through.

1.  Avoid distractions – The key idea is to trust you users and enable them to focus on where they are. Not where they need to go. As you approach design, focus on utilizing the real estate and what the app is great at. Clear the  clutter and strip away everything that takes away from the app and your best-at statement.

distractions

2. Clearly define your best-at statement – To aid the decision-making around design, identify the single most important functionality that your app is best at. This means understanding your value prop and scope clearly and   crystallizing it to a single statement. As you iterate on your app and add future versions, you can evolve and update your best-at statement. For your first iteration, keeping a narrow focus will help resolve several design decisions and issues.

Best at

3. Content over Chrome – Content is your best friend and the easiest way to get users excited about your app. High quality content also means you can draw attention without bells and whistles and attract users to your app. This means leaving only the most relevant user experience elements on the screen. This also means letting users immerse themselves in what they love and explore the rest. The thing to keep in mind is to flip the design mindset, think about solving to avoid distractions and not discoverability.

content over chrome

4. Clear out the Chrome – Chrome means navigation, layout, commanding and interaction. For example,

  • Chrome comes from navigation, tabs and other navigational tools as they are used to help a user finding their way around an app.
  • Chrome can come from layout that include boxes, rules and other content that is placed on the canvas to help organize content.
  • Chrome comes from interaction and commands placed on the canvas to help users complete scenarios and features.

Simple rule to follow here is that if you see any user experience that helps with user navigation, layout and commands – Clear it out! Windows 8 has built-in design to help you work these elements into your app.

Here’s a screenshot that focuses on the music video content and albums without cluttering the user experience with navigation, commands and layout.

music

5. Navigation, Layout and Commands

Navigation – Pixels are precious so don’t waste them on navigation. Sounds counter-intuitive when you focus on discoverability. Shift that focus on your content and think about where you are at and your content, not about the places where your user could go. When designing Windows Store apps, you can actually make the content itself navigable and remove this navigational chrome. Where does this navigation chrome go? It goes to the navigation bar from the top edge.

Layout – Create visual clarity with crisp graphical elements. Remove lines and boxes to group and organize content. Give content breathing room through intentional use of space. This means that there is no need to draw lines around your groups. No need to draw arrows and create outlines on your user experience. Think space and not, boundaries.

Commands –  Integrate commands into the content. Leverage the edge. Provide commands contextually. Commands go in the app bar that shows up from the bottom edge. The content itself is interactive so your images headlines, titles and content can be tapped on to navigate to something. Search, Share, Settings and Devices go in the Charms that show up from the right edge. Login goes into right edge on the right sidebar.

How do users see these hidden navigation and app bars and charms ? The app should pop the relevant user experience based on context. For e.g. when a user selects multiple images, that is an indication to pop the command bar. Guess what, the user is about to perform an action on these images.

Here’s a screenshot of what the navigation and app bar look like.

Navigation bar and app bar

 

Want to dive deeper into this topic, check out the video below for more details,