Changing the Game: Windows 8 Design
A funny thing is happening in the tablet app platform space. Mainstays iOS and Android helped shape the market early on, but Microsoft is coming into an arena that operates on predefined expectations, and they’re trying to change the game. That’s gutsy.
Big Nerd Ranch appreciates guts, and we’ve been working with Microsoft to develop and deliver presentations, camps and courses on Windows 8 design and development. We feel there are a lot of special things happening in W8, and want to be a part of it from the start.
You can read a great overview by Eric Jeffers covering the design decisions Microsoft has made. But I want to get down into the nitty gritty here. I may be generalizing by saying that many designers have a negative knee-jerk reaction towards the new Windows 8 style (the style formerly known as “Metro”). It celebrates flat design, embraces the grid, removes UI from the screen, and quite frankly has a lot of rules and regulations that make one wonder why you even need a designer at all.
My team and I have been working closely with Microsoft to update the Windows 8 Design Principles Bootcamp materials, supplement with new topics, and design and develop a brand-new demo app for the camp. But I’ll admit that at first, I was wary of this project. I wanted to learn the best practices for making a W8 app and be able to teach it, but switching to Windows 8 completely?
Now that I’m on the other side of the project, after I have taught the camp in person and also live on Microsoft Virtual Academy, and have traveled the world to teach designers all about Windows 8, I have to say they’ve made a believer out of me. I’m not saying I’ve traded in my iPhone for a Windows Phone, or that I’m going to keep using the PC (we are a very Mac-software-focused team), but I can honestly speak enthusiastically about the design decisions Microsoft has made.
Breaking down the pain points
Let’s break down the pain points. First, there is a strong suggestion to follow the provided grid templates. Many Windows Store apps have done that very thing. W8 makes it easy to point a template to data and publish. However, there are also many case studies in the guidelines that urge you to personalize and differentiate your app. It is not Microsoft’s desire that every app look exactly the same, but that every app respect the platform and device it’s built for.
In the same vein, typography suggestions abound. W8 comes with a designated sans serif font, a serif for body copy, and even symbol-based fonts for other languages like Japanese and Korean. A “type ramp” is provided for each typeface, limiting the number of sizes and styles you should use in your layout. Again, everything begins to feel very templated and unbranded.
In addition to the strict guidelines, there are new gestures to learn. Windows 8 is not the most intuitive system to pick up on. There are discoverable swipes and pinches, and basic moves like tap and pan that do what you think they will do. However, there are also a ton of features that you wouldn’t necessarily find on your own. So why do I like Windows 8?
Why Windows 8 Doesn’t Suck
Those grids from the templates? They create a common visual experience from app to app that gives the user’s eye an expected place to land. They also guide you, as a designer, in creating a visual rhythm without using lines and boxes. In addition, you are encouraged to create your own grid, establish a visual hierarchy and bring your brand into the design to create a unique presentation. Remember, there is a difference between visual design and usability. Microsoft is interested in making your app usable above all else, but they want it to stand out as a brand story as well..
W8 typography is a thing of brilliance. It ties back into another fabulous feature of the platform: scaling. W8, like Android, sniffs the resolution of the screen it is being displayed on, and scales the app to the proper resolution so that it is physically the size intended, regardless of resolution. The supplied typefaces and coordinating type ramps respond in the same way. Each font size is chosen specifically for its ability to follow the grid, and each typeface is designed specifically for screen display with open counters and short descenders. This ensures that your app typography looks beautiful all the time, with no fuzzy edges or funky displays.
One of the token phrases from the Microsoft Design language is “content before chrome.” This idea uses the actual content to build a design, rather than designing content around structures of interaction and organization (the “chrome”). It acknowledges that users are coming to an app with a purpose beyond seeing a beautiful app, such as consuming or creating content. It embraces the fact that usable design is often beautiful design.
Windows 8 is like a brand new pair of shoes that need to be broken in. It’s a misunderstood design language for the time being, but I don’t think it’s going to stay that way for long. The Microsoft team has put a lot of consideration behind the extreme interface and interaction changes in the new platform, and I’m impressed and looking forward to how the space settles into these new shoes.