It turns out that being a freelancer is about twice as much work as you expect.  It’s been fun, but it’s been really busy.  So, Blog, sorry if you feel a little neglected.

If it makes you feel better, I’m about 1200 items away from being caught up in Google reader.  You’re not the only one being neglected (oh, and hi honey if you’re reading this).  So, you’ll forgive me if I’m a little late responding to this awesome post about multi-input shaders on Greg Schechter’s blog.  Did someone say blend modes?

If blend modes weren’t the first thing that came into your mind when you ran across that post, don’t feel bad.  Caring about blend modes isn’t intuitive.  In fact, it’s kinda hard to do.  So here are some quick thoughts about why I think they are rock and roll…get ready to hop on the blend modes bandwagon.

Blend Modes Defined

I’m not an expert here and if you want to know more, then you may want to check out this or this.  My practical understanding, though, is that blend modes give you the ability define how a layer visually interacts with the objects below it.  We’re used to a really simple blend mode (although I’m not sure if it actually counts) when we set the opacity on something and can see the content below it.

When we do that, somewhere some math is done that combines the value of the pixels of the object where set the opacity with the pixels that were below it.  WPF and Silverlight support one version of that math, the “normal” one.  If you’re going to support one, that’s probably the right one.  Photoshop supports something like 25 different ways to do that math and Flash supports a bunch too.  These are blend modes and they have names (like Color Burn, Linear Burn, Overlay, Vivid Light, etc.).

Why Blend Modes Mattter

So what’s the big deal?  For a lot of scenarios, there isn’t one.  Regular transparency blending is often exactly what you’re looking for.  On the other hand, once you start thinking in blend modes they start to pop up every where, much like transparency or rounded corners.  You didn’t think you cared until you had them (or noticed that everyone else was using them).

I have a couple of favorites, but a top pick (at least in Photoshop) is a mode called Linear Burn and I think it has some good application to UI.  First, here’s a simple example of layering an orange square over a paper texture.

You can see how the best we can do with the standard transparency blending (the Opacity Overlay) has the effect of “evening” out the texture of the paper.  We lose a lot of the contrast information as everything fights to be a little bit orange and a little bit paper.

Check out the Linear Burn, on the other hand.  When we apply that guy, we keep that contrast but do so in an orange kind of way and the result is much more vibrant and a much better texture.

Why Blend Modes Mattter for UI

There are tons of applications to UI, but a semi-geeky one is that this “dimming” effect of regular blending makes it much more difficult to create generic designs that can be colored or manipulated at runtime.  Here’s a concrete example: you’ve probably created a template for a button in the past that uses a gradient to produce some depth on the buttons’ surface.  You might do that with a partially transparent white-to-black gradient on top of the button’s background to produce something like this:

Not bad, but look how dim our vibrant green became.  If the consumer of that button set the background to be a very bright green and ended up with this, he might be disappointed.  (By the way, you would probably work around that by not including any white in your gradient.  Now you would have more vibrant albeit relatively dark button, but at least you could keep the original color).

Much nicer, right?  Linear Burn is a good one for something like this but theoretically the sky is the limit.

Multi-input Shaders == Blend Modes Potential

And that’s where multi-input shaders come into play.  With more than one input into the shader, you could combine the gradient and green to produce this or any other smart combination that you could think of.  You just do some math to say how the pixels combine.  Forget 25 blend modes Photoshop or Flash, WPF just gave us infiniti (that was for you Scott Barnes).  That’s essentially what Greg did in his post.  Great job WPF team.

So here’s the thing.  The math for blend modes is pretty straightforward.  It’s probably just a weekend for someone to start building some of these for us.  So, any takers?   Oh, and Silverlight…we’re watching you.

Ed Catmull is a co-founder of Pixar.  He wrote this great article in the Harvard Business Review this month about how Pixar approaches the intensely collaborative and creative process of producing a film.  There are a lot of good parallels to the software process, especially as it relates to creative/technical workflow.  It’s an easy read and there’s a lot of great insight.  Don’t miss it.

I met Ed Catmull a few years ago and I actually got a personal tour of Pixar from him.  He and my dad were college pals and then office mates in graduate school so he set it up for me.  My dad, in fact my dad did the 3D lettering in one of Ed’s earliest movies.  We always called it the “hand movie” because it’s a 3D model of a hand, and I believe was among the first digital movies ever!

Well, the tour of Pixar left a tremendous impression on me.  At the time, they were working on Monster’s Inc. and the digs had been dressed accordingly. The team sat in a warehouse-like inner sanctum in the middle of the building that was filled with Styrofoam caves, monster sketches, giant storyboards, and crazy models.  More to the point, though, it was lit up with conversation and a bewitching kind of collaborative energy. 

So given that, I have an admitted bias when reading the article.  I can’t help but read it through the lens of that experience, trying to extract something about how they created such an intensely creative environment.  For me, the article doesn’t disappoint, although it gets there with some ideas that rub against grain a little.  Here are some of the tamer ones.

On the collaborative nature of creativity:

People tend to think of creativity as a mysterious solo act, and they typically reduce products to a single idea… However, in filmmaking and many other kinds of complex product development, creativity involves a large number of people from different disciplines working effectively together to solve a great many problems. The initial idea for the movie—what people in the movie business call “the high concept”—is merely one step in a long, arduous process…

On taking risks:

To act in this fashion, we as executives have to resist our natural tendency to avoid or minimize risks, which, of course, is much easier said than done… If you want to be original, you have to accept the uncertainty, even when it’s uncomfortable, and have the capability to recover when your organization takes a big risk and fails. What’s the key to being able to recover? Talented people!

On managing creative people:

Of course, most executives would at least pay lip service to the notion that they need to get good people and should set their standards high. But how many understand the importance of creating an environment that supports great people and encourages them to support one another so the whole is far greater than the sum of the parts? That’s what we are striving to do. Let me share what we’ve learned so far about what works.

Creative power in a film has to reside with the film’s creative leadership. As obvious as this might seem, it’s not true of many companies in the movie industry and, I suspect, a lot of others. We believe the creative vision propelling each movie comes from one or two people and not from either corporate executives or a development department. Our philosophy is: You get great creative people, you bet big on them, you give them enormous leeway and support, and you provide them with an environment in which they can get honest feedback from everyone.

On the magic of technology (nerd) + art:

Getting people in different disciplines to treat one another as peers is just as important as getting people within disciplines to do so. But it’s much harder. Barriers include the natural class structures that arise in organizations: There always seems to be one function that considers itself and is perceived by others to be the one the organization values the most. Then there’s the different languages spoken by different disciplines and even the physical distance between offices. In a creative business like ours, these barriers are impediments to producing great work, and therefore we must do everything we can to tear them down.

Walt Disney understood this. He believed that when continual change, or reinvention, is the norm in an organization and technology and art are together, magical things happen. A lot of people look back at Disney’s early days and say, “Look at the artists!” They don’t pay attention to his technological innovations. But he did the first sound in animation, the first color, the first compositing of animation with live action, and the first applications of xerography in animation production. He was always excited by science and technology.

Alright,  I’ll let you read the rest.  Don’t miss this one.

This should not be missed.  Project Rosetta is only a couple articles old, but I’m already finding a lot of inspiration and useful content there.  The first article is supposed to be for Flash to Silverlight converts, but I think the application is way broader.  I’m better off for having read it and I never really was much of a Flash guy.  It’s just a bunch of really useful concepts crammed into 9 really straightforward lessons.  It makes you realize how much fun all of this stuff can be.  Next step: be more like Rick.

This is neat.  They took weather (the proverbial most complicated thing ever) and reduced it to a simple yes or no.  Not everything can be this simple, but this manages to answer a relevant question and stay really useful.  That might be a good axiom of reduction: stay useful.

Where Umbrella Today? really shines, though, is on the next page where you can sign up to be notified by SMS (at a time of your choosing) on the days where you do need an umbrella.  Now that’s more than useful, it’s handy (which I believe is about 150% more useful than just useful on its own).

I’ve got it.  Check out a preview of the new visualization that is rumored to be shipping with tomorrow’s new version of iTunes.

Magnetosphere revisited (audio by Tosca) from flight404 on Vimeo.

USA Today, eat your heart out!  This is an incredibly beautiful animated short that depicts a 1969 interview between John Lennon and a young man who had snuck into his hotel room during John’s “bed-in” for peace phase.  The animation has a unique stream of consciousness approach to illustrating the dialogue that puts it somewhere between cartoon and infographic.  Notice the very sparse use of color (pink, brown) and incredible aesthetic throughout the whole piece.  Also, note the very thoughtful graphics and how they cleverly enhance the meaning of the dialog.  

(More details here.)

Let’s face it readers, you and I are not jocks.  I try to run two or three times a week.  You like racquetball.  Other than that, we’re not really sports people.  Not sports people, that is, except when we catch some serious Olympics fever.  And frankly, moments like this make Olympics fever unavoidable.

After you’ve made time for that (brought to you by Silverlight…yes!), take time to reflect on 84 years of Olympics logos.  My undisputed favorite is Mexico 1968.  I think  that if you look long enough, it might be an optical illusion of some sort.  Yup, there it is.  I just got a flash of the word “Mexico.”

In my mind, there is an undeniable relationship between UI design and graphic design.  They share a similar communication goal and are both concerned with things like layout, color, balance and type.  Whenever I mention that, though, Nate is quick to remind me that, while interaction design may be the adoptive step child of graphic design, its flesh and blood is industrial design.  In the spirit of that relationship, Dan Saffer has started cataloguing interaction inspirations from the real world.  Feeling stumped about an interaction in the software you design?  Find some inspiration at No Ideas But In Things.

The weekend is quickly slipping away.  I had a lot less time to spend on this than I had hoped (I guess that’s how it always goes).  I helped a friend move this morning and it took a little longer than expected and I ended up running some errands, etc.  You know.

Anyway, here’s the visual design for ThoughtBox!  I tried to find colors that would be both calming (the light blue green and soft gray) and yet demand a sense of action (the bright orange).  This is how I would like to think of my task planning…calm, controlled and action oriented (I should write my own book)!  If I actually had been using ThoughtBox, maybe I would have realized how long the errands were going to take today.

As far as type goes, I ended up using Miramonte and Georgia.  Miramonte is one of the “free” typefaces that Ascender included with the WPF SDK.  In the end, that only shows up in the state bar along the top, but it’s a really strong type so it gives the UI a strong anchor up there.

For everything else, I’m using Georgia.  It’s an obvious choice because it’s free and on just about every computer in the world, but non-obvious because it’s a serif font which is kind of unusual for UI.  I think it works though.  Picasa uses Georgia for the category names and I always liked the way it looked.

I’m a big believer if the “Photoshop” step in creating an app and we tend to make a strong investment in this step at IdentityMine and I think it pays off.  On the other hand, I guess it’s possible to over invest here to and that’s why I’m moving on to the next step.  I haven’t worked out all of the kinks with this design yet and we’re going to need to clean up some things, but mostly I’m happy with it.  I think it’s coming together.

In other news, I actually got a jump start on some code.  I forgot to post the comp when I actually finished it.  I don’t think I’m going to finish this weekend, at least not with support for syncing with Remember The Milk (and that’s the ultimate goal), but I should have a working UI done.

Just finished the wireframe for the app.  I built the design around a principle from the book that really struck a chord with.  David Allen talks about horizontal vs. vertical task management.  The Horizontal tasks are all of your projects and the Vertical tasks are all of the action items that you need to get through in order to complete that task.  So, I’ve got projects going across the top (horizontally) and the tasks are in a list below the projects.

Above the projects, there are a bunch of “states” that an action item can be in.  The bar along the top represents each of those states (Inbox, Next Actions, Tickler File, Someday, etc.). 

Everything that you select essentially acts as a filter.  So, if you choose Due Today and then Errands, it will show you all of the action items in the Errands project that need to be completed today.

When you add a new item, it will automatically pick up the characteristics of whatever area/project is selected.  If I were to click “Add New Task” in the above state, it would automatically be in the project “Clean the Study” and be a “Next Action.”

Woops.  Just noticed two errors.  First, all of the visible items should have the “Next Action” icon selected because we’ve got the “NEXT” area highlighted.  Also, I need to include an ALL option in the states bar.  That’s noted and I’ll include it in the next step (the visual design).  Normally, I’d update the wireframe but we only have a weekend for this!

Alright, well we’re cruising through this.  At this speed, there’s a good chance that we’re going to have to make some tweaks during visual design and then development this afternoon but that’s okay it’s a small project and the customer (me) is pretty forgiving.  Also, I’ve already found some small tweaks to our data model to support this.  (Going to need, for example, an “order” field for the tasks so that they can be reorderd…that’s what the gripper on the side is for).

Next step: visual design and our deliverable will be a comp.  Sweet!  This step will be fun.