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!

Follow us on Twitter, Facebook ad YouTube.

.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.

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.

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

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

Hello! I just signed up to Twitter. Actually I did months ago but never used it. Now I want to get started. It seems pretty easy to use but still confused with the @reply or @ this or that not sure what it is… If you have tips let me know.

Follow me @ http://twitter.com/arturot

I will be using Twitter and this blog to broadcast from SxSW which is a massive event in Austin beginning next weekend. Microsoft, like many other software vendors and design industry professionals will be part of this over the weekend gathering where we will witness amazing sessions and meet tons of interesting and creative folks from all around the world. My friend Miguel Jimenez from Spain will be there, he is a gifted mind who understands Design and Development and is skillful with WPF and Silverlight. He traveled all the way from Spain to join us at Redmond for the MVP Summit (Most Valuable Professionals), then he rented a car and is currently driving from Seattle and all the way to Austin TX!… that a good few thousands of miles away!… Anyway… just like this guy, many others are heading down to Austin, TX. You can only imagine the energy that will be gathering down there.

Follow this blog and my Twitter if you want to get updated on what is happening in SxSW. There will be thousand’s of souls in there, twitting and blogging… me, I will focus on Microsoft UX updates as well as other cool things I get to see there.

My first rant in this blog: The only thing I really didn’t like about SxSW is its *terrible* website! man! for being a design conference, such a huge popular and amazing event the website is crap. When I signed up I felt I was going back to the early 90’s when no one knew anything about web design or usability… It was hard to sign up, steps through the process didn’t flow. The look and feel for the site is null. The site is so poor in its design, let alone the visual part, but the usability of it that I even think they did on purpose, may be they were trying to convey a message about, I don’t know, something. Less is more? but here less is less… May be they on purpose don’t want to make the site too prevalent? or stand out too much? Anyway, if it was for the website only and I was totally new to SxSW then I would think this was a low scale/cheap event. It is not, it is indeed the most important creative design gathering of the year. No doubt about it… I’m not saying I wanted “flashy” webpages with animation or effects, but there is just no readable concept in the usability or design or the site.

Hello! Ok a while ago I mentioned we had produced a short video series with Total Training called UI Design for Developers. Total Training invited us to visit them at NY where they have their studios and with their help we produced these 13 video series with quick tips & tricks for non designers to learn more about design. This is something I officially consider Part I because teaching design takes longer than just 13 videos but I hope these help you to get a little deeper into design. The videos are produced using Expression Design but all the tips and tricks work with Expression Blend too. I am already working on Part II of these series which I’ll make available in the future.

Also if you want more info on design check out this amazing website that will take you way deeper into Colors. Janet has done an amazing job providing good resources there.

For colors don’t forget ColourLovers.com now supports downloadable color palettes in Silverlight, WPF and Expression Design friendly formats.

We will publish all this content in the Expression Community site, an amazing resource for Designers but as usual I couldn’t resist so I’m licking out the videos here in my blog. Enjoy!

1 - Principles of Design Series:  Learning about Balance using Expression Design
| Video | Assets|

2 - Principles of Design Series:  Learning about Rhythm using Expression Design
| Video | Assets |

3 - Principles of Design Series:  Learning about Emphasis using Expression Design
| Video | Assets |

4 - Principles of Design Series:  Learning about Symmetry and Asymmetry using Expression Design
| Video | Assets |

5 - Principles of Design Series:  Learning about Unity using Expression Design
| Video | Assets |

6 - Principles of Design Series:  Learning about Points, Lines, and Form using Expression Design
| Video | Assets |

7 - Choosing Colors to Complement Your User Interface with Expression Design
| Video | Assets |

8 - Experimenting with User Interface Colors with Expression Design
| Video | Assets |

9 - Creating Mosaic and Tiled Patterns using Expression Design
| Video | Assets |

10 - Learning to Create Icons using Expression Design
| Video | Assets |

11 - Creating a Sample Icon using Expression Design
| Video | Assets |

12 - Designing a Glassy Button using Expression Design
| Video | Assets |

13 - Applying Effects to Bitmap Images using Expression Design
| Video | Assets |

Using the latest version of DeepZoom Composer I stitched these photos… I love DeepZoom Composer!

Bon jour!

Paris, France.

This has been a fun week. I had the opportunity to visit France and the UK. This Wednesday Microsoft participated in the DDB Digital Days 2008 event in Paris. It was a fun event in a very social environment. The presentation has held in an open area in the building and not in the typical conference room. I liked that approach as it felt more like a casual conversation with the 100+ attendees that participated in the event. It was great to see the interest of designers and agencies for Silverlight and Expression. As promised below is a link to the assets I used in my session. It was also fun to visit the Microsoft office in Paris where I had a chance to visit the MCT, a technology center where Microsoft collaborates with Design Agencies, ISVs and SIs to produce WPF and Silverlight applications and provides the means to bring them all together around a common project for Enterprise customers. I learned from designers and developers the different ways they work together, the things that are smooth and easy and the ones that are more challenging. Very useful feedback for me to bring back to Redmond. In general there is an agreement that with XAML (Silverlight and WPF) designers can now not only participate in Microsoft based technology projects (something that in the past was possible only for developers) but now with Expression I met a couple agencies who are leading the projects themselves. At the same time, I found that designers take a little longer to learn the use of Expression as it incorporates many different ways of doing things compared to Flash. For example, our animation system is time based where the Flash system is frame based. Once designers cross this first stage, there seems to be a quick ramp up into being creative and productive with the tools.

Microsoft® Expression® Studio 2 vous ouvre de nouveaux horizons de créativité. Ses outils de création professionnels et ses technologies innovantes vous laissent libre de réaliser votre vision, que ce soit pour la création de sites Web, la réalisation d’interfaces riches ou la gestion des actifs numériques

Hello!

Brighton, UK

In Brighton, Microsoft hosted the REMIX08 event. It was big event with dual tracks for designers and developers. I missed the keynote! @%#!!! as I was flying in from Paris. I would have loved to see Scott Guthrie and Bill Buxton, together in action. As you know, Scott is our biggest technology ambassador and spokesperson. His background is completely in the development world. Developers love him and he is really popular. Bill Buxton is just as big of a figure but in the Design space. He is a UX and Design researcher at Microsoft. Bill has been designing UIs and drilling deep into design processes all his life. As deep as Scott can get development topics, Bill can do in Design concepts and theory and practice…  I had the opportunity of participating in a Discussion Board with other friends from UK agencies and Bill Buxton. It was the first time I talked to him. As expected he was a very kind person. We got some questions and Bill just kept providing not just answers but truly inspiring messages… I was just in awe. The depth of thinking he has gotten to after all this years of experiencing “Design” have definitely provided him amazing insights into practical approach to design. Check out his book Sketching User Experiences.

There was a question about the word Devigner. There were different opinions about it. I understand the role though and it exists undeniably but the word devigner just doesn’t resonate to me. I like to call them hybrids (which is not a great word either!) or “integrators”.  I’ve found that the majority of times it is a person with a developer background who executes this role. This role is defined at a technical level. The devigner, hybrid or integrator is the person who takes code files from a developer and visuals from a designers and integrates them. It is not a “management”/creative director type or role. It is the middle man in between the two worlds that for some reason cannot integrate or share assets directly. For me even though the devigner role exists, it shouldn’t. I think it is an opportunity to come up with ways to “delete” that role. In an ideal world the tools that both profiles use, designers and devs, should help these two people communicate with each other *directly* (that is exchange files and assets without the need of a person acting as an interpreter, patching files, making little changes in code and visuals so they can work together). I think we will see interactive/UI design tools evolve towards this paradigm in the near future but the role devigner IMO is not a “new role” or “something emerging” as being a “new way of doing things”… it’s just that tools in the industry are not fully achieving the goal of having designers and developers work together, hence an “integrator” role is needed. To be clear, this is at the technical level… there will ALWAYS be the need to Creative Directors, UX architects, Software Architects, Information Architects or even CTOs who can manage, inspire and motivate different profiles like designers and developers to work together.

On Friday I gave a session on Expression. I tried a different approach this time and worked well. Doing my “slides” in DeepZoom continues to work great. I love it. It’s not a linear Powerpoint presentation anymore but a “mind map”. I’m still afraid of making people dizzy when I pan around but apparently everyone was walking straight at the end of the session

Here are the assets for the Paris and Brighton sessions. I hope they are useful for you

From Lutz Gerhard:

Hey everyone –

I started a deep zoom blog to answer some of the many questions I’ve been getting and to put some nice content and samples out there.

My first post is here:

http://blogs.msdn.com/lutzg/

Hello!

Chris Franz from Microsoft Learning dropped me an email the other day letting me know the availability of something called: “Learning Snacks”. These are some awesome quick tours that provide you knowledge on different topics. They are called Snacks because they are little chunks of knowledge . You can learn more about Silverlight itself watching these small animations with audio. This is a scenario where people usually use Flash but now you can also do it with Expression Blend. If you want to get a quick glance over what Silverlight is and even some more in depth content like video or coding Silverlight you will find these snacks very useful. Check ‘em out!

Jerry was asking me how to change the size of the DeepZoom “slide” I used in my MIX session. The DeepZoom is currently displaying at 1024 x 768px and we want to make that bigger. My Silverlight 1 knowledge didn’t help answer the question so I went to Kirupa and this is my conversation with him. Notice that I still don’t have a specific answer but Kirupa pointed me to the right direction which I’ll explore. I wanted to share this with you anyway in case you want to start trying out.

You are right – you probably do need the XAML files for that. I don’t think I have those on my machine anymore unfortunately� The nice thing is that you can do this yourself by downloading the source files here:

and making the modifications yourself! Simply delete the vista wallpapers with your images and change the reference in the XAML file to point to your images. You can open the XAML file and make the size bigger as you see fit. Let me know if you are still running into issues.

Cheers!
Kirupa

From: Arturo Toledo
Sent: Wednesday, March 19, 2008 9:01 PM
To: Kirupa Chinnathambi
Subject: RE: Making the DeepZoom bigger

Hi Kirupa! The HTML file simply says scale to 100% so I assume it is already scaling the whole Silverlight Control… I was then trying to change some kind of XAML to make it bigger but I can’t find any XAML file to change J  it’s all in a “compiled” xap file.. or seems like…:)
Do I need the source for that one?… would I by any chance have to regenerate all the images in DZ Composer?

From: Kirupa Chinnathambi
Sent: Wednesday, March 19, 2008 6:10 PM
To: Arturo Toledo
Subject: RE: Making the DeepZoom bigger

Both the XAML file and (I think) the HTML file�

From: Arturo Toledo Sent: Wednesday, March 19, 2008 5:45 PM
To: Kirupa Chinnathambi
Subject: Making the DeepZoom bigger

Hi Kirupa

The DeepZoom with my presentation is 1024 x 768.  What do I need to change to make this bigger?… the XAML file?  The HTML file?…

Thanks!

Hello! I just wanted to write a note of THANK YOU for your super nice comments on my MIX08 session. I really appreciate your feedback. Yesterday we were sent the results from the eval forms and my session got:

Average Eval Score – 8.66
Overall Satisfaction – 8.54
Effectiveness of the Speaker – 8.77
(out of 9)

I just feel really grateful for some of your comments and more than posting this to highlight the good session it’s a reference for you, trainers, book publishers, faculty members to use this session for your own purposes. I guess the comments simply validate that the approach for the session connected with designers.

• I appreciate the very fast pace, given that we can view the presentation on line. Thanks! Also loved the “deep Zoom” alternative to boring powerpoints.
• Good over view on how to get off the ground.
• Amazing/fast /valuable. Best for designers of conference.
• Cool
• Made the whole show “worth it” for me. AWESOME!!! I wish this session had lasted all day.- this is the kind of staff that will made adobe-using designers into “converts” great job!
• Excellent session! (from a developer)

To keep this objective, I got to think about the key things that made this session successful:

1. Fun assets. In this one I feel I’m describing this as “wearing designer clothing” … I used assets by Dan Cook, Celso Gomes, Sam Paye and Kim Sealls. All great designers/artists.
2. DeepZoom instead of Powerpoint.  Thanks Kirupa (PM for Blend) who helped me create the DeepZoom experience to use instead of Powerpoint.
3. Fast paced session. Quick snippets of knowledge… the session included answering the some 20-30 typical questions from designers new to Expression Design/Blend. We didn’t take more than 5 mins on a topic. We did “design” during the session… we not only showed features but tried to do with style
4. It was a technical session. No marketing… the marketing was achieved by having a fun session but not by talking beauties about the tools… simply showing them.
5. We used Flash as a reference. I tried not to add “adjectives” like better, worse, faster, slower etc etc… but simply used Flash as a point of reference to explain certain concepts in Expression Blend. I remember a couple years ago we didn’t use this approach when talking about our tools and platforms to designers. Now that the tools are more mature we can more comfortably use Flash as a point of reference. For example: “Where are my Movie Clips?!”… or “Screen transitions in Flash”… and them map those concepts to our Silverlight world. Sometimes there are no easy answers like: “where is my Stop(); GoToAndPlay(); GoToAndStop(); GoToFrame();”…  no easy answer here. But tacklind down these questions proactively, from Microsoft to designers, will continue helping us engaging better.

You can find the assets for the session here and the video for the session here.

I’ve posted a summary of the MIX08 event with the items I believe are most relevant for Designers.  Check it out here…

We had good times this Thursday at Building 33 with lots of folks who are interested in Silverlight. It was fun to be there presenting Silverlight Workflow. The session  assets are here. You can also get the mini Lotto application that we used to give away prizes during the event.

In this event everyone learned something new, me too. At some point in the presentation (when I showed Visual Studio for the first time) some one in the audience said, “hey, can you increase the size of your font? we cannot see the code back here!”… and of course since I never demo Visual Studio or code, I totally didn’t know how to “increase my font size”… was it something in Windows? but then a heavenly voice said: “You can do it in Visual Studio”… and of course I asked, how do you that?! and the heavenly voice said, just go to Options, Fonts… etc… and voila… from 10 or 11pts I was using I went up to 16 pts… like I said after this incident… “that’s what you get when you have a Designer using Visual Studio :)” … (Blend has a gorgeous Workspace Zoom feature that helps me do this easier hehe)…

Thanks everyone who attended the session. Thanks for the feedback about our tools and platform and for all the questions.

The Converted is now supporting Silverlight conversion from SWF. They continue to support WPF conversion too… this is nice little tool, “smartly” tag priced at $48…  why $48?!, why not $49 or $47.33?  Is that the way it works in Canada? … anyway, they have a very cool gallery with conversion samples…

Electric Rain has a more ambitious project though… it’s called Harmony… it’s in the oven but we should hear about it soon.

If you want to find more XAML converters, the master is Mike Swanson. He leads most of our interactions with software vendors related to XAML adoption and has also put together some cool events like the XAML Conversion Contest. Photoshop to XAML? Autocad’s DWF/DXF to XAML? OBJ to XAML? 3DS, Lightwave to XAML?…  they have it all there…

So, I’ve kept poking around with some ideas for this blog… I just decided I don’t want to do a typical blog with text like the one you are reading right now… (my backend blog posting, management environment might remain WordPress but I want to do something different with the UI). I’m thinking in doing something less common. Might be a good excercise to find new ways to express the UI of a Blog. I have so many sketchbooks so I’m leaning towards a more visual blog.

One of the things I like is doing charts and diagrams… perhaps due to my background as an architect (not software but “house/building” kinda architect)… I’ve done some of the graphics and charts for my team here in Microsoft like the Silverlight poster I designed for MIX07. I like to do those kind of charts or graphics as design exercises so what I’m thinking is doing my blog using charts… small, little, long, tall… I’m trying to define how these will be layed out in the browser space… spread out? in clusters? with any timeline ordering? coloring? animation?… Even if the blog becomes graphic driven I still want to enable syndication (RSS)… how will I achieve that?…  there are more questions than answers but I’ll be taking little decisions soon. That is good way of designing, break down the problem in little problems. I like to walk or run while I think about a design… visualizing while doing a physical activity helps me isolate for the real world and immerge myself into a “conscious dream”.

It has been a while since I wrote a blog post except for my personal blog … I used to have a pretty good one called multimediaDev.net but I stopped posting a couple years ago after I joined Microsoft. Now it’s time to come back so I’ve killed that old blog and have moved to this brand new domain artu.tv and with a new hoster: webhost4life.com. I used to be with Brinkster and I’ll miss them since they always had good services and their website/control panel design quality and style are outstanding compared to most hosters out there. Anyway, WebHost4Life offered a great deal… unlimited bandwidth, latest Windows server technologies, tons of storage space, good price and in particular (and the main reason I left Brinskter) is WebHost4Life does allow you to modify permissions to files and folders yourself!. Too simple as it might sound for some of you web server experts for me, a non expert this was a huge deal. I’ve been with other hosters and they didn’t allow you to set permissions so everytime I wanted to set new permissions I had to go and call support. Now it’s easy as I can do it myself.

I tried to install Community Server (second reason why I moved to WebHost4Life) but it took me a full day to get it done. Once I did, I found it a little hard to customize… I have not given up and will keep on studying to make it look the way I want.

In the meantime I have installed WordPress. It is not the end-to-end community solution like Community Server but well, it gives me the blogging feature which is my top priority right now.  The default template that is included in WordPress is pretty good and allows for customization. I was able to use Expression Web to customize CSS which I loved. The Manage Styles task pane in Expression Web made my day as it helped me find the styles I needed to modify. I started looking for the styles that corresponded to Header, Side Bar etc and just couldn’t find it clearly in the code so this feature in Web helped me find them visually.

WordPress uses PHP and the very smart community that creates it wisely separated the CSS in an external file so I really only had to use Expression to tweak things and voila. I also used Expression Design to create the header graphic (I use Design for all my vector artwork like cartoon characters) and then exported as PNG and used Adobe Photoshop to add some effects and to prepare the image for the web. I want to continue making my blog look better… for example, one of the things I want to do is make the header a Silverlight animation… may be make the character blink eyes and the lens flare move around… I’m sure you’ll all immediately notice when I do this… it’s hard not to see the difference between a static PNG image and a fully animated Silverlight experience.