11 ms·

Microsoft.com New Design Preview

176 points by chaud 14y ago

juanpdelat 14y ago
Wonder if they're planning to make ALL their web content responsive. A lot of work for their web devs!
tmzt 14y ago
So why didn't their Surface launch site look like that?? And will they be fixing search (other than including Google GSE which would be a vast improvement). Edited to add: the answer to my last question is 'no': http://windows.microsoft.com/en-US/windows/search#q=surface http://windows.microsoft.com/en-US/windows/search#q=surface
dkroy 14y ago
What is bi:index used for?
FACKER 14y ago
HTML5
FACKER 14y ago
HTML5
chris_wot 14y ago
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 http://static.inky.ws/image/2290/image.jpg 2. http://static.inky.ws/image/2291/image.jpg http://static.inky.ws/image/2291/image.jpg
- __float 14y ago
  Wow, bizarre. It looks nothing like that in Chrome. http://i.imgur.com/Ny3fo.png http://i.imgur.com/Ny3fo.png
  - chris_wot 14y ago
    I've logged a bug with Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=769573 https://bugzilla.mozilla.org/show_bug.cgi?id=769573
- hebz0rl 14y ago
  looks fine here (linux/firefox) http://i.imgur.com/zSSgQ.png http://i.imgur.com/zSSgQ.png
rsoto 14y ago
Weird, I can't see anything if Adblock is on. Make sure yours is whitelisting microsoft.com (at least temporarily).
- ineedtosleep 14y ago
  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
  - FACKER 14y ago
    with AD BLOCK PLUS beta! i see evrything fine, Same versions as above!
TazeTSchnitzel 14y ago
Very modern, very metro, beautiful design. I like it.
uvTwitch 14y ago
It's taken a long while, but Michaelsoft are finally getting their shit together. Well Done!
- mintplant 14y ago
  Sorry, Michaelsoft? Was that an intentional inside joke?
  - uvTwitch 14y ago
    I just find this really funny, and refer to MS as such: http://brog.engrish.com/wp-content/uploads/2010/03/michaelsoft_binbows.jpg http://brog.engrish.com/wp-content/uploads/2010/03/michaelso...
curiousfiddler 14y ago
Looks neat, uncluttered and peppy! But what about the favicon? That is so 1990!
- bicknergseng 14y ago
  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.
- deleted 14y ago
  [deleted]
mc32 14y ago
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.
metrop0219 14y ago
Looks good to me, digging it.
zyb09 14y ago
Shouldn't the menu be all capitalized?
- brudgers 14y ago
  Words in all caps are harder to read.
  - cdcarter 14y ago
    It's a reference to the new VS menu design.
  - molmalo 14y ago
    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-design-with-all-caps.aspx http://blogs.msdn.com/b/visualstudio/archive/2012/06/05/a-de...
    - duaneb 14y ago
      Oh god, I thought that was an April Fools joke. Does Microsoft not hire design people? It looks horrific!
      - molmalo 14y ago
        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"...
        chris_wot 14y ago
        What's really funny is that a whole bunch of people are responding in the comments with all caps :-)
derpmeister 14y ago
That's the squarest site ever! I take it IE still doesn't support rounded corners?
- waiwai933 14y ago
  IE9 and IE10 both support rounded corners, but honestly speaking, I think the design they have would be worse with rounded corners.
  - mc32 14y ago
    Specially taking Metro into consideration which is very much about right angles.
- brudgers 14y ago
  What is the advantage of rounded corners?
  - simonrobb 14y ago
    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-corners-affect-usability 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.
  - outworlder 14y ago
    Obligatory: http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...
- jrockway 14y ago
  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.
zackham 14y ago
Really nice support of different browser sizes. Resize your browser from wide to really narrow to check it out.
- voltagex_ 14y ago
  Any idea how that's working? I've never seen image resizing work that well!
  - sirn 14y ago
    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.
    - p0larboy 14y ago
      after scaling the max-width to 150%, they did a margin-left:-40% to center the image
- meej 14y ago
  Agreed! I noticed it plays very nicely with the window docking features in Windows 7. Beautifully done.
- makecheck 14y ago
  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 14y ago
  This was what I was going to point out. Great responsive design. Now if only their operating system was as sleek and as this ;)
- rplnt 14y ago
nakedgremlin 14y ago
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.
- metrop0219 14y ago
  Yeah I think it's just a home page preview
- sliverstorm 14y ago
  it is sad that the experience is rarely consistent... It's a preview.
toddmorey 14y ago
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 14y ago
  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.
  - mgkimsal 14y ago
    "What exactly could be done to this page to make it more "emotive"? " Comic Sans seems to do the trick for many people.
- bjg 14y ago
  You should use the feedback button on the right!
  - mnicole 14y ago
    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.
    - aik 14y ago
      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?
    - 14y ago
citricsquid 14y ago
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.
abruzzi 14y ago
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 14y ago
  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.
  - simonrobb 14y ago
    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.
mtgx 14y ago
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"?
GBKS 14y ago
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.
udp 14y ago
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.
powertower 14y ago
Broken in IE8 on Vista SP1 (divs are placing one after the other horizontally instead of in their proper places).
- mparlane 14y ago
  Same here, I guess it shows what Microsoft think of IE8...
dchest 14y ago
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!
- aristidb 14y ago
  This is a reference to Bill Gates ranting about not being able to download Movie Maker easily. See here: http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-epic-bill-gates-e-mail-rant/ http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-...
  - mattmanser 14y ago
    What I never really understood about that is that nothing happened after that. No heads rolling, no massive rehash of the process, it just limped on being an utterly lame duck for another decade. Until they are finally bringing out something like a first class app store now. Just shows the lack of direction the product was getting when you hear the totally different results that Steve Jobs got. Admittedly BG was no longer CEO then.
- duncans 14y ago
  Were you carrying out the "BillG test"? http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-epic-bill-gates-e-mail-rant/ http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-...
- ot 14y ago
  Even easier, type "movie maker" in the search box on the top right, 4th result is "download movie maker"
  - dchest 14y ago
    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.
dewiz 14y ago
Really cool responsive design, works and resizes smoothly both on FF and Chrome, while I've seen some similar implementations being very slow on Chrome.
yaix 14y ago
Good to see that the use the "menu with down-arrows" correctly, that is "on click", rather than flickery on hover.
- bhrgunatha 14y ago
  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.
fratis 14y ago
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 14y ago
  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.)
akshat 14y ago
There is no auto-complete in the search box. Should this not be expected?
TamDenholm 14y ago
Is it just me or does the guy in the last slide look like hes using a photoshopped macbook air/pro?
- levesque 14y ago
  I don't see why they would do that, it would be beyond stupid.
  - thematt 14y ago
    It's unlikely Microsoft themselves even created the site, it was most likely contracted out to a design firm.
  - politician 14y ago
    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.
- CrazedGeek 14y ago
  I think that's a Samsung laptop -- mine has that same sorta brushed metal look.
deleted 14y ago
[deleted]
idleloops 14y ago
Blinded by the white. Inconsistency of design between child sites.
Lisa2000 14y ago
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?
rbanffy 14y ago
Not a very efficient solution to the "Google is getting too much attention" problem. I have to respect the people who did it, even if I don't the manager who decided to show it before it's ready.
Silhouette 14y ago
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.
- mark_story 14y ago
  You're going to hate the future of all microsoft platforms then. Xbox, windows, and windows phone all share this design language.
  - Silhouette 14y ago
    I know. It is bad enough that we're so obsessed with web apps today that some people actually consider tools like HTML, CSS and JavaScript to be good for application development. But if native applications are going to look even worse... Fortunately, they won't, because real people still have real work to do, and user interfaces that look like (and have similar power to) a five year old's toys are going to suck for that. Microsoft will want everyone to move over to Metro, just as they wanted everyone to use their new shiny technology last year and the year before that, but they'll still support the stuff that people write real applications with, for the same reason that you can still write native apps in C++ instead of using .Net and C# for everything. In fact, most of Microsoft's own big money spinners don't tend to use their shiny development technologies, and they never have. Like the incompetence of politicians, this is one of those universal constants that brings hope even when everyone is saying really stupid things. :-)
- lusr 14y ago
  "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"?
mayukh 14y ago
Here's one angle..MS has 2 large very different customer sets, the enterprise and the consumer and in the past it seemed that a lot of the UI was some sort of a compromise targeted to both. The consumer tech group is definitely getting stronger at design .. and the enterprise tech arm can rely on its salesforce
damian2000 14y ago
Nice look, but, slow as hell to load. 15 seconds before anything appeared. Maybe because I'm in Australia. (my net connection is around 5mbit so its not that).
- xwowsersx 14y ago
  That's just you. Loads in 1 second flat here in NY.
- jameswyse 14y ago
  Only took a couple of seconds for me in Australia, though I'm on fibre.
- bmunro 14y ago
  It loads in half a second here in Sydney
billpatrianakos 14y ago
It looks great actually! What kills ,e about Microsoft though is that, especially recently, they've done a great job in making their sites, OS, and software quite pretty but they still after all this time have absolutely horrendous font rendering in Windows which kills every design they come out with. I'm a developer who uses a Mac as my primary machine, Linux as a secondary machine and in the past month has been forced to use Windows at my new job. I wasn't happy about it but it turns out I've gotten just about as productive with it as any other platform. But the problem is that now, 4 weeks in, I get terrible eye strain and the whole system looks ugly because fonts are jagged except at really large sizes. It's ironic that this new site looks awesome on my iPad and Mac but not so much on their own OS, Windows. Why can't they fix that already?
- dreamdu5t 14y ago
  This is intentional. Windows uses font hinting which attempts to align the anti-aliased font to whole pixels vertically and sub-pixels horizontally. This is done to maintain readability at small sizes. Apple doesn't use this type of font hinting and applies sub-pixel anti-aliasing proportionately. See this comparison of the two methods in detail: http://damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x http://damieng.com/blog/2007/06/13/font-rendering-philosophi...
- wisty 14y ago
  Microsoft font rendering is different, not worse. If you want to make it more like OSX, there's a tuning app here: http://www.microsoft.com/typography/cleartypeinfo.mspx http://www.microsoft.com/typography/cleartypeinfo.mspx
  - mitsche 14y ago
    AFAIK there is no way in Windows to control hinting, which in my opinion is the thing that makes Windows' font-rendering unbearable, especially on displays with a high PPI count. There's hacks out there, but they're exactly that: hacks. And they don't always work that well.
tarellel 14y ago
Very nice finally something from MS that looks great. The simplicity and clean, clear, and crisp look is definitely a win for me. But it's to little to late, everyone's shifted a lot of their focus to Apple and Google. BTW I think it's hilarious that they're using modernizer on their site, maybe it's the best choice they've got to cover up some of their own mistakes.
ChrisNorstrom 14y ago
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?
robmiller 14y ago
Uses jQuery and Modernizr libraries. Nice work Microsoft.
orangethirty 14y ago
Congrats to the MS web team. Great job. Makes me want a job there. :)
cageface 14y ago
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.
- hk__2 14y ago
  Java runs everywhere. C# runs only on M$ plateforms…
  - Produce 14y ago
    There's Mono + Qt bindings.
  - theootz 14y ago
    Not true: http://www.mono-project.com http://www.mono-project.com
  - Jacobi 14y ago
    I use Mono on a daily basis. It's a mature full featured cross platform .NET implementation.
    - gouranga 14y ago
      It's not full featured. It's a pretty small subset. The most powerful things in the .Net platform are the big chunks of code which take on large business cases and make them go away. For example the following either don't exist or are half-baked: WCF (WsHttpBinding in particular), WWF (entirely which we use for WCF correlation), EF (not a biggy but would be nice), WPF (the best part of .Net), MEF (buggy and missing bits). If I wanted cross platform, I'd go Java.
      - Jacobi 14y ago
        I do agree with you : mono is a subset of .NET, Cross platform compatibility is not the main reason for using Mono. I really like the C# and the .NET ecosystem. I use a native UI for each platform, but the core code is the same. I'm not a big fan of those generic UI toolkit ...
perfunctory 14y ago
is there anybody who really likes these slide shows on the home page?
dutchbrit 14y ago
Wondering if Blitz Agency designed this, they're known for doing design/web work for Microsoft. http://www.blitzagency.com/ http://www.blitzagency.com/
creamyhorror 14y ago
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 14y ago
  Personally I hate when icons replace text.
sausagefeet 14y ago
God, finally a MS website that I can actually determine something about what the company does from.
andrewfelix 14y ago
It's like a beautiful store front. Click on almost any link and the beautiful geometric layout is replaced with something different and far less pleasant. This would have made so much more impact on me if the theme had been deployed more consistently and thoroughly across more pages.
ClaraStewert 14y ago
Wow, looks like shit.
bane 14y ago
It's pretty nice, works well across desktop to mobile (the slide-down menus are a bit slow on mobile). My only issue is that I don't particularly care for the Sans-serif font on the section headers. It just doesn't look "right" to me.

176 points by chaud 14y ago

Wonder if they're planning to make ALL their web content responsive. A lot of work for their web devs!

tmzt 14y ago

So why didn't their Surface launch site look like that?? And will they be fixing search (other than including Google GSE which would be a vast improvement). Edited to add: the answer to my last question is 'no': http://windows.microsoft.com/en-US/windows/search#q=surface http://windows.microsoft.com/en-US/windows/search#q=surface

dkroy 14y ago

What is bi:index used for?

FACKER 14y ago

HTML5

FACKER 14y ago

HTML5

chris_wot 14y ago

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 http://static.inky.ws/image/2290/image.jpg 2. http://static.inky.ws/image/2291/image.jpg http://static.inky.ws/image/2291/image.jpg

__float 14y ago
Wow, bizarre. It looks nothing like that in Chrome. http://i.imgur.com/Ny3fo.png http://i.imgur.com/Ny3fo.png
- chris_wot 14y ago
  I've logged a bug with Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=769573 https://bugzilla.mozilla.org/show_bug.cgi?id=769573
hebz0rl 14y ago
looks fine here (linux/firefox) http://i.imgur.com/zSSgQ.png http://i.imgur.com/zSSgQ.png

rsoto 14y ago

Weird, I can't see anything if Adblock is on. Make sure yours is whitelisting microsoft.com (at least temporarily).

ineedtosleep 14y ago
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
- FACKER 14y ago
  with AD BLOCK PLUS beta! i see evrything fine, Same versions as above!

TazeTSchnitzel 14y ago

Very modern, very metro, beautiful design. I like it.

uvTwitch 14y ago

It's taken a long while, but Michaelsoft are finally getting their shit together. Well Done!

mintplant 14y ago
Sorry, Michaelsoft? Was that an intentional inside joke?
- uvTwitch 14y ago
  I just find this really funny, and refer to MS as such: http://brog.engrish.com/wp-content/uploads/2010/03/michaelsoft_binbows.jpg http://brog.engrish.com/wp-content/uploads/2010/03/michaelso...

curiousfiddler 14y ago

Looks neat, uncluttered and peppy! But what about the favicon? That is so 1990!

bicknergseng 14y ago
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.
deleted 14y ago
[deleted]

mc32 14y ago

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.

metrop0219 14y ago

Looks good to me, digging it.

zyb09 14y ago

Shouldn't the menu be all capitalized?

brudgers 14y ago
Words in all caps are harder to read.
- cdcarter 14y ago
  It's a reference to the new VS menu design.
- molmalo 14y ago
  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-design-with-all-caps.aspx http://blogs.msdn.com/b/visualstudio/archive/2012/06/05/a-de...
  - duaneb 14y ago
    Oh god, I thought that was an April Fools joke. Does Microsoft not hire design people? It looks horrific!
    - molmalo 14y ago
      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"...
      - chris_wot 14y ago
        What's really funny is that a whole bunch of people are responding in the comments with all caps :-)

derpmeister 14y ago

That's the squarest site ever! I take it IE still doesn't support rounded corners?

waiwai933 14y ago
IE9 and IE10 both support rounded corners, but honestly speaking, I think the design they have would be worse with rounded corners.
- mc32 14y ago
  Specially taking Metro into consideration which is very much about right angles.
brudgers 14y ago
What is the advantage of rounded corners?
- simonrobb 14y ago
  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-corners-affect-usability 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.
- outworlder 14y ago
  Obligatory: http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...
jrockway 14y ago
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.

zackham 14y ago

Really nice support of different browser sizes. Resize your browser from wide to really narrow to check it out.

voltagex_ 14y ago
Any idea how that's working? I've never seen image resizing work that well!
- sirn 14y ago
  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.
  - p0larboy 14y ago
    after scaling the max-width to 150%, they did a margin-left:-40% to center the image
meej 14y ago
Agreed! I noticed it plays very nicely with the window docking features in Windows 7. Beautifully done.
makecheck 14y ago
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 14y ago
This was what I was going to point out. Great responsive design. Now if only their operating system was as sleek and as this ;)
rplnt 14y ago

nakedgremlin 14y ago

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.

metrop0219 14y ago
Yeah I think it's just a home page preview
sliverstorm 14y ago
it is sad that the experience is rarely consistent... It's a preview.

toddmorey 14y ago

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 14y ago
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.
- mgkimsal 14y ago
  "What exactly could be done to this page to make it more "emotive"? " Comic Sans seems to do the trick for many people.
bjg 14y ago
You should use the feedback button on the right!
- mnicole 14y ago
  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.
  - aik 14y ago
    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?
  - 14y ago

citricsquid 14y ago

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.

abruzzi 14y ago

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 14y ago
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.
- simonrobb 14y ago
  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.

mtgx 14y ago

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"?

GBKS 14y ago

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.

udp 14y ago

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.

powertower 14y ago

Broken in IE8 on Vista SP1 (divs are placing one after the other horizontally instead of in their proper places).

mparlane 14y ago
Same here, I guess it shows what Microsoft think of IE8...

dchest 14y ago

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!

aristidb 14y ago
This is a reference to Bill Gates ranting about not being able to download Movie Maker easily. See here: http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-epic-bill-gates-e-mail-rant/ http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-...
- mattmanser 14y ago
  What I never really understood about that is that nothing happened after that. No heads rolling, no massive rehash of the process, it just limped on being an utterly lame duck for another decade. Until they are finally bringing out something like a first class app store now. Just shows the lack of direction the product was getting when you hear the totally different results that Steve Jobs got. Admittedly BG was no longer CEO then.
duncans 14y ago
Were you carrying out the "BillG test"? http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-epic-bill-gates-e-mail-rant/ http://blog.seattlepi.com/microsoft/2008/06/24/full-text-an-...
ot 14y ago
Even easier, type "movie maker" in the search box on the top right, 4th result is "download movie maker"
- dchest 14y ago
  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.

dewiz 14y ago

Really cool responsive design, works and resizes smoothly both on FF and Chrome, while I've seen some similar implementations being very slow on Chrome.

yaix 14y ago

Good to see that the use the "menu with down-arrows" correctly, that is "on click", rather than flickery on hover.

bhrgunatha 14y ago
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.

fratis 14y ago

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 14y ago
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.)

akshat 14y ago

There is no auto-complete in the search box. Should this not be expected?

TamDenholm 14y ago

Is it just me or does the guy in the last slide look like hes using a photoshopped macbook air/pro?

levesque 14y ago
I don't see why they would do that, it would be beyond stupid.
- thematt 14y ago
  It's unlikely Microsoft themselves even created the site, it was most likely contracted out to a design firm.
- politician 14y ago
  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.
CrazedGeek 14y ago
I think that's a Samsung laptop -- mine has that same sorta brushed metal look.

deleted 14y ago

[deleted]

idleloops 14y ago

Blinded by the white. Inconsistency of design between child sites.

Lisa2000 14y ago

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?

rbanffy 14y ago

Not a very efficient solution to the "Google is getting too much attention" problem. I have to respect the people who did it, even if I don't the manager who decided to show it before it's ready.

Silhouette 14y ago

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.

mark_story 14y ago
You're going to hate the future of all microsoft platforms then. Xbox, windows, and windows phone all share this design language.
- Silhouette 14y ago
  I know. It is bad enough that we're so obsessed with web apps today that some people actually consider tools like HTML, CSS and JavaScript to be good for application development. But if native applications are going to look even worse... Fortunately, they won't, because real people still have real work to do, and user interfaces that look like (and have similar power to) a five year old's toys are going to suck for that. Microsoft will want everyone to move over to Metro, just as they wanted everyone to use their new shiny technology last year and the year before that, but they'll still support the stuff that people write real applications with, for the same reason that you can still write native apps in C++ instead of using .Net and C# for everything. In fact, most of Microsoft's own big money spinners don't tend to use their shiny development technologies, and they never have. Like the incompetence of politicians, this is one of those universal constants that brings hope even when everyone is saying really stupid things. :-)
lusr 14y ago
"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"?

mayukh 14y ago

Here's one angle..MS has 2 large very different customer sets, the enterprise and the consumer and in the past it seemed that a lot of the UI was some sort of a compromise targeted to both. The consumer tech group is definitely getting stronger at design .. and the enterprise tech arm can rely on its salesforce

damian2000 14y ago

Nice look, but, slow as hell to load. 15 seconds before anything appeared. Maybe because I'm in Australia. (my net connection is around 5mbit so its not that).

xwowsersx 14y ago
That's just you. Loads in 1 second flat here in NY.
jameswyse 14y ago
Only took a couple of seconds for me in Australia, though I'm on fibre.
bmunro 14y ago
It loads in half a second here in Sydney

billpatrianakos 14y ago

It looks great actually! What kills ,e about Microsoft though is that, especially recently, they've done a great job in making their sites, OS, and software quite pretty but they still after all this time have absolutely horrendous font rendering in Windows which kills every design they come out with. I'm a developer who uses a Mac as my primary machine, Linux as a secondary machine and in the past month has been forced to use Windows at my new job. I wasn't happy about it but it turns out I've gotten just about as productive with it as any other platform. But the problem is that now, 4 weeks in, I get terrible eye strain and the whole system looks ugly because fonts are jagged except at really large sizes. It's ironic that this new site looks awesome on my iPad and Mac but not so much on their own OS, Windows. Why can't they fix that already?

dreamdu5t 14y ago
This is intentional. Windows uses font hinting which attempts to align the anti-aliased font to whole pixels vertically and sub-pixels horizontally. This is done to maintain readability at small sizes. Apple doesn't use this type of font hinting and applies sub-pixel anti-aliasing proportionately. See this comparison of the two methods in detail: http://damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x http://damieng.com/blog/2007/06/13/font-rendering-philosophi...
wisty 14y ago
Microsoft font rendering is different, not worse. If you want to make it more like OSX, there's a tuning app here: http://www.microsoft.com/typography/cleartypeinfo.mspx http://www.microsoft.com/typography/cleartypeinfo.mspx
- mitsche 14y ago
  AFAIK there is no way in Windows to control hinting, which in my opinion is the thing that makes Windows' font-rendering unbearable, especially on displays with a high PPI count. There's hacks out there, but they're exactly that: hacks. And they don't always work that well.

tarellel 14y ago

Very nice finally something from MS that looks great. The simplicity and clean, clear, and crisp look is definitely a win for me. But it's to little to late, everyone's shifted a lot of their focus to Apple and Google. BTW I think it's hilarious that they're using modernizer on their site, maybe it's the best choice they've got to cover up some of their own mistakes.

ChrisNorstrom 14y ago

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?

robmiller 14y ago

Uses jQuery and Modernizr libraries. Nice work Microsoft.

orangethirty 14y ago

Congrats to the MS web team. Great job. Makes me want a job there. :)

cageface 14y ago

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.

hk__2 14y ago
Java runs everywhere. C# runs only on M$ plateforms…
- Produce 14y ago
  There's Mono + Qt bindings.
- theootz 14y ago
  Not true: http://www.mono-project.com http://www.mono-project.com
- Jacobi 14y ago
  I use Mono on a daily basis. It's a mature full featured cross platform .NET implementation.
  - gouranga 14y ago
    It's not full featured. It's a pretty small subset. The most powerful things in the .Net platform are the big chunks of code which take on large business cases and make them go away. For example the following either don't exist or are half-baked: WCF (WsHttpBinding in particular), WWF (entirely which we use for WCF correlation), EF (not a biggy but would be nice), WPF (the best part of .Net), MEF (buggy and missing bits). If I wanted cross platform, I'd go Java.
    - Jacobi 14y ago
      I do agree with you : mono is a subset of .NET, Cross platform compatibility is not the main reason for using Mono. I really like the C# and the .NET ecosystem. I use a native UI for each platform, but the core code is the same. I'm not a big fan of those generic UI toolkit ...

perfunctory 14y ago

is there anybody who really likes these slide shows on the home page?

dutchbrit 14y ago

Wondering if Blitz Agency designed this, they're known for doing design/web work for Microsoft. http://www.blitzagency.com/ http://www.blitzagency.com/

creamyhorror 14y ago

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 14y ago
Personally I hate when icons replace text.

sausagefeet 14y ago

God, finally a MS website that I can actually determine something about what the company does from.

andrewfelix 14y ago

It's like a beautiful store front. Click on almost any link and the beautiful geometric layout is replaced with something different and far less pleasant. This would have made so much more impact on me if the theme had been deployed more consistently and thoroughly across more pages.

ClaraStewert 14y ago

Wow, looks like shit.

bane 14y ago

It's pretty nice, works well across desktop to mobile (the slide-down menus are a bit slow on mobile). My only issue is that I don't particularly care for the Sans-serif font on the section headers. It just doesn't look "right" to me.