While I don’t consider myself a photography perfectionist, only a small percentage of my photos actually see the light of day the Internet. I’ve assembled some of my favorites for you to tell the story of a year filled with ups and downs (but, mostly ups).

Please enjoy.

January

After unsuccessfully trying to raise an A round at Viewzi in 2008 (A.K.A. the worst climate for fund-raising in recent history), we regrouped in January and started work on plan B. 16mm | f/2.8 | 1/250/sec - Canon EOS 5D Mark II with Canon EF 16-35mm f/2.8L Mark II

Audrey’s attempts at crawling often end up with her face in the floor. 35mm | f/2.8 | 1/60 - Canon EOS 5D Mark II with Canon EF 16-35mm f/2.8L Mark II

Nerd nirvana. I relocated my Dell 2405 to my home office, giving me dual 24” displays. 17mm | f/5.6 | 1/15 - Canon EOS 40D with Canon EF-S 17-55mm f/2.8 IS

Let’s be friends! 17mm | f/2.8 | 1/60 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Audrey begins to murmur “DA DA DA,” much to mommy’s disappointment. 20mm | f/2.8 | 1/125 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

February

Will you be mine? 24mm | f/5 | 1/100 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Kristi’s new Snuggie. 23mm | f/2.8 | 1/250 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Lunch with my good friend Alex Bischoff to discuss shooting in manual exposure with an E-TTL flash. 35mm | f/2.8 | 1/160 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Timing is everything. In other words, I missed sun down. 14mm | f/11 | 1/3 - Canon EOS 40D with Canon EF-S 10-22mm f/3.5-4.5

I reunited with the RadioTime crew in February for much-needed freelance work. This is a lifeline for my family, as January brought in no income. 28mm | f/2.8 | 1/13 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Things were about to change…as new parents we were so excited to see Audrey’s first teeth. We had no idea what we were in for. 55mm | f/2.8 | 1/160 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

March

I love this lens. 55mm | f/2.8 | 1/80 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Jeremy and Owen playing Lego Indiana Jones. 17mm | f/2.8 | 1/60 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Taking the show in the road: Stephen and I are invited to speak in Memphis at this year’s IA Summit. 17mm | f/2.8 | 1/80 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

On my own: A new 17” unibody Mac Book Pro punctuates the transition from Viewzi to freelancing to full-time employment. 17mm | f/2.8 | 1/80 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Mac addict. 55mm | f/2.8 | 1/40 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

April

Lucky. A driver t-boned me at the intersection I pass through everyday on the way to work. An insurance nightmare was just about to begin. 17mm | f/2.8 | 1/40 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

In with the new. 21mm | f/2.8 | 1/640 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Spring has sprung. 17mm | f/2.8 | 1/60 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Not pictured - Camille. We didn’t know it yet, but Kristi was pregnant. 85mm | f/5.6 | 1/320 - Canon EOS 40D with EF 85mm f/1.8

Big, meet Bigger. 17mm | f/2.8 | 1/125 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

May

30” 17mm | f/5.6 | 1/80 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Must. Eat. Braaaaaaaaaains. 17mm | f/2.8 | 1/60 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

Hackint0sh. 55mm | f/2.8 | 1/50 - Canon EOS 40D with EF-S 17-55mm f/2.8 IS

This is easily one of my top 10 photos of the year. I love the expression on Caitlyn’s face and the water spray frozen in time. 85mm | f/2.0 | 1/5000 - Canon EOS 40D with EF 85mm f/1.8

The things we do for our children. 50mm | f/5.6 | 1/40 - Canon EOS Digital Rebel XTi with EF 50mm f/1.4

June

Open spaces at Improving. 24mm | f/4 | 1/200 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

You can’t stop the rock. 24mm | f/4 | 1/30 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Time flies. Already is already a year old 105mm | f/4 | 1/80 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Kelton has the bluest eyes I’ve ever seen. 105mm | f/4 | 1/100 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Peas in a pod. 24mm | f/4 | 1/80 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

It’s summer in TX. 24mm | f/4 | 1/50 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

July

Good friends and good food as we celebrated Independence Day with the Brewers. 50mm | f/1.4 | 1/400 - Canon EOS 5D Mark II with EF 50mm f/1.4

The sun setting on our first day in Anna Maria Island, Florida. 32mm | f/4 | 1/40 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Holmes Beach. Some where shocked that I took my new 5D MK II parasailing with no contingency plan. 24mm | f/8 | 1/1000 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Grey beard: My dad moments after parasailing above Holmes Beach. 24mm | f/5.6 | 1/1600 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Mom and Dad. I was delighted that they can join us in Florida for what amounts to their first real vacation in years. 160mm | f/8 | 1/100 - Canon EOS 5D Mark II with EF 70-200mm f/2.8L

Your’s truly, enjoying a drink on the beach.50mm | f/2 | 1/6400 - Canon EOS 5D Mark II with EF 50mm f/1.4

A lovely mix of light. This shot was completely accidental. 24mm | f/8 | 1/4 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

August

Going round. 24mm | f/22 | 2.5 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Having a beer with Dustin. 50mm | f/2 | 1/400 - Canon EOS 5D Mark II with EF 50mm f/1.4

Sailing Lake Grapevine with Ms. Emma at the helm. 58mm | f/4 | 1/4000 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Checking in on Camille. 5mm | f/3.2 | 1/15 - Canon PowerShot SD780 IS

Peaches. 85mm | f/2.8 | 1/125 - Canon EOS 5D Mark II with EF 85mm f/1.8

September

Breakin’ the law. 24mm | f/4.5 | 1/1600 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Mamma Kristi. 47mm | f/4 | 1/1250 | ISO640 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

She’s not a baby any more. 135mm | f/2 | 1/1000 | ISO400 - Canon EOS 5D Mark II with EF 135mm f/2

One of my first shots using off-camera flash. 100mm | f/2.8 | 1/10 | ISO400 - Canon EOS 5D Mark II with EF 100mm f/2.8 Macro

More fun per gallon. I couldn’t get enough of this macro lens. 100mm | f/2.8 | 1/50 | ISO1600 - Canon EOS 5D Mark II with EF 100mm f/2.8 Macro

Kristi and I celebrate our friend’s wedding back home in Indiana. Damn we looked good. 50mm | f/2.8 | 1/60 | ISO1600 - Canon EOS 5D Mark II with EF 50mm f/1.4

Proud pappa. Baby Hale had better get used to a camera in his face. 50mm | f/2.2 | 1/160 | ISO400 - Canon EOS 5D Mark II with EF 50mm f/1.4

October

Steve Brewer invited me along to a Texas A & M vs. Arkansas game. I jumped at the chance to see Jerryworld. 24mm | f/11 | 1/25 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

The apple of my eye. 105mm | f/4 | 1/80 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Commuting. 24mm | f/11 | 4| ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Audrey celebrates Halloween with Kelton and friends. 24mm | f/7.1 | 1/60 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

November

Vegas, we’ve arrived. 16mm | f/2.8 | 1/6 | ISO400 - Canon EOS 5D Mark II with EF 16-35mm f/2.8L Mark II

There’s beginners luck, and then there’s this. Jef get’s Blackjack on a split with his very, very first hand. 35mm | f/2.8 | 1/80 | ISO400 - Canon EOS 5D Mark II with EF 16-35mm f/2.8L Mark II

Ken Howard at the Las Vegas Stratosphere. This was the least incriminating photo I took of him all weekend. 24mm | f/6.3 | 1/125 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

The thrill seekers. 97mm | f/4.5 | 1/125 | ISO100 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Just us three, but not for long. 24mm | f/4 | 1/640 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Lurking in the garage. 24mm | f/6.3 | 1/5 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

December

Merry Christmas from the fam. Even with just two flashes, this was my most ambitious strobist shot to date. 85mm | f/2.2 | 1/50 | ISO800 - Canon EOS 5D Mark II with EF 85mm f/1.8

The Aksins Family. 85mm | f/2.2 | 1/50 | ISO800 - Canon EOS 5D Mark II with EF 85mm f/1.8

Austin Mann checking his shot. Austin was generous enough to let me tag a long in a photoshoot with our Audis. It was an incredible learning experience with some really expensive Profoto gear. 24mm | f/4 | 1/25 | ISO1600 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

We only come out at night. My A4, looking really amazing. Canon EOS 1Ds Mark III with TS-E 24mm f/3.5L

Hot embers. 24mm | f/11 | 2 | ISO125 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Let’s start the show! Kristi just before giving me yet another precious child. 24mm | f/4 | 1/60 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Another princess. 24mm | f/4 | 1/200 | ISO500 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Meet your nana. 50mm | f/2.8 | 1/160 | ISO400 - Canon EOS 5D Mark II with EF 50mm f/1.4

OMG in any language. 105mm | f/4 | 1/160 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

What did you get for Christmas? I got a princess. 70mm | f/4 | 1/160 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Now there is four. 88mm | f/4 | 1/160 | ISO400 - Canon EOS 5D Mark II with EF 24-105mm f/4L IS

Sweet dreams. 50mm | f/1.4 | 1/125 | ISO400 - Canon EOS 5D Mark II with EF 50mm f/1.4

If you work on the web long enough, sooner or later you’ll cross paths with a Microsoft .NET project and all of the tooling changes that come with it. Visual Studio, IIS, Internet Explorer, and God help you - TFS. The Microsoft development stack is flexible, capable, and powerful. However, they are a 180° shift from the lightweight tools that most Mac developers have come to fiercely love.

When working on projects at Improving, I consider myself a fully integrated (web) developer with a few exceptions:

• I don’t use the debugger (in Visual Studio)
• I rarely need to compile
• I never touch a database
• I don’t need IntelliSense or other IDE helpers
• I test against IE, but don’t use it otherwise

I don’t need all the functionality provide by Visual Studio and other Microsoft developer tools. So why deal with all the overhead (and remembering to alt-tab instead of cmd-tab)?

Recently I discovered (with the help of my team) the perfect environment for me. It eliminates (most of) the need to fumble around in Visual Studio and puts me back in front of my go-to tool: Textmate. (Click here for some of my favorite TextMate features).

Maximum Cake

This configuration looks a bit complicated, but it’s not.

• All of the project source code lives inside of a Windows 7 virtual machine and is managed via Subversion
• IIS is pointed at my source directory and serves up the web project via HTTP, making it accessible via localhost and outside of the virtual machine
• My source directory is mounted in OSX via an SMB share and pulled into TextMate

Essentially, I use Windows as web server, a file server, and as an occasional compiler. That’s it.

This is nirvana for me.

My perspective:

My 40D, just after it arrived

My love for photography really didn’t start until November of 2007 when I bought a my first DSLR: the Canon 40D (blame Stephen and Jeremy for getting me hooked). The 40D was a lot of camera for a beginner, but I quickly grew into it.

I loved the 40D, so much so that I even swayed Alex, a long time Nikon user, to make the switch to Canon. I loved the 40D’s build quality, high-speed burst (6.5FPS), and overall responsiveness (especially with fast glass).

My go-to lens was the Canon EF-S 17-55mm f/2.8 IS. I can’t say enough good things about this lens. It combined a fast f/2.8 aperture with built-in image stabilization (IS), making it damn near perfect in most occasions. I really, really miss this lens.

The did 40D had a few shortcomings, namely sensor resolution (10MP), ho-hum LCD screen, and OK, but not great ISO performance. However, my upgrade to the 5DMKII was less about the 40D’s short-comings, and more about the allure of a full-frame sensor, HD 1080P video, and a (more) pro body.

What I still love:

Full-frame, 21MP sensor
Going from a crop sensor to full-frame is a bit of a double-edged sword. The 1.6x crop factor is great when shooting with a long telephoto. You get extra reach, for “free.”

Full-frame depth-of-field, at f/4

On the other hand, that crop factor makes your “standard” focal-length 50mm lens more like 80mm, which was a bummer in close quarters.

So, I gave up some reach. But the full-frame 5DMKII gave me something better (in my opinion): shallower depth-of-field. Since the 5DMKII’s sensor is nearly twice the size of the 40D, f/4 really looks like f/2.8 used to, and so on.

21MP also gives me a lot of room for cropping. I could literally throw half an image away and still be at the 40D’s resolution.

ISO/noise performance

ISO1600

Due to it’s physically larger sensor size (and technology improvements, of course) the ISO performance is easily a stop (sometimes two) better than the 40D. ISO800 on the 5DMKII looked a lot like ISO400 on my 40D, and I’m not at all afraid to push to ISO1600 when needed.

When paired with a fast prime like the 50mm 1.4 and you can just about see in the dark. Literally.

LCD screen
The 5DMKII’s LCD is big and bright, and actually has enough resolution to be useful for checking focus, especially when shooting in situations when the depth-of-field is very shallow.

Not so much anymore

Dated auto-focus mechanism
The 5DMKII’s auto-focus mechanism is pretty much a hold over from the original 5D (introduced in 2005). The biggest hinderance is that the 9 auto-focus points are very tightly-grouped to the center of the 5D’s enormous full-frame. There just isn’t enough frame coverage. (BTW, I know that Alex is saying “I told you so” right now).

5D Mark II view finder	40D view finder

The lack of frame coverage isn’t a problem for me in terms of framing (or getting) a shot. I’ve adjusted to that. The bigger issue for me is metering. The 40D and 5DMKII have pretty much the same physical arrangement of auto-focus points, giving the 40D the edge on frame coverage when it comes to metering.

Because of the dispersal of auto-focus points, using “evaluative” metering on the 40D takes into account a majority of the frame, while the 5DMII only covers a small amount. This causes the 5DMKII to meter very differently from the 40D. Out of the box I was getting shots that were consistently 1/3 - 2/3 stops underexposed, especially when shooting with my 580EX II.

My complaints about the AF also extend to the HD video operations of the camera. There is no continuous AF, a feature that every other video camera sold in the last 15 years (or more) has. It does have slick features like face detection, but you still have to press the AF-ON button to grab focus, which will you’ll hear in your video.

Sluggish operation and response
The 40D is like a Ferrari when compared to the 5DMKII. There was almost no shutter-release lag in the 40D, and the frame blackout was very short. The 40D was also seriously fast in high-speed mode.

The 5DMKII’s shutter release feels very “squishy” to me (as did the original 5D). I suspect that it’s due to the large shutter/mirror assembly of the the 5DMKII, more than electronics and processing power.

Verdict?

Do I regret buying the 5DMKII? No freaking way.

It’s awesome, amazing, and astonishing. My complaints about the AF layout and sluggishness aren’t deal breakers, and aren’t issues in may day to day use of the camera. The quality of the images it produces continually put a smile on my face. You’ll have to drop $6,500 on a 1D Mark III to get (marginally) better image quality.

I do wonder why Canon made the decision not to overhaul the AF system on the 5DMKII, especially when considering it’s closest competitor, the Nikon D700 is superior in just about every way (there, I said it). I spent a few minutes with Will’s D700 a few months back and was blown away by it’s build quality, view finder, AF performance, and built-in wireless flash system (of which, Nikon’s have had for years). I know Canon is paying attention, just look at the new 7D.

5D Mark II samples:

This new design marks the changing of the guard from Josh Williams and the guys at Firewheel design (now, Alamo Fire), to it’s new owners, DoubleWide Labs.

I have to admit - I was (and am) extremely nervous to touch Blinksale. Josh & the Alamo Fire crew have such a distinct and recognizable style to everything that they touch. Who am I to try to follow their brand of design and style? Blinksale is beloved among the design community, and I didn’t want to screw that up.

Good designers imitate?

I literally spent weeks trying to understand and copy the design language of the original Blinksale. We wanted to refresh the homepage a bit just to let people know that the things are happening.

Version 1

As you can see the original look and feel is mostly preserved. Overall the changes were minor - The “tour” images were expressed in a carousel (so we could grow them), the footer was tweaked a bit, and I tried to make the sign up more prominent.

Version 2

In version two I experimented with simplifying the top area down to just a tag line and one product image. I moved the sign up button up to be more prominent, and used the area below as a secondary place to message the DoubleWide Labs acquisition. While the top was simpler, it just didn’t say enough to keep your attention, and only showing one product image at a time was very limiting.

Version 3

In version three I wanted to take the boldness and simplicity of version two, but incorporate a more expanded product tour area like version one. I also prominently featured the Blinksale bulb, which I was always loved. I liked the idea of not having any navigation at the top, but not my execution of it. And it also meant that the navigation would be in a different spot for secondary pages.

Design is hard, lets go ride bikes

After a few weeks of noodling, I was seriously starting to feel defeated. All the comps were good, but not great. The changes were too subtle to communicate the right message. Thankfully, Brian stepped in, and with one sentence helped me free myself of the Blinksale’s past:

“dude, I’ve seen your work, it’s bold. GO FOR IT.”

Apparently I needed my ego stroked, because that night I started with a blank PSD and went for it.

The site you see now is the very next comp I produced after the conversation Brian and I had. Inevitably there will be people who liked the old site better. Fair enough. I miss it too, and for the record, there was nothing broken about it. But, we’re turning the page, and hopefully making Blink better along the way.

WPF is the latest .NET technology that can be used to write desktop applications for Windows. In the old days, writing software for Windows meant C# , WinForms, and mastering the GDI. Scary, right? WPF uses an XML-like presentation language called XAML to describe the UI. WPF can do some really neat things, like shader effects, hardware accelerated 3D, and much more (stuff that a real developer could explain).

I started the project kicking and screaming. I just couldn’t shake my HTML/CSS muscle memory, making translating my interface ideas into reality was truly an exercise in frustration. I need an HTML-to-XAML translator for my brain, and there just isn’t one.

After a few months of trial and error, I’m finally comfortable with XAML, and I have to say, I freaking love it. Ok, maybe love is a strong word, but I am definitely in like with it. I like it so much so that idea of building an interface with tools like HTML and CSS seems just plain silly when you think about.

Style Resources

There has been a lot of cool work to allow front-end developers to use a more object-oriented approach to their CSS. One example would be to create variables for things like colors, and refer to them later. Because your colors are abstracted into variables, you only need to change them in one place. One example (in pseudo-code) might be:

$microsoft_blue: #5ea3d6;

#header{
	background:$microsoft_blue;
}

I XAML, you can abstract things like colors, gradients (booyah!), and even background images as “resources” that can be consumed by other styles:

<LinearGradientBrush x:Key="ButtonBackground" StartPoint="0,0" EndPoint="0,1">
    <GradientBrush.GradientStops>
        <GradientStopCollection>
            <GradientStop Color="#3FFFFFFF" Offset="0" />
            <GradientStop Color="#00000000" Offset=".5"/>
        </GradientStopCollection>
    </GradientBrush.GradientStops>
</LinearGradientBrush>

In the above example, we created a linear gradient background, gave it a key, and created a style that consumes that resources. Freaking. Awesome.

Styles & Triggers

In XAML, interactive behaviors (like clicks, mouse overs, toggled, etc) are a part of an element’s styles. Here is a really rudimentary style for a button:

<Style TargetType="Button">
	<Setter Property="Background" Value="Red" />
	<Style.Triggers>
		<Trigger Property="IsMouseOver" Value="True">
			<Setter Property="Background" Value="Maroon" />
		</Trigger>
	</Style.Triggers>
</Style>

In the simple example above, I want all my buttons to have a red background and turn maroon when they are moused over. Now all my buttons will have this style and behavior.

Control Templates

The “lookless” control in WPF is an extremely powerful, brain-melting concept. The idea is that an interface control’s look can be modified in anyway, but the control will retain it’s inherent properties.

This is was makes WPF superior to other UI toolkits like Java’s Swing and SWT which are extremely limited in their customization. In HTML, common form elements cannot be styled or modified.

Ever want to change the look of a <select> box? Good luck. With WPF, your <select> box (which is a <ComboBox> in XAML) can either look like the Windows default theme, or completely changed, everything from the color to how long the drop-down takes to open. Best of all, making these customizations is really straight forward and doesn’t require you to write a single line of C# code.

XAML and HTML/CSS aren’t even in the same galaxy

XAML was solely written to build interfaces, which is in stark contrast from HTML’s roots as a document formatting language thats been hacked up and layer upon. A traditional rich web application uses HTML (and probably some server-side language) to deliver the basic structure, CSS for layout, presentation, and text formatting, and then a layer of Javascript on top to handle the interactivity that HTML can’t do, and probably some data exchange.

Because XAML was purpose built for UI all of the layout, styling, and interactivity are baked-in without a need for the complex UI “stack” of a traditional HTML web app. HTML and CSS3 show some promise of bringing a real UI toolkit to the web, but are still a far cry from what we need.

When tasked with designing form - the immediate interaction in my head was a very simple form with a single search box. The associate could type in the customer’s name and the system would immediately start searching the customer records for a match. The associate could quickly select a matching record, or click a button to expose a for a new customer:

This worked well enough. The immediate feedback that the results provided as you were typing made the interaction very simple intuitive. However stepping through the process was kind of clunky - especially if you needed to create a new customer. My second revision was just to make a the new customer form persistent. This made the UI a bit more conversational - “search for a customer, OR create a new one.”

This worked even better. The development team built it out and we demoed it - the stakeholders were delighted. This was a few weeks ago.

It wasn’t until today that I realized that I had it all wrong.

My form tailored the interaction with the assumption that most customers would already be in the system. The reality is that this is not the case. A quick gut-check with the client confirmed that in fact, only one in five customers are repeat (this isn’t as bad as it sounds - given the nature of the product that they are selling).

In my most recent revision of the form, I removed the search box all together and started with the new customer form. The behavior works exactly the same - the associate will type a customer’s name (or other info) into the form and the system will immediately search for an existing record.

By making this simple change - we tailored the form to the most common usage scenario - and - bonus - simplified the form by letting the new customer form pull double duty.

The endpoint for a successful RadioTime experience is the web tuner. If all goes well and you find what your are looking for, you’ll tune in. Getting the tuner experience nailed is absolutely critical.

Evaluating the current design

From a technical perspective, the tuner is rock solid and has a very intricate set of rules and fall-backs to ensure that listeners get the right stream when they click play (and it plays). Don’t let me trivialize the work behind this in one paragraph - trust me, the guys at RadioTime have spent months getting it right and it shows.

However, the UI problems are immediately apparent:

• There is a significant amount of inefficiently use space
• The olive-to-white gradient just doesn’t work (remember - the best gradients go unseen)
• The iconography at the bottom doesn’t communicate it’s functionality
• The information design lacks a clear structure and sense of priority

An idea

My first approach was to clean up the information design and add some structure to the tuner. One idea was to consolidate the play/pause with volume and to move the “on now” information to the bottom of the player since that information was sometimes unavailable.

Because play and volume (should) only be available when a stream is successfully tuned, that area could also be use to communicate status messages:

This layout works well, but one grip is that it created an unnecessarily long volume slider. That level of fidelity for volume isn’t needed, and could easily be confused with a progress or loading bar.

Round 2

Aside from the long volume slider, I really didn’t like the three horizontal bands (the header, the volume/status bar, and the “on now” info) created. It felt jarring.

In my next revision, I proposed a condensed display where we combine the status and “on now” information into a single line, multi-state display.

This significantly simplifies the interface, put would still provide needed info in a just-in-time fashion.

The Final Product

While the core design changes remain intact, the final product differs slightly in that the multi-state display was shelved for now out of concerns for scope creep.

The beauty of the layout is that it works just as well with one line of information as it does with three. The changes to the state display will follow sometime in the next few months.

Looking for the median family income for Beverly Hills? It was $102,611 in 1999. Pretty neat huh?

The InfoPogo guys have big plans for the application, including making improvements on the other planes of User Experience, however, any improvements on the surface would go along way.

The InfoPogo team has spent countless hours in making their components and controls as re-usable as possible, so it was important not to create a bunch of work for them for the sake of design. In order to make it easy for them to implement, much of my HTML/CSS started from the markup that they already had on the site.

Flexible Crumbs

The crumbs are built using the last-child CSS selector so that the last li is automatically formatted appropriately.

From the developer’s point of view, it’s a simple unordered list. (Oh, and I know what you are thinking - Internet Explorer doesn’t like last-child. Have you seen ie7.js?)

Navigation

Doug Bowman’s sliding doors method for making tabbed navigation seems like a hundred years old in Internet years, but it is still one of the most flexible and bulletproof methods for creating tabbed navigation from an unordered list.

The flexibility is important because as InfoPogo matures, the names of these tabs might change and there may be more tabs to come. This is one example that requires a bit of extra markup for the developers, but in the end they are still just rendering an unordered list.

Summaries

The summary components don’t currently exist on the site, but will soon. Each summary unit is marked up as a definition list and is automatically styled (again, using last-child) and floated into place. The summary’s parent container doesn’t care how many individual summary “units” are inside, it will handle them appropriately.

The default summary unit will handle fairly large numbers, but can be extended if the needs arises to accommodate very large numbers.

Data Grids

Most of the data is presented in a tabular fashion so it was important to design some flexible table markup. This meant accounting for the baseline table styles, such as td’s and th’s, but also extending the basic styles for additional presentation and functionality. For example, adding the class alt-row to the table tag added alternating rows.

A lightweight script looks for tables with this class and adds the needed markup client-side with no additional work from the development team.

Pulling it Together

Here is an example (although, not a real page) of all of the newly skinned components working together:

Click to enlarge

It will be really exciting to watch InfoPogo come together and mature over the next few months, so keep your eye out.

In the article, he specifically points to the restaurant finder applications by “IntelligentMobiles”. If you aren’t familiar, basically, they are all the same application, but they vary by restaurant. So you have “Burger King Finder”, “Pizza Hut Finder”, etc.

MG’s criticism is two fold - 1) Developers are “flooding” the AppStore with “crap” in attempts to “milk” customers for money and 2) The iPhone offers the same functionality in the native Google Maps application (for free).

I personally don’t get the rub here.

InteligentMobiles understood that finding a restaurant with Google Maps, while straightforward, could be much simpler. Instead of a few clicks, their app does it in one. If you frequently look for a specific restaurant, their app is a much better experience. To some consumers, that convenience is worth $1.99. Don’t blame IntelligentMobiles for that.

MG’s point that these apps are a “rip-off” (and “confusing” to customers) since Google Maps already offers this functionality is flawed. It’s like saying the ability to add shortcuts on the home-screen is unnecessary because there is a perfectly good URL bar and search box in Safari.

Here is how we did it:

Setting up the shot

Luckily I have a friend with an extensive collection of video gear and lighting equipment. Normally, strobes (you and I call them ‘flashes’) are the preferred light source of choice for photographers mainly because of their output power and that the fact that they stay cool (you don’t want sweaty models, usually).

In the diagram above, you’ll see a large Lowell Rifa EX softbox, a bare Lowell Tota, and a bare Lowell Omni w/barn doors, and a reflector. These are all tungsten lights, meaning the light that they emit is similar in color to household incandescent lamps (actually, they are a little more yellow). However, the color wasn’t an issue because I can correct the white balance later.

Images from B & H Photo/Video

The Lowell Rifa EX softbox emits gorgeous, pillowy soft, wrapping light with a gentle fall-off. I’ve shot with it before and have always had excellent results so I knew that this would be my main source of light.

The Tota and Omni were used to light (nuke) the background (a plain cotton sheet) out of the shot. By over-lighting the wall behind the shot, I’ll have a clean, pure white background to work with. The cleaner the background, the less time I’ll spend in post-processing.

The Keeper

Not a day goes by that I don’t realize how blessed I am to have such a good child. Luckily she loves to be in front of the camera (and believe me, she’s had tons of practice). We really lucked out in this case, she was a complete ham and really cooperated for us. After a few hours of whittling down the shots, here is what we decided to keep.

I love that it captures her kind personality, smile, and bright eyes that my wife and I get to see and experience every day. This is exactly what we want to share with friends and family.

Aside from my insanely cute child, this photo is a wreck, right? Well keep reading.

Post-processing

White-Balance

The first step was to set the white-balance to compensate for the yellow color of the tungsten lights. Luckily I had a WhiBal card on hand to give me a good reference shot to work with so it was a matter of grabbing a reading and twiddling a knob in Aperture.

Getting a pure white background

After correcting the white-balance, I exported a 16-bit PSD file out of Aperture and got to work in Photoshop. My first step to a pure white background was some simple Levels and Curves adjustments. The goal was to lighten up some the already light areas to pure white, but I had to be carful and not blow out any detail in the dress and furry hat.

I was hoping that my adjustments would have been sufficient to white out the background, but that wasn’t the case. Instead of finesse, some brute force was in order.

First, I loaded the RGB channel as a selection (under the Channel’s palette):

This gave me a rough selection of the brightest areas in the photo that I filled with white:

Scary, right? Not for long. Next I grabbed the eraser tool (‘E’ if your keyboard inclined) with a large (100px) brush and began to erase the areas of the photo that I didn’t want to be pure white:

You can really start to see the photo come together at this point. Now that I had a rough outline of the white background, I went in with the pen tool (‘P’) and restored the detailed edges that my large eraser covered.

Now that the background was white, I was able to focus on the details in the foreground, including:

• Adjusting the skin tone and other light color correction
• Removing the glitter on her lips (those ornaments were apparently tasty)
• Some light skin smoothing
• Giving her eyes some pop
• Cleaning up some of the edges and blemishes on the box
• Sharpening

The Result

These last few details are what took the most time. I spent a few hours cloning, masking, and smoothing to get everything just right, but in the end the attention to detail was worth it:

I couldn’t believe it. The trial-and-error, the planning, and the patience all paid of. I can’t tell you how happy we are that we took the chance and did this ourselves.