UPDATE #1: someone asked for the rest of the ResourceDictionary. It’s very basic, but here it is if you’re interested. Basically, it just contains sections for the various types of resources you might create.

Here’s a little time saver. I sort of have a routine that I go through when I create a new WPF project. One of those things is to create a resource dictionary (I’m down to one on most projects now, but more on that later) that includes some common stuff that is nice to be able to depend on while your cranking out XAML.

Among those, are these super simple geometry resources:

<Geometry x:Key="DownArrow">M0,0 L1,0 0.5,1Z</Geometry>
<Geometry x:Key="UpArrow">M0,1 L1,1 0.5,0Z</Geometry>
<Geometry x:Key="RightArrow">M0,0 L1,0.5 0,1Z</Geometry>
<Geometry x:Key="LeftArrow">M0,0.5 L1,1 1,0Z</Geometry>
<Geometry x:Key="CloseX">M0,0 L1,1 M0,1 L1,0</Geometry>

Simple, but handy when you (inevitably) need to bust out an arrow for some reason. You use them like this:

<!-- DownArrow -->
<Path Data="{StaticResource DownArrow}" Width="10" Height="8"
  Stretch="Fill" Fill="Black" />

<!-- CloseX -->
<Path Data="{StaticResource CloseX}" Width="12" Height="12"
  Stretch="Fill" Stroke="Black" StrokeThickness="3" Margin="10" />

All together, they look like this:

The geometries themselves all happen within a real coordinate space of a pixel, so it’s important to set the Stretch property to Fill, that way the geometry with stretch to the size of the Path element.

Unfortunately, this is WPF only. Silverlight (SL2 at least) doesn’t like to work with Geometries as resources. If someone tries it out in SL3, let me know how it goes.

UPDATE #2: Dr. WPF (ironically) suggested a sweet workaround for Silverlight. Instead of adding the resources as Geometries, add them as strings, like this:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib">

  <Grid.Resources>
    <sys:String x:Key="DownArrow">M0,0 L1,0 0.5,1Z</sys:String>
    <sys:String x:Key="UpArrow">M0,1 L1,1 0.5,0Z</sys:String>
    <sys:String x:Key="RightArrow">M0,0 L1,0.5 0,1Z</sys:String>
    <sys:String x:Key="LeftArrow">M0,0.5 L1,1 1,0Z</sys:String>
    <sys:String x:Key="CloseX">M0,0 L1,1 M0,1 L1,0</sys:String>
  </Grid.Resources>
</Grid>

The usage from XAML is then exactly the same as WPF. Nice one, doc!

Funny how your own site is always the lowest priority when your job is to create websites for other people. It’s like the auto mechanic with the broken down car. Well, last week (while I was on vacation with the family) I was finally able to sneak a couple of hours to get the site for Pixel Lab (that’s my budding young company) out the door. You can see the (kind of) finished product here.

I say kind of because I haven’t had a chance to build out the “case studies” section under services yet and, frankly, that’s probably the thing people want to see. For now, I’m just happy to have something live! Case studies will be coming soon.

It’s fun to be your own client. The design reasoning went something like this: first of all, it’s a lab, so it needed to be kind of sciency. For me, the quintessential science feeling happened in labs in the late 50s and 60s. The feeling I wanted is something like Flubber meets Heisenberg. So, I was drawn to retro science photographs and equipment.

It turns out that there is also a very strong design aesthetic associated with that era: the International Typographic Style is an an aesthetic that has, arguably, become an archetype of design. It’s instantly recognizable as Design (notice the capital “D”). International typographic (sometimes called “swiss style” or “swiss typographic”) is known for strong order, use of grid, black and white imagery, bold colors and, most of all, Helvetica (and a handful of similar fonts).

So, I was settling in on a style: swiss typographic + retro science stuff. It was a nice package, all from the same era. To move the aesthetic forward a little, though, I introduced a second font (the one that matches the Pixel Lab logo) for the main headings on each page and I built out some gradients (some softening on the pixels in the logo and highlights on the zoomed in content), and added a bunch of motion. Then I went about building content.

For fun, I also played around with some sound. I’m not normally a fan of a lot of sound, but my wife had to talk me down from actually using music! So, I got a little caught up in the whole sound thing I guess. In the end, sound is off by default because I still haven’t gotten it quite right (plus as we all know, sound can be a little annoying if you weren’t expecting it). I really like how sound can influence a mood though. The song I was trying to cut up for a soundtrack, by the way, was “Don’t Give Up” by Whites Boy Alive. It’s a cool song and the perfect mood for the site. I think my wife was right, though, that not many people can pull of a soundtrack on a website (although, for the record, Scott Hansen can).

At a technical level, I learned some stuff about sound and wrote some handy code that is worth sharing so expect a forthcoming post on Silverlight and sound effects.

Incidentally, the design happened quickly on this one. It was much less labored than other designs that I’ve done with myself as the client. I’ve been trying to figure out why that would be. Perhaps inspiration just struck, but I also keep being reminded of Hillman Curtis and the emphasis that he places on discovering a theme. With this project, I discovered the theme early on and I think that may have made the difference.

Either way, it was a fun project and, even if there is still a little more to do, it feels great to have it live. So, let me know what you think!

I found out today that my MIX09 worskhop is now officially online. I won’t lie, it’s kind of long. The session is three hours of what I wish I had learned about design when I jumped on the design wagon train.  You’ll either want to do this one an hour at a time or else prepare some snacks.

By the way, thanks to the Microsoft guys (Jaime and other folks) who made sure this recording got online. Initially, since it’s a workshop, it was not going to be posted. Normally workshops and precons don’t get recorded or posted. Microsoft really went out of their way, though, to get this one out there (after we found out it had been recorded by accident). Maybe they realized that this is a tough year to be budgeting for addons (like workshops) at conferences and there are probably people who would have liked to have attended.

I guess we also want to thank the attendees who asked to get it online. I think that enough people clamored to get it up there. So, thanks guys!

1. Stickers
For those of you who have submitted haikus, it’s finally sticker time. I’ll be mailing them out in about a week. Between now and then, please send me a physical address where I can send the sticker. Also, let me know how many you want. No reasonable request will be refused (where reasonable maxes out at about 8 or 9) You can use the email address robby@kaxaml.com. For those of you who didn’t submit a haiku, well, it’s not too late. By the way, I gave away about half of the stickers away at MIX. Wow, that’s 500 stickers (but looks like approximately 1 wheelbarrow full) so I was pretty happy.

2. Video from the workshop
The good news is that the workshop was recorded. It must have been meant to be, because not all of the workshops were recorded, but (mostly by a stroke of luck) mine happened to be one of the lucky few to end up on tape. The bad news is that the first pass at encoding the video produced pretty poor audio. The good news (last one, I promise) is that it is being re-encoded and should probably be live sometime next week. Sweet!

3. Kaxaml and Silverlight 3
The latest beta of Kaxaml works with Silverlight 3 with you doing anything. That said, I’m looking to expand the support and finally bump SL support out of beta. Unfortunately, Kaxaml takes a back seat to paying gigs these days so the best way to get a new release of Kaxaml is to not hire me.  Wait a minute…I mean, if you hire me then I’ll hurry and get you a new release of Kaxaml. I’ll even customize the colors for you.

Realistically, I’m hoping to get a new version out the door in the next few weeks. If you have features or bug fixes that you really care about, now is a good time to let me know. You can send feedback to bugs@kaxaml.com

4. Great conference, see you at others
Well, once again, great conference Microsoft. Looking back, I think it’s my favorite MIX yet and I’ve been to all four! It even beat MIX06 (which has a special place in my heart since it was, well, the first one). I have budget for one or two more conferences this year. One will probably be the PDC. Does anybody have suggestions on the other? I’m currently debating between FITC (Toronto) and Web 2.0 Expo (New York). Hope to see you there!

My hats of to Microsoft today for putting on a truly inspiring keynote. Deborah Adler shared her story of redesigning the little orange prescription medication pill bottles that we’ve been using for the last 50 years.  I love that story and I had heard it before, but to get it straight from the designer was a real treat. It’s an incredible story and shows the real impact of design, an impact that truly improves (even saves!) lives. I was also happy that she emphasized the importance and the power of empathy, putting yourself in the shoes of the consumer of your design.

More importantly, I felt like today’s keynote with Deborah Adler and yesterday’s with Bill Buxton spoke volumes about Microsoft’s commitment to design.

To be sure, a decision to spend 60 minutes of a 90 minute keynote with a non-technical designer was not taken lightly. There were big risks. And if you watched the tweets during the keynote, you probably saw some of them playing out with many people questioning the value of the keynote (in addition to the many more who were praising it). I can’t help but feel like the venture paid off, though. I was invigorated by the content and encouraged by Microsoft’s commitment to it.

These are some of the other things I’ve seen Microsoft do this year to further the voice of design at the conference and in their products:

• They’ve arranged a special screening of Objectified here (the second in the country?) and managed to get Gary Hustwit on stage for Q&A
• They gave a copy of Bill Buxton’s book to every attendee.
• They introduced features like SketchFlow, Photoshop import, Illustrator import and others into the next version of Blend, features that are clearly a direct response to feedback from the design community.
• They gave us features in Silverlight like effects, perspective 3D, and H.264 video, all features designed to further the fidelity of experience that we deliver on that technology.
• They gave me three and a half hours to introduce developers to design principles! (as well as at least a dozen other design focused talks).

I thought I heard Bill Buxton saying something yesterday about over half of the audience in the keynote being designers. Did I get that right? That’s a big number. Well, it was a good day to be a Microsoft designer.

By the way, for folks who attended the workshop, Debora Works for Milton Glaser, the same guy who created the Bob Dylan poster we talked about in the discussion about design vs. art. That was him sitting at the computer with her working on the new icons in the news story she showed.

I just picked up the stickers and they turned out great and they also turned out in abundance. Who knew that 1,000 stickers is really about 5,000 stickers! So please take them from me. Track me down at MIX or submit your haiku!

UPDATE: just wanted to make sure that everyone knows this intended to be funny.  These are actually BAD tips. I only mention this because a couple of the comments seemed to indicate that people didn’t know that. On the other hand, maybe they just beat me at my own game and made serious sounding comments that were actually jokes so the joke is on me. Hmm.

It’s that time of year again when many of us are dusting off that old wireless mouse w/ built-in PowerPoint clicker and gearing up for some public speaking. For those of you giving talks, I thought I’d share some of my top tips for a successful presentation. Let’s get those speaking scores up, folks!

1. Remember that you’re the expert

For starters, it can be intimidating to stand in front of a room full of people waiting to hear what you have to say. One thing that helps me is to remember who’s the boss in that room. It’s me (unless you’re the one speaking, then it’s you). Intimidate me? I’ll intimidate you. That’s what I say. Don’t be afraid to use words that you know people won’t understand or to say things in a way that makes you sound smarter than they are.

2. Dress up

They don’t call it a power tie for nothing, and it goes perfectly with PowerPoint. Want to sound smart? Start by looking smart. Want to be in good form? Why not some formalwear? It’s much better to be overdressed than underdressed. And men, don’t be afraid of a little aftershave!

3. Structure = bullets

Look, if bullets didn’t work, people would have stopped using them a long time ago. A combination of words and bullets is much more effective than words alone. Think of your talk as a highly structured conversation. Without bullets, where’s the structure?

4. Memorize, memorize, memorize

Can I paint a picture for you? Imagine a great talk that you’ve seen recently. Got it? Now re-imagine that talk except the speaker is reading the talk from a stack of papers. Not as good, right? It’s that simple: GREAT PRESENTERS DON’T READ, THEY MEMORIZE!

5. Talk faster, use jargon

One metric that I find useful is to estimate the cost per minute of my talk. Let’s say 400 people, each paid $1000 to be there. That’s over $6000/minute to hear me talk! Don’t waste that time. Two easy ways to maximize your minutes: talk faster and use “insider” words as shortcuts for complex concepts.

6. Use similes instead of metaphors

It’s a subtle difference, but a simile includes words like “like” or “as” where metaphors skip those helper words altogether. Without those words, the meaning of what you’re trying to say can get lost. Here’s an example: “XAML is like HTML” versus “XAML is HTML.” Which one makes more sense? I’ll let you decide.

7. “I feel a song coming on…”

I won’t lie, it’s not easy to sing in front of strangers but I’ve found that if you have a song in your heart, the audience will appreciate your candor and honesty when you actually sing it out loud. Don’t be afraid to get emotional. That’s the kind of connection that separates the good sessions from the great.

Alright, let’s keep it to seven for now—an easy number for memorization (see #4).  Best of luck to presenters and here’s to a great conference season!

If you’ve been following me on twitter at all this week, you know that I’ve fallen off the typography deep end.  I’ve been working on the typography slides for the workshop at MIX and become, well, a little obsessed (and/or annoying depending on how long you’ve been in a room with me).

I’ll refrain from the barrage of links that is my twitter feed, but here are two videos that show the impact of type as a visual element.  Interestingly, the videos (as far as I know) are unrelated to one another but share a very similar retro aesthetic.

The first is from this guy and his whole portfolio is incredible, but this one stands out. Really amazing motion. What’s black and white and Helvetica all over? This.

Is there any meaning to the text? It isn’t clear to me if there, but it is interesting to see how individual words can have an impact. Our brains read fast and we can consume words almost like pictures so if you see a strong word like SPEED, it conjures emotion the same way an image might.

The second in a Nina Simone video.  The interesting thing to watch here is how the type is matched to qualities of the singer’s voice so that letterforms become very emotionally connected to qualities of the singing.

Pete took me up on an my challenge to make a VS plugin for XAML Scrubber (the XAML cleanup utility in Kaxaml), a challenge which apparently I extended in this video with Adam Kinney.  I’m glad he did.  This is awesome. 

Thanks Pete! It’s great to see how a community can extend something do. XAML Scrubber just doubled (maybe tripled) its utility to me!

One more. Along those lines, I was flattered that Page Brooks wanted to include my Silverlight snippets in the super handy Silverlight Contrib project. Nice! Way to go XAML community.  We’re awesome.

I just came across this great addition to the already very cool Kuler color picker app (which is, in case you haven’t seen, now Expression friendly).  It’s a visualization of color additions by season and geographic location.  The impact of culture and season on the palette seem to be subtle, but some interesting trends emerge (like a bias toward blue in the US and one toward pink in Japan).  Whether it varies much or not, it’s fascinating to see color choices laid out like this.  There seems to be an affection along the “temperature” poles—blues on the one hand and warm reds and oranges on the other.  The more ambiguous hues—the greens and purples—appear to be used more selectively.

Data viz is seeing it’s day and this is a striking example.  That’s partially due to a great dataset that lends itself well to visualization.  But it’s also a great execution.  Nice job Kuler!