Silverlight TV 58: Windows Phone Design Tips With Corrina

Play Silverlight TV 58: Windows Phone Design Tips With Corrina
Sign in to queue


New Windows Phone 7 applications are being uploaded to the marketplace all the time. But is your application standing out? This week, John and Corrina Black kick off a new Silverlight TV mini series called "Windows Phone 7 Design Tips with Corrina" to highlight ways you can improve the design of your application. Each week, Corrina will focus on some issues and show both how to work through them and how to improve the application's design. In this first episode, Corrina discusses the idea of the mini series and gives some insight into five of the design tips she unveils, including:

  • Designing a compelling application tile
  • Startup image design
  • How to avoid banding with gradients
  • Startup / Splash / Loading screen and avoiding navigation backstack issues
  • Tips when using progress bars

Relevant links:

Follow us on Twitter @SilverlightTV or on the web at






Right click to download this episode

The Discussion

  • User profile image

    Yes please! One suggestion...having a sort of bad/good comparison visual may help solidify design concepts for developers like me. Smiley

  • User profile image

    Great, I've been hoping for something like this.

  • User profile image

    @rich.schoenrock: Good idea. Yes, in the future episodes we'll be showing the problem, and walking thru to the solution. Corrina is awesome at this.

  • User profile image

    Can this also be listed as a series on its own instead of episodes inside silverlight TV? Would love more stuff on silverlight for WP7 :)

  • User profile image

    And please make it a lot more than once a month.

  • User profile image
    Shawn Wildermuth is a great place for icons (that's where i've gotten most of mine).

  • User profile image

    wonderful series John! Keep them coming more frequently...

    I am wondering is there way to take screen shot directly from phone?

  • User profile image

    @Prashant516: Thanks, glad you like the show.

    Yes, here is a good link to show you how to take a screen capture from the WP7 device.

  • User profile image

    @Shawn Wildermuth: Another great source of Metro icons is The Noun Project (svg compatible browser required). That they match up with the Metro look isn't intentional, however their style seems to come from the same basic reasoning.

  • User profile image

    I am really glad that you are doing this series, Corrina and John!

    But I don't necessarily agree with all that's been said.

    For example, Corrina said that a colorful icon sticks out like a sore thumb... which is true, but we have to stick out from the thousands of apps in the Marketplace, and you simply cannot do that with one more "white-on-accent color" icon. This is a choice we consciously took with SurfCube, and even if it hurts the Metro concept, it works for us (being a top 2-5 paid nongame app).

    For the splash screen, I would not use the first screen of an app. Your app may be loading for a few more seconds, and the user thinks it's done, but when he / she touches the screen, the app will not respond. Bad UX! My favorite splash screen is the one of the Beez app, which starts to animate when loading is complete into the first screen.

    I agree with the other tips, but animated splash screens should be used sparely - popups are not gpu accelerated, and the animation can take a lot of CPU cycles, making the actual startup a lot longer despite the user being entertained.

    If I sound a bit negative, it's because I care... It is fantastic to have more UX content on Silverlight TV, looking forward the next episodes!


  • User profile image

    Just wanted to say that the live video quality is brilliant. Is it smooth streaming?

  • User profile image

    Much needed series.. Thanks
    Please consider a schedule more frequent than once a month.

  • User profile image



    I agree that there are multiple opinions on what is good or bad. I think what Corrina was trying to get across there with the icons is that you need to spend some time on them.  I personally see some that I have no idea what the app is Smiley


    For startup screen ... I like to use something different than the app, myself. I used a splash screen with a logo for my startup screens. But I can see using a screen cap of the app in the righ circumstance. i just personally would want to make it crystal clear with that image that it is a startup page and not the app itself. So I think we agree here. Confusion about that would be bad.


    The series is targeted mostly at 2 things:

    1) Think about these aspects.Some folks may not be ... so it's a good eye opener that can help.

    2) We want to help show some easy and quick tips that can make a big difference.


  • User profile image
    Laurent Bugnion

    @jopapa:Corrina is awesome at this? Corrina is awesome, full stop ;-)
    For icons, i agree with @vbandi. Sticking out (on the home screen too or in the marketplace) can be a good thing. For SBB mobile, we went with the SBB red for the icon, and the client loves that it is, indeed, sticking out :-)
    Regarding the splash screen, same advice was given to me by a seasoned mobile dev used to other platforms and i am definitely trying it out in my next app. Using my home screen with some  "loading" labels.

  • User profile image

    Actually after checking it out again, Corrina does recommend using a color fo the icon that fits your brand. :-)

  • User profile image
    Naga Harish

    Awesome, Thank for sharing
    Naga Harish.

  • User profile image

    @Laurent:Yes, colors that stand out are nice, but it should be something that fits your brand.  I've seen some really nice ones, and also some others that could really be toned down Smiley


  • User profile image

    I keep checking back to see the next in the series - great information! Hoping to see lots of Windows Phone Design topics at Mix

  • User profile image

    @DianeLeeper: Corrina and I are coordinating the rest of this series and will get back to it. Sorry for the delays Smiley

  • User profile image

    Hi there!
    First of all I would like to voice my support for the series, which will probably turn out to be a useful information pool. Of course, it can also hopefully prevent your app from being rejected from the marketplace :)
    Now talking about design practices, like John (getting familiar here) said, I too did encounter a significant amount of apps on the marketplace which were poorly designed, to say the least. I'm not discussing general taste, but instead referring to the "blendability" (nothing to do w/ Blend) with the overall Metro layout. I think that a part of WP7's originality and appeal has a lot to do with the uniqueness of the Metro UI patterns, so as opposed to other platforms (which inherited too much from Apple's iOS), you just can't go ahead and implement any UX.
    Going back to what you guys had been discussing on this episode, like Corrina said, icons (and app name) definitely play a significant role in the first impression the end users get. As an end-user myself, I quickly skip over apps which icons have clearly been made just because they had to.
    So what an WP7 app icon should be like? I beg to disagree with Corrina (and Laurent) but I think the best one can do is following the design patterns of the original tiles (or as Corrina calls them "Hero Applications") in the Start Screen. That means as much as possible:
      * monochromatic white logo.
      * transparent background so as to help respect the user's theme.
      * short and spot on name.
    Some pilot apps do break this pattern (i.e Office, Games, etc.), and I honestly wish they did not because when I pin them to the Start Screen, I can't help but think that they stand out of the group a bit.
    It would be really great to hear what you guys think and again I'll be looking forward to the coming episodes.
    Cheers and sorry for the looooooong post :)

Add Your 2 Cents