Skip to content
July 13, 2010 / Joe Osborne

Cracking Open the Design Toolbox + Free Stuff Returns

Welcome to our new Microsoft Student Insider feature series, Cracking Open the Design Toolbox. Each week (hopefully) we’ll follow my blunders progress through Microsoft’s new Silverlight powered, interactive and socially connected tutorial – that doubles as an achievement driven game – design.toolbox. Not to mention we’ll also provide you tips and tricks on how to access the Expression Studio and how to get started creating some super cool apps, projects and more!

Before even thinking about diving into the design.toolbox, you’re going to need to do two things. First, you’ll need to go here and create a Windows Live ID (if you don’t already have one). This is how you’ll access the design.toolbox, create your profile and avatar and get schooled in design. Second, you’ll need to download and install the Silverlight plug-in on whatever browser you’ll be accessing design.toolbox. As everything in the design.toolbox is running on Silverlight, this is pretty much crucial. Now that the essentials are over with, join us behind the cut as we get into the fun stuff!

Say hello to my little friend (always wanted to say that)!

Once you got this covered, it’s time to create an avatar. Now, you might be thinking, “Sweet, I can just import my Xbox Live Avatar!”

Hold your horses! This is Silverlight we’re talking about here, not XNA Game Studio (though, you can create some pretty awesome 2D games in Silverlight. Hopefully that comes later!). However, these avatars are absolutely adorable and, in my case, extremely accurate. Creating your avatar is simple: just select your little alter ego’s skin tone, hair style, clothes and accessories through the easy to use tabbed system and save it. You can always change this later if you like by clicking the “view profile” button on the bottom left of just about any given screen within design.toolbox.

Now that you’ve created your cute little buddy, it’s time to get to the nitty gritty: the design school. The design.toolbox school follows two tracks: principles and scenarios. The principals track is designed (see what I did there?) to teach you the fundamentals and later advanced practices for good design through a series of instructional and sometimes inspirational videos. This includes everything from attractive and evocative use of color and typography to considering your target audience in all aspects of your project.

A quick look at the avatar creation screen

The scenarios track houses a series of mock projects using the Silverlight browser preview app coupled with how-to videos by prestigious designers. The idea is to follow along the video using the Silverlight browser preview app couple with each video, but considering the amount of time the videos spend within Expression Blend 3, I highly recommend grabbing Expression Studio (more on this later) and following along there. Don’t worry, the project assets for every tutorial are included just under the Silverlight player within the “Download” button (remember to save them in a place you’ll remember and can easily access).

The first set of principles track videos are essentially Robby Ingebretsen’s MIX 09 presentation cut up into a series of eight to 14 minute clips.

His presentation was three hours long.

While a bit of the fat was cut off, the videos can become tiresome. However, Robby’s words are vital for both newbies and professionals who could always use a refresher (and he’s a pretty funny guy, so that helps). One gripe with the way the principal tracks are presented is the inability to jump back and forth between a video too much before the Silverlight player breaks. This resulted in frequent presses of that handy F5 key, which turned out to be a bit of a nuisance. The same goes for what we’re going to cover next, my experience with the scenarios track.

This is where you decide where to take your design training next.

The scenarios track modules aren’t much more than videos that allow the user to follow along using the nifty Silverlight preview web app. However, I again highly recommend using Blend 3 to follow along step by step with the tutorial. Unfortunately, this will surely cause you to run into the same problem as before: the Silverlight player tends to get wonky after one too many pauses or rewinds. Regardless, following along directly through Blend rather than simply watching was much more helpful. Think of it as taking notes during class; it commits the information to memory.

This is exactly why design.toolbox deserves applause: for including the assets for each project just beneath the Silverlight player. I’ve always preferred getting hands-on with my learning, which is half of what design is all about and the folks behind design.toolbox clearly understand that.

So, how exactly does one acquire Blend 3 to follow along with the training program? Well, you can win a free trial of Microsoft Expression Studio 3 right now for starters. Just create a design.toolbox account, direct us to your profile page and let us know what you think within a comment. We’ll give you a week for this one. That is, until May 14, 2010.

For you students out there, hang tight as we’ll more information soon within a dedicated post on how to access Expression Studio 3 for free. Yep, that’s right. Just for being a student. Keep your ear to the ground… or eye glued to the screen. Whatever works for you.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: