Before I begin, let me just say that the images in this article are me roughly representing ideas and concepts — I (debatably) know how to write, not design.
After spending a considerable amount of time with Metro and Windows 8, I’ve grown completely sick of it. The lack of differentiation between apps truly irks me, and I’m growing increasingly concerned with the apparent absence of vision shown in early Windows 8 apps. But Metro is not to blame.
When most people think of Metro, they think of rectangular boxes, Segoe fonts, and not much else. Sure, it looks pretty at first, but after swiping through your 132nd page of rectangles and Segoe, whether you appreciate the design or not, it does lose some of it’s novelty. But it doesn’t have to be that way.
Metro, to me at least, is the idea that pages don’t have to be cluttered with buttons, menus, and unnecessary UI flourishes. Metro, to me, can be whatever you want it to be. As some of you may know, I work for Te Verge, and I’m extremely proud of the site’s design / design team for everything they’re doing. With a growing frustration at Windows 8 applications, very little time, and a modicum of InDesign experience, I decided to mock up a Verge app for Windows 8 tablets. Here it is:
So, what have I done here? Well, I pulled out elements from different parts of The Verge, and made a map of what a Windows 8 app for The Verge should look like. It’s unmistakably Metro; there are four main ‘pages’ which you swipe through horizontally (on an endless loop). Each page, excluding the first, has infinite vertical scrolling.
First is the front, or ‘welcome’ page, which displays whatever is currently in the colorful boxes on our front page, along with a search function, quick links to the forum, and a user area in the bottom left that would show reply notifications in one of our orange icons. The upper portion, which contains the Verge logo and search box, remains on the screen at all times.
On the second page you’ll find our news feed — exactly as you’d see it on our site’s front page — along with the ‘you need to read this’ element (also from our front page) as a persistent column on the right. The third page is a column showing all of our features, and the fourth a similar column showing all our reviews. Pretty simple.
I’ve also toyed with the idea of having the user icon in the bottom left corner as a persistent feature across all pages (tapping on it would expand your comment/post count and forum shortcuts), but i’m not sure that’s really in keeping with the spirit of Metro.
Every single element in the app is straight from the website (aside from the notifications icon and some text headers). With my limited development experience, I feel like pulling in already-existing elements directly from the web, and displaying it natively would be an extremely simple dev task. Perhaps I’m missing something. The only issue I could foresee popping up is Typekit support.
Why do I think this is so great? Well, perhaps I’m biased, but I think with a little work this design could really work. It’s kind of like our website has exploded into easy-to-read/navigate sections, perfect for the smaller screen of a tablet. What I can say with certainty is this: it looks DIFFERENT. That’s important to me, and that’s important to companies. The Verge can keep its unique design identity, just as every other website or app can, while still conforming to the Metro navigational paradigms, which I’m a big fan of.
I think if professionals can dream a little bigger, and break out from the perceived boundaries of Metro, they can create some unique, beautiful, and, most importantly, compelling experiences for Windows 8.
In the interest of not making everyone load huge images I’ve kept the embeds small. If you’d like to play around the original .INDD file / assets, shoot me an email.
Final Disclaimer: this doesn’t mean that we’re making a Metro app, that we’re not making a Metro app, or that this looks anything like our potential possible theoretical Metro app. I’m just a guy that had an hour to fill on a train.