Subtraction.com

The Elements of My Style

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 Ways to Design Like Me

Here we go, then: a five-step program to design like me…

  1. Use a grid, specifically use this grid. On this subject, I’ve already said plenty, so I won’t expand too heavily on it here. Though it’s worth saying that I’ve been using this same eight-column grid for more projects than I care to admit to over the past few years.
  2. Left-aligned, top-aligned and nudged elements, please. I tend not to center text blocks when I can left-align them, and I tend to ‘pin’ items to the top and let them dangle below, too. I like the way that this regimented yet perfunctory placement of type within an area can still define the space; the text ‘owns’ the entire area without having to visually occupy the whole box. Of course, this technique goes hand-in-hand with nudging one’s elements.
  3. Flat, simple and geometric. Aside from those pesky buttons at the bottom of each post on the Subtraction.com home page, I generally avoid drop shadows, gradients or dimensional rendering. I like everything to be reduced to its least superfluous essence, and rendered by the browser (rather than as a JPEG or GIF) if possible. That same impulse leads me to use a lot of one-pixel rules, rendered by CSS as borders, too. You’ll find those everywhere.
  4. ‘Hang’ meta information in a left-to-right hierarchy. This is a design conceit I’ve been using for years and years; mostly because its highly structural aesthetic is very pleasing to me. But beyond that, I find the look to be very usable; having meta-labels visually separated to the left improves scannability. Moreover, dedicating practically a whole left-hand column to meta-labels is a handy excuse for creating narrow text columns, which of course mean shorter lines (a “shorter measure,” in traditional design jargon) which are much easier for the eye to traverse.
  5. Use Helvetica. If it’s not already obvious, this is the workhorse that I return to time and time again. There’s nothing that works quite as well, in my book, though once in a while I’ll quite unexpectedly decide to branch out a bit. Not often, though.

I’m not pretending I’m special for having a set of rules like this. In fact, it’s probably no exaggeration to say that every designer is working with a set of design principles of their own, right? I’d be keen to read similar lists; readers can post them here in comments or, if you’re blogging them yourselves, link to them below.

+