top | item 4174284

Microsoft.com New Design Preview

176 points| chaud | 13 years ago |microsoft.com | reply

123 comments

order
[+] dchest|13 years ago|reply
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!
[+] ot|13 years ago|reply
Even easier, type "movie maker" in the search box on the top right, 4th result is "download movie maker"
[+] cageface|13 years ago|reply
Microsoft now has, IMO, the most interesting design language of any of the big tech players. I guess it remains to be seen if there will be any reward for them in the market for this but, as a developer, I find this a lot more appealing than anything Google or Apple are doing and C# kicks the shit out of Java or Obj-C.
[+] karlshea|13 years ago|reply
I totally agree about the design language. I work on a Mac most of the day and love my iPhone, but damn does Metro look nice. And it's great seeing that come across with their other products as well.
[+] tomp|13 years ago|reply
What do you mean by "design language"? A programming language, a programming language used for design (like HTML, CSS), a the style of language used in their websites (e.g. Lorem Ipsum), or something else?
[+] drivingmenuts|13 years ago|reply
Tis a pity the Windows 8 desktop is not that clean.
[+] hk__2|13 years ago|reply
Java runs everywhere. C# runs only on M$ plateforms…
[+] zackham|13 years ago|reply
Really nice support of different browser sizes. Resize your browser from wide to really narrow to check it out.
[+] makecheck|13 years ago|reply
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. :)

[+] justindocanto|13 years ago|reply
This was what I was going to point out. Great responsive design. Now if only their operating system was as sleek and as this ;)
[+] meej|13 years ago|reply
Agreed! I noticed it plays very nicely with the window docking features in Windows 7. Beautifully done.
[+] rplnt|13 years ago|reply
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.

[+] lusr|13 years ago|reply
Although the fonts in Chrome render very poorly on my machine whereas in IE9 they look great...
[+] voltagex_|13 years ago|reply
Any idea how that's working? I've never seen image resizing work that well!
[+] nakedgremlin|13 years ago|reply
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.

[+] sliverstorm|13 years ago|reply
it is sad that the experience is rarely consistent...

It's a preview.

[+] fratis|13 years ago|reply
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?

[+] sjwright|13 years ago|reply
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.)

[+] toddmorey|13 years ago|reply
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.
[+] aik|13 years ago|reply
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.

[+] bjg|13 years ago|reply
You should use the feedback button on the right!
[+] zyb09|13 years ago|reply
Shouldn't the menu be all capitalized?
[+] brudgers|13 years ago|reply
Words in all caps are harder to read.
[+] abruzzi|13 years ago|reply
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.
[+] josephcooney|13 years ago|reply
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.
[+] TazeTSchnitzel|13 years ago|reply
Very modern, very metro, beautiful design.

I like it.

[+] chris_wot|13 years ago|reply
That's a totally odd font choice they are using. Check out the "d", the "b" and the "p" - looks horrible in Firefox 13! [1]

Oh, and it looks terrible in Internet Explorer 8, as the layout is completely out of whack. [2]

1. http://static.inky.ws/image/2290/image.jpg

2. http://static.inky.ws/image/2291/image.jpg

[+] Lisa2000|13 years ago|reply
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?
[+] powertower|13 years ago|reply
Broken in IE8 on Vista SP1 (divs are placing one after the other horizontally instead of in their proper places).
[+] mparlane|13 years ago|reply
Same here, I guess it shows what Microsoft think of IE8...
[+] ChrisNorstrom|13 years ago|reply
Beautiful and much better. A little cold and sterile from all the white space but it's a step in the right direction. They'll iron things out over time.

ONE thing. Where are the Previous & Next Arrows for the main slideshow?

[+] Silhouette|13 years ago|reply
Is this what we have to look forward to with Metro?

The design seems like a children's book combined with some ISP "landing page" from 1995. Everything is big and bold, yet the entire page is almost completely devoid of meaningful content. It's just a vast array of disorganised links, or more precisely, a whole bunch of vast arrays of disorganised links, with no sign of any rational information architecture or even basic scannability.

Sorry, but I just can't find anything nice to say about it. It has absolutely no redeeming features whatsoever AFAICS.

[+] lusr|13 years ago|reply
"It's just a vast array of disorganised links, or more precisely, a whole bunch of vast arrays of disorganised links, with no sign of any rational information architecture or even basic scannability."

What a ridiculous statement. Of course it's organised. Want to download something to extend a Microsoft product line? Click "Downloads" and choose the product line. Need Support? Click "Support". Want to buy a Microsoft product? Click "Store".

Which use cases exactly are you imagining are not supported by this "vast array of disorganised links"?

[+] mark_story|13 years ago|reply
You're going to hate the future of all microsoft platforms then. Xbox, windows, and windows phone all share this design language.
[+] mc32|13 years ago|reply
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.

[+] creamyhorror|13 years ago|reply
I think one thing conspicuously lacking here (besides rounded borders and gradiented buttons, both of which aren't part of Metro style) is icons. Nowadays most sites use icons to add visual interest to plain text. Microsoft's old designs didn't, and I think they suffered for the lack of them. The new design is refreshing and clean but would still benefit from having some similarly clean and functional graphical elements, i.e. icons.

(Crossposting to their feedback.)

[+] Goladus|13 years ago|reply
Personally I hate when icons replace text.
[+] GBKS|13 years ago|reply
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.
[+] mtgx|13 years ago|reply
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"?
[+] yaix|13 years ago|reply
Good to see that the use the "menu with down-arrows" correctly, that is "on click", rather than flickery on hover.
[+] bhrgunatha|13 years ago|reply
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.