Designing the Last Mile

August 18th, 2008

Have you been watching the Olympics lately? I sure have. Every single minute I watch inspires me to apply the dedication necessary to become the best in anything that I do. With every success and every failure, there’s a story and a lesson to be learned.

What I found particularly interesting was the Track & Field 1500M race. I’m not much of a runner, so it’s the first time I’d witnessed a race such as this. For the first 1000M or so all of the runners stay in a surprisingly tight group. No one really attempts to push forward during this stage. I’d love to hear a runner’s insight as to why this is, but my guess is that doing so early on in the race offers a great amount of risk (tripping, overextending yourself, injuring yourself), for a small bit of reward (the temporary lead).

For the next 200M, the runners really begin to pick up the pace, and you can see the stragglers start to fall back and the contenders emerge from the pack. Finally, during the last 300M, everyone goes into an all out sprint to the finish. The pack really thins out and it becomes more like a line. There are clear champions during this stage, and there are clear stragglers.

At the Enterprise UI Summit, Craig Villamor of Salesforce.com mentioned something akin to “Designing the last mile”. At first, it seems like a different way to just say “Designing the details”, but it takes a different feeling when you apply it to User Experience and User Interface. I began to ponder the term over the next few days, and I’d like to share with you my thoughts.

On Your Marks… Get Set…

Imagine your company or product is in the 1500M race I described above. Next to you are some competing companies with competing products. You get on your mark, you set up, and POW! The gun fires. The importance of reaction time here depends on the type of race you’re in. If it’s a 100M sprint, then reaction time is quite important, for the 1500M not so much.

Applied to your business, you’ll just have to figure out if time to market impacts you. There are businessmen more savvy than I who can help you determine this. Just know that if you require a quick reaction time, then expect to do more sprinting than anything else.

The Majority of the Race

Everyone groups together for the first 1000M, which is a majority of the race. For product design, this stage is the building of fundamental features. Is the product basically usable? Does it satisfy the requirements of your target market? This is where most companies and products do just fine. They are listening to their customers, and they are delivering a usable product.

Just like the runners don’t attempt to push ahead during this portion for fear of injury, it’s tough to take risks at this juncture as you may wind up missing your target. It’s best to listen to your customers and provide a foundation that satisfies their needs.

That isn’t to say you can’t innovate in this position, but do so at your own peril. You may miss the mark completely.

The Last “Mile”

Right at 1000M, the pace begins to pick up. Product innovation occurs and you are actually starting to challenge the other companies’ offerings. You provide differentiating features and interface elements, and pull away from the pack of companies content to provide the bare minimum for their customers.

At 1200M, the all out sprint begins and every little detail counts. Visual cues are enhanced, workflows are simplified, consistency is obtained and context is nailed down. Your ability to win this race depends on your ability to design for this last leg. Most companies simply don’t have what it takes to compete in this last part of the race. Many companies seem completely unprepared, as though they were unaware that you were *supposed* to sprint this last part, and they give up, completely exhausted.

So how about it? When do you consider your app “done” or even “release-able”? Much like the final sprint, it takes dedication, practice, and a will to be the best.

Expect more posts on this topic in the future! I’ll teach you what it takes to design during this stage and what is and isn’t worth your time. Maybe I’ll make it the topic of a book some day

* all pictures are owned probably by NBC and screenshotted from their videos on NBCOlympics.com.

iPhone Style Icon Tutorial

August 13th, 2008

Ever since I posted the iPhone-style .psd kit for developers to use in their applications, people have asked me to make a tutorial on how I did it. I’m assuming here that these people would like to know the “how”s and “why”s of what I did, so this tutorial is rather in-depth. For those who want a quick iPhone icon fix, just download the .psd file.

Apple has recently posted some guidelines regarding making web applications. It seems I was mistaken, and Apple is merely saying “make a web page, LOL”. The extent of their interaction is tagging phone numbers, emai addresses and google maps links with special key words to open their respective iPhone apps.

Good enough.

If you like this tutorial and would like to see more, let me know. I don’t just do iPhone-related icons, either .

That said, let’s get started!

Update! Since I’m not the best writer in the world, I made a couple of little videos outlining what’s going on. I made them pretty quickly so they don’t exactly cover everything, but they should give you a pretty good idea as to what’s going on:

• The Edge Glare Step
• The Rest of the Tutorial

Let me know if you have any questions or comments!

Create a New file

This step is pretty self-explanatory, but I’ll list it anyway. I made the new file 80px by 80px at 72ppi. Name it whatever you want (“myiPhoneIcon” in this case) and hit “Ok”.

Make your base shape

Choose a color in the color palette that you like. Don’t get too picky, you’re not marrying this color– you’ll be able to change it at any point. Now right-click the shapes tool and select “Rounded Rectangle Tool”. Set your radius to 10px and the path type to “fill” (in the options at the top) and draw a square roughly 60px by 60px (hold shift to make sure it’s square).

Make the inner edge glare

Note: this is not present on the iPhone icons upon release. I saw this used in one of Apple’s screenshots of the iPhone awhile back. I like it, so I kept it. If you don’t, just skip this step.

There might be a design-y technical name for these inner edges that show up in glossy items, but I sure don’t know it. Anyway in the layers palette you’ll notice that the layer you just created has two parts to it, the fill color and the path.

Command-click (control-click?) the path portion and you’ll get a “nice” (more on this later) selection of your button. In the menu bar click on “Select”, “Modify >”, “Contract” and type in a “2″ and press “Ok”. This contracts your selection by 2 pixels.

Create a new layer (command-shift-N) and set the layer mode to “Overly”. Make your foreground color white (Pressing “D” and then “X” is my preferred method of doing this) and select “Edit”, “Stroke” from the menu bar. Stroke it 1 pixel and press “ok”. Now we have a line. Neat.

Select the layer that contains the stroke you just created in the layers palette and add a mask to it. Select the gradient tool (“G”) and pick the foreground to transparent gradient in the gradient list up top (it’s the second one, typically). Make Black your foreground color and draw a vertical gradient within your mask from the center of the button to the top of the document.

Next make white the foreground (“X”) and draw a vertical gradient within the mask from around the bottom of the button to the middle of the button. The result is pictured.

Make the top glare

Create a new layer (command-shift-N). Now make a selection of your button again (command-click the path on your button layer) and draw a white-< transparent gradient within that selection that roughly mimics the image shown. The degree of glare is up to you.

For more control, I like to create yet another new layer and do the same thing again, only making a shorter, whiter glare up top to really make the gloss pop. This way I can get a good amount of contrast while still making the gradient smooth.

Crop the top glare

Assuming you’ve still got the button selection, change your Marque tool to the Elliptical Marquee Tool and change your selection style to “intersect”.

Draw an ellipse over your selection however you want the crop to go. You can check the image here for reference.

Select your glare layer and select the inverse (command-shift-I) of your selection. Press “delete” to delete everything outside of your selection and you’re left with a nice shiny gloss!

Apply an underglow

Underglows are essentially what give 3d glossy items their depth. They give the illusion that the light from the top is reflecting off of the bottom of the button.

Use the exact technique as the upper glare, but do it to the bottom. I like to do a combination of two small gradients, and set one of them to “overlay” to get a nice light color.

Make the sharp drop shadow

Drag the color portion of your button to the “new layer” button on the layers palette to duplicate it. Fill it with black (double click the color and select black). Now change the opacity to around 80% and select the Move Tool (“V”) and nudge it a couple of pixels down.

Make the surrounding drop shadow

Select your button layer and click the “layer effects” button at the bottom of the layers palette. Select drop shadow and apply the following:
Opacity: 83%
Angle: 90
Distance: 2px
Size: 2px

It makes a nice little soft shadow the whole way around the button.

Fix the aliasing poking through

This next step isn’t as important on dark colored backgrounds, but it’s pretty much required for white backgrounds.

You’ll notice that the glare selection isn’t perfect, so we have some ugly blue poking through around the edges. The fix is easy, but it’s a little difficult to explain. Essentially we’re just going to mask out that part of the button.

Add a mask to your button layer. Command-click your glare layer (the largest one, if you have multiple) and select inverse (command-shift-I). Select black as your fore color and select the brush tool. Make it around 10px and change the hardness to 0%.

Now mask out those ugly edges! Select the mask on the button and just brush along the edge to get rid of those pixels poking through. Be careful that you’re not removing too much. Since you’re only selecting what’s outside of the glare, you don’t have to be overly cautious.

Apply your logo/icon

Here’s the deal, if you’re doing an icon, it looks better (in my opinion) on top of the glare, with a stroke to make it appear slightly inner-bevelled. It looks like it’s etched into the glossy surface this way.
If you’re doing a logo (multiple colors) you want it to appear inside of the button, so put it under the top glare, but on top of the underglow.

To give icons their bevelled look, just put a 2px stroke on it the same color that you chose for the background (edit -> stroke -> 2px).

Customize to your heart’s content

You’re essentially “done”, but you can do whatever you want from here. Add more shadow, less shadow, larger shadow, less glare, ditch the glare crop to make it a softer gloss, stroke the button to give it a sharper look, whatever you want!

Questions and comments

This is my first Photoshop tutorial, so I’m certain I left out some important items while babbling on about unimportant ones.

Also I’m not formally trained in Photoshop at all (although I’ve been using it for 10 years) so if someone knows a better way of doing some of these effects, just let me know! I’m particularly interested in working with more vector shapes to apply the effects, so they’re not as “permanent”.

Thanks for reading!

Listotron : Create, Manage and Share Lists

August 12th, 2008

Howdy folks!

I’d like to take a short moment to give you an update on my newest time sink: Listotron. Listotron is a collaborate project between Adam Wulf and myself, and we’re aiming for it to be the best online list maker ever. I will outline design philosophies and features in upcoming Listotron blog posts.

Above all else, we are using this project to learn the art of self-promotion– a skill both he and I are lacking in. As such, we will become absolutely transparent in our methods, decisions, and even code.

If you are at all interested in everything it takes to create a web-based application, I highly encourage you to keep an eye on the Listotron blog and Twitter account. We will be posting many tutorials and insights ranging from high-level business decisions to providing code. Most notably will be long posts on User Experience and User Interface processes and decisions.

Simply put, we’re betting on a strong correlation between how much we share with the community and the amount of publicity the product gets. “Selfless Promotion”, if you will.

Also Known as the “Build it and Hope” Plan…

August 11th, 2008

On Twitter today, Robert Scoble said this regarding Stack Overflow :

Did you see how to launch a great site? No PR. Site isn’t turned on yet. No one called and begged for coverage. Lots of early fans. FTW!

The logic here is absolutely flawless. I see no problems with this plan whatsoever.

I am, of course, typing this with as much sarcasm as I can muster.

iPhone Icon Style .psd Kit

August 9th, 2008

I was creating an iPhone widget icon for the Jotlet app (primarily for fun) and I noticed a few things and thought I’d share them with you, and create a psd kit for anyone wanting to do the same thing. I’m all about making things look uniform, so I used the traditional Apple iPhone app buttons as a template.

The first thing I noticed is that the iPhone screen is 160ppi. I’m not sure I’ve ever worked with a medium in a ppi other than 72 (other than print, of course), so I’m hoping I did this ok. I first created an empty photoshop doc sized 480 x 320 at 160ppi. I took the image of the iPhone here and cropped the screen out maintaining 3×2 aspect ratio. I pasted the result into the psd and scaled it up to fit. The icons in the result wound up being roughly 58x58px @ 160ppi, not including drop shadow. I made the icons in this kit exactly the size of the ones in the scaled doc.

iPhone icon .psd kit

A few things to note:

• The inner glare at the bottom of the icon is a mixture between straight white and overlayed white. For some colors the overlay may be too aggressive (bright), for some, not aggressive enough. You can just adjust the opacity of that layer to get the right effect.
• The drop shadow is actually two drop shadows. One for the softer shadow on the sides/bottom, and one for the sharp bottom shadow. I couldn’t get it quite right using just one effect.
• For custom icons, be sure and put a small (1px to 2px) stroke on it with the same color as the bg color so it looks a little beveled on top of the glare. I tried to build this into the kit by making the stroke black/soft light blend mode, but again, it didn’t look quite right.

Ok that’s all for now! I’m not sure what Apple intends to include for developers when the iPhone is launched. All I have to go on is this article that states developers will be able to create applications that “look and behave” like iPhone applications. This may or may not include other UI elements. Keep your eyes peeled here for some more iPhone related goodies!

note: digg logo property of Digg Inc. Apple icons, interface, screenshot, etc. as well as the iPhone trademark property of Apple, Inc