The new Microsoft.com design explained, mockups shown

Last week, Microsoft completed its relaunch of its Microsoft.com website, based on the company's Modern UI that it is using for several products, including Windows 8. Now one of the people involved in the creation of the new design talks about how the team at Microsoft came up with the new look.

In a post on his personal Rainypixels.com site, Microsoft Web Strategist Nishant Kothary said he first became involved in the new design due to his wife, who was put in as the Director of Program Management for the Microsoft.com team. She asked him to talk to his team about modern web design. That evolved into working even more with the team and even with an outside design firm, Paravel, Inc, who helped to create Microsoft's BUILD 2012 website, among others.

Kothary writes that the team that designed the Microsoft.com site sometimes used ideas that came from the "gut". He states:

Designing from the gut is a radical concept. It is generally met with a tremendous amount of friction in most software circles that tend to rely heavily on "logic and data" for all decisions. This is not to say that there isn't a place for telemetry or usability studies in the act of designing software. It's simply a question of when and where.

One of the big major changes that came late in the design process was using one "hero" image on the main Microsoft.com page, as opposed to pages in earlier preview versions that had a number of logos and images, as seen above. Kothary states, "The Microsoft.com team had the ability and freedom to make gut calls like this one, and this brings to the foreground the final and most important ingredient of this project that I can fit into the attention span of a Web reader."

Source: RainyPixels.com | Image via RainyPixels.com/Microsoft

Report a problem with article
Previous Story

Report: Xbox Music to launch Oct. 26

Next Story

October 2012: The Microsoft Re-Birth

20 Comments

That's strange. The nice, subtle slide the overlay info box just changes color in IE9, but in Chrome it slides from the right.

Is anyone else seeing this?

A340600 said,
That's strange. The nice, subtle slide the overlay info box just changes color in IE9, but in Chrome it slides from the right.

Is anyone else seeing this?


Yep, same story for IE9 vs Firefox.

In IE10 the scroll bar pane has a transparent background to it. I've never seen this done before (with the standard scroll bar). It also fades out if you leave it. Nice.

A340600 said,
That's strange. The nice, subtle slide the overlay info box just changes color in IE9, but in Chrome it slides from the right.

Is anyone else seeing this?

IE9 is outdated. IE10 will render this page on par with Google Chrome & Firefox. Microsoft intentionally is moving forward. If that means adding features in its website that IE9 doesn't support, then so be it.

Nazmus Shakib Khandaker said,

IE9 is outdated. IE10 will render this page on par with Google Chrome & Firefox. Microsoft intentionally is moving forward. If that means adding features in its website that IE9 doesn't support, then so be it.

But that's the thing, IE9 did the cool overlay slide before, even when the new design was in preview.

NoClipMode said,
In IE10 the scroll bar pane has a transparent background to it. I've never seen this done before (with the standard scroll bar). It also fades out if you leave it. Nice.

I liked the fading scroll bars when I tried the Consumer Preview. I didn't like it though if you scrolled too, much the scroll bar would change to a thicker version.

Jarrichvdv said,

Yep, same story for IE9 vs Firefox.

You would think Microsoft would make its own browser work with the new site. Something was changed that now the overlay slide doesn't happen anymore.

For first time I can say that MS's site does look great , almost as great as Apple's considering quality and polish of work...

smooth3006 said,
the design crew needs to be fired.

Oh look.... smooth3006 is against something new by Microsoft based on metro. Shocker.

Drossel said,

My eyes are bleeding


design isn't the best, but its allot better when it comes to usability.
the new site has a different look for pretty much every single clickable link on it.

Shadowzz said,

design isn't the best, but its allot better when it comes to usability.
the new site has a different look for pretty much every single clickable link on it.

It'll take time for all the content on Microsoft.com (of which there is a HUGE amount) to be updated.

The worldwide site that Studio mentioned though is probably just an old site remnant that they've forgotten to remove. It's probably been superceded by this... http://www.microsoft.com/home/en-gb/locale.aspx

subcld said,
gorgeous design im in love with this design

And they use Responsive Web Design. If you reduce the width of the browser window, the content layout changes. If the width is like mobile-phone-screen-wide, the menu becomes a button.

> Microsoft Web Strategist Nishant Kothary said he first became involved in the new design due to his wife, who was put in as the Director of Program Management for the Microsoft.com team.

Nice

The thing about all Microsoft's designs is that they heavily rely on stock photography. Who remembers the blunder when they badly edited a woman with a backdrop of a server room, whilst over on the Citrix homepage they had the same but original untouched stock image that was bought via iStockphoto?

http://i.michaelmknight.co.uk/images/2012/10/05/l7iBu.jpg

Out of all the stock photographs of self-confident system administrators with their arms crossed standing unworried between rows of servers, what are the chances two competing products pick the same one. Well at least Citrix knows how to take care of her. How could Microsoft be so careless as to remove bits of her head and arm. You can tell by her smile she can't get enough of this virtualization stuff.

Commenting is disabled on this article.