ux.artu.tv » 25 Inspiring Silverlight Websites, Videos and Customer Stories

25 Inspiring Silverlight Websites, Videos and Customer Stories

As part of the CRE8 Conference last week in Miami, August de los Reyes and I presented a collection of the cool videos, websites and customer stories. Here is a great list for you with the best of best in Silverlight and UX.

August de los Reyes, Director of UX for Surface and I just came back from cold Miami… yes cold! I had to use a sweater all the time :) - It was sunny though and beautiful. My first time in Miami. I can’t believe the color of the ocean there - it’s all emerald. I’m looking forward to going back sometime in the future, in summer with more time to go to the beach.

One thing that wasn’t cold at all was the warm reception we got from our partners at AGI Training and GOA. We had a great time with everyone during the event. Thank you to all attendees who where there during the event.

August and I had the opportunity to participate in the CRE8 Conference and deliver the keynote. I belive the keynote was recorded but I wanted to share with you all the links of demos we showed during the keynote. I think you will find this list handy as a guide of what is possible with Silverlight. Most of these real websites are built with Silverlight 3 and Expression Blend 3. Now that Silverlight 4 and Expression Studio 4 are getting closer the kinds of things you will be able to create are even cooler - remember that with Silverlight we now get Microphone and Webcam support, better and easier business application features among many other features. For Expression Blend 4 we are still not sharing some of the good and upcoming news but it will definitely be the most exciting release ever.

We’ll talk more about this at MIX in Las Vegas.

Here is a summary of what we covered in the keynote:

August talked about Emotional Design. You can watch a similar lecture he delivered during our Europe REMIX tour last year. It’s awesome!

The Future of UX and the Emotion Commotion @ Belgium REMIX
http://www.microsoft.com/belux/msdn/nl/chopsticks/default.aspx?id=1407

August also showed the Glimpse Ahead video from Office Labs. In August’s words: “…all the technology you see in this video is closer than you think” :)

A Glimpse Ahead > Productivity Future Vision
http://www.officelabs.com/projects/productivityfuturevision/Pages/default.aspx

I then started talking about the fast and furious progress we have done in this short time, going from Silverlight 1 to Silverlight 4 as well as the speed at which Expression Studio has grown and innovated in the design tools business with Visual State Manager, Control Customizations and the mega hit SketchFlow :). I also talked about Agency Partners and how much Microsoft has grown relations with this amazing audience. Here are a couple videos you must watch. Two creative companies, one in Korea, the other one in the UK. These videos were produced by Darek Mazzone.

Partner Case Study - D’Strict UX Studio in Korea

Partner Case study - AKQA in the UK

Big Spaceship Agency Blog Post - In these couple articles, Big Spaceship, one of the worldwide leading digital experience agencies, shares with us their first impressions with Silverlight and Expression after having produced the latest Victoria’s Secret Show website.
Part I - http://www.bigspaceship.com/blog/labs/thoughts-on-silverlight/
Part II- http://www.bigspaceship.com/blog/labs/thoughts-on-silverlight-part-ii-design-and-animation/

Silverlight and Expression are for big or small agencies. Mix and Blend is an UX agency in Portugal. They are surfers and designers :) Check out their amazing story. Mix and Blend - http://mixblend.net/

Here is an interview of the agency

I also talked about how Silverlight empowers Developers and Designers to target the two big experience buckets on the Web: Web Applications and Digital Marketing. These two are very different types of experiences. Digital Marketing is about communiticating a marketing message to the user. You can find examples of Digital Marketing if you check out nike.com or starbucks.com or landrover.com. The Web Application bucket on the other hand has as its objective to help users achieve functional tasks. We are talking about online video and audio editors, online illustration websites, social media websites, line of business applications like expense report tools, recruiting tools, project management applications, data visualization, e-commerce and more.

WebAppsDigitalMarketing

Silverlight is definitely leading on Rich Web Application development and design. With Visual Studio and Expression Blend you can create the best of the best business and web applications today.

On the Digital Marketing site Silverlight is the new kid on the block where Flash (the only kid in the block) has been king for more than a decade. Silverlight has however brought many capabilities that are enabling designers and developers to create great Digital Marketing experiences with features like DeepZoom, Smooth Streaming, Time based Animation, Behaviors, Controls, Perspective 3D and more. Check out the following amazing examples of Digital Marketing experiences created with Silverlight:

Two great examples of DeepZoom
Michael Jordan
http://www.jumpman23mosaic.com/

Hard Rock shares with us thousands of pieces of memorabilia
http://memorabilia.hardrock.com/
Trick: See if you can find this envelope of a letter from Paul McCartney to Sgt. Buddy Dresner. Then zoom in deeply into what looks as the poststamp on the top left. Zoom into the Hard Rock under the Paramount theater. From there see if you can continue zooming in to discover the Beatles head toys in there.

 Hard Rock Memorabilia Hidden Beatles Head Toys
Sherlock Holmes Movie created by AKQA. Uses Silverlight, HTML and Flash. Uses Photosynth and Silverlight for scene exploration.
http://www.221b.sh/

Beatles RockBand Website created by AKQA
http://www.xbox.com/en-US/games/splash/b/beatlesrockband/default.htm

Victoria’s Secret Show website created by Big Spaceship
http://www.vsallaccess.com/fashionshow/index.html
Web Applications

Compared to Digital Marketing experiences, Web Applications have as a primary objective to help users achieve a functional task which can range from business tasks to composing images or music online. Check out these mini samples of Web Applications that Archetype, one of the leading Silverlight agencies has put together:

Mixer
http://archetype-inc.com/slminiapps/final/mixer/default.html

Canvas
http://archetype-inc.com/slminiapps/final/canvas/default.html

Recruit
http://archetype-inc.com/slminiapps/Final/recruit/TestPage.html

I then jumped into exploring other amazing technologies from Microsoft that are helping agencies create Digital Marketing and Web Application experiences. These technologies are all  live and working technologies that digital agencies and development companies can use today:
Bing Maps
Check out Blaise Aguera y Arcas session at TED
http://www.ted.com/talks/blaise_aguera.html

Some of the features he demoed at TED are live and working on Bing. Some of the other features are coming soon.
http://www.bing.com/maps/explore/#

It turns out the technology that power street view in Bing Maps is actually Photosynth. Photosynth is a breakthrough technology that smartly identifies where photographs have been taken from and with that information it composes 3D scenes. It is inbelievable to see that with the contribution of pictures taken by different people, say via Flickr, you can put together a virtual environment of anything in our planet (or outside). Check out the Photosynth website, sign up, create you own Photosynths and share freely. AKQA used Photosynth in the Sherlock Holmes movie website. NASA is using Photosynth to document the exterior and interior of the International Space Station. Photosynth is fully available for you today too.

Photosynth
http://photosynth.net/default.aspx

NASA Photosynth Website
http://www.nasa.gov/photosynth
In terms of social media, Silverlight is ready to help you produce top notch experiences. Check out Match Defense, a fun Facebook based social game that related to the XBOX game too. You can play this game using Silverlight while signed in Facebook.

Match Defense
http://apps.facebook.com/matchdefense

Silverlight Facebook App. This Silverlight app allows you to experience Facebook in a better way. Do everything you do in Facebook in this desktop application. Silverlight out-of-browser applications work on Mac and Windows.
http://www.silverlight.net/content/samples/apps/facebookclient/

Helping you use Silverlight with existing web technologies like Drupal, Wordpress, Sharepoint and others is also possible and we are starting to see many great examples of this. Check out this short video from Florent Pajani, Western Europe Marketing Manager who shows us how to use the Silverlight Gallery plugin in Wordpress to easily and right from the Wordpress control panel, bring up the richness of your blog to the next level. You can learn more at www.microsoft.com/web

Windows Phone 7! Yes, this one has been very popular already. More info coming up at MIX but here is a demo for you to start exploring some of the UX and UI metaphors of Windows Mobile 7 Series.

How do you take advantage of all of this goodness? Use Expression Studio and Visual Studio to create Silverlight experiences. Expression Studio is for designers and developers who want to design Silverlight experiences. Visual Studio is for developer to code and develop strong Silverlight apps.

Do you want to learn more about Expression Studio. Check out this fun TV show called Digital Kitchen and take a look at what Expression Studio 3 offers.
http://www.microsoft.com/silverlight/seethelight/

Microsoft Expression Visual Kitchen Show