The M word

The above image was captioned “Very early design exploration work as part of Windows Phone and Windows alignment effort“.

It comes from Mike Guss who joined Microsoft as a designer to work on the then-secretive Windows Phone project. In the years that followed, he has helped define much of the design language we formerly affectionately called Metro.

Since, it appears he’s been on a company-wide crusade of sorts to help “spread the word” about what he now just refers to as “M”. In fact, he’s even gone as far as black-out any mention of the word from his recount of the journey from its inception to May of this year.

If you have any interest in design and Microsoft, then have a read of Mike’s unforgiving insight into how M evolved from a skunkworks project to something that is now at the core of the Microsoft brand and ecosystem. Here’s just a brief snippet…

In the winter of 2009/2010, XXXXX was still an underground thing. The Microsoft ecosystem was a cluster fuck frankenstein machine of all the different brands/products, so it was a challenge when it came to taking products such as Bing, Office and Xbox into the rest of the phone experience. This ultimately led us to validate our assumptions that this was a much bigger problem with Microsoft as a whole. We needed to go back to the XXXXX principles.

In spring of 2012 XXXXX XXXXXXX shouted out “XXXXX, XXXXX, XXXXX!” at a conference, and that is the moment that Microsoft’s “new look” have been said to have gone mainstream. I think it’s great that Microsoft has a new design direction that everyone is gravitating towards. It will help bring all the experiences together, not just in the products but in the branding and messaging as well…creating a more cohesive ecosystem. But XXXXX is not about any particular school of design. Some designers look at XXXXX as a style guide. Using beautiful typography, negative space and grids should be a given. It is not simply getting rid of gradients, limited use of color, san-serifs, placing squares, cutting off text, and presto, you have XXXXX! The original intended use of XXXXX was a set of principles that helped us not lose focus on what our goals are when designing a product. On a philosophical level, XXXXX is ultimately about making and doing things better.

Just don’t call it Metro, unless you were Steve Ballmer, who continues to be a great source of retrospective amusement.

(Thanks to Stephen Chapman for sharing one of Mike’s other works which led me to this.)

10 insightful thoughts

  1. I find the use of 3 tiles accross to be quite interesting as I believe that is how Windows Phone 8’s Start Screen should have been designed.

    While I have no doubt that adding customization to the Windows Phone Start Screen is a good thing, when they revealed what it looked like I had an immediate repulsion to it. As difficult as it can be to describe such subconscious reactions accurately, the best I can come up with is that it’s lost its elegance; maybe even its beauty.

    The original Start Screen (which they internally tested several versions of it) used that negative space and detailed spacing to produce a rich feeling; which is almost crazy when we’re basically talking about a bunch of squares. I’ve seen reports that it even follows the golden ratio and whether that is by design or a happy mistake it worked wonderfully despite what a few ignorant people would say about the negative space. But the new start screen feels cramped and heavy; like trying to over pack a suit case.

    Part of the problem is they’ve removed the negative space and pushed the tiles straight to the edge of the screen. While I’m sure those concerned about “wasted pixels” will rejoin, it feels more forced upon the screen rather than laid their with precision in design. They showed off several different examples of how theoretical users would set up each of their Start Screens, where each person would emphasis certain tile sizes and configurations over others, but out of all the example I felt maybe one single configuration didn’t look hideous.

    After contemplating how bad it looked with all those smooched tiles together, I tried to imagine what the best “look” could possibly be for such a screen; after much thinking and a few possible ideas I realized that the fact of having to choose a certain organization for it to even look decent defeated the purpose of choice of useful tiles.

    Functional, more tiles might be; beautiful, they would not.

    So I thought about it more and tried to reason how to fix the lack of elegance while maintaining this arguably needed improvement. It frustrated me because one of aspects I love so much about M* and those who developed it was how much attention to details they spent on it; this didn’t seem to be the case with the new start screen. It seemed more to be a compromise to quell complaints and to fix a certain lack of functionality/customization. Instead it should be a shining example of great ingenuity and brilliant design; not just adding more squares and squishing them on the screen.

    In the end, besides a system similar to Windows 8 with grouping w/ the addition of jump points, simply using only 3 squares across seemed to be the best way to bring some beauty back to the start screen. This would allow it to regain some lost negative space and add some balance… or maybe unbalance keep it from being a packed mess. Obviously you lose out on the large squares evenly fittings next to each other, but besides some interesting organization choices it shouldn’t hinder any actual functionality. Maybe that’s an understatement, but I would gladly trade away extra clutter for a bit of beauty and style.

  2. Is Mike still working for Microsoft? It seems he isn’t as Windows 8 has a far less rigorous grid for the Metro/Modern app design, in comparison to Windows Phone 7, considering his emphasis on it with the grid prominently shown in his slide for the project.

    While it already annoyed the hell out of me that many WP7 apps do not adhere to the stringent design process by using the grid, it annoys me even more that there is no grid AT ALL to follow in Windows 8. I’m pretty sure it annoyed the heck out of him as well.

  3. On a superficial note, I like that they used a “New Order” album cover in the mock-up (top right tile). And ironically, that album title is “Power, Corruption and Lies”. Hmm. Never say designers at MS don’t have a sense of humor.

    1. I think that you are right, to support this the different sized icons are not dissimilar to the previews of Windows 8 phone – as such maybe, just maybe this is a hint as to the final version? As the RTM is sheduled for the 15th – we only have to wait a few days to find out!

    2. The almost exactly Surface device and new Windows logo being in it are also sort of suspicious. And the fact that the calendar is displaying the release date for Windows 8.

    3. I was thinking about that too. But then the designer could have just updated the work before releasing to public. Who knows. With that said, if I were the designer, I wouldn’t do that.

  4. I like the design and i believe that there is some uniqueness in the design.Hope this design will rock.There is some gravity in the design.So,when it is releasing.

    1. perhaps this is the mysterious ‘windows blue’ update for windows 8, a windows 8.5 if you will. it certainly looks more thought out and more customizable, very similar to the start screen costomization leap from windows phone 7.5 to 8

  5. I think the use of three different tile sizes like in this mockup (big square, small square, and rectangle) look much more appealing than what we’ll get with Windows 8 (square and rectangle only) or Windows Phone 8 (also three sizes but square only). If you look at the Windows 8 start screen today, it’s nice but a little bit too symmetrical (the height of a tile is always the same, no matter what size). I hope they will introduce this design with a later Windows release. It wouldn’t be so hard to do; basically, it’s just the big square one.

Leave a Reply