Exclusive: Metro-style Hotmail UI revealed via new Microsoft account login screen

By damaster | Posted June 7, 2012 38 comments

HotmailSo we’ve shown you exclusive screenshots of the new Microsoft account website, as well as the new Profile page, both in their Metro-style glory. This time we were able to discover a new Microsoft account login screen, which clearly shows the rebranding of “Windows Live ID” to “Microsoft account”, and also in a very Metro look. However, what’s interesting is not the login screen itself, but the “placeholder” images that was shown on the login screen. Check it out below:

Microsoft account - Login

Yes, the placeholder images revealed the interface for the new and upcoming Hotmail, also showing a very Metro-fied look similar to the Profile page we’ve shown earlier. We managed to obtain the original image, which shows a closer look at the new Hotmail:

New Hotmail

As you can see, the new Hotmail website also features the minimalistic header, and its color will vary according to the service (for example, SkyDrive will have a blue header, whilst Hotmail is currently green, as shown above, it may or may not change to the teal color that is consistent with the Mail app in Windows 8 Release Preview). Towards the left is the name and logo of the service, and clicking on it will bring down the Metro-style menu for navigating between Hotmail, People, Calendar, and SkyDrive. Menu items for the actual service, such as composing a new email and organising emails, will be shown in the middle part of the header bar. Towards the right are buttons to bring up Messaging (WebIM), Settings, and your Microsoft account info.

We’ve heard that the new Hotmail interface will be “fast, fluid, and intuitive”, and fully optimized for touch-based devices as well as traditional mouse and keyboard. We’ve also heard that the new Hotmail will feature “a new style of advertising that is not flashy or distracting”, but exactly what that means will remain to be seen.

So what do you think about Hotmail’s new look? Let us know in the comments below, and be sure to check back at LiveSide as we bring you the latest news on the next version of Hotmail, SkyDrive, and more. Stay tuned!

Update: You can now check out the full suite of high resolution screenshots of the new Hotmail by clicking here.

Posted June 7th, 2012 at 4:45 am
Category: News
Tags: Hotmail, Metro, UI, Wave 5, Windows Live
  • http://www.twitter.com/vthenerd Vladan Vukmanov

    Looks sleek! Definitely better than the first screenshot we’ve seen before. Can’t wait for the autumn to see it live (going by the logic, they’ll release it at the same time as Windows (Phone) 8).

  • Guest

    Looks sleek! Definitely better than the first screenshot we’ve seen before. Can’t wait for the autumn to see it live (going by the logic, they’ll release it at the same time as Windows (Phone) 8).

  • http://www.pixelcustard.com/me cjschris

    Just gross.
    I hate Microsofts idea of minimalism. Zune was great. This…not so great.

    Ugly solid colours with a classic ugly Ms spin, like Windows 8.

  • http://www.pixelcustard.com/ cjschris

    Just gross.
    I hate Microsofts idea of minimalism. Zune was great. This…not so great.

    Ugly solid colours with a classic ugly Ms spin, like Windows 8.

  • http://twitter.com/harlemS Travis Pope

    Not sure if i’m in love with that but it’s certainly an upgrade from today’s version. Also solves the problem with having never added the ability to use your own photos as a header background.

  • Travis Pope

    Not sure if i’m in love with that but it’s certainly an upgrade from today’s version. Also solves the problem with having never added the ability to use your own photos as a header background.

  • http://twitter.com/OmegaRa Shaun Sommer

    looks good to me.

  • Omega Ra

    looks good to me.

  • http://cid-280a1538334a1cb9.profile.live.com/ Seika

    Think the header is too small.
    While not understanding much about design, I’d feel better to have more space between the top edge and the content area. Metro in Windows Phone and Windows 8 has big title text to make that space, but Windows Live’s website seems to stick the content too close to the upper edge.

    • cuz84d

      the big text is way to big on the phone..

  • http://cid-280a1538334a1cb9.profile.live.com/ Seika

    Think the header is too small.
    While not understanding much about design, I’d feel better to have more space between the top edge and the content area. Metro in Windows Phone and Windows 8 has big title text to make that space, but Windows Live’s website seems to stick the content too close to the upper edge.

    • wizkid

      the big text is way to big on the phone..

  • http://twitter.com/Henryed07 Henry Edwards

    It’s looks alot better, than the current look. Can’t wait until it’s rolled out.

  • henryed07

    It’s looks alot better, than the current look. Can’t wait until it’s rolled out.

  • http://www.facebook.com/robinvanveghel Robin van Veghel

    When will it Roll-out?

  • http://www.facebook.com/robinvanveghel Robin van Veghel

    When will it Roll-out?

  • Mario Albertico

    That is an unsightly amount of green for one picture. But in terms of Hotmail design, I would prefer almost anything over the current jumpy and slow UI (e.g. waiting for hover menus to appear and clicking on those options, menu bars bouncing because of Unread count, etc.).

  • Mario Albertico

    That is an unsightly amount of green for one picture. But in terms of Hotmail design, I would prefer almost anything over the current jumpy and slow UI (e.g. waiting for hover menus to appear and clicking on those options, menu bars bouncing because of Unread count, etc.).

  • http://simenm.tumblr.com/ Simen Mangseth

    It should be orange, the Hotmail color!

    • Damaster – LiveSide.net

      This should give you an idea of what color to expect as the header color for each service: http://liveside.net/wp-content/images/2012/05/Metro-Header-Navigation-16.4.4370.419.png

      However, do note that these colors are changing as we speak, given these colors were devised during the Win8 Consumer Preview stage (and the Mail app had that green color back then). Since then, I believe except for People (orange), every other app, even SkyDrive, has changed its color in Win8 Release Preview, and hence we expect the header colors will be updated accordingly.

  • Simen Mangseth

    It should be orange, the Hotmail color!

    • damaster

      This should give you an idea of what color to expect as the header color for each service: http://liveside.net/wp-content/images/2012/05/Metro-Header-Navigation-16.4.4370.419.png

      However, do note that these colors are changing as we speak, given these colors were devised during the Win8 Consumer Preview stage (and the Mail app had that green color back then). Since then, I believe except for People (orange), every other app, even SkyDrive, has changed its color in Win8 Release Preview, and hence we expect the header colors will be updated accordingly.

  • cmwind

    finally… hopefully this will roll out in june in advance of windows and windows phone 8

  • cmwind

    finally… hopefully this will roll out in june in advance of windows and windows phone 8

  • http://twitter.com/Georgesab George Sabourin

    Oh I hope so! This looks really nice!

  • http://twitter.com/Georgesab George

    Oh I hope so! This looks really nice!

  • Jamie

    I absolutely love metro and Hotmail, but I feel they could have done a lot better with this design. It just looks very boring, but I’ll wait to try it out before I give it a real review as static screenshots don’t always truly demonstrate the beautiful experience with metro.

  • Jamie

    I absolutely love metro and Hotmail, but I feel they could have done a lot better with this design. It just looks very boring, but I’ll wait to try it out before I give it a real review as static screenshots don’t always truly demonstrate the beautiful experience with metro.

  • eknirb

    when is this live?

  • eknirb

    when is this live?

  • http://twitter.com/AndrewCalling Andrew Filipe

    I quite like it, although I’d prefer the ability to change the heading colour. Maybe there will be customization?

  • http://twitter.com/AndrewCalling Andrew Filipe

    I quite like it, although I’d prefer the ability to change the heading colour. Maybe there will be customization?

  • warero

    I don’t like the green!

    • jkth

      that’s the laptop, not the website ☺

  • warero

    I don’t like the green!

    • jkth

      that’s the laptop, not the website ☺

  • Gary

    This looks great. Finally Microsoft is pulling together their fragmented universe and bringing them into this century.

    It looks fantastic. I love the new consistent design across their products.

  • Gary

    This looks great. Finally Microsoft is pulling together their fragmented universe and bringing them into this century.

    It looks fantastic. I love the new consistent design across their products.