A Rough Past

It’s no secret that I’ve never been a fan of the design team at Microsoft. Back in May of 2010, I wrote a lengthy article all about how we can learn from the designers at Microsoft… by not repeating their many mistakes!

This is not the mean-spirited ranting of an Apple fanboy, it’s merely an observation that, for all of their capital and software talent, Microsoft is a company that consistently misses the mark in the visual design department. Historically, the only thing consistent about their visual identity is that it’s completely inconsistent.


The Winds of Change

Is this news to Microsoft? Absolutely not. In fact, I would wager that deep in the heart of this company resides a staff of frustrated designers who know these problems better than anyone. The good news: they’re beginning to attack them head on.

For many, the first noticeable point where Microsoft finally decided to step up and make a bold design statement was with Windows 8 and the new “Metro” UI.


Unlike anything else we’ve seen from the Windows team in years, this was bold and extremely different from anything the competition was doing. The design is an awesome fusion of minimalist layout and typographic principles with a Microsoft-centric color scheme that makes it seem fun and approachable.

Even we Apple-toting critics were forced to step back from our usual critique and admit that Microsoft has done something great here. The Metro style hasn’t proved to be another random design experiment but the jumping off point of a whole new cohesive Microsoft brand. Our main topic today is how this new stragety has affected their brand from a web design perspective.


With Metro in mind, we can easily see why the new Microsoft.com looks the way it does. The array of rectangles and squares is pulled directly from the heart of the Windows redesign.


This seems obvious, so you might not be impressed, but I’m blown away. Microsoft made their website look like their software! They’re establishing a brand that’s instantly recognizable in different locations and platforms. In short, they’re starting to understand what all first year design students know. I joke, but it’s a big step in the right direction.

As with Windows 8, I find the Microsoft.com homepage to be very clean and attractive. The use of simple containment devices makes the layout extremely versatile and easy to browse. Instead of the typical clutter that I complained about in the previous article, we find clearly organized content.

To appreciate how this works, let’s strip it down to the basic wireframe:


See how simple that is? Really stop and appreciate it. Was the solution to a billion dollar company’s design problems really just a few boxes? There’s no way it’s that easy, right? To gain some perspective, let’s look at the wireframe that you typically find on Apple.com.


Not so different is it? The reason these layouts work so well is that they represent a great balance between modularity and simplicty. A grid of boxes allows you to highlight important content while restricting you from clutter.

Stop Overdesigning

With Metro, Microsoft is finally reaching a point where they’re simplifying their designs down to the bare necessities. This not only highlights the content better, it’s actually less work! Consider the types of content boxes I was finding on their site two years ago:


Now contrast this to the content boxes on their current home page. Gone are the clipart explosion and 90s graphics. In their place you find solid colors, basic but impactful product shots and a strong emphasis on typography.


This strategy is familiar because you see it being used across just about every brand that is known for strong, simple and clean design.


Am I implying that Microsoft is stealing from Apple? Far from it. Their colorful appraoch makes their look quite unique. All I’m saying is that they’re finally subscribing to the basic design principles that countless other companies have used for a decade.

I definitely don’t think that every brand should be clean and sterile, but for Microsoft I think it’s a good fit. And they’re successfully mixing this look with lifestyle shots to make it more friendly and human.


More Of This

If you look around on the vast and seemingly endless network of sites run by Microsoft, they’re still full of inconsistencies, poor design, and over-cluttering. They obviously still have a long way to go before overcoming the design woes that have plagued them for years.

That being said, they’re not complacent. In fact, they seem to be progressing along quite rapidly. From the Metro UI and the Microsoft homepage to other projects such as Xbox.com, there’s a lot of great design examples that they should be proud to stamp their name upon.

I have no respect for a company that goes beyond ignorance of good design by ignoring the need to understand good design. Fortunately, Microsoft doesn’t seem to fit this description at all right now. Rather they’re breaking away from a hurtful stigma and making real progress. Given that this is the case, hats off to the hardworking folks behind these changes. Keep up the good work!

What do you think? Has Microsoft histroically struggled with clean, consistent web design? How is that changing lately, if at all? I want to hear your thoughts!

For more related resources: