ux.artu.tv

Become a Design All-Star - Check out the new .toolbox design program for Silverlight!

ArturoT — Wed, 24 Mar 2010 21:41:17 +0000

What a ride this has been! This is what I and other more than 30 people from different companies have been working on together for the last 6 months: .toolbox.

A bit more than a week away from when we went live we already have around 2,500 students from 80+ countries around the world!

.toolbox is an online design training program where you will find two study tracks: Design Principles and Design Scenarios. You can take the training, present evaluations, collect badges and share your status via Twitter and Facebook. Do you have what it takes to get the ultimate Design All-Star badge?!

Design Principles is all about learning how to do better UX and design in general. We have received HUGE number of requests for this type of content. You will find 12 modules on this track, each about an hour long so 12 good hours of UX lectures

Design Scenarios is all about learning how to use Expression Blend and the design aspects of Silverlight. We have 12 modules, each about an hour long. The evaluations will only cover what is on the video but in addition we’ve included assets and a guide where you can follow a hands on lab. Some of the mini apps we have in the school are: SketchFlow Prototyping, Music Mixer, Canvas, Games, Business, Avatar Creator, Weather and more…

Since we first released Expression Studio 1 and Silverlight 1 the need train developers and designers in the use of this new platform has been huge. Everyone knows how to use Flash or Photoshop but no one knew how to use Expression Blend. All this time Microsoft has been growing investment on Silverlight resources and building better websites with learning materials. These days passionate community members also drive amazing blogs where they share tips and tricks to use Expression Blend.

For a couple years I drove a program called Artist in Residence which invited designers to Microsoft to work with developers to learn Silverlight and Blend. I also did the internal Artist in Residence where dozens of Microsoft teams, from XBOX to Office, to Bing to MSN got trained in the use of Silverlight and Blend.

After all these interactions I realized we were reaching maturity level in the business where we needed to go broader and reach many more people. Even though having designers visiting us in the campus was unbelievably fun and one of the most memorable experience of working for Microsoft, you can only reach so many people that way. An online design training program was a better solution moving forward and so we came up with the idea of creating the .toolbox.

The .toolbox is a website that trains developers and designers, evaluates knowledge, awards badges for achievements and that then shares your status via Twitter or Facebook. We hired multiple companies to help us build this site: Avlade produced all the Design Scenarios modules. Archetype many of the mini apps you will build in the school. Fuel Industries created the whole website and also a couple of the mini apps. Template Monster provided 3 beautiful sample templates from their library. Internal Microsoft UX designers contributed to the creation of the Design Principles modules.

If you have any questions/comments about .toolbox drop me a comment here and if you run into issues while taking the training please post directly to the Expression Blend forum. Remember to label your questions with TOOLBOX and then you question.

A Vision of the Future for Home and Work Experiences by Microsoft Surface

ArturoT — Tue, 09 Mar 2010 17:28:08 +0000

The concept of creating vision videos to sell an idea has been around since there has been cameras and specially TVs. Just like today Microsoft publishes a Health future vision video, 50 years ago people were also pitching the “Hospital of the Future” or movies and documentaries were displaying how life would be like with future technology.

Portraying the future has always been a passion for humans. The “What comes next?” question drives many people of many backgrounds, from painters, designers, developers, engineers, politicians, stock brokers and of course gamblers. Video as a medium to communicate messages is very effective because it is so rich. Video offers moving images and sound that communicate ideas in a more tangible, digestible manner to people. Video does a better job in tricking people to think that what they are watching is “real” - “If I see it, hear it and makes sense then it should be real”… and if not real at least it is more “credible”.

One of the most exciting things about going to the movies is we let ourselves immerse for 90 minutes in a surreal world but a world credible enough that we can actually identify ourselves with characters and story. The result is we enjoy the movie. Everytime I see a User Interface in a movie I go like wow, cool, it is inspiring. Sure, HD holograms that I can touch and manipulate in the air exist yet but I don’t care - My premise as a designer is there are no limits and not borders. That’s the only way you can think outside the box. It is not that you should be naive or even stupid - I won’t propose my client a 3D Hologram touch UI tomorrow March 9th 2010 but removing limitations during early stages of the design process frees you up to come up with creative solutions. That’s why I love movies, because they are crazy, and unbelievable and they go beyond what I see everyday. Movies are paid vision videos of 90 minutes… and some of these like Iron Man or Avatar have made billions of dollars.

Throughout history Microsoft has also created many future vision videos. Before I worked for Microsoft I remember watching late 90’s .NET future videos . I loved those. I tried to find those in YouTube but couldn’t. I have them in DVD at home. I’ll probably upload for you to watch. Most of the things I’ve seen there have now become real (10 years later). In this same spirit, the Surface team in Redmond has produced a couple videos to share their vision for the future. The videos were actually made public some 10 months ago but they are fun to watch.

To understand the two following videos, you might want to watch August de los Reyes Natural User Interface session. The idea for these vision videos is to express some of the concepts behind the research and thinking of how natural user interfaces will change our lifes in the near future. These couple videos look simply unbelievable (almost not credible) but if you watch August’s session you will understand where the Surface team was coming from when the envisioned Home and Work in the future and why these videos might actually be more realistic (in future terms) than we might think today.

Natural User Interface (NUI) is here. New systems of interaction require new approaches to design. Microsoft Surface stands at the forefront of this product space. This presentation looks at one of the richest sources for inventing the future: the past. By analyzing preceding inflection points in user interface, we can derive some patterns that point to the brave NUI world.

An abstract of life in the workplace of tomorrow with suppressed visibility of technology and devices; directed by Microsoft’s Dane Storrusten, created and by INVIVIA

An abstract of life in the home of tomorrow with suppressed visibility of technology and devices; directed by Microsoft’s August de los Reyes, created and by INVIVIA

So the question is why would only big corporations produce vision videos? The answer is NO!, everyone, all of us who are part of the IT industry, the Web… the UX and Design world… we should all see ourselves at the beginning of a new project for a client as a James Cameron or a George Lucas. Vision videos are for everyone. Vision videos do not have to be always thinking 50 years ahead… make vision videos 1 year head… 6 months ahead… 6 weeks ahead. Help your client visualize the future. There is “magic” when someone (like you) are able to show your client where they will be in 6 months (after they hire YOU to design and develop their new website, business application, or mobile experience)… and yes, here comes the marketing pitch! Use SketchFlow! whoa! - did I just trick you into reading this whole blog post to finish with getting SketchFlow? if you are reading this, chances are I succeeded but no, seriously, there are many tools designers use to visualize the future… Adobe After Effects is a great tool to produce videos with effects and a lot of agencies use it. It is not a prototyping tool per se but people use it for visualization. I call it “the Photoshop of video”. Mastering AfterEffects is not easy though. Also lot of people use Powerpoint! yes, slides with animations to communicate how the final application or website will look like - the vision of the future… well, I think you will also find that Expression Blend and SketchFlow can help you create these future visions. You can create animation easily and integrate images or graphics from Photoshop or Illustrator. You can integrate video and even simulate how your client’s experience will behave “in the future” by making this Silverlight-based vision interactive. Prototyping is about helping you visualize where you are going to and discover issues and opportunities before hand. The same principle of the power of video applies: the richer the medium is to communicate your message - like a future vision interactive prototype - the more engaging and charismatic your ideas will be for your client.

Future vision videos and prototypes get people excited!
You determine the timespan of your “vision” (e.g 50 years, 10 years, 1 year, 6 months or 6 weeks)
Use different media to share your vision to your client. They will love it.

For example, check out this terrific vision of the future video that with INCREDIBLE detail described how life would be in the year 2000.

Follow me @arturot and if you are going to MIX10 drop me a tweet to chat.

Hot Expression Blend and Silverlight Topics Survey Results. Interesting Trends.

ArturoT — Fri, 05 Mar 2010 23:32:08 +0000

Thanks to everyone who filled out our Design Tools and Techniques Workshop for MIX10. Here are the results. I wanted to share with you as they show interesting trends on what people are interested in learning more related to Silverlight and Blend. The survey focused on the design/UX aspects of Silverlight. Note these numbers do not represent “coolness” levels per topic rather, they simply show what people are more interested in learning about. Here is an image of the full survey with the topics…

I hope this list helps book publishers, Silverlight community rockstars, training companies and us here in Microsoft to produce more content on the top rated topics. What do you think about this? Any other topics we could have included in the survey?

Rating	Points	Topic
11	28	Expression Blend Best Practices
10	27	Creating, Reusing, Extending Behaviors
9	26	Contemporary UI Patterns
8	24	Concept Development
8	25	Styling Tough Controls
8	25	Creating Custom Controls
6	22	Prototyping
6	22	Creative Effects
6	22	Physics Based Behaviors
5	22	Screen Transitions
5	21	Layout Panels Best Practices
5	21	Cool Animation Tricks
4	21	Client Briefing
4	20	Extending Out-of-the-Box Controls
2	19	Custom Layout Panels
1	16	The Pitch
1	17	Visual Design
1	17	Bitmap API
-1	15	VSTS
-2	14	Custom Pixel Shaders

The Rating number shows the sum of points per topic. People rated topics with 1, 0, -1 (Like +, Like, Not Like). The Points number shows the positive sum of votes per topics 2, 1, 0 (Like +, Like, Not Like). Basically the first number, Rating dramatizes the different between love and hate per topic.

In this small survey you will find the different topics that Archetype, Adam Kinney and I will be covering during the workshop. We have 3 areas we want to cover: 1) Design Concept 2) Interactive Design 3) UI Development.

Design Concept are activities you perform while capturing the needs of your customers and putting together that early concept that you can then sell to your client, get their approval and get started. This early concept needs to look great and communicate the UX vision you have for the client.

Interactive Design is about creating compelling, rich and engaging UIs. Learning more about Animation, Effects, Transitions and Controls in Expression Blend.

UI Development is about learning coding techniques to bring up your UIs to the next level in terms of interactivity and richness. From creating your own Behaviors, Controls, Layout panels to Pixels Shaders and exposing all these in a Expression Blend friendly manner for designers.

SURVEY | MIX10 Design Tools and Techniques Workshop

ArturoT — Fri, 05 Mar 2010 01:40:56 +0000

In this small survey you will find the different topics that Archetype, Adam Kinney and I will be covering during the workshop. We have 3 areas we want to cover at the MIX10 Design Tools and Techniques Workshop: 1) Design Concept 2) Interactive Design 3) UI Development.

Design Concept are activities you perform while capturing the needs of your customers and putting together that early concept that you can then sell to your client, get their approval and get started. This early concept needs to look great and communicate the UX vision you have for the client.

Interactive Design is about creating compelling, rich and engaging UIs. Learning more about Animation, Effects, Transitions and Controls in Expression Blend.

UI Development is about learning coding techniques to bring up your UIs to the next level in terms of interactivity and richness. From creating your own Behaviors, Controls, Layout panels to Pixels Shaders and exposing all these in a Expression Blend friendly manner for designers

Fill the survey…

Leave me a comment if you are have more comments or ideas. Archetype is a tremendous agency who have done amazing work with Silverlight and Flash. They will be sharing with us real world tips and tricks on stage. The format of the workshop is not exactly a lab but we’ll assets you can use to follow along.

25 Inspiring Silverlight Websites, Videos and Customer Stories

ArturoT — Tue, 02 Mar 2010 23:46:35 +0000

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.

Should I add any other cool website, video or customer story about Silverlight and Microsoft UX? Leave me a comment and I’ll be happy to add to the list.

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.

Continue reading the full article with 25 Inspiring Silverlight Websites, Videos and Customer Stories here…

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.

Partner Case Study - D’Strict UX Studio in Korea

Continue reading the full article with 25 Inspiring Silverlight Websites, Videos and Customer Stories here…

Help me pick the mini-apps that we’ll design together at MIX10

ArturoT — Wed, 17 Feb 2010 01:56:09 +0000

On March 14th, in the afternoon I will be hosting a pre-session called Design Tools and Techniques. We will design some mini-apps from scratch, all the way from sketching them, wireframing, prototyping and doing the final UI in Blend. I’ll provide more info on what we’ll be targeting but in the mean time check out these mini apps. These apps were created by Archetype, a terrific hybrid studio that gets design and development based in the San Francisco Bay area.

Which of these would you like us to design from scratch? Leave me your feedback. More info on this session coming soon.

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

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

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

http://archetype-inc.com/slminiapps/rc/movies/TestPage.html

Last day for the Elves-only 30% OFF on Expression Studio!

ArturoT — Sun, 27 Dec 2009 09:20:45 +0000

I received this message from Elwe the Lizzard Elf - I thought you would find it useful (it’s about a big discount on Expression Studio 3!!!) Ay caramba!

“If you are an elf like me who enjoys holidays because of the amazing, sometimes crazy discounts you find everywhere these days, from shiny new green hats, red shorts, elf curly shoes and those always nice stripe socks then the following deal is for you: Get a 30% OFF on Expression Studio. Offer ends this Monday, December 28th!

This offer is only for elves living in the US - Get it now and get those Silverlight and Blend projects rollin’! - make Santa proud! “

What does a Design Studio have in common with Keanu Reeves and Patrick Swayze?

ArturoT — Thu, 12 Nov 2009 21:19:43 +0000

A few weeks ago I had the opportunity to visit Europe as part of the Microsoft REMIX Tour 2009. REMIX is basically the little brother (or sister) event of the Microsoft MIX event – …

On the last stop of the tour – Lisbon – I met a very interesting group of folks who call themselves Mix and Blend (check out their cool Silverlight site and their portfolio). Mix and Blend is the name of their design shop and they help software development companies with the creation of the user interface and user experience of software applications and websites using Expression Blend. “We do the Blend work for development companies who do not have designers in their teams,” said Sérgio Ferreira, CTO.

Talking to Mix and Blend put me in a Beach Boys mood. All the guys in this team were wearing a cool black t-shirt that said We Blend for You.

continue reading the full post here…

Top 20 Resources to Get Started with Silverlight and Blend

ArturoT — Wed, 04 Nov 2009 23:04:59 +0000

I know I know - I deserve a tomato (or two) in my face for not posting since Kawasaki’s talk in SxSW early this year. Man, blame Twitter! that little thing got me to feel I didn’t need to blog anymore as kind of satisfied my need to reach out to you guys and to be in connection but not anymore, no longer will Twitter be my darling - I’ll go back to blogging. Anyway, just so that you forgive me here are 20 top resources I send out to Microsofties and customers whenever they ask me: How do I get started with Blend? - In Microsoft I focus on the Design audience (Design audience meaning Developers, Designers, UX architects etc) who care about the design capabilities of Silverlight.

Here are what I consider the top 20 resources for you. Ping me if you notice I’ve missed something REALLY important but keep in mind this list is for the “Design” side of Silverlight only… which in my mind is basically Expression Blend.

To Get Started:

1. Go through the Starter Kits

2. Go through the Full Course

3. User Online Resources to get additional info and more tutorials

ONLINE RESOURCES

Download the Expression Blend Trial

http://www.microsoft.com/expression/products/Blend_Overview.aspx

Get the Expression Blend for Free via the WebsiteSpark program!

http://www.microsoft.com/web/websitespark

Project Rosetta

http://visitmix.com/labs/rosetta

Silverlight Switch

http://www.silverlightswitch.com/

Nibbles Tutorials

http://www.nibblestutorials.net

Kirupa.com

http://www.kirupa.com/blend_silverlight

Expression Blend Team Blog

http://blogs.msdn.com/expression

Download Additional Behaviors – Community Gallery

http://is.gd/4NlY5

Dynamic Prototyping with SketchFlow in Expression Blend

http://www.dynamic-prototyping.com/sketchflow

Expression Community

http://expression.microsoft.com

Silverlight Community

http://www.silverlight.net

SilverZine

http://silverzine.com

Andy Beaulieu

http://www.andybeaulieu.com

Victor Gaudioso

http://victorgaudioso.wordpress.com/category/silverlight-video-tutorials

FULL COURSE

In this course you will learn all the basics to create Silverlight and Expression experiences. It is an end to end get started. It includes an almost 200 page mini book with exercises, reference material and explanations by American Graphics Institute instructors. It also includes a collection of assets that you will be using throughout the course. For more specialized training check out the Starter Kits below.

File 1 : Get Started with Silverlight - Full course > (100-200 level content)

http://download.microsoft.com/download/4/E/D/4ED9A068-7431-435A-8FD3-D7F6746998CF/Create_Silverlight_with_Expression_Blend_3_Course.zip

File 2: Service Pack 1 for the Get Started with Silverlight course – (you need this file in addition to the Full Course file)

http://download.microsoft.com/download/4/E/D/4ED9A068-7431-435A-8FD3-D7F6746998CF/Service_Pack01_Create_Silverlight_with_Expression_Blend_3_Course.zip

STARTER KITS

Silverlight

Introduction to Prototyping with Sketchflow in Expression Blend 3: Assets, Guide and Video Package

Discover Sketchflow, a new feature set in Expression Blend 3 that helps you define the concept for user experiences in early stages of the design process. From sketches to wireframes to protoypes of simple or high definition, Sketchflow provides you the right tools to communicate your ideas and gather feedback from others.

http://download.microsoft.com/download/A/4/9/A49AB02F-F035-402C-9B26-84860EEAF7DC/Prototyping_with_Sketchflow_StarterKit.zip

Creating a ColorSwatch Control in Expression Blend 3: Assets, Guide and Video Package

Victor Gaudioso and AGI Training take us on a tour to learn how to use a custom layout control like the Circular Panel to create fun and creative arrangements of objects in a List Box control. No longer Lists need to be linear and boring. You will learn how to customize this circular panel enabled Listbox to look like a Color Swatch control. This will help you reuse this control in your own projects easily.

http://download.microsoft.com/download/F/F/8/FF8B289E-7DC4-4FC5-BAB6-9464240923FA/Creating_a_ColorSwatch_with_ExpressionBlend3_StarterKit.zip

Venture into Gaming with Behaviors in Expression Blend 3: Assets, Guide and Video Package

Learn more about how to build a traditional “bricks” game using Expression Blend 3 Behaviors. Simply drag and drop Behaviors over objects in your artboard to easily add powerful and sophisticated functions like animation, physics, interactivity, data connection, effects and more. All without coding. The ever growing Behaviors Gallery at expression.microsoft.com is always avaialable for you to download new behaviors.

http://download.microsoft.com/download/1/1/C/11C8F2E2-711B-4581-A688-6B66DA4D1124/VentureIntoGaming_ExpressionBlend3_StarterKit.zip

Support for Silverlight in Expression Web 3: Assets, Guide, Video Package

Learn how to leverage the new and easy to use Silverlight support features in Expression Web 3. Using a template kindly provided by TemplateMonster.com, AGI Training will help you learn how to take your websites and publish them to an FTP location without having to leave Expression Web.

http://download.microsoft.com/download/B/9/8/B9874A4F-58F8-4D01-8E2F-E1DAC62ED4A3/SilverlightSupport_Web3_StarterKit.zip

For Integrators or UI Developers: Building a Product Website with Expression Blend 3: Assets and Guide

Christoph Schittko, Architect Evangelist for Microsoft has produced this amazing lab that will take you by the hand (metaphorically speaking J) and help you put together a Product website that leverages the new Perspective Transformation in Silverlight 3 to create a 3D based rotating Zune that you can customize choosing colours or tattoos.

http://download.microsoft.com/download/4/A/4/4A45D010-6152-4557-BAD9-62CC2040108F/BuildingZuneWebsite_ExpressionBlend3_StarterKit.zip

Expression Web

Discovering SuperPreview in Expression Web 3: Assets, Guide and Video Package

Learn more about SuperPreview, a new visual diagnostics tool in Expression Web 3. In this Starter Kit using a template kindly provided by TemplateMonster.com, you will be provided with detailed guidance on how to leverage SuperPreview to diagnose issues across multiple browser, all with full rendering fidelity and detailed control.

http://download.microsoft.com/download/F/3/4/F343C86B-FEE4-4448-8715-CA768BB305FE/ExpressionWeb3_SuperPreview_StarterKit.zip

Creating Standards Based Websites with Expression Web 3: Assets, Guide and Video Package

Learn how to produce beautiful and fully standards compliant websites with Expression Web 3 with this Starter Kit. Based on a template kindly provided by TemplateMonster.com, AGI Training gives us a tour on how to follow better practices to achieve W3C compliant HTML code.

http://download.microsoft.com/download/5/4/B/54B5B8F5-9B00-4D86-A185-7E315ED26A93/Standards_Based_Websites_with_Expression_Web3_StarterKit.zip

Guy Kawasaki interviews Chris Anderson from Wired SxSW

ArturoT — Tue, 17 Mar 2009 21:57:06 +0000

Here is a summary of this keynote session at SxSW. SxSW is over and it was an amazing event. Really outstanding results from the PhizzPop design challenge yesterday night. Will blog more about this soon but now let’s switch gears to MIX09… the clock is ticking… what is going to be announced? Follow this blog and me via twitter to get updates and get more info about all the new and amazing features that are about to be announced for our platform and tools at MIX09. You can’t miss it!

#sxswi end of keynote. Amazing session, fun… And “almost free”…

#sxswi Guy Kawasaki now charging for questions here at the keynote! Hilarious. Monetizing the “free”.

#sxswi question “why does YouTube doesn’t charge for premium contetnt? I’d be willing to pay”.CA “u get premium content at hulu.com and free

#sxswi CA re: economical crisis “how does crisis change free?” people are not as “dis-empowered” this time…

#sxswi GK “people fear losing something they have or fear of not getting something they want?” CA “FREE doesn’t frustrate,no fear,no scary”

#sxswi GK “free is free. One penny is not free”… How come “1 penny” cost be perceived so different from totally free, 0 pennies.

#sxswi this business models apply to “online” digital services… How would this work with analogous business? Like Starbucks?”

#sxswi Kawasaki “why not give your book for free to ur Tweeter followers?”… Good idea to provide value to ur “fans”

#sxswi CA”writers/publish companies might have a similar relation and future to what is happening on the music industryrecord label/artist”

#sxswi CA re: what is harder, to achieve popularity or to monetize popularity “harder to monetize, tweeter facebook…help becoming popular”

#sxswi CA re: future for Wired “paper magazine still with long life. Online mag is instantaneous info. Both formats good”

#sxswi Chris Anderson (Wired) re: how can Tweeter make money? “free to consumers but charge companies who are making money out of Tweeter”

#sxswi is definitely not a “design” event but a ’start ups’ event. Lots of inspiring ideas to help u think out of the box