Writing...Data Services

Coding and writing about OData and now Windows Azure Mobile Services...

Creating “Cool Looking” Windows Phone Apps

Creating “Cool Looking” Windows Phone Apps

  • Comments 1

So far, I’ve written several Window Phone 7 apps, including the OData and Windows Phone quickstart, a Northwind-based app for my MVVM walkthrough, and a couple of others—mostly consuming (as you might guess) OData. Since I created these apps to supplement documentation, they have never been much to look at—I never intended to publish them to the Marketplace. However, now that I have my Samsung Focus unlocked for development, I figured it was time to try to create a “real-world” app that I can a) get certified for the Marketplace and b) I can be proud of having on my mom’s phone.

Fortunately, I’ve been working on an Azure-based OData content service project that can integrate very nicely with a Window Phone app, so for the past few weeks I have been coding and learning what makes these apps look so cool. I’ll try to share some of what I’ve learned in this post.

Coolest Windows Phone Apps (IMHO)

Just to give you some idea of where I can coming from, here’s a partial list of some of the cooler-looking apps that I’ve seen on the Windows Phone platform (feel free to add your favs in comments to this post):

  • Pictures – this built-in app features a Panorama control that displays layers of pictures, which makes even the most mundane snaps seem cooler.
  • IMDB – OK I admit that I must use IMDB when I watch movies, I’m weird that way. Plus this app is slick, with it’s use of multiple levels of Panorama controls and tons of excellent graphics (image is everything in Hollywood, right?)—if anything there may be too much bling.
  • Ferry Master – A nifty little app written by someone on the phone team for folks who take Washington State ferries, including background images of Puget Sound scenes.
  • Mix11 Explorer – this app, written for the Mix 2011 conference, uses a simple layering of basic shapes that mirrors the design of the Mix 2011 web site.
  • Kindle – Amazon’s classy eReader on the phone, with obviously high production value and graphics.

I would love to show screenshots of these, but most screens aren’t even available outside of the phone (just search Marketplace for these app names and check-out their screenshots.)

Find Classy Graphics

I know that the general design principles from the phone folks are  that “modern design in a touch application is undecorated, free of chrome elements, and minimally designed.” However, graphics is the kind of content that really pops on the phone. Make sure that the graphics that you use are clean and have impact, and that you have the rights to use them or you could get blocked in certification (and you don’t want to get hassled by the owner after you publish the app). Many professional apps leverage some of the brand images and design themes of their corporate web sites.

Use Expression Blend

Up to this point, I’ve used exclusively Visual Studio Express to write my Windows Phone apps. As I mentioned, my apps have mostly involved programming the OData Client Library for Windows Phone. While much better for writing code (IMHO) and essential for debugging, the design facilities in Visual Studio are, shall we say, limited. Unless you are an expert in the powerful-but-labyrinthine XAML expression language, you are going to need some extra help. Fortunately, Microsoft’s Expression Blend is designed specifically for XAML (WPF, Silverlight, Windows Phone), and it even supports animations. Here’s a rundown of Expression Blend versus Visual Studio Express:

Expression Blend

While I’m still not completely comfortable with the UI, Expression Blend has proven very adept at these design aspects:

  • Applying styles – Expression is much more intuitive and visual than VS, even making it easy to create gradients
  • Working with graphics – very easy to add background images to elements
  • Animations – I haven’t even tried any of these yet, but good luck creating a storyboard in VS
  • Entering text – XAML is weird with multi-line text in text-blocks, and Expression will generate this code automagically
  • Preview in both orientations and in both light and dark themes – this is akin to previewing web pages in multiple browsers—make sure you take advantage of this functionality
Visual Studio Express

Visual Studio is hands-down best with these programming aspects:

  • Solution/project management – I prefer to setup the project and add resources in VS
  • Build/debug – both will launch the emulator, but in VS you can actually debug in the emulator—or the device, which is much better
  • Add Service Reference – I don’t think that Expression has anything like this tool, which is very important for OData (especially in Mango when it actually works)

Because each IDE has it’s own strengths, I’ve found myself keeping my project open in both Expression and VS, and flipping back and forth during development.

Use Layering

In XAML, you can control the layer (z) of elements in the display as well as the opacity of elements. This control enables you to create a nice, modern layered look (think of today’s Windows 7 versus XP) with background element being partly visible through elements in front. This enables you to create a more “composed” screen with a sense of depth.

User Interaction

Smartphones are interactive devices, and you can make it respond to orientation changes, motion, location, and even giggling. Plus, navigating a page by swiping with your finger is the best part. In fact, swiping is so cool that Windows 8 features it heavily in the newly-announced Windows Metro (which looks a lot like Windows Phone 7). Make sure that you include some of this in your apps, at least handle the orientation change from portrait to landscape, which is easier than you think if you do your XAML correctly.

Panorama Control is Cool

As a key component to nearly all of my favorite apps, the Panorama control features all of the aspects we just discussed: leveraging graphics, using layers, and user interactions. It’s basically a long horizontal control that, unlike the Pivot control, displays a single, contiguous background image across multiple screen-sized items. As the user flips between items, there is a nice layered motion effect (like in those 1930’s Popeye cartoons) where the individual items, and their graphics, moves faster than the background images, giving an illusion of depth to the app.

Follow the Guidelines

To support the general “coolness” of the platform, the Windows Phone team has published an extensive set of design guidelines.  Of course, they recommend that you stick as closely as possible to the phone-driven themes (which the IMDB app doesn’t do too well), but most of the guidance is meant to promote easy-to-use apps and a more uniform platform. (I’m not sure how this compares to, say, iPhone apps, since I’ve never had an iPhone.)


At any rate, since I am planning to go through the entire Marketplace process, I will probably post another blog with the results of my adventure.

Cheers,

Glenn Gailey

Leave a Comment
  • Please add 4 and 3 and type the answer here:
  • Post
  • Thanks for the post.  I've bookmarked this this page and will revisit it the next time I'm designing a new app.

    I look forward to seeing what other "cool lookin" apps you find.

Page 1 of 1 (1 items)