Windows Phone 7 for Designers

wp-designers

You know you’re a graphic designer when you see CMYK and RGB like Neo sees the Matrix.

Disclaimer: I’m not a professional graphic designer, but I always had a passion about design. If you glance at my portfolio, past and current ventures as well as this blog, you’ll find numerous examples of design elements and ideas. This post is for developers as well as designers, I’ll try to analyze my perception of what is so cool about Windows Phone UI.

The Revolution of Metro UI: Typography

If I just had one word to define Windows Phone UI design: Typography would be it.

typoTypography is the cornerstone of modern design, but it was sadly missing from the UI of mobile devices. Small screens with traditional small print UI is what mobile devices inherited from Palm, iPhone and Android. The modern UI design tends to use large print, and TV-like appearances and animations. It’s interesting to see many HTML 5 sites using simple clean and large layouts.

With Metro UI, Microsoft dared to change all that. Typography is now the main component of the Windows Phone experience.

Quote from Mike Kruzeniski, Windows Phone Design Team:

Our design inspiration is very typographic, and it felt like it was time for User Interfaces to be uncompromising about type as well. Type is information, type is beautiful.

The best example of modern controls taking advantage of typography in Windows Phone UI is Panorama. All of a sudden cramming text into one screen looks old. I believe Microsoft should be credited with this innovative approach to mobile user experience.

Microsoft’s typography is supported by XAML’s styling: using pre-built Windows Phone styles in XAML helps when you want a consistent Metro UI. Of course, using tools such as Expression Blend, you can visually change the style, instead of coding it in XAML.

<TextBlock Text="Some Text" Style="{StaticResource PhoneTextNormalStyle}"/>

OEM_OemMoAppDevGuide_PeoplePan

How Rounded Corners Changed the Design Game… Again

design-anti-roundedClean cut shapes and tiles complement Metro UI design.

Again, quoting Mike Kruzeniski:

Content, Not Chrome It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content.

I think CSS3 changed the design game entirely, and made rounded corners look almost Baroque.  And Microsoft Windows Phone is suddenly winning the design edge in fashion: otherwise how can you explain that Windows Phone are so cool and distinctive looking?

Making rounded corners in pre-historic HTML and CSS2 was a nightmare: people used to craft images in Photoshop to make a single button look rounded. Entire working weeks were wasted to make CSS and JS libraries for rounded buttons. There’s an abundance of resources on how to create rounded corners: and new techniques emerge every day! Then we had CSS3 and most browsers are now supporting border-radius and shadows:

.rounded-border{
    border-radius: 15px;    box-shadow: 10px 10px 5px #888;
}

What used to be a challenge is now so easy, no self-respecting designer would do it, and rounded corners become mauvais ton.  It seems that similar to the evolution of architectural design, the UI architecture shies away from the rounded corners. Another great hit for Microsoft’s clean-cut Metro UI!

antique

Rounded corners are the Serif of design. Clean modern design prefers Sans-Serif.

Tiles

tiles

Tiles are a unique and really cool innovative feature that truly separates Windows Phone UI from the competition. If you stand 10 feet away from a bunch of cell phones: iPhones, Androids and Windows Phone, most makes will blur, but Windows Phone will stand apart, mostly because of the tiles elements of the UI.

Tiles are exactly what we need instead of app icons!  In Windows Phone 7 tiles may have front and back, title, background image and back content.

You can update your tiles from the app, and push and receive notifications from your tiles. Pretty neat, huh?

From the user experience it’s a huge advantage, now the user doesn’t have to switch back and forth to application for a concise overview of what’s going on (like if an e-mail is received or the weather alert is expected).

Tiles are such a great step in mobile apps design, that I’m going to have a separate post just to cover the tiles, search my blog for more.

Designer Tools

imageWhat truly puts Windows Phone ahead of the competition is new development and design tools that Microsoft rolled out . In addition to Visual Studio, Microsoft now has a new set of tools targeting specifically designers. With Expression Blend 4 you can now create Windows Phone apps the way a Flash developer would do. Expression Blend’s powerful storyboarding and animation features are clearly beyond the usual capability of an IDE.

The project format for Visual Studio and Expression Blend is the same: projects may be opened in either tool, which is fantastic for organizations where designers may do storyboarding and animation and developers the inner wiring.

It’s hard to compare Microsoft Windows Phone design tools with anything on the market. Apple’s XCode for iPhone, Eclipse and Appcelerator are traditional, rather than designer oriented IDEs.

Icons

Application icons for Windows Phone 7 are so popular on the Web, I see many designers creating new sets! Application  Bar may be added to most Windows Phone app pages (except those containing Panorama and Pivot controls) with a bit of XAML (auto-generated for you by Visual Studio or Expression Blend).

Emulator

Emulator responsiveness becomes critical when developing apps, and so far I found XCode and Microsoft emulators to be the fastest loading. Android emulator was 3-5 times Sad smile slower than the main competitors, and Appcelerator is even slower (even after introducing a “fast” loading mechanism).

80/20 Rule or Why Design Matter So Much

The 80/20 rule asserts that 80 percent of your impression from the system is generated by 20 percent of features. In case of Windows Phone, the number of innovations in every aspect of the design and development is far beyond of what was expected, and for these innovations the company and developers should be lauded.

Resources, Links and References

Mike Kruzeniski on the story of Metro

More information on Windows Phone 7 design may be found in UI Design and Interaction Guide for Windows Phone 7

Jeff Wilcox’s “Metro” design guide for developers, v1.00

Windows Phone 7 – Design (technology)

Windows Phone Design Days – Blend

Jaime Rodriquez MSDN Blog

Leave a Reply

Your email address will not be published. Required fields are marked *