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 ShaunInman.com 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.

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

011 Comments

001

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.

Author
Jesse Gardner
Posted
Nov 2nd, 2007 11:11 am
002

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

Author
Jesse Gardner
Posted
Nov 2nd, 2007 11:12 am
003

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).

Author
Shaun Inman
Posted
Nov 2nd, 2007 11:23 am
004

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.

Author
aliotsy
Posted
Nov 2nd, 2007 1:02 pm
005

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.

Author
Shaun Inman
Posted
Nov 2nd, 2007 1:08 pm
006

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.

Author
Edward Welker
Posted
Nov 2nd, 2007 1:37 pm
007

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.

Author
Khoi Vinh
Posted
Nov 2nd, 2007 2:25 pm
008

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.

Author
Geof Harries
Posted
Nov 2nd, 2007 3:48 pm
009

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.

Author
Dan Hiester
Posted
Nov 2nd, 2007 4:41 pm
010

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

Author
bearskinrug
Posted
Nov 4th, 2007 6:23 am
011

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.

Author
Shaun Inman
Posted
Nov 5th, 2007 11:39 am