Silverlight TV 58: Windows Phone Design Tips With Corrina
- Posted: Jan 20, 2011 at 9:00 AM
- 69,159 Views
- 20 Comments
Download
How do I download the videos?
- To download, right click the file type you would like and pick “Save target as…” or “Save link as…”
Why should I download videos from Channel9?
- It's an easy way to save the videos you like locally.
- You can save the videos in order to watch them offline.
- If all you want is to hear the audio, you can download the MP3!
Which version should I choose?
- If you want to view the video on your PC, Xbox or Media Center, download the High Quality WMV file (this is the highest quality version we have available).
- If you'd like a lower bitrate version, to reduce the download time or cost, then choose the Medium Quality WMV file.
- If you have a Zune, WP7, iPhone, iPad, or iPod device, choose the low or medium MP4 file.
- If you just want to hear the audio of the video, choose the MP3 file.
Right click “Save as…”
- High Quality WMV (PC, Xbox, MCE)
- MP3 (Audio only)
- Mid Quality WMV (Lo-band, Mobile)
- High Quality MP4 (iPad, PC)
- MP4 (iPod, Zune HD)
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:
- John's blog and on Twitter (@john_papa)
- Corrina on Twitter (@corrinab)
Follow us on Twitter @SilverlightTV or on the web at http://silverlight.tv
Comments Closed
Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation,
please create a new thread in our Forums,
or
Contact Us and let us know.
Follow the Discussion
Yes please! One suggestion...having a sort of bad/good comparison visual may help solidify design concepts for developers like me.
Great, I've been hoping for something like this.
@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.
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 :)
And please make it a lot more than once a month.
iStockPhoto.com is a great place for icons (that's where i've gotten most of mine).
wonderful series John! Keep them coming more frequently...
I am wondering is there way to take screen shot directly from phone?
@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. http://geekswithblogs.net/lbugnion/archive/2010/12/28/taking-a-screenshot-from-within-a-silverlight-wp7-application.aspx
@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.
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!
Just wanted to say that the live video quality is brilliant. Is it smooth streaming?
Much needed series.. Thanks
Please consider a schedule more frequent than once a month.
@VBandi:
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
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.
@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.
Cheers
Laurent
Actually after checking it out again, Corrina does recommend using a color fo the icon that fits your brand. :-)
Awesome, Thank for sharing
Thanks,
Naga Harish.
http://shareourideas.com
@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
I keep checking back to see the next in the series - great information! Hoping to see lots of Windows Phone Design topics at Mix
@DianeLeeper: Corrina and I are coordinating the rest of this series and will get back to it. Sorry for the delays
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 :)
Karim.
Remove this comment
Remove this thread
close