Windows Phone Crash Course

Editor's Notes

• #2: WELCOME
• #3: I’m James Morse, Creative Director at MatchboxInitially from a graphic design background, I moved into mobile about 12 years ago. There’s been a lot of changes since then, new devices and platforms, one of the newest being in Windows Phone, hence today’s crash course.
• #4: I’m Rik Dodsworth, Technical architect at Matchbox - we develop for almost every mobile platform currently available.I’m going to be doing some demonstrations along with some useful information about some of the cool Windows Phone 7 features and show you how productive some of the tools available can be.
• #5: This IS a crash course - we will be showing you how to build an app & publish to Marketplace, but we also want to show you how to make the most of the WP design language and tools within your apps.
• #6: Design languageEvery OS has it’s own personalityYou don’t really want to shoehorn the personality traits, of OS into anotherYou’ll end up with an unfamiliar user experience
• #7: You may have heard of Metro?Loads of info and talks online
• #8: Key points and differences that we found comparing Metro to the other platforms we work with are:Keep it square - avoid rounded cornersLeft align wherever possiblePay close attention to font case (all upper, all lower & sentence case)Resist the urge for unnecessary gradients, drop shadows & shines - embrace solid colourLook at native apps (e.g. Office & Games hub, see how these differ to the base OS)For designers - use Metro as your foundation build on it and expand it but at the core level still retain the Metro principles.If you don’t know design and don’t have a design budget - if you follow the Metro guidelines & use the tools properly, Metro will be your magic box of crayons.
• #9: Always sketch out your ideas on paper first.it doesn’t matter if you think you can’t draw, you don’t have to show these to anyone, what’s important is to be able to quickly visualise your ideas without the constraints of an application.Last, but not least – get your hands on a device and analyse the OS, and keep referring back to it while creating your app.
• #10: Development tools / Visual studioAt this point it’s worth mentioning the tools available for Windows Phone 7 development.Microsoft have provided a single file download, single click install for everything you need to build Windows Phone applications. You can get this download at the AppHub for Windows Phone. create.msdn.comAnd it’s completely Free.
• #11: Not a tool, but not a day goes by without looking at it.http://msdn.microsoft.comIn my opinion, by far the best documentation out of all the mobile platforms available. http://create.msdn.com/en-us/home/getting_started
• #12: Here’s what the installer includes.Visual Studio 2010 C# ExpressThere is now a Visual Basic version if you’re more comfortable with that. The main download will be c#.net framework including silverlight.(applications are built using Silverlight 3)Windows Phone 7 SDKMicrosoft XNA framework 4.0Expression Blend for Windows PhoneThis does not include templates for WPF or silverlight applications. This is all you need to build WP7 applications.
• #13: 3rd Party toolsIn addition to the free tools that Microsoft provide. There are many 3rd party free and commercial tools available to assist you even further in been more productive.I don’t think there’s anything any of these tools do, that you couldn’t do yourself.Some of these tools we are using today in our demonstration.Silverlight toolkit.Jeff wilcox and friendshttp://silverlight.codeplex.com/New release with mango supportBest 3rd party resource on the webFreeOpen sourceNuGethttp://nuget.org/Brilliant addin to visual studio which allows you to pick libraries from the community and download and reference them directly within visual studio.We used this to install the all our 3rd party extras.
• #14: BUILDING A TWITTER APP
• #15: PanoramaWe’re going to start by building the Panorama Panorama’s display a recommended 3 to 4 panelsPano’s have cyclical left/right functionality and are perfect for displaying an overview of content in bite sized chunks that entice the user to explore.
• #16: Creating a new data bound panorama page using Expression Blend
• #17: MVVMMVVM is the standard pattern to use with WP7 applications.It's largely based on MVC which i'm sure many of you are familiar with.MVVM allows us to remove all view based logic from the view and put this in the view model.By following the MVVM pattern you enable designers to modify the view UX, and make for easy data binding without having to delve into the codeplease look on the internet for more detailed info, but if you've done MVC, you wont have any trouble picking up MVVM.
• #18: Pivot screensYou’re applications can also start with either a single screen orpivotA quick way to manage views or pagesSimilar to a tabbed list you can you can tap on the page headers, but you can also tap & drag or flick L/R (anywhere on the page) to navigate to the next screen.The recommendationis n more than 7, but personally I tend to use no more than 4 (this to prevent the user getting lost)
• #19: Create a new data bound panorama page using Expression Blend
• #20: NavigationIt’s important to provide a consistent user experience across all applications on the device. Back button navigates you through the back-stack (like the back button on a web browser). And as there’s no need for an on-screen back control, it also allows for a cleaner UI.Context menus – tap & hold (power users)Use the application bar to only shows data when needed- No items- Icons only- Menu items / scrolling menuAlso note that that it’s ideally positioned for one hand usageYou can customise the opacity & colour of the app barAppbar icons black & white (theme aware) There are a selection of standard icons available, if you want to create your own keep the design clear and simple, try to base the, on existing icon metaphors.
• #21: DEMO
• #22: Application TilesOn WP7 you have the option to pin an application to your start screen resulting in a large application tile that can display dynamic content.For even deeper integration, you can create secondary tiles within your app that link directly to a specific page.
• #23: DEMO
• #24: Themes & accent coloursWP has a light theme and a dark theme with an additional selection of highlight (or accent) colours.Use colour to personalize experience, emphasize hierarchyUse accents for consistency and compatibility within the OSYou can forced themes: - Panorama (when using a background image) - Promote brand colours
• #25: DEMO
• #26: Input feedbackStandard transitionsTurnstile & the importance of left aligned fontsUse of left logo alignment on splash and about screens (visualise how the page will look with transitions)Direct interaction with content - tilt visual feedback
• #27: Demo Finished ApplicationWe now we have our feature complete application.Next steps of course is QA, fixing bugs and adding polish We can’t stress enough the importance of this within Metro. pay close attention alignment, spacing, font casing … and don’t forget to check you app works with both the light & dark themes.Lets take a look at the app---Demonstrate everything we’ve just built within the completed appPanoramapivotNavigationthemesShow fast app switchingshow the secondary tiles.post a tweet.
• #28: Publish to Marketplace- Assets (Images, icons, description etc.)
• #31: DEMO: MARKETPLACE TEST KIT
• #32: What we’ve covered: - Design language - Development tools - Development environment - Marketplace submissionWe’ve covered quite a bit within this, however there is a lot more information out there for both designers & developerscheck out the MSDN link etc.
• #33: END