Surprise! The Next Design Revolution Is Brought To You By Microsoft

by 8 07/31/2012

Remember how the Mac fan boys used to turn their nose up and anything and everything Microsoft? Well, they are under a lot of heat right now.

Just as Apple finally became bigger than Microsoft, Microsoft has turned the tables and come back swinging.

The web has been abuzz since the new ‘Metro UI’ has been revealed as part of:

  • the Windows 8 Phone,
  • the Xbox 360 dashboard,
  • the redesigned Microsoft website
  • and the upcoming public release of Windows 8 this fall

The Metro UI has a sleek and streamlined organization, gorgeous aesthetic and ultra modern approach to digital interfaces.

It’s been a long time coming but Microsoft has finally understood the power of design in the modern age and responded with its best look yet.

For web designers, the good news is that the Metro UI looks as good on websites as it does in applications, something Microsoft intended from the get go as evidenced with its new website. Here are the 5 things we love about the Metro UI, complete with examples of websites that are using it.

1. Goodbye Skeuomorphism!

Skeuomorphism might be an unknown word to you but if you’ve ever used a graphical user interface, you have probably come face to face with it.

Skeumorphism is the common design practice of making digital entities look like their real life counterparts.  For example, a digital notebook uses a real looking leather texture as its background, the recycle bin on your Desktop looks like the trash can in your office and most of your applications have instances of stitches and knobs that serve no other purpose except for invoking the look of the ‘real’ object.

Here’s a slightly more eloquent definition of skeumorphism from Wikipedia:

“an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material” – Wikipedia

Apple played a huge role in the skeuomorphism design movement and it’s a vital part of its design leadership. From iCal to iBooks, the Mac world is replete with cutting edge functionality hidden behind quaint appearances.

While Apple (and many other companies and designers) have often used Skeuomorphism to charming effect, its ripple effect across applications and the web has resulted in tons of cheesy and clunky creations. Frankly, designers often go out of control with Skeuomorphism, designing interfaces and elements that can be unnecessarily decorative or downright kitschy.

It’s therefore no wonder that the complete rejection of skeuomorphism is the most hotly discussed design strategy in the Metro UI.

The advent of Metro has all the potential of making skueomorphism a thing of the past. The reason behind the vehement support for stripping away the ‘real life’ appearances is simple: The new generation is growing up in the digital world.

It’s not much of a stretch to say that we are now more familiar with digital files and folders than with the real life inspiration behind them. And since establishing familiarity and easing the transition to the digital world was the biggest reason behind skeuomorphic design, it seems a little obsolete to take it into the new age of design when everyone is already comfortable with a life lived digitally (however gloomy that may sound).

The January Creative website uses a sleek modern interface that eschews all and any cheesy skeuomorphic adornments. A way to make it even better? By making the squares-filled centerpiece an interactive area. Why waste the opportunity of turning those tiles into dynamic hotspots- Metro style!

2. Hello Minimalism

What does the Metro UI replace skeuomorphic elements with? Well, mostly nothing. With lots of white padding, clean lines, simple blocks and zero gimmicks, the Metro interface succeeds because of its minimalism. Think of it as a cleanse or a sugar-free diet that cuts all the flab out of design. You don’t need to draw in screws and bolts when they serve no purpose in the digital interface.

The Windows Phone website is stunning in its use of white space, clean lines and neat organization.

When designing websites, combine minimalism with a bright color palette and tiles to achieve the Metro look. Even though I designed the homepage of my website almost two years ago, it looks like a part of the current Metro trend because of the minimalism, blocks and vivid colors. Remember: simplicity never goes out of style.

3. The Tiles Grid and Blocks

Let’s just put it out there, unsophisticated as it may sound: tiles and blocks are the best way to organize content in web 2.0. From the revamped Facebook timeline to the gorgeous Pinterest display, text and images have never been as effective or easier to work with than they are grouped inside closely placed blocks. The Metro UI reinforces this idea.

Previously, Swiss grid design forced designers to work within rigid and tabular structures. But with the advent of web font services like Typekit and the increasing capability of javascript, the web is now more inductive to creativity than ever. The Metro UI takes full advantage of this new freedom in layout design.

Win Rumors places text, images and ads inside their own blocks for a clean and flexible layout.

4. Responsive design

The metro design language works really well with responsive design strategies.

Since there are no pesky skeuomorphic elements to reproduce across a number of mediums, you can have your website scale, resize, stretch, rotate and re-organize all the elements on your website on the fly to fit different platforms. For mobile devices, functionality, efficiency and speed are the key to a great user experience, not illusions of real world instances and decorative filler.

The new Microsoft website is an excellent example of not only a Metro type interface but also the flexibility with which the website adapts to different screens.

 

(Image from Forbes)

5. Bigger Text and Clickable Elements

As further evidence of its mobile-centric approach to design, the Metro interface uses large text and buttons for easy navigation. So whether the website is accessed on a desktop computer or a mobile/tablet device, you will not have to zoom in on the links to access them.

The Verge utilizes bigger fonts inside wholly clickable (and very artsy) Metro style tiles that look just as good on desktop computers as they do on mobile devices. And you won’t have to spend excessive time on finding what you are looking for.

Microsoft’s Metro UI may be hotly debated, but one thing is for certain.  It has made an impact on the design community that is here to stay.

What do you think about the Metro UI and the ways it will effect web design? Let us know!

About 

Babar Suleman is a visual storyteller and a communication planner. He is interested in the interplay of words and visuals in the communication process and uses his diverse experience as a writer and designer in creating meaningful user experiences and effective branding strategies.

You can contact Babar at his official website or on the social media channels below.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

8 COMMENTS

jacques

you are right! especially after seeing the latest tv apple ads, looks like MS has a chance to catch up/ but will it keep it up?…

July 31, 2012 Reply

Leon

I’ll be honest, I don’t expect any post that uses the phrase “fan boys” in the first sentence to be remotely fair or unbiased to either side, but you’re comparing apples to oranges by comparing iOS apps with websites. By your own definition of Metro, Apple’s website has been using it along with their non-iOS products (even their packaging, for that matter) for nearly 10 years. Microsoft didn’t invent it, they simply codified it so that devs could utilize the style after their devigner initiative with WPF tanked.

August 2, 2012 Reply

Evert

I must say I was also pleasantly surprised by the whole metro thing. The only downside to it (afaic) are the abundance of sharp corners.
I know we go overboard with all the rounded corners these days with the css3 implementations. But it is a proven fact that sharp corners are evolutionary not a very good design paradigm.
But other than that I agree with your assesments.

August 5, 2012 Reply

Sebastien Filion

I am a big mac fan boy and I have to say some skeumorphism is still needed. Just as a simple example, with all that “minimalism” the Metro UI still uses the old phone shape (no phone still look like that) and the letter envelope shape (I don’t remember the last time I received a paper letter).

August 5, 2012 Reply

Juan Olvera

I think google did it before windows

August 5, 2012 Reply

jared

In regards to UI and UX this is one of the better jobs by Microsoft.

August 5, 2012 Reply

DrKhaos

Nice Article! I think the Metro UI is taking everything straight forward. I like the fact that MS separates all this visual cluster from the information which should be the main focus on. But this doesn’t mean that we won’t have any Skeuomorphism anymore. It should just be used in increments.

August 6, 2012 Reply

Jonathan

Someone at Microsoft must’ve read Flatland…

August 8, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization, design and copywriting articles FREE >>>