Setting a Proper Corner Radius

Rounded corners are a key component in interface design. Apple's iPhone, in particular, vaulted these little rounded-corner square-shaped icons into prominence. You see rounded corners everywhere these days. And all to often, I see rounded corners that seem to have been executed as an afterthought. Designers: please spent just a few extra minutes making sure your rounded corners are done right. Examples of negligence are easiest to spot when a rounded-corner shape is inset inside another rounded-corner shape.

If the corner radius is the same for both shapes, you'll have problems. If Square A sits inside of Square B and is smaller than Square B, the corner radius for Square A also has to be smaller. See the examples below:

Examples of proper and improper corner radii.

Its entirely possible that there's a Mr. Wizard math formula that will help you figure out how to adjust the corner radius depending on the change in size of the shape, but I'm not smart enough to figure that out. This doesn't have to be rocket science, though.

A designer's keen eye is often enough to prevent the problem. Spending just a couple of extra minutes paying attention to the details will make the world a better place, don't you think?

On Craftsmanship

When you're a carpenter making a beautiful chest of drawers, you're not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You'll know it's there, so you're going to use a beautiful piece of wood in the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.— Steve Jobs, explaining something his father taught him

Check out this article on Fast Company, which describes the 6 Pillars of Steve Jobs' Design Philosophy.

Fireworks Interviews

Linus Lim has put together some really good interviews on his site, Fireworks Interviews. I always enjoy engaging with other Fireworks users and I learned a thing or two by reading some of the interviews. If you're a designer on the fence trying to decide between Fireworks or Photoshop, perhaps some of these interviews could help you decide. Or, if you'd just like to be inspired by some other Fireworks users, this is a nice resource.

Either way, check it out and while you're there you can read my answers regarding some favorite Fireworks features, how I use it and my thoughts on Fireworks vs. Photoshop.

Proximity Matters

On a recent road trip, we drove past a sign that looked like something like this: Image of a Road Sign showing two destinations with arrows pointing in opposite direction.

At first glance, it is hard to tell if Proximity is to the left or to the right; or if you should go right or left to get to Matters. Perhaps after a more careful look, you can figure it out, especially if you're familiar with the territory, but it should be much easier. And it would be much easier if only the person who designed the template for this sign (and others like it I'm sure) understood how proximity can impact usability. defines proximity as "nearness in place, time, order, occurrence, or relation". When two "things" are placed near to each other, it demonstrates a relationship. Understanding this principle is critical to good design.

Not all signs are like the one depicted above. A couple of good examples can be found here and here. This one is not so much of a good example.

So, back to the sign in question. Maybe this particular sign could be improved by using a line to separate the two city listings. That might help - what do you think?

Second version of sign listing two cities with arrows pointing in either direction.

I'll admit that is a step in the right direction toward improving the readability of this sign. And this is a pretty common treatment if memory serves me correctly. But I think it could be better. This is a road sign meant to direct people driving in a car and needing to make a decision — usually a pretty quick decision. This is no time to provide ambiguous clues for the driver.

Confusion can be avoided by paying attention to proximity. In my opinion, the city name should appear next to the arrow that it belongs with. And the position of the arrow being next to the name instead of below/above it is what clarifies the relationship. Like this:

Third version of sign listing two cities with arrows pointing in either direction.

The same principles apply to interface design. Labels should be noted next to the item they describe; buttons should be positioned next to the fields they relate to; photos should appear next to the content they support.

This is a concept that is easy to get right and you don't see many examples of poor use of proximity in the wild. But when you do come across one — like the one I saw on the side of the road — they really do stand out.