• Canadian UX Blog

    [Mini-Tutorial] Blend 3: SketchFlow Part I

    • 16 Comments

    Two years and an half ago, when I first joined Microsoft, we were getting ready to release Expression Studio 1. Expression Blend is a key product in the studio and works closely with Visual Studio. It was a great first step to support designers with visual tools to help them build rich interactive web and client. However, both Blend1 and Blend 2 were focused on supporting the final design within the production phrase. Much of the work designers do with in the ideation and early prototyping stages were not well supported.

    The figure below illustrate a typical iterative design process, and the highlighted rectangle shows the final design phrase that Blend 1 & 2 supported. Many designers I talked to have this question: Would Blend support conceptual design and interaction design in the future and would it integrate with your Office suites? The answer is YES!

    image

    Blend 3 Beta was announced at MIX this year, and the SketchFlow demo generated lots of excitement among the designer community. After MIX, I couldn’t wait to get my hands on SketchFlow, and I know a lot of you are patiently waiting the release of Blend 3 which includes SketchFlow. So, l thought to record my learning experience with Blend as mini-tutorials to show you a number of things I found very useful as a designer. Hopefully, they’ll give you a quick start.

    This is the first part of the SketchFlow tutorial includes topics on:

    • managing Blend workspace for SketchFlow
    • creating new screens in Flow Pane and link between them
    • using sketch styles and integrating your sketches
    • creating component screens that can be added to each screen

    You can also download the video here.

  • Canadian UX Blog

    MIX08 Announcements

    • 12 Comments

    DSCN1407DSCN1412DSCN1414  

    Keynote with Ray Ozzie, Dean Hachamovitch, and Scott Guthrie has just finished. Wow!! There's so much excitement around connected devices, entertainment, productivity and business and lots of great announcements to digest. I list them below and we'll go in-depth for each major announcement in a future post.  This is simply to give you an overview.

    Introducing... Silverlight 2 Beta 1

    Microsoft Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web.

    Deliver Compelling Cross-Platform Experiences: Custom branded experiences using 2D vector graphics, animation, styling, and skinningimage

    • Highly sophisticated RIA’s across major browsers on Mac, Windows, Linux, and devices
    • HD video and advanced streaming techniques for world-class media experiences
    • Unparalleled interactivity with high resolution content through Deep Zoom technology

    Reach Out to New Markets: Multi-channel deployment of web applications to the desktop and devices through .NET

    • Monetization of media assets via protected content and advertising-enabled scenarios
    • Cost effective media delivery via Windows Server
    • Thriving ecosystem of .NET and Windows Media partners, developers, and applications

    Increase Team Productivity and Collaboration

    • Rapid development through XML-based declarative markup and a full set of controls
    • Role-specific productivity tools to enhance designer--developer collaboration, with Expression Studio, Visual Studio, and Visual Studio Team System
    • Flexible programming model that supports JScript, C#, VB.NET, AJAX, IronPython, and IronRuby
    • Easy to add richness to AJAX applications and reduce cross-browser issues

    in addition, we announced the partnership with Nokia. Silverlight will be available for S60 on Symbian OS, Series 40 and Nokia Internet tablets.

    Tryout...Expression Studio 2 Beta

    image Expression Studio 2 now supports Silverlight as a whole.

    Blend 2
    • Silverlight 1.0 Support with JavaScipt Editor, split screen
    • Close integration with Visual Studio 2008
    • Enhanced UI for better design workflow
    • Clip Path editing and animation
    Web 2
    • Standards support such as PHP, PSD
    • Users can create and work with interactive pages such as inserting Silverlight component and preview DirectX on design surface
    Media 2
    • Silverlight web gallery
    • Virtual Earth: See or record right where the picture was taken!
    • Multi-Monitor support for Light Table
    Design 2
    with more advanced publishing features such as Image and XAML slicing, export selected objects
    Encoder 2
    • XAML and video Overlays with Alpha Channel
    • Improved Silverlight players, e.g. Gallery players

    To enable designers to begin exploring the power of Silverlight 2, today we also released Expression Blend 2.5 March 2008 Preview, a pre-release of the next version of Blend (post Expression Studio 2) that will eventually ship alongside Silverlight 2. As Silverlight and other platform technologies continue to advance, we will regularly release refreshes of our developer and designer tooling.

    Another very exciting news along with the release of Studio 2 beta is the Expression Community Site. From videos to starter kits, you will find training on how to use each product. See what other designers are creating and share your own work in the Expression Gallery.

    And, we have the Expression Professional Subscription now for designers including Expression Studio, Visual Studio Standard, Office Standard, Office Visio Professional, Windows Vista Business Edition, Virtual PC, Parallels Desktop for Mac and more.

    First Public Beta of Internet Explorer 8

    Internet Explorer 8 Beta 1 delivers significantly improved standards-support and developer platform investments with enhanced user experiences. New features in IE8 such as Activities and WebSlices will put the power of online services in the hands of users and allow developers to reach beyond the page and keep a persistent connection with their users.  IE8’s Activities and WebSlices make it possible for web sites to link directly into the web browser’s chrome or within web pages using web standards, without requiring custom toolbars or C++ code.

    Sneak Preview of Microsoft SQL Server Data Services (SSDS): SSDS is a building block service designed for developers and businesses that need scalable, easily programmable, and cost-effective data storage with robust database query capabilities. This is an invite-only Beta right now.

  • Canadian UX Blog

    [Mini-Tutorial] Blend 3: Rich Interactivity with No Code

    • 10 Comments

    The idea of creating rich interactivity without code should sound very appearing to designers, because we want to turn static UI into interactive prototypes and test out our design ideas quickly. In Blend 3, “Behaviors” are packaged, re-usable building blocks of interactivity. They can be visually applied to UI components in the application using drag and drop. No more opening up Visual Studio and writing routine code like starting an animation when a button is clicked. Blend 3 will have bunch of commonly used Behaviors shipping with the tool, but they are extensible so that you or your developers can create your customized Behaviors.

    After watching Peter Blois’ MIX talk “Creating Interactivity with Microsoft Expression Blend,” I experienced the power of Behaviors myself in the tutorial below. For example, I used 3 different triggers( Mouse Click, Timer, and Mouse Gesture) to play the slideshow behavior. You can download many interesting Behaviors that the community are making at Expression Gallery page.

    You can also download the video here.

  • Canadian UX Blog

    [Mini-Tutorial] Blend 3: SketchFlow Part II

    • 9 Comments

    Bill Buxton talks about the difference between “Sketch” and “Prototype” in this his Sketching User Experiences. (see the summary below)

    image

    I agree sketching is an important part of the design process, but often times it’s hard to share our paper and pen sketches and get feedback from others. Following Part I of the SketchFlow tutorial, this tutorial demos the SketchFlow player and different ways designers can share their design ideas.

    You can also download the video here.

  • Canadian UX Blog

    [Mini-Tutorial] Creating a Silverlight Video Gallery

    • 9 Comments
    image

    As I promised in one of my  earlier posts to do a tutorial on how to create a Silverlight Video Gallery, here is the mini-tutorial (about 10 mins). It has two parts:

    • Use Expression Encoder 2 to create a standard Silverlight video gallery
    • Customize your video gallery in Expression Blend and save it back to Encoder as a template for future use

    To follow the mini-tutorial, you need the following software:

    Watch it streaming below or download it here.

     

  • Canadian UX Blog

    WPF/Silverlight and Expression Resource Part II

    • 9 Comments

    There are so many great resources on WPF/Silverlight and Expression Studio available after MIX. It's time to do a part II of the resource listing continuing on the previous WPF and Expression Resource post.

    Getting Started

    • Microsoft Silverlight Homepage
    • Silverlight.net: a more community-oriented site than the link above, which includes a lot of Silverlight showcases built by Microsoft partners and community enthusiasts.
    • WindowsClient.net: a new community site for WPF and Windows Forms, which provides a common place for the community to understand a unified .NET/Windows client offering.
    • MIX website: home for visual MIX experience, where you can watch all the sessions on-demand. I strongly recommend watching the keynote by  Ray Ozzie and Scott Guthrie. It not only introduces new web technologies such Silverlight but also put everything together into Microsoft's vision for the future of web experience.
    • Silverlight 1.0 Beta QuickStart: a quick guide of different parts you'll need to create a Silverlight application.
    • Silverlight 1.1 Alpha QuickStart

    Demos

    Silverlight

    • Silverlight Airline: visually mapping out your flight route.
    • Microsoft.com: navigating through content on Microsoft.com using a toolbar enhanced by Silverlight.
    • Popfly: a fun and easy way to build and share mash-ups, gadgets and Web pages using pre-built “Blocks” that connect to online services. Here's a video to see Popfly in action.
    • Silverlight Showcase 

    WPF

    Training

    Please let us know if you discover a great resource link that's not in the list.

  • Canadian UX Blog

    Microsoft Canada Development Center(MCDC) in Vancouver

    • 9 Comments

    Microsoft Canada and our corporate head office will be opening a software development centre in Greater Vancouver, BC. The Microsoft Canada Development Centre will open in the Fall of 2007 and will be home to software developers from around the world.

    This fantastic news was announced earlier today. I think this is such a great move for the company and for the Vancouver Hi-Tech industry. Vancouver has always been branded as one of the best places to live on earth. The living environment will definitely attract a lot of IT workers. At the same time, Vancouver is very multicultural, a true global gateway. Thus, the development center will attract international talents as well. International students can also leverage the BC Provincial Nominee program to become Canadian Permanent Resident and work and live  in Canada for long term. EA, IBM, and Nokia (see David's list for more) all have development or R&D centers in Greater Vancouver area already. I'm happy to see MCDC is one of the handful development centers outside of the States.

    Cheers, Qixing

  • Canadian UX Blog

    The Ultimate Steal

    • 7 Comments

    Check out this deal (launched yesterday) for Office if you haven't seen it. For Canadian university and college students, you can get Office 2007 Ultimate for just $64 CAD. There is also a more flexible way to acquire Office, which is to get the one year subscription license for only $22 CAD. I'm excited about the low price and flexibility we are offering to students.

    image

    I've been using Office 2007 since I joined in March. The new Ribbon interface helped me to discover some new features in Office that I wasn't aware they existed before. There are two applications within Office that I never used before are now the heavy weights of my daily usage. One I really enjoy is the Office Groove. Our team use it to collaborate with one another, and I personally use it to synchronize my files between laptops. The other one Office OneNote. I use it as my information organizer: taking meeting notes (both text and drawings), reviewing papers and presentations (i.e. there is a print function to layout your doc or ppt for review in OneNote), recording links and websites that I found interesting. The main thing is you never need to save in OneNote. Everything you add is automatically saved and you can use search to find it. Since I use a tablet PC,I can use my stylus to handwrite notes and convert them to text.

    I hope this deal will provide an easy and affordable way for our students to enjoy Office at home, and I'm looking forward to hearing your stories of using Office 2007.

    Technorati Tags: ,
  • Canadian UX Blog

    The Expression Professional Subscription

    • 7 Comments

    As Qixing mentioned in the previous post, Expression 2 is now live and available for trial download.  One of the cool new things that is being introduced with Expression 2 is the Expression Professional Subscription, starting in June 2008. 

    If you are a designer, developer or wear both hats, this might be an option you will strongly want to consider.  The Expression Professional Subscription contains a veritable treasure chest of software for a fraction of the price all of the software combined (Canadian pricing is still being worked out, but numbers I have seen make this a very good deal).

    Software included in the Expression Professional Subscription:

    • Expression Studio 2
    • Visual Studio 2008 Standard
    • Windows Vista Business
    • Windows XP SP2
    • Microsoft Office Standard
    • Visio Professional
    • Virtualized Server Environments
    • Virtual PC (for use with Virtualized Environments)
    • Parallels Desktop for Mac (a 3rd party application to run Windows OS on Apple hardware concurrent with OSX)

    Stay tuned on pricing and availability.  This is a great way to lower the costs for you to build great experiences on the web that are cross-platform and help you grow your business in the process.

  • Canadian UX Blog

    Silverlight 2 Resource

    • 6 Comments

    SilverlightLogo.jpg It has been three weeks since we annouced Silverlight 2 at MIX08. Many of you are excited to getting started with Silverlight 2, so I've done some research around and created the following list. I want to give special credits to Adam Kinney, Tim Sneath, Laurence Moroney, and Joshua Allen for creating great tutorials and resource lists for Silverlight 2.

    Tools for Building Silverlight 2 Applications

    • Silverlight 2 Beta 1 Runtime: Windows, Mac
    • Expression Studio 2 Beta: the second release of Expression Studio adds a wealth of new features including support for Microsoft’s new Silverlight technology across all the tools. Enhanced designer developer workflow makes the process of building great user experience even better! You can also just download the individual components here.
    • Expression Blend 2.5 Preview: use Expression Blend 2.5 to create and modify managed Silverlight 2-based applications. Expression Blend 2.5 for Silverlight 2 includes all of the features in Expression Blend 2 but has not reached the quality level of Expression Blend 2 for WPF or Silverlight 1 development. Note: here is a clear table view to help you choose which Blend version to use for your project.
    • Visual Studio 2008 Professional Edition (Standard or above version will do)
    • Silverlight Tools Beta 1 for Visual Studio 2008: this package is an add-on to the RTM release of Visual Studio 2008 to provide tooling for Microsoft Silverlight 2 Beta 1. It provides a Silverlight project system for developing Silverlight applications using C# or Visual Basic.  The components included are:
      • Visual Basic and C# Project templates
      • Intellisense and code generators for XAML
      • Debugging of Silverlight applications
      • Web reference support
      • Integration with Expression Blend

        Note: this will also install Silverlight 2 Beta 1, Silverlight 2 SDK Beta 1, KB949325 for Visual Studio 2008.

    Tutorials

    Other resources

    Demos

    Silverlight Controls

    Hot Topics in Silverlight 2

    Please refer to Adam's blog post for more developer related topics.

    Silverlight on Mobile

    Deep Zoom

    Accessibility in Silverlight 2

    Accessibility has been something of a weak spot in Silverlight 1.0; with only very basic support for alt tags and default actions.  It hasn't been all bad, since this led developers to use Silverlight with "Plain Old Semantic HTML" in a progressive enhancement pattern -- which will continue to be useful in some scenarios going forward.  But the range of options for accessible development increases substantially with Silverlight 2.

  • Canadian UX Blog

    [Mini-Tutorial] Share Your Presentation in Deep Zoom

    • 6 Comments

    imageOver the past several months, I went to many colleges and universities to talk about user experience related topics from Microsoft. After each presentation, students asked me to share my presentation online. I've been using Skydrive to share my large files such as ppt, audio, and video files with the public. Although Skydrive is very convenient, users still need to download the entire presentation and then open it in pdf or Office PowerPoint to just get a quick interview or look at couple of slides in the presentation. As I was playing around to create my first Deep Zoom demo, I had an idea - why not creating a presentation visualization that allows users to view the presentation right here: on a web page or a blog post. I know many people use SlideShare to show PowerPoint Presentations online, but I'm thinking about a new way to view ppt slides. With the power of Deep Zoom, I'm able to embed my entire presentation in small space (500x400 pixels).

    You view it in action here. Make sure you have Silverlight 2 Beta installed to view the Deep Zoom demo. The major steps I went through to create this online experience are:

    1. Convert a ppt presentation into a collection of images: File -> Save As -> Other Formats -> Save as type PNG in PowerPoint 2007. Each slide will save as a PNG image.
    2. Launch Deep Zoom Composer: import all images from Step1 -> Compose the layout of your slides on canvas -> Export project (uncheck "Create Collection" if you want to have all images in one Deep Zoom control).

      image

    3. Create a Silverlight project in Visual Studio 2008 -> compile the empty project to create ProjectName.xap in ClientBin -> add exported folder from Step2 into the ClientBin folder. Mike Taulty has a great post that goes into a lot more detail for this step.
    4. Add the Deep Zoom control, which is called "MultiScaleImage", into Page.xaml. Your Page.xaml should look something like this:

      <UserControl x:Class="DeepZoom.Page"
          xmlns="
      http://schemas.microsoft.com/client/2007"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Width="500" Height="400">
          <Grid x:Name="LayoutRoot" Background="White">
          <MultiScaleImage Source="presentationdeepzoom/info.bin" x:Name="deepZoom" />
        </Grid>
      </UserControl>

    5. Add interaction for Zoom in/out. I used mouse wheel events for zoom in and out. You can also program to use certain keys to zoom in and out. I didn't bother to code for this demo and basically borrowed Mike Harsh's Deep Zoom demo code presented at MIX and switched with my images.

      For you designers out there, you can quickly tested out the Deep Zoom idea by skipping step 4 and 5. All you need to do is, download my project source code, open it in Visual Studio 2008, and change two things. One is updating the "Source" in <MultiScaleImage Source="presentationdeepzoom/info.bin" x:Name="deepZoom" /> with your export folder name. The other thing is to replace the "presentationdeepzoom" folder in ClientBin with your export folder.

    6. Upload your Deep Zoom demo onto Silverlight Streaming following couple of easy steps in Tim Sneath's blog post.

    Congratulations! Now you have your presentation in Deep Zoom live and ready to impress your friends. :)

  • Canadian UX Blog

    Developer - Designer Workflow Story from Infusion Development

    • 5 Comments

    Woodgroove Financial online demonstrator has been gaining quite a bit popularity within the financial industry to show what future rich interactive web banking applications could be like. I decided to talk to the architects behind the inspirational demo: Chris Ching (Lead Developer, Infusion Development Toronto Office) and Douglas Gregory (Lead Designer, Frozen North Productions Waterloo) about their experience of working together on the application. You can see a short demo of the app below and get the source code of the demo here.

    1. What is your role at work? What are the technology and tools that you use at work currently?

    Chris: I am a consultant and lead Silverlight developer in the UX practice at Infusion Development. We build solutions in WPF, Silverlight, and ASP.NET among other technologies and we work with other groups at Infusion to meet their user experience needs. We use many of the tools in the Microsoft Development platform including Visual Studio Team System and Expression Studio.

    Douglas: I'm lead designer at Frozen North Productions, an Infusion Angels company (Infusion Development sister company), as well as a User Experience designer for Infusion Development. My work includes game designs, concept illustrations, and user interface graphics. I use pencil-and-paper, graphics software like Portalgraphics openCanvas and Adobe Photoshop, and word processing software like Microsoft Word and Adobe InDesign.  I also put together game and technology prototypes using tools like Adobe Flash, AMD/ATI RenderMonkey, and console-specific developer tools.

    2. Give a brief description of what the Financial Demonstrator Application is about? What technology and tools did you use for developing the application?

    The Woodgrove Financial application is composed of numerous financial scenarios that the customers of a bank would use. The goal for creating something like this is two-fold. First, it showcases innovative UI experiences/visualizations for existing and completely new financial scenarios and second, it demonstrates the capabilities of Silverlight.

    Chris: As for technology and tools, the developers used Visual Studio 2008 and the Silverlight tools for Visual Studio.

    Douglas: The designers used a combination of Adobe Illustrator and Flash, Microsoft XAMLPad, Expression Design, and Expression Blend.

    3. Have you worked on Silverlight project prior to this? How did you divide work for this project (e.g. Designer vs. Developer)?

    Chris: Silverlight development was very easy to pick up since we were able to use C# and work in Visual Studio. We divided the work logically between designers and developers.  The designers created the UI in Blend and the developers wrote the business logic and hooked up the interactions for the UI elements. Given the XAML from the designers, the developers broke out the common UI elements into reuseable controls and re-constructed the layout.

    Douglas: The visual side of this project was handled by three designers: one graphic designer to create the base style palette, myself to translate his work into XAML and produce additional graphics, and another designer and I working together to lay-out the graphics into screens and animation timelines.  All interaction was then handled by the developer team, with only minor changes to the screen layouts needed. In my previous experience with WPF, I had been able to take on some of the low-level interaction like button states and data presentation myself, allowing the developers to focus exclusively on the more complex interactions.  Before that I had only developed in Macromedia/Adobe Flash, where I generally took ownership of almost all the graphic and interaction requirements, making it difficult for another developer to contribute.

    4. During Chris’ .NET user group meeting, he mentioned that through XAML, designer and developer can now have a streamlined collaboration process. What was your designer-developer workflow like during the Woodgrove Financial development?

    Chris: Our designer-developer iteration was per scenario so there was a designer to developer hand off for each scenario in the Woodgrove Financial application. The designer-developer workflow is most efficient when there is no overlap and the designers/developers do not have to spend time in each others’ environment.

    From a development perspective, it is more efficient to have tighter designer/developer iterations by breaking down UI layouts into logical smaller pieces because this would have to be done later by the developer anyways. This minimizes harvesting of particular pieces of XAML from a larger XAML file. Another improvement is to have the designer and developer agree on the names of UI elements before the design as this also minimizes the need for the developer to look into the XAML.

    Douglas: Our workflow started with the developers meeting with clients and doing research to develop requirements for the application, then scripting-out a set of interaction scenarios.  Afterwards we would meet and refine the scenarios into interface designs.  We could then go our separate ways, the other designer and I laying-out the screens while the developers could work on other tasks.  As the screens came together we would pass off updated XAML files for the developers to plug into.I liked that we could work asynchronously, even from different offices the most recent XAML file alone was usually enough to keep us in-synch. 

    Some lessons learnt were updates to the XAML couldn't simply be copied over indiscriminately, but had to be carefully worked-in to avoid breaking changes made by the developers. Designer and developers should also agree on instance names together to make developers' job easier when hooking up the UI instances with application logic.

    5. Financial services applications have quite plain and serious look and feel. However, Woodgrove Financial is really fun to play with non-traditional graphics design and rich interactions. How has it been received in the financial industry? Can people appreciate rich UX for online Line of Business Applications?

    Chris: The reaction from the financial industry has been extremely positive. From a retail point of view, the rich UX provides a compelling and intuitive experience for customers. The end result is increased loyalty and customer satisfaction. Even for non-retail operations, the rich interactive graphs and innovative data visualizations have presented new ways of interpreting data.

    Douglas: I would say that when rich UX is done in a way that makes interactions more intuitive, clear, easy, and efficient, it's hard not to appreciate them.

    6. From your experience of working with Silverlight 2, how does it different from Silverlight 1? What are some improvements in Silverlight 2?

    Chris: Silverlight 2 is vastly different from Silverlight 1 and brings about many enhancements. The Woodgrove Financial application was initially built in Silverlight 1. Many of the controls we needed such as buttons, datagrids, dropdowns and layout controls were not available at the time so we had to build them. When Silverlight 2 came around, it improved the development experience by introducing a new series of controls, styles and templates, databinding and increased networking support. Silverlight 2 also automatically generates references to the XAML elements allowing the developer to refer to them by name from the code. Those are just a few of the features that make Silverlight much more friendly to work with.

    Douglas: Silverlight 2 has many more of the features I got used to using in WPF, like sophisticated layout controls, skinnable components, and shared resources.  It makes creating complex interfaces much easier, and means I can set things up in a way that requires less extra work on the developers' end to turn into working UI.  Iterative modifications to an interface are much easier now, as shared resources and skins can be updated and layout containers adjusted without having to tweak every instance and sub-element to keep consistency.

    7. What was your experience of learning the new technology (i.e. Silverlight) and tools (Expression Studio and Visual Studio)? Can your previous knowledge easily be transferred?

    Chris: We were able to leverage our existing experience in C# and Visual Studio to begin development with Silverlight. I had not worked with XAML before this project but it was also very easy to pick up from the QuickStarts on Silverlight.net.  Expression Blend was a great tool to fill in what I didn’t know how to do in XAML because it allowed me to use the designer interface to generate XAML which I could then analyze. Overall, it was a very intuitive transition to Silverlight.

    Douglas: As I mentioned in the previous question, building Silverlight 1 in Blend was quite a shock after building WPF applications in Blend, but Silverlight 2 has reduced the gap between them and made knowledge transfer much easier.

    8. What are the things we can improve to the designer or developer tools to further support the workflow?

    Chris: I understand this feature is coming but I would still like to mention it. It would be great to make the design view in Visual Studio interactive because sometimes the developer needs to identify certain pieces of XAML from a larger file. Much like in Blend, it would be useful if the user can click something in Visual Studio design view and have the corresponding piece of XAML highlighted.

    Douglas: Ideally, it would be nice to have all of Expression Design's functionality in Blend, so that I never have to leave the program to tweak a graphic, only to re-import it and have to wrestle it back into its original context - recreating data bindings and the like.

  • Canadian UX Blog

    Summary of the Partner Program Session at MIX08

    • 5 Comments

    This post is in reference to the session on March 5 entitled Understanding Microsoft Partner Programs for Designers, Developers and Agencies.  While many of you who read this blog may be familiar with the Microsoft Partner Program (MSPP) or might even be a Microsoft Partner, some of you may find this session interesting as it will give you some insight as to how the MSPP can help you grow your business.  If you wish to view the session, you can find it here.

    Above:  Bill Vlandis (left) and Hakan Soderbom (right) presenting the Partner Program session at MIX08 on March 5

    Summary of the session:

    There are a number of programs in place from Microsoft that you can take advantage of to grow your business.  These programs are put in place to help you get the competencies you need to successfully grow your business by building web solutions on the Microsoft platform, whether you are a designer, agency, web developer or systems integrator.  Below is a list of relevant programs that you might be interested in looking into, along with there benefits.

    • Microsoft Partner Program (MSPP)
      • This is the all-up program for all Microsoft Partners
      • Registration as a partner is free and the sign-up process takes less than 20 minutes
      • There are three levels of Partners:  Registered, Certified and Gold Certified, each with different benefits
      • Microsoft Action Packs (MAPS)
        • Available to all Microsoft Partners
        • Costs CAD $399, but in the MAPS kit is over $20,000 worth of software that you can use to build your web solutions (i.e.:  the software is for you to build web solutions, not for resale)
        • There is a Web Add-On kit that is also available that provides you with Expression Studio and other technologies.  The Web Add-On kit is free to MAPS subscribers but you are required to pass a test (which really doesn't take that long to complete, nor is it particularly difficult to pass)
      • To register yourself/company as a Microsoft Partner, go to http://www.partner.microsoft.com/web
    • Mercury Program
      • For web solutions providers (web design agencies and web development studios)
      • Meant to provide support for web design / web development partners since the MSPP doesn't have a specific web design competency integrated into the program yet.
      • Benefits of Mercury
        • Exposure to Expression Studio and other creative web technologies from Microsoft (such as Silverlight and AJAX)
        • Provides workshop and training opportunities
        • Access to demos and how-to content
        • Free design and web development support
        • More information can be found at http://mercury.visitmix.com
    • Silverlight Partner Initiative
      • Meant for partners that wish to build compelling web solutions using Silverlight
      • There are three levels in the program:  Standard, Alliance and Premier, each with increasing support from Microsoft
      • Anyone can join this program
      • Benefits include technical help and content to help you get up to speed with Silverlight as well as marketing support from Microsoft to help grow your Silverlight business
      • More information can be found at http://www.microsoft.com/silverlight/partners/default.aspx
      • Have a question about the Silverlight Partner Initiative?  Send an email to slpart@microsoft.com
    • Artists in Residence
      • By invitation only
      • Very intense, 10-day deep dive with Expression Studio and Silverlight
      • Includes 2 full days of deep dive training, and then 7-8 days of your team building a cutting edge web solution with Silverlight
        • By the end of the 10 days, you will have created a solid Silverlight solution that you can use to market your abilities to create best-of-breed web applications in SIlverlight to your customers
      • Your organisation must send 1 developer and 1 designer to this training
      • For more information, use the email tool on this blog and we will provide you with information on the program
    • Microsoft Hosting Community
      • Launching in mid-April this year
      • Provides marketing and technical resources to hosters and partners wishing to explore hosting as a way to grow their business
      • More information is at http://partner.microsoft.com
    • Visual Studio Industry Program (VSIP)
      • Meant for partners that are building add-ons and plug-ins to Visual Studio 2008
      • Program provides technical and marketing support for your solution
    • InnovateOn
      • Microsoft's engine to provide self-service support to partners
      • Provides technical and business content to help you understand how Microsoft can help you grow your business and get the skills you need
      • A web-specific subsite will be launching soon
      • Website:  http://www.innovateon.com

    Paul

    Technorati Tags:  , ,

  • Canadian UX Blog

    What's Happening at MIX?

    • 5 Comments

    It's less than 6 weeks till MIX08. Here is some cool happening:

    clip_image001Hear ye, hear ye!  MIX08 to debut the first ever MIX UX Track which is 3 days of solid content dedicated to creatives / designers.  Lou Carbone, David Armano, Dan Roam, Kim Lenox and others will speak.  In conjunction with Adaptive Path, the User Experience track is just one of the many great reasons for all types of designers and creative professionals to attend MIX this year. http://visitmix.com/2008/mixux.aspx

    clip_image002 

    The deadline for this year’s CSS contest, RESTYLE, has been extended.  Folks can still clip_image003restyle the MIX08 Homepage and win a pass to MIX08, 3 nights at the Venetian, $$ and more, more, more! http://visitmix.com/2008/restyle/

     

    clip_image004Have you been listening to The Signal?  Each week a new episode debuts featuring a speaker or MIX crew member talking about some of the upcoming coolness happening at MIX08.  Listen to their interviews with Molly Holzschlag, Kip Kniskern, Jonathan Snook and others as we countdown to Vegas.  Got a question for the show?  Email signalm@microsoft.com or leave a voice-mail message at (425) 703-4650. http://visitmix.com/blogs/TheSignal/

     

    clip_image006 Perhaps you remembered last year’s MIX, in which we featured Flotzam, a WPF screensaver mash-up that showed MIX07 feeds from Facebook, Flickr, Twitter and blogs. Well, we are doing it again this year with a twist: we are running a contest and will feature community created skins of the application on the big screen and on the screensavers of the computers available to attendees at the show.  The best skin will win an XBOX 360. Entering the contest is easy: everything you need to know can be found here http://www.visitmix.com/blogs/News/403/ including links to screencasts and instructions that show how easy it is to do the restyle.

    Technorati Tags:
  • Canadian UX Blog

    Web 2.0 Innovation Briefings - Slides and Webcast

    • 5 Comments

    A while back, I posted the slides from the Web 2.0 Innovation Briefing we presented in Vancouver, Calgary, Toronto and Montreal.  You can find the slides here.

    Also, I presented a shorter, webcasted version of the Briefing last week.  The recording of this briefing can be found here.  The webcast is available in streaming video and as a downloadable WMV file, in case you want to view it offline.

    Enjoy!

    -Paul

    [ADDED BY PAUL LABERGE ON JUNE 20, 2007 (1:52PM ET)]:  For those of you using Office 2003, Office XP and Office 2000, you may get an error when you try to open the file.  This is because the file is in PowerPoint 2007 format which uses the OpenXML format (ECMA Standard).  You can still view Office 2007 files in the previous Office Suite versions I mentioned by downloading the Office 2007 Plug-in, which you can download here:  http://www.microsoft.com/downloads/details.aspx?FamilyId=941B3470-3AE9-4AEE-8F43-C6BB74CD1466&displaylang=en.

  • Canadian UX Blog

    SWF to XAML Converter

    • 5 Comments

    he's my hero!Some of the scenarios for Flash and Silverlight usage are similar, such as rich media/video within websites, or interactive rich content for e-commerce, e-learning, or advertising. As interactive designers, you may want to reuse and repurpose the Flash assets that you built before. Here is a SWF to XAML converter called "The Converted" created by Debreuil Digital Works, a Canadian company. You can see a list of demos they've converted to XAML from SWF. Electric Rain also announced a project called Harmony that converts SWF based Flash files into Silverlight based XAML files. Stay tuned!

    Technorati Tags: , , ,
  • Canadian UX Blog

    WPF and Expression Resource

    • 5 Comments

    Please see the part II of this post here, which includes resources for Silverlight.

    Where can I learn more about Windows Presentation Foundation and Expression Studio? How can I build rich user experience in Expression Studio based on WPF? While I was learning Microsoft’s new presentation platform (WPF) and creative design tools (Expression), I collected the following list of resources I'd like to share with you. I’ll update this list as my journey continues.

    Getting started

    Blogs

    Training

    • Channel 9 Expression videos: a four part video on Expression including Blend, Web, and Design.
    • Lynda.com
      • Expression Web Essential Training with Joe Marini: “From understanding the concept of smart web design, to creating, editing, and maintaining a web site, instructor Joe Marini, Group Product Manager at Microsoft, gives his insider tips for real-world web site design using Expression Web.”
      • Expression Blend Beta Preview with Lee Brimelow: “Instructor Lee Brimelow explores all of the application's features and capabilities, from the user interface panels to creating and importing assets. He also covers integrating 3D content, using WPF text controls, layout controls, and user input controls, and creating animated effects.”
    • Expression Web Total Training
    • XAML Tutorial

    Forums

    You can get fast response to your detailed technical questions by WPF and Expression team members in these discussion lists.

    Dedicated sites:

    • MIX University: a site dedicated to the next generation of web experience. On the site, you can find demos for ASP.NET AJAX, gadgets, WPF/E, hands-on labs for Expression and much more.
    • ExpressionBlend.com by Brennon Williams: “the primary aim of this site is to assist developers and designers in how to use the exciting new user interface (UI)/ user experience (UE)development tool from Microsoft, Expression Blend.”
    • By-Expression by Cheyl D. Wise: a great place to learn about Expression Web. Cheyl is the author of Foundations of Expression Web: The Basics and Beyond.
    • Learn Expression offers free video tutorials for learning Expression tools.

    Bonus: Microsoft blog directory

  • Canadian UX Blog

    Are you the Canadian User Experience community's newest Intern/Apprentice?

    • 5 Comments

    I’m looking for a User Experience (UX) Advisor to join the team that I feel is changing the way Microsoft is connecting with the community. To do this I really want my actions to speak for themselves and invest in the leaders of tomorrow today. This role is not open to everyone and I really want a fresh perspective. Firstly, to keep true to my word, you are top recent (or soon to be) university or college graduate. Secondly, you know who you are.  You’ve done well in school, have a strong technical background, a passion for connecting with others, a desire to learn and an openness to share your experiences with the community. 

    You can check out the official job description here for more information (look for User Experience Advisor, Meadowvale).

    Normally, I’d be looking for someone with years of experience…. yet, as Microsoft is currently developing a fresh set of user experience and designer tools, it’s time for us to take a fresh approach.  I’m looking for “The UX Intern” to be one of Microsoft's Canada’s connections to the Canadian UX community. This is a great community with some very good people to learn from and connect with. Yet, what makes this role exciting also makes it challenging. As you learn it will be up to you to gain credibility with this community. To do this, you always have to be authentic, open and transparent while sharing as you learn your experiences, stories, leveraging Microsoft’s learnings and passing on some of our best practices with the community.  This is not going to be an easy job and you have to be committed as we know it is a journey!

    To help me make sure we have the right "Intern” I’ve asked a few friends from UX Irregulars, Industry and faculty to help me narrow the search.  So... now it’s time to for you to show your stuff!!!

    Along with posting your standard resume here, We want you to submit a short video to a video sharing site (YouTube, MSN soapbox...) on why it has to be you. Once you’ve done that come back here and post your link as a comment and be sure to include a link to an online sample of your work which highlights your designer's passion (web design, graphic, or interactive media). Once I get your links, I’ll set up a separate blog post for each candidate to allow comments.

    Oh by the way, once we know it’s you… this will be your space, so be creative and tell us why it’s you!

    John

  • Canadian UX Blog

    Candidate:Abdul Rehman Khawar

    • 5 Comments

    Is Abdual the right fit for the role?

    Check it out.

    Work of Abdul Rehman Khawar


    John

  • Canadian UX Blog

    [Mini-Tutorial] Blend 3: Visual Data Binding

    • 5 Comments

    As your project evolves from simple sketches to prototypes, you may want to add some real interactivity to it. There are two useful tools in Blend make this really easy: Sample Data and Behaviors. This tutorial will focus on Sample Data and how designers can bind data visually in Blend. The next tutorial will be on Behaviors.

    In previous version of Blend, we introduced data binding features in Blend. However, in order to make sample data targeted to particular applications, designers had to create XML data files in Visual Studio or other editors and then import into Blend. There was no easy way in Blend to generate the sample data they need. Check out how Sample Data makes this process easy in the tutorial below!

    You can download the video here.

  • Canadian UX Blog

    Opportunity Rings – WIT Event

    • 4 Comments

    image   imageimage

    Continuing connecting with women in  IT, we have a joint event next month with IAMCP's Women in Leadership and Technology and CATA Women in Technology groups. We intend this to be a fun evening of networking, empowerment and finding the courage to follow your own dreams.

    Opportunity Rings: A NovelThe evening will include a light snack and will feature a book reading from Sheryl Steinberg, journalist and author of  the novel "Opportunity Rings", a light-hearted look at finding our strengths through our adversities.

    This is Sheryl's first book and came to life in spite of many people discouraging her from continuing with the project.  We are pleased to be part of promoting a Canadian author with her debut novel.

    In small break-out sessions, we will each have a chance to explore our own personal goals and to discuss and share with others what (if anything) is holding us back from living our personal dream.  You will walk away with at least one idea of how to make your own dream a reality.

    Come and join us!

    When:   Tuesday, June 16th

    Time:     5:30pm to 8:00 pm

    Where:  Microsoft Corporation, 1950 Meadowvale Blvd., Mississauga, ON L5N 8L9 (driving directions)

    Register here.

  • Canadian UX Blog

    Webby Award Powered by Silverlight

    • 4 Comments

    image

    Webby Award is like the Oscar Awards for internet creations. It is the largest, most prestigious international Awards Program for the Web. Yesterday, the People’s Voice Awards aspect of this year’s Webby Awards went live at www.webbyawards.com.  Approximately 150 videos are being streamed in Silverlight over 130 sub-categories under Websites, Mobile, Film and Video, and Interactive Advertising. You can vote your favorites on your website. I found it’s a great source for design  inspiration and discover interesting projects like Nokia viNe.

    Technorati Tags: ,
  • Canadian UX Blog

    Silverlight Briefing Webcast

    • 4 Comments

    Last Thursday (September 25), I conducted a webcast on the topic of Silverlight.  To those of you who were able to make it in person, I want to thank you for taking the time to attend!  It was very well attended and we were even able to sweeten the pot, so to speak, by announcing that anyone in the "live studio audience" who filled out an evaluation form at the end would be entered into a draw to win an XBox 360.  If you have won the draw, you will be contacted fairly soon to ensure proper delivery.

    At the end of my presentation, I promised everyone that I would post the presentation in addition to the code I used to create the Silverlight 1.0 and Silverlight 1.1 demos.  Feel free to look and use the code as you see fit.  The presentation can be found here (if you don't have Office 2007 but use a previous version of Office, you'll need to download and install the Microsoft Office Compatibility Pack for Word, Excel and PowerPoint 2007 File Formats, which you can download here for free).  For those of you using Office for Macintosh, you can find a copy of the presentation here.  The Silverlight 1.0 demo code can be found here and the Silverlight 1.1 code can be found here, both of which are in zip files.

    The Silverlight 1.0 code was actually adapted from code that Laurence Maroney published on his blog, so if you want a very detailed description of how each component works, I strongly suggest you visit his site as the post is excellent.  You don't require any special tools to use the code; Notepad is more than fine.

    The Silverlight 1.1 demo (aka: The Bird Demo) contains all the code to the finished demo I did in Visual Studio 2008 Beta 2 as well as Expression Blend 2 September Preview.  While technically you can use Notepad to create this code, I highly recommend you download the beta tools I used as the experience is much more streamlined.  Visual Studio 2008 Beta 2 can be found here, and the Expression Blend 2 September Preview can be found here.

    If you weren't able to join us for the webcast, you can find a recorded version of the webcast here.  Unfortunately, the draw for the XBox 360 was only for those that attended the live webcast rather than the recording.

    Having said that, I do want to invite you to the half-day in-person briefings I will be doing in Vancouver, Toronto and Montreal in October.  If you are going to be in those cities on the dates I have listed below, feel free to register for the event.  It's a half-day morning event and we will be going into more depth than I could in the webcast, given the webcast was only 1 hour.  We'll have some cool prizes at these events as well, so in addition to getting some great info on Silverlight, you might walk away with some cool software as well.

    To register for one of the 3 in-person briefings, please follow the link most appropriate for you below:

    City Date Registration Link

    Montreal

    Thursday, October 11, 2007

    Click Here

    Toronto (Mississauga)

    Thursday, October 18, 2007

    Click Here

    Vancouver

    Tuesday, October 23, 2007

    Click Here

    (This blog entry was cross-posted to the Canadian Developers Blog in addition to this blog)

    Paul

    [Editor's Note:  Added a link to an Office 97-2003 format version of the webcast deck in order to support those that use Office on the Macintosh - thanks, Ben!]

  • Canadian UX Blog

    [Podcast] Imagine Cup 2008: Interface Design Category

    • 4 Comments

    image

    Couple of weeks ago, I sat down with Unni Ravindranathan, who organizes Imagine Cup Interface Design Competition. He is also a program manager at Expression Blend team. I asked him about the experience of Imagine Cup, the different competing phases of the Interface Design category, the judging criteria, and some past winning projects. You can download our conversation here or listen to it on the podcast control below (make sure you have Silverlight plug-in installed).

    Here is the competition invitational:

    "The Interface Design invitational challenges designers all over the world to create useful and compelling user interfaces that are unique and forward thinking. Participants have the opportunity to dream of an application that connects to the 2008 theme of the Imagine Cup: "Imagine a world where technology enables a sustainable environment." Competitors can show the world how their skills can bring the theme to life. Innovating and envisioning revolutionary interfaces are the goals.  Get away from traditional user interface approaches.  Rethink the way we behave when in front of a computer screen."

  • Canadian UX Blog

    DesignThinkers 2007 Thoughts I

    • 4 Comments

    Last week I attended Canada's largest Graphics Design conference, DesignThinkers 2007 put on by RGD. It was my first time attending the conference, apparently if it was your fifth time or more, you are a DesignThinker Master. I definitely hope to be a DesignThinker master one day since the conference was a lot of fun to go to. This year the conference theme is "What matters to you?" Before the conference, attendees can express what matter to them by an interactive visualization tool (see below left). I entered my answers, it was interesting to see how others think who have similar work experience as me.

    clip_image001"The graph shows a visual representation of the last 100 responses submitted through the interface. Each '+' represents one person's response to the highlighted questions on the left. The position of the '+" on the vertical axis shows the number of years of experience, while the horizontal position represents the level of relevance. The level of transparency of each '+' is a visual representation of the length of time since the response was received, with the last response being the least transparent."

    For example, I think graphics designers will be in trouble if they don't do interactive work because we are entering a digital age that static images may not be enough to tell a story from an visual designer perspective. Viewers and audience participation becomes more and more important. From the graph, you can see a lot of designers think the same (lower right quadrant).

    This is a fun pre-conference experience that the organizers are providing to the attendees. In addition, the experience links back to graphics design, which this particular crowd can really appreciate. The conference pamphlets and signs were also created based on the graph, which ties the whole conference brand and experience together.  Good Job Design Thinkers!

     

    DSCN0788 DSCN0761 DSCN0755

    It's my first time going to a graphics design conference. I felt one of the biggest differences from other conferences I attended is in presenters' presentation style. Most of them have these image with little text slides, use powerful colors (e.g. the question mark poster by Chaz Maviyane-Davies), and integrate videos. It's probably easier for graphics designer to create image slide with little text because most of their work is visual. However, they have to think how these images tie together and tell a story. Some of them speak in a very poetic tone so that each image almost represents a line in a poem. A big eye opener to me!

    The conference organizers also placed a graffiti board outside of the keynote theatre. Attendees can use the board to express what matters to them and share design inspirations.Conference goodies are feasts for both mind and eyes. :-)

    DSCN0747 DSCN0787DSCN0740

     

     

Page 1 of 17 (422 items) 12345»