Jul 2 2013

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.

Want To learn more?

Check out the Windows 8 UX Design videos.
And of course, keep an eye on our bootcamp schedule for upcoming Windows courses from Big Nerd Ranch.

4 Comments

  1. Teknophyl

    It is great to see an objective view on this.

    I have just started with my own Windows 8 phone development, and as a C# developer by trade, who wants absolutely nothing to do with any heavy design (practically speaking, I have no talent in that area, and I am glad there are others that do), the UI guidelines lower a barrier to entry that stops a lot of iPhone app developers.

    I have never released an iPhone app. One main reason is because I never could find a way to not make it ugly or hard to use – and that’s coming from a programmer who uses apps hundreds of times a day. I could tell you what makes an app easy to use, but I have no clue how to implement that design from a practical standpoint.

    I feel the Windows 8 design tools (Blend) combined with VS 2012 really, really make this easier for me to deal with. Not saying I can forget about it, but it makes my life easier.

    That being said, I do wish there was a lower barrier to entry for the emulation tools. Hyper-V has stiff requirements, and for new devs who haven’t gotten a Win 8 phone yet, there are few alternatives.

    • Teknophyl, I like hearing that you feel the same way as a developer as I do as a designer. Teaching the Windows 8 design principles to several audiences, from designers to developers and IT professionals, it was intriguing to see the guidelines understood across disciplines. I think Microsoft did a great job of creating a platform that is approachable to a huge audience. Good luck finishing your app!!

  2. Damien

    “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.”

    Thats the whole point. When you suck at design, just remove it.

    Those “flat” stuffs are coming from people that hate design because they can’t manage to do it right.

    • Damien, thanks for commenting! The “skeuomorphic debate” is still a hot topic among app designers. I don’t feel strongly one way or another, and have seen individuals go from hating flat design to embracing it after learning the philosophy behind it. I still believe a successful emotional response towards an app depends on the function of the app and audience; in other words, it’s subjective. The demo cookbook app we created for the Windows 8 Design course utilizes a lot of the flat Microsoft design principles. However, we wanted to soften it up and make it more approachable to elicit an emotional response from users, so we added UI elements that did just that. It does a good job of meeting in the middle.

      What do you think about Apple’s new design guidelines?

Leave a Comment

Join the discussion. Do not worry, your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>