128 comments

[ 3.5 ms ] story [ 194 ms ] thread
Weird, I can't see anything if Adblock is on. Make sure yours is whitelisting microsoft.com (at least temporarily).
I see everything fine here.

Using Linux with:

* Chrome 21.0.1180.4 dev with AdBlock

* Firefox 13.0.1 with AdBlock Plus and NoScript with all scripts blocked

with AD BLOCK PLUS beta! i see evrything fine, Same versions as above!
Very modern, very metro, beautiful design.

I like it.

Looks neat, uncluttered and peppy! But what about the favicon? That is so 1990!
Especially when an awesome fav seems easy for those guys. I guess they probably don't want to use the Windows one because it's only one of their products.
(comment deleted)
Looks like they're matching one of their main web properties' UI with their new OS IU.

In some ways that makes sense, they're going all out or bust, in other ways I'm not sure that searching thru Technet articles will be best experienced via this new UI --granted their previous IF to Technet was horrible.

Something else is that previously they had no uniform design. different teams had different designs for their domains. Once you entered a search term, all bets were off on what the page you got to would look like.

Looks good to me, digging it.
Shouldn't the menu be all capitalized?
Words in all caps are harder to read.
It's a reference to the new VS menu design.
I think he he is being sarcastic, about the recent changes to VS 2012, having all-caps menus.

http://blogs.msdn.com/b/visualstudio/archive/2012/06/05/a-de...

Oh god, I thought that was an April Fools joke. Does Microsoft not hire design people? It looks horrific!
Given that the post is called "A DESIGN WITH ALL-CAPS" (yeah, the title is all-caps, funny thing), maybe, the real problem precisely that they are supporting their designers's view, over their user's feedback. You know, trying to defend their "artistic integrity"...
What's really funny is that a whole bunch of people are responding in the comments with all caps :-)
That's the squarest site ever! I take it IE still doesn't support rounded corners?
IE9 and IE10 both support rounded corners, but honestly speaking, I think the design they have would be worse with rounded corners.
Specially taking Metro into consideration which is very much about right angles.
What is the advantage of rounded corners?
Rounded corners are known to draw attention inward while angular edges "point" outward, which could make rounded corners a better choice for content containers from the usability perspective. An interesting discussion on the topic here: http://ux.stackexchange.com/questions/11150/how-do-rounded-c...

OTOH, I love the feel of Metro and wouldn't change to rounded corners for the world.

I don't think that's it. That's what the UI on Windows Phone and Surface looks like, so I'm guessing it's intentional.

Personally, I am fucking sick of rounded corners, so seeing the right angles here really made me happy. I'm guessing their designers felt the same way.

Really nice support of different browser sizes. Resize your browser from wide to really narrow to check it out.
Any idea how that's working? I've never seen image resizing work that well!
Setting `img { max-width: 100%; }` by default and scale it to `150%` when viewport reach certain threshold (for mobile). For the former, it will beautifully scale to the containing div size, for the latter, you can set outer div to `overflow: hidden` and left/right side will be cut off giving the image a square-ish feel.
after scaling the max-width to 150%, they did a margin-left:-40% to center the image
Agreed! I noticed it plays very nicely with the window docking features in Windows 7. Beautifully done.
I have to admit they did a smart job of figuring out what makes sense at each screen size (different layout and controls, etc.).

Now I want their web team to share knowledge with the Metro team. :)

This was what I was going to point out. Great responsive design. Now if only their operating system was as sleek and as this ;)
Except one thing that bugs me most on these "responsive" sites. The images are still loaded at their full resolution. Even when I reloaded after I resized the tab. Tried private tab to avoid cache - result still the same - 1600px wide image loaded.

It's working really nice and all but I think the point of responsive sites is to make them usable on small, mostly mobile, devices. And we still live in a age when the mobile bandwidth is something to worry about. I'd imagine the battery life would suffer a bit too.

Although the fonts in Chrome render very poorly on my machine whereas in IE9 they look great...
Same thing to me, Firefox on Linux. The fonts are jaggy.
That is an impressive adaptive site design update.

A couple of things I love about this is (1) the elegance of the menu toggle to top in the small (mobile-size) view and (2) the slideshow control appearance on small view and adaptation to breadcrumb implementation on large view. Quite elegant and appropriate for each environment.

Of course, it is sad that the experience is rarely consistent when you start digging deeper into the site.

Yeah I think it's just a home page preview
it is sad that the experience is rarely consistent...

It's a preview.

I don't know, I just think you can take sparse so far it becomes soulless. Simple, clean design can still be emotive. This isn't. The stock art humans make this feel more like a Big Oil annual report. (And that Products menu is a little painful!) All that said, this is leaps and bounds beyond their current homepage.
Sorry I'm not understanding but really wanting to. What do you mean "more emotive"? What exactly could be done to this page to make it more "emotive"? What takes away from its "emotiveness"?

About the products page -- overall I think it looks pretty clean, but I mostly have a problem with the "More Products" category where they bunch together a big list of random products.

"What exactly could be done to this page to make it more "emotive"? "

Comic Sans seems to do the trick for many people.

You should use the feedback button on the right!
Oh man, I almost choked on my water. I've got some feedback: don't absolute position annoying and generic elements that distract me from your product(s).

.. that being said, it is pretty cute when it's shrunk down for mobile.

Choking on water? That's a curiously strong reaction to a very common location for a feedback button!?

They obviously want some feedback on their new design. Where would you place it?

This isn't the website Microsoft uses to tell you about its products, it's a preview.

The only reason this site is visible is for that feedback button, which will be read and acted on before it turns in to Microsoft.com

I like it but something about it (well, the entire metro design) feels... off. This is the sort of style I really enjoy so I maybe it might just be the feeling that's too forward for a company like Microsoft, but something about it that I can't put my finger on makes me second guess how much I like it.
I really don't like the use of big photos like here, the new airbnb, and Bing. They are busy, space wasting and bandwidth hogs. And to my eyes they don't add anything.
They only waste space when you've got space to waste. I really like the way the layout changes as the screen size changes and the images become more cropped.
Yeah the responsive design is really well executed. But seriously, I can literally only see the nav and four images when I load this page on my desktop. Shocking usability. Every time I see a new MS offering I feel more and more that they are investing in good-looking design rather than usable design.
I don't see anything special about this new design. It's sparser than before, but I don't see anything "too Metro" about it. Just 3-4 images and text links. Is that supposed to mean it's Metro? Because there are a lot of similar sites like that on the web. Would Craiglist with bigger fonts, more space between links and 3 big images at the top become "Metro"?
The simplicity of the metro design style is a great direction. It's in a way a forced simplicity which can minimize the UI clutter we have come to know from Microsoft. But reducing elements means that the few that you have should be as refined as possible, and proportion, scale and white space become more important. I think this site would look 10 times better and balanced with better sizing and spacing of everything.
I'm not particularly anti-Microsoft, but I absolutely hate this design. The text is so huge I find it painful to read, most of the page is taken up by a slideshow of what seem to be generic stock images, and I have to scroll before I can find anything useful.
Broken in IE8 on Vista SP1 (divs are placing one after the other horizontally instead of in their proper places).
Same here, I guess it shows what Microsoft think of IE8...
I decided to download Movie Maker so I went to Microsoft.com. They have a Downloads menu there. I clicked "All Windows Downloads". (The site is pretty fast, BTW). I selected "Windows 7", then scrolled down until I found Movie Maker. I clicked "Get it now" and it showed me the Movie Maker page. On that page I clicked Download Now, and it started downloading!
Even easier, type "movie maker" in the search box on the top right, 4th result is "download movie maker"
The funny thing is that it's 4th result. The first one leads to some page with "Looking for Movie Maker?" text. The second and the third one lead to some irrelevant pages.
Good to see that the use the "menu with down-arrows" correctly, that is "on click", rather than flickery on hover.
This is one of the first things I noticed.

The problem is not just that it is flickery, it's actually often unusable.

There are so many sites that use on-hover to trigger a menu (often with sub-menus), so that if you misplace your pointer even slightly, the top-level menu option you selected disappears.

I've lost count of the number of times I have to play the game of selecting from the top level menu, back down to the item I actually want.

We've all known it for a while, but this redesign (which I think is quite nice compared to Microsoft's previous efforts) throws their logo into stark relief. It looks outdated. It doesn't match.

I'm speculating that we'll see an across-the-board Microsoft rebrand within the next two years, including a new logo for the company. They've rebranded their core software offering, they're now changing directions on their hardware/software philosophy, and trying to gain some mindshare for their new aesthetic (and their new appreciation for aesthetics more generally) is going to be a core part of that movement.

Thoughts?

I disagree, and I don't think they're going to change their logo. The Microsoft logo isn't particularly creative, but at least it's not Verizon ugly.

(Wanna know what is Verizon ugly? The new Windows logo.)

There is no auto-complete in the search box. Should this not be expected?
Is it just me or does the guy in the last slide look like hes using a photoshopped macbook air/pro?
I don't see why they would do that, it would be beyond stupid.
It's unlikely Microsoft themselves even created the site, it was most likely contracted out to a design firm.
I grabbed the image and tossed it into Paint.NET; there does appear to be some artifact in the center of the laptop lid that could possibly (to my unskilled eye) be (mis)interpreted as the leaf on the top of the Apple logo. However, I don't know enough about this stuff to say anything more than that someone should take a look.
I think that's a Samsung laptop -- mine has that same sorta brushed metal look.
(comment deleted)
Blinded by the white. Inconsistency of design between child sites.
I am completely underwhelmed beyond the responsiveness, which is nice. Feels very yesterday. One click thru to products page, and it's more underwhelming. Shows lack of vision for the company. "Managing home and homework just got easier." Really? This is the best their designers and copywriters can show us?