Verge Windows 8 app design mockups
Before I begin: I know Microsoft has changed its guidance on calling stuff Metro. I don't care, it's much easier to call it that. Let me also say that the images in this article are just me roughly representing ideas and concepts — I'm not a Graphic Designer.
After spending a considerable amount of time with Metro, 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. With a growing frustration at Windows 8 applications, very little time, and a modicum of InDesign experience, I've mocked 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 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 the front page — along with 'you need to read this' 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 the "Metro" spirit.
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 anyone is interested in seeing larger images, or play around with the original .INDD file / assets, shoot me an email on (myfirstname)@theverge.com.