When I think Microsoft, I think mainstream business. When I think funky startup in Brooklyn, I think Apple. Historically, if you are a designer, and the client said to “make it look more ‘business-like’,” this was often a very bad thing. If the client “designed” a sample to show you how they wanted something to look using a Microsoft product (Word, Powerpoint, remember Front page?) that was even worse. Such “input” was, with rare exception, of the very web 1.0, “let me show you our org chart” (and/or every feature in our incredibly bloated products) variety.
With the rise of Apple, designers found an ally to help them push back. Apple’s success gave credence to it’s design aesthetic, and it was clear to everyone that design was crucial to its success. So, you could always counter with, “this is how Apple would do it , and they make scads of money.” Such gambits often work in business.
Little did most designers realize that as far back as 1995, Microsoft was beginning a long slow transformation that would, ironically, turn them into another ally for web designers. Code named Metro, and starting with Microsoft Encarta 95 and MSN 2.0, and developing further with Windows Media Center and Zune, this design “language” has found its fullest expression in the sleek minimalism of the Windows Phone OS, the Xbox 360 dashboard, and the upcoming Windows 8 OS. Metro is characterized as an extension of the International (or Swiss) Typographic Style popularized in Europe in the 1950s as a way of dealing with the demands of multi-lingual publications. Stephane Massey has written a quick description of Metro UI principles, which is good starting point before you dive into Microsoft’s own Metro style guide.
Swiss grid design, which I studied first-hand in college, turned out to be very useful for publication designers of all kinds. The tabular structure of early web pages (now outlawed in all but exceptional circumstances, like HTML email design) forced designers to internalize fairly rigid grid principles. As more flexible forms of layout became possible on the web, there emerged a tension between the grid and more free-form notions of “creative” design. Similarly, the Swiss style was characterized by a very limited palette of sans serif typefaces in a limited number of sizes. The typographic limitations of the early web matched this aesthetic rigor as well, but designers bridled against it.
Fast forward to the current era of “modern” web development and, thanks to Typekit et al, almost anything that a designer can imagine can be built in code and be fully semantic and searchable. I saw a great presentation by designer Jason Santa Maria at An Event Apart Boston, where he showed some amazing examples of what is now possible with the font-filled and javascript enabled web. Unfortunately, with all of this new-found freedom, design for the web and apps has become filled with skeuomorphic user interfaces that attempt to imitate the appearance of real things in digital form. Apple has become one of the leading practitioners of this approach. These designs are, frankly, becoming a bit cloying and corny, and the direction, now, to design something “like Apple”can run the gamut from the minimalist to the overtly decorative.
So now we find ourselves in this odd position where Microsoft is actually more design-forward than Apple! That Microsoft has done it by looking back half-a-century is part of the irony. But Windows Phone and the new Windows 8 are designed from the ground up for the world of mobile, the world we now inhabit. And mobile values speed and efficiency more than bandwidth-clogging, illusionistic decoration.
As the most visible sign of this emergence, Microsoft has released a preview of their new consumer and business website (a button on the home page toggles between the two). The new design not only fully embodies the Metro design principles, it is also the first site from a big tech company to embrace responsive web design. Simply put, a site is responsive if it reconfigures itself, on the fly, to fit different size screens. In a world of smartphones, mini and full size tablets, laptops, desktops and flat screen TVs, many designers have started to build responsive sites to serve this profusion of screen formats.
Responsive web design was invented just over two years ago, out of the robot-infused mind of Boston designer Ethan Marcotte (he went on to write a book of the same title). During that span of time there has been vigorous debate among designers and developers about how to best achieve responsiveness in the most efficient and appealing ways, but the principle is widely agreed upon as an important aspect of the future of the web, alongside native apps that deliver custom “device experiences.” What’s interesting about hearing Marcotte talk about it now, is how clear it is that we have more questions than answers, and that flexibility and future-friendly thinking is in increasing demand.
Perhaps the new site is optimized for the upcoming Surface tablet, but since my multi-screen testing suite has not yet arrived via pony express from Redmond, I can only say that the HTML5 media queries don’t work quite right on the iPad, though the new look is great on the iPhone. If Metro can be criticized for anything, it is that it is so mobile-centric that the large screen expression in Windows 8 becomes a crazy quilt of pulsing colored boxes. From what I have seen of Windows 8, it would seem that they have so far missed out on the principles of hierarchy and component scaling that are crucial to making responsive screen designs work.
Quibbles aside, comparing Microsoft’s current site design (see below) to their new, responsive site (see top of page), it’s clear that the company has made a huge leap in the direction of the contemporary with their most outward facing self-presentation. Strangely enough, if a designer is looking to convince a client to go with a state-of-the-art site design, they can now point in a surprising direction—to Microsoft.
0 comments:
Post a Comment