davidvkimball:

Love it!

Originally posted on Teusje:

The Zune and Windows Phone brought a new User Interface (UI) design to the mobile world called Metro UI.

Not only in Windows Phone or Windows applications we see the rise of this new Metro UI style, even websites are adopting them.

Today even Microsoft launched the redesigned microsoft.com website.

Sitewww.microsoft.com:

Sitewww.touchality.com:

Sitewww.touchality.com/blog:

Sitewww.monsmartphone.net:

Sitewww.windowsteamblog.com:

Sitewww.metrotwit.com:
(The application itself is also a great example of a Windows application with a Metro UI)

Sitewww.mykindofphone.com:

Sitewww.msdn.com:

Sitehttp://msdn.microsoft.com/library/windows/apps/:

Sitewww.buildwindows.com:

Sitewww.winrumors.com:

Sitewww.windowsphone.com:

Sitewww.computerman.gr:

Sitewww.bing.com/webmaster:
(if you sign in/up, on the website)

Sitewww.server-talk.eu:

I hope this gives you some design inspiration ;)

More information about the Metro UI can be found on Wikipedia.

Update 2012-06-13: added some other sites
Update 2010-08-02: added some other sites

View original

Assignment 2: Comparing/Contrasting Media Sites

Media Sites:

Mashable

TechCrunch

Fresh Apps

Journalitico

1. Mashable

Type of Media: Social media, including all types of social networks such as Facebook, Twitter, Google+ and startups like foursquare, chime.in, Groupon, etc. It also provides information on technology, business, and more.

Interface: First off, the site has a very good color scheme, using the popular soft blue shade. The site’s clean lines and simple typography scream Web 2.0. Social Media integration is awkward if you’re not a member of Mashable, with links to a bunch of random websites on their posts (picture below).

However, if you are a member of Mashable, you get the “Follow” feature, which allows you to post to several social networks at once.

Many of the bottons and text fields look clean and glossy. The chrome elements of the site are fantastic. Despite some of these pluses, however, the site feels a little too crowded. Particularly the footer. Perhaps they could just put a lot of this content on their “about” page…

2. TechCrunch

Type of Media: Regarding content, CrunchBase’s “About” page says they’re, “dedicated to obsessively profiling startups, reviewing new Internet products, and breaking tech news.”

Interface: Like Mashable, TechCrunch has a relatively minimalist interface. Clean, bold typography makes it easier to read headlines, white background makes for easy readability, and the social media icons are also minimalist. One thing I’m not sure about is their top bar (main navigation) remains at the top of your screen when you scroll down on an article, although the logo does become smaller:

Both Mashable and TechCrunch’s sidebars are very related-article heavy. This is good for people who love to consume information, which is a lot of who they are appealing to. TechCrunch’s footer is relatively busy as well, but not as messy as Mashable’s:

3. Fresh Apps

Type of Media: This site’s primary focus is to providing information on cool, new applications for the iPhone.

Interface: It strongly resembles iOS and Mac OS X-like aesthetics, with a light-gray background and rounded edges to the sections of the website. A simple search box on the top right serves its purpose well, and is a great addition to an app-based website where searching is very important.

Although the site reflects an iPhone-like color scheme, the green is the highlight and main theme of the site. The “fresh” idea is based on whether or not you liked the app, and it appears in a list on the homescreen. When new reviews are posted and new information is released, more new people will “fresh” the apps and bump them up to the front page.

This website is a different kind of media, less article-focused and more interaction of users. Not commenting, but reviews and ratings. Interesting Web 2.0 stuff going on there, too.

4. Journalitico

Type of Media: Politics, News, and a variety of opinions.

Interface: A clean, black and white interface with serif type and boxes of pictures and text. Of all four of the sites, it’s the simplest, and the least popular. It’s the only personal blog, too. Notice that the footer is significantly cleaner than the other sites’:

Rather than a list of recent articles or sponsored sites, this site’s sidebar has a follow section, about me section, picture, and a small Twitter feed. Less content by far and simpler than the others.

That’s it. That’s the WHOLE sidebar.

I suppose the choice of font and simple layout is intended to represent a newspaper. Unlike Mashable, it lacks many of the glowing, 3D buttons on the site, making it more pre-Web 2.0. But hey, look at reddit. I do like the navigation bar at the top, which is smaller than the more important posting-content:

From a team of one person, there’s an impressive amount of content.

Interface wars: who wins?

TechCrunch

I’m a sucker for sans-serif fonts, bold typography, minimalist social media icons, and easy readability. But beyond that, for the content the site has to manage, it organizes its articles and pages very well. It may seem a little crowded with information to the layperson, but I think that’s exactly what the tech-nut/geek readers are looking for. :)

Audience

Name: Owen

Demographic: Man in his mid-twenties, a developer for Windows Phone who loves the Metro UI design language. He is engaged and is employed at Microsoft. A bit materialistic but he is developing a compassion for people and desire to make software that is easy to use.

As they look: He’s paying attention to the aesthetic of the website, how it looks, how it feels, how closely it embodies the Windows Phone interface. They’re looking for design elements that are new and modern, innovative layouts and interfaces. He’s looking for what’s sticking out, what’s different than the rest. As a fan of Metro UI, those are things he constantly looks for.

Feelings: Generally happy, pleased at the new take on a metro design for a WordPress website, including the people live tiles and Windows Phone icons for page navigation. It inspires him to be creative, especially for updating his blog for his fiance and him which is metro-themed.