Five Elements of my Style

Khoi’s recent introspective got me thinking about my own default design habits.

Setting aside whether the aesthetic or style of my design is particularly original or not, I have a way of solving design problems that’s predictable, at least. For better or worse, there are certain tropes, tendencies, tricks and clich├ęs that I repeatedly enlist in the pursuit of a design solution. I thought to myself the other day, wouldn’t it be fun to list them all out?

Five Inman Staples

  1. Vertical, schmertical Blocks of left-aligned text create their own vertical lines. If further separation between chunks of content is required, use a solid wash rather than a vertical line. A vertical line is a foreground element whereas a wash stays in the background. Also, western languages read left-to-right, top-to-bottom. Vertical lines draw the eye perpendicular to the dominant reading direction—which I find distracting.

  2. A Form Apart Set form elements on a contrasting background. If your input background is #FFF, your form background should be #EEE—or vice versa. Also, concede and normalize.

  3. When in doubt, try FF DIN This is becoming less true these days—this version of uses Univers 59, the version in the wing is warming back up to Helvetica Neue—but FF DIN is a solid starting point. And where would Mint be without it?

  4. Center of attention Center the (fixed) width body or container element horizontally. Bonus points if you extend any background wash the full width while maintaining a readable line-length on your content. The inverse is true when it comes to text—there is no good reason to center text. Right-aligning is acceptable under certain conditions.

  5. Contrast On screen, full white-on-black text is good for one thing and one thing only: burning retinas. If you need high contrast, favor full black-on-white instead. Personally I try to keep contrast around 60/100, eg. #666 on #FFF.

Care to share your own? Be sure to link your post in the comments of Khoi’s original article.

The Elements of Khoi’s Style
stevenf on Android
Shaun Inman
November 2nd, 2007 at 10:55 am
The Site
011 (Now closed)



I have several “habits”:

  1. I cannot rest easy without lines defining borders. Text grids are nice in theory, but I can never feel good about words that look like they’re about to spill out all over the page.

  2. Styling header text? I always at least try oversized Georgia with a normal font-weight (blech, bold?!)

  3. I’m a sucker for Gotham.

  4. There’s nothing a subtle gradient wont make better.

  5. I know everyone’s bashing drop shadows these days, but I nearly always use a 5px drop shadow, 40% opacity with 0 offset distance to help give objects contrast against the background.

  6. I cannot seems to shake a sidebar mentality.

Jesse Gardner
Nov 2nd, 2007 11:11 am

Another interesting note. If you stare at this page for about 30 seconds and then toggle high contrast, the page looks forest green. Huh.

Jesse Gardner
Nov 2nd, 2007 11:12 am

Regarding styling header text, great point. Make it big or make it bold. Usually one or the other is enough on its own—if not you might be using the wrong typeface (of course, rules are meant to be broken).

Shaun Inman
Nov 2nd, 2007 11:23 am

Please forgive my ignorance — what’s a solid wash? I Blingo’ed it and found references to water color painting, but I’m not sure what it means in this context.

Nov 2nd, 2007 1:02 pm

Don’t mind me, making up my own terminology. I’m just using it to mean a filled rectangle of color; assigning a background color.

Shaun Inman
Nov 2nd, 2007 1:08 pm

Isn’t #666 to #FFF the same as 60/160 or 3/8? Regardless, I think it’s very interesting that you pay such attention to contrast.

Edward Welker
Nov 2nd, 2007 1:37 pm

It’s funny to read how designers view their own styles. I’m sure there are things that I do unconsciously that I completely forget about. I feel like another one of yours is “The Devil’s in the Details.” That is, you design both at a high-level — making the site understandable and giving it a distinctive overarching story — as well as at the lowest level, where you’re chasing down the details and sorting them out down to the pixel. It takes a lot of skill and patience to see a design thought all the way through to most subtle ends of a project, but you manage it every time.

Khoi Vinh
Nov 2nd, 2007 2:25 pm

I agree with Khol. Subtle, tiny details (a small curve here, an extra pixel there) are hallmarks of your style and what I admire most about the work produced.

Geof Harries
Nov 2nd, 2007 3:48 pm

My main conventions are different between my own projects and projects at work. But here are a few things I tend to do:

  1. Use column grids to establish spacial relationships. A design can have a visual rhythm to it if strict rules about an overall column grid are followed.

  2. Some times a bigger margin works better than a border. They keep saying the white space is your friend if you treat it right. I personally find it easier to recognize breaks in content than lines between content — especially when I’m scrolling quickly through a document.

  3. There’s a difference between a button and a link. I try to find ways to turn all links that are not embedded in body text into some kind of visual button, even if it’s just a rectangle. In addition to being easier to recognize as objects that are meant to be interacted with, they also tend to be more Fitts’ Law-friendly, since they’re usually bigger than a regular line of text.

  4. Creative use of background images can bring more unison to the page head.

  5. I’m a sucker for having elements of large type with a small subhead underneath.

Dan Hiester
Nov 2nd, 2007 4:41 pm

Bah! This post is pigeon-holing you Shaun. The Inman I know is much more versatile than portrayed above.

Nov 4th, 2007 6:23 am

Isn’t #666 to #FFF the same as 60/160 or 3/8?

I’m not sure how best to describe contrast ratios but I 3/8 sounds way too low. When I say 60/100, I mean, 60% black on 100% percent white (or a similar ratio).

In any case self-image is a funny thing. We tend to view ourselves in terms of own perceived potential while others’ views are framed by things we’ve already done. My list is based on what I’ve already done with an emphasis on where I’m headed.

Shaun Inman
Nov 5th, 2007 11:39 am