Micorosft.​com Preview Site and Metro Design Language

Microsoft is offering preview of its new site at http://www.microsoft.com/en-us/preview/default.aspx

The new site is a mix of Metro Design Language along with a lot of scolling items.

For me though some parts of the site do look good / work .... site does not feel optimized for a desktop experience which i expect most of the MS homepage would be from.

The innvoative Metro design language, which has been praised by many, is better suited for limited screen touch enabled apps/websites ... I feel MS would have been better off if they would have created sites specific to the device profile ...  Current preview feels like "If you have a hammer every problem feels like a Nail.."

What do you think ? Where else do you feel MS should incorporate Metro design language ?

It looks busy like the back of a MSFT product circa 1990s.  I had no clue what metro design language was so I hit wikipedia. 

http://en.wikipedia.org/wiki/Metro_Design_Language

I know that designers and developers are different people, but when I read the "Principles", I just want to give someone a swirly.

Oh, and marketards, if you ever, EVER use the word 'delight' in your copy, I hate you.

Just sayin.

I like the dynamic style of the page, but I hate the color scheme. Blue and orange is OK alright, but only if you don't use five different shades of blue. Blue and orange only work together when they contrast, and using so many blues mutes out the contrast and makes everything look fuzzy.

The tagline would also look better underneath the Microsoft logo instead of besides it, it needs its own corner of the page, and putting the tagline besides it mixes it in with the rest of the design.

Also I think the bing logo makes things look worse, but because the bing logo is so bad. what are you going to do?

wah no winph allowed.

It looks incredibly crowded and wordy. Why is it that everyone - including Microsoft apparently - thinks "Metro = just using a lot of text for everything"?

It's not clean, there's virtually no use of whitespace, and I have to look really hard to even figure out how to navigate. I can't imagine anything further removed from the Metro design language.

1) Back button is broken (try another pane then click a link the go back)

2) Why not plain'ol web 2.0 design? nothing fancy, simple and works (even with JS disabled, god forbid).

3) Last remark - also relevant to this form and many MS sites, and sites made with ASP.NET or whatever - Why complicate simple web functionality like posting a comment with weird post-back s!h!t. There is no need to stay on the same page when posting something (ok, youtube also does this, but at least its fast, so the user knows her comment was posted). It seems to me that the great Visual Studio helps web-developers make shitty and slow sites. Just look at what google is doing, and copy it. It's simple, you have been copying before.

CANNOT STRESS HOW POINT 3 SHOULD BE TAKEN TO HEART AT MSFT.

It's not terrible really, but I don't think it is an improvement from the old site.

As a web designer I feel I can safely say that site is legitimately bad. It's impossible to decide what to focus on.

Oh I just clicked on "For Home" and that is much nicer, although far from perfect. The blue makes a far better accent colour than the orange. I like the current one more. It's simpler.

I know that if I don't have anything nice to say, that I shouldn't say it. However, I just threw up a little bit in my mouth.

The sliding advert moves too quickly. The search should be positioned on the right, not centered. The ad on the bottom is tacky. The blue and white background is with contrasting edges look like some type of IE5 rendering error. I don't like the metro style buttons, that look like they are positioned incorrectly. This positioning crops the buttons in an unpleasing way; not the way the IE9 back button looks, but like there is some type of miscalculation. 

The multiple grids in the layout look like crap. And WHY is the work section so small when it represents most of Microsoft's business?

Sigh.

Same@JoshRoss: (sorry, I have to use this, when I press space after Same, got paragraph drop list coming down. C9 sucks on IE9)

same old stuff. Tiny font. Need to zoom 150%.

Interesting transition design, but, I don't think people would understand it. I thought it is an advertisement on the side. IMO, I just want giant buttons.

[Xbox] [Win Phone] [Zune]

[Windows] [Azure] [MSE]

[Windows Live] [Bing] [Office]

[ETC expend button 1x3].

[IE9, a bit hidden is ok] [Hardware mouse] [PhotoSynth]

[VS] [Expression] [MSDN]

[MS Research] [temp] [temp]

Nothing more. Just these giant buttons. Each botton is 250px width and height.

I really hate it when a web page only uses about half the available width of my screen.  I have to scroll down to see all the content when there's plenty of space available to show it al on one page. Just say to to fixed width designs!

Herbie

@Dr Herbie: +1

It's simple: NO PX COUNT ANYWHERE ON THE PAGE (html/css). Not in font height spec, not in width of divs, nowhere. If you find yourself wanting that, use Flash! Better yet, find another job. Its web design 101, sheesh.

15 hours ago, Bas wrote

It looks incredibly crowded and wordy. Why is it that everyone - including Microsoft apparently - thinks "Metro = just using a lot of text for everything"?

 

It's not clean, there's virtually no use of whitespace, and I have to look really hard to even figure out how to navigate. I can't imagine anything further removed from the Metro design language.

Wait, you mean Metro doesn't mean "Do exactly the same as before but with text where buttons go?" - who knew?

Somewhere within MSFT a designer is sobbing at the travesty that is all these so-called-Metro designs. Probably along with the guy who thought up the Ribbon.

@fanbaby: PX in web design is generally bad, yes, but has nothing at all to do with Dr. Herbie's complaint. EM widths would have resulted in the same thing.

A fluid width would probably not be ideal either, because reading very wide columns of text is not something we're conditioned to do, and it can actually make it harder to read the content. The real solution with wide monitors is to use multiple columns... but such web designs are currently not easy to accomplish, especially cross browser.

On topic, I can barely see any Metro in that design. Which is probably a good thing, since Metro was designed for small screens. Ignoring that, though, the design is simply "meh". Doesn't inspire at all, and is a bit cluttered, but isn't entirely ugly either.

It really just looks like they tool the entire script kit from jquery tools flowplayer and implemented it

WOW! Ain't that a lovely mess. I love the old school ring menu at the top. LOL!

It's like one of those data entry screens loaded with tabs on tabs on tabs. Cram it in there boys! We can make it fit!

Here is a great article that summarizes the influences and principles: http://www.pursuitofgreatdesign.com/2012/03/why-has-microsofts-metro-design.html

I'll accept that Metro can scale to be a usable desktop UI when I see the first example of it.

Actually, we have - Zune.

Which is replaced in Win8 by the full-screen media player.

Jesus.