Pixel Lab Silverlight Site Launched

image

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!

17 comments

Leave a comment

MIX09 Workship is Online Now

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.

image

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!

16 comments

Leave a comment

MIX Follow-ups

image 

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!

4 comments

Leave a comment

Best MIX Keynote Yet

image

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.

image 

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.

 

6 comments

Leave a comment

Kaxaml Stickers Have Entered the Building

image

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!

7 comments

Leave a comment

Tips for Presenting

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!

4 comments

Leave a comment

Type in Motion

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.

Well, stay tuned for the workshop for more on typography. If you can’t come to the workshop but still want to chat about this stuff, track me down!

3 comments

Leave a comment

XAML Scrubber for VS

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.

2 comments

Leave a comment

Fascinating Color Visualization on Kuler

image

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!

1 comment

Leave a comment

Silverlight Code Snippets for DependencyProperties and other Handy Stuff

image

Download The Snippets Now (provided for the reading averse)

I was teaching someone about DependencyProperty the other day when I realized two things: first, DependencyProperty is a bad name.  Does anyone know what they depend on (DependencyObject doesn’t count)?  The dependency thing makes them sound kind of wimpy when, in fact, they’re actually awesome.  Going forward, you can use the terms DependencyProperty and SuperProperty interchangeably with me.

Second, I realized that there isn’t a good built in snippet for Silverlight DPs (or SPs). At least not one that I know of.  And without a snippet, whose going to bother to create a DP.  Seriously, it would be a pain.

I’m a snippet enthusiast or, dare I say, a fanatic.  It’s because I think that a good snippet library makes for good code: it makes your code consistent and it encourages you to do things the “right” way even if “right” requires a lot of code.

I’m such a snippet fan, in fact, that I devoted my talk at MIX last year to the subject.  Unfortunately, a lot of the snippets from the talk have grown stale.  In the meantime, I’ve been building out a new library.  For WPF, I use Dr. WPF’s indispensible snippets.  For Silverlight, I’ve slowly been building up a new library.  Since I haven’t been able to find much else out there, I thought I’d share mine.

Download The Snippets

If you’re new to VS snippets, you can get the skinny here.  To use them you just install the .vsi (see link above) and then type the snippet shortcut (e.g. sldp), hit tab a couple of times to kick off the snippet and then start providing the values it asks for (hit tab to move between values).  When you’re done, hit enter.

The Short Descriptions

Here’s the short guide to the snippets.  A little more detail follows.

sldp A basic Silverlight DependencyProperty
sldpc A Silverlight DependencyProperty with a property changed callback
sldpa An attached Silverlight Dependency Property
slevent A really basic event definition
slsbc An inline, anonymous Storyboard.Completed handler (check this one out, it’s cooler than it sounds)
slpanel A really simple implementation of a panel
slrss A super basic collection class that loads an RSS feed
slvc The boilerplate code you need to create a value converter

The Long Descriptions

sldp

This snippet creates the most basic DependencyProperty (i.e. SuperProperty) possible (well, most basic possible that is still useful).  You just specific the name, the type and the default value. Helfpul hint: remember that when you provide a default value for a double, you need to include the decimal (like in 0.0 instead of just 0) so that the compiler treats is like a double and not an int.

#region MyProperty (DependencyProperty)

/// <summary>
/// A description of the property.
/// </summary>
public int MyProperty
{
    get { return (int)GetValue(MyPropertyProperty); }
    set { SetValue(MyPropertyProperty, value); }
}
public static readonly DependencyProperty MyPropertyProperty =
    DependencyProperty.Register("MyProperty", typeof(int), typeof(Page),
      new PropertyMetadata(0));

#endregion

sldpc

This is a DependencyProperty that includes a a place to handle the associated property changed notifications (and a protected method in case subclasses also want to know about the change).

#region MyChangingProperty (DependencyProperty)

/// <summary>
/// A description of the property.
/// </summary>
public int MyChangingProperty
{
    get { return (int)GetValue(MyChangingPropertyProperty); }
    set { SetValue(MyChangingPropertyProperty, value); }
}
public static readonly DependencyProperty MyChangingPropertyProperty =
    DependencyProperty.Register("MyChangingProperty", typeof(int), typeof(Page),
    new PropertyMetadata(0, new PropertyChangedCallback(OnMyChangingPropertyChanged)));

private static void OnMyChangingPropertyChanged(DependencyObject d,
    DependencyPropertyChangedEventArgs e)
{
    ((Page)d).OnMyChangingPropertyChanged(e);
}

protected virtual void OnMyChangingPropertyChanged(DependencyPropertyChangedEventArgs e)
{
}

#endregion

sldpa

This is a snippet for an attached DependencyProperty.  That means that this value can be set on any element (e.g. Canvas.Left is an attached property defined by canvas to be set on other elements).  This also has property changed handler, but notice that its a static.  That’s because the change could happen on any object so you’ll want to pay attention to the DependencyObject that gets passed in to the handler.  That’s the object where the property was changed.

#region MyAttachedProperty (Attached DependencyProperty)

public static readonly DependencyProperty MyAttachedPropertyProperty =
    DependencyProperty.RegisterAttached("MyAttachedProperty", typeof(double), typeof(Page),
    new PropertyMetadata(new PropertyChangedCallback(OnMyAttachedPropertyChanged)));

public static void SetMyAttachedProperty(DependencyObject o, double value)
{
    o.SetValue(MyAttachedPropertyProperty, value);
}

public static double GetMyAttachedProperty(DependencyObject o)
{
    return (double)o.GetValue(MyAttachedPropertyProperty);
}

private static void OnMyAttachedPropertyChanged(DependencyObject o,
    DependencyPropertyChangedEventArgs e)
{

}

#endregion

slevent

This snippet creates a really simple event.  I use the RoutedEvent types even though (as far as I know) they aren’t actually routed.  There may be a better practice here, but this meets my needs 90% of the time.  Feel free to let me know if you have a better suggestion.

#region SomethingChanged

/// <summary>
/// A description of the event.
/// </summary>
public event RoutedEventHandler SomethingChanged;

private void RaiseSomethingChanged()
{
    if (SomethingChanged != null)
    {
        SomethingChanged(this, new RoutedEventArgs());
    }
}

#endregion

slsbc

This snippet creates an inline completed event handler for a storyboard using an anonymous delegate. I like this approach for handing completed events because it makes it straightforward to remove the handler (thanks to Dr. WPF for that suggestion) and it allows you to access local variables from within the handler.  I haven’t found a clean way to do either of those things any other way, so I end up writing most of my Storyboard event handlers this way.   By the way, the delegate has to be declared first like this so that we have a reference to it (to remove it) from within the handler.

// using an anonymous, inline handler for the completed event allows you to use 
// local variables from within the event handler and keeps our code cleaner

EventHandler handler = null;
handler = delegate(object s, EventArgs e)
{
    // remove the handler 
    MyStoryboard.Completed -= handler;

    // code to execute when the storyboard is completed goes here
};

MyStoryboard.Completed += handler;
MyStoryboard.Begin();

Note: The rest of these snippets are much longer so I’m not going to include them inline.  You’ll have to download them to check them out.

slpanel

This snippet creates an entire panel, including very very basic implementations of MeasureOverride and ArrangeOverride.  To be clear, this is not a robust panel implementation.  MeasureOverride, in particular, is not going to give you the results you probably want in advanced scenarios (like inside of a ScrollViewer).  But this will get you started.  It’s gets the boilerplate out of the way and lets you start partying on the layout logic really quickly.

slvc

This snippet creates a shell for a ValueConverter which you can use in conjunction with a binding to modify a value during the binding process.  It’s an entire class (like the panel) so you’ll want to make sure you use it in the right spot in your file.

slrss

This snippet creates a very simple collection out of the items in an RSS feed.  You provide the URL and this does the rest.  It’s a great way to quickly get up and running with a databinding scenario.  I mostly use this for training, etc.  It’s also a simple example of how to parse an XML feed using LINQ and how to load a file using the async web request stuff.  Oh, and it includes the content for a simple crossdomain.xml policy file.  It’s kind of a grab bag but I kept it around bits of it from time to time.

16 comments

Leave a comment