Is Microsoft Finally Getting the Hang of Design?

by on 25th July 2012 with 13 Comments

screenshot

Could it be that the king of clutter is finally beginning to grasp the concept of basic layout principles and consistent branding? Will Microsoft turn into a company known for its attractive design?

Follow along as we compare the downfalls of the past to the bold new direction that Microsoft is taking for its visual messaging. Whether you’re a Mac or PC user, you’ll likely be surprised by how far the boys in Redmond have come.

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.

screenshot

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.

screenshot

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.

Microsoft.com

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.

screenshot

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:

screenshot

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.

screenshot

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:

screenshot

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.

screenshot

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

screenshot

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.

screenshot

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!

Comments & Discussion

13 Comments

  • http://crgeary.com/ Christopher

    I do like the latest designs to come from microsoft, its so clean and simple while still being full of colour..

    Although Microsoft appear to be heading in the right direction, they’ve done so much wrong in their past, in regards un-attractive design, and IE 6/7/8 not to mention Vista, and probably a whole load more..

    For this reason, i still dislike them as a company, but maybe if they carry on this path, things might change.

  • Thatsright

    UI of Apple OS is outdated. Looks like a chinese plastic :)

    Microsoft W8 UI: Adidas, Nike, Armani
    Apple OS UI: Adios, Nuku, Armini

  • cheriana

    I like the direction Microsoft is going…definitely a lot cleaner and more human with their use of lifestyle shots in promo for Bing. Agreed that they still have a long way to go though!

  • http://j-ruf.com J. R.

    I agree with Christopher, Microsoft was always years behind with design and also the IE. They needed 9 browsers to be able to compete with other browsers and 8 OS …

  • http://joshhumble.com Josh Humble

    I’m glad to see Microsoft revamping their design, and I agree some elements are much better, but I find the Metro grid confusing – somewhat like a puzzle. It’s simple to get used to, but it’s not easy on the eyes at first glance. The random content grid pattern is popular, but I’ve never found it as usable as some patterns. At least they’re using gutters for reasonable element separation, unlike some grids, where images are smushed together with clashing elements and lines.

  • http://designbyadmiral.com Doug Stewart

    Completely agree. I love seeing Microsoft finally figuring out that design matter. User interaction matters. Microsoft is a big company with lots of money. If they step up their game everyone else will have to as well.

    Look at the Mac platform. Mac devs don’t make pretty apps because they feel like it. They make pretty apps because OS X is, itself, quite pretty. Oscar Wilde always used to say if you surround yourself with ugliness you make ugly things. Well, Windows apps are ugly just as Windows was ugly. Windows 8 isn’t ugly.

  • Ben

    Microsoft has definitely changed their business model over the past few months. They have a cleaner looking design and they started using emerging artists songs on their commercials for Bing and Internet Explorer. I wonder where they got these ideas from?

  • http://jarodonline.wordpress.com/ Jarod Online

    It’s okay to me, but it’s really obvious they tried their best at coming out with a new trend, because I see a lot of flaws in their website’s balance. I think they could of done a whole lot better though, but its okay; I give’em that.

  • http://www.alvinnguyen.net Alvin Nguyen

    I firstly found the Metro interface pretty attractive. However, I feel it’s just because I want something new from the so-old iOS interface.

    In terms of using the screen real estate wisely, I have doubt for Metro style. Sometime I feel the color is kinda plain and old as well.

    Just my 2c :)

  • http://orely.me Paul O’Rely

    Thumbs up for Microsoft! Definitely something had to be done, and they’re doing.

    But I’m very skeptical about the company. It seems that they’re doing something from outside in, not inside out. It looks that everything is a nice makeup to hide the mess out.

    Anyway, I really hope they do it the right way, from inside out.

  • Arie Putranto

    Everybody is stealing from everybody. So MS stealing from Apple, that’s not a new story. As far as it go, if not leading, than anybody will be stealing. That’s just life.

  • kadez

    Finally…but what whit ergonomic? Using metro on pc with mouse? Shit…another fail

  • http://www.jcodecraeer.com jianghejie

    very interesting article . I ‘ve translated this article into chinese on my website and decide to share it on other site , I am very appreciate if the author want to check the edition of chinese . http://www.jcodecraeer.com/a/qianduankaifa/jiaohushejililun/2012/1005/416.html

Subscribe

Membership
About the Author