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…
- 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.
- 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.
- 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.
- ‘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.
- 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.
+
Interesting post, especially to me (someone with little eye for design/style).
I was going to ask… if you were going to break the third statement, what might make you decide to do so? [I actually kinda wonder what kind of situations would cause you to break each statement, but I would guess the answer might amount to the length of another post!]
Additionally, if I may be so bold to ask, what makes you decide to use the 1px rules? Your comment form has each section separated, and yet something like your recent posts does not. Is this just a case of “feel”, or is there a logic behind the decision. [Don’t get me wrong, though, I love the style of your site!]
Long time reader first time commenter…
I’ve enjoyed reading your blog for perhaps a year now and probably have you to thank for better use of the grid (I can’t see myself not using blueprint for the forseeable future)…
But one design query re subtraction that I’d like you to comment on is your use of bold for links… this is all very well, but you also use bold for well, bold. I particularly noticed this usability problem with the above post.
Thanks for the great read!
This must have been fun to write; it was certainly a good read. Your style is certainly striking, and continually an inspiration.
Far be it for me to tell you how to code CSS, but at the top of this site’s styles.css you’ll find:
font-family: arial, helvetica, sans-serif;
If you’re properly going with rule 5 then you’ll probably want to swap this around to:
font-family: helvetica, arial, sans-serif;
Sure, most people don’t have Helvetica installed, but if they do they probably also have Arial which will override the secondary choice.
I dust off my comic sans and get to designin!
Robin: I get this comment repeatedly — I guess I’m going to have to add a comment in my CSS file to explain this reasoning so I don’t have to type it again. The fact of the matter is that Helvetica renders like garbage on a Windows machine below a certain point size. That’s why I specify Arial first.
Ah, interesting! I didn’t realise that.
Ian: Everything on this site that’s bold and black is a link… well, almost. I admit that the headers for modules in the right column and subheads (like “Remarks”) might confuse the issue. I haven’t gotten this complaint before, but perhaps I should go in and change those to a gray instead.
I do strive to keep things consistent, though: I never allow bolding or use of the strong tag in comments. Whenever I catch that I manually change them to em tags.
As a designer for international companies that span many industries I’ve found that my design style seems to grow and change. At first my minimalistic style was very straightforward and flat. Then I used more of a branded and textured look. Now my style is new and different and prevalent in each design, but not exclusively the same.
Not to mention client’s personal tastes. That’s always fun.
Brilliant Khoi. Here’s my introspective.
That’s funny you mention the issue with Helvetica on windows machines. I just ran into that problem yesterday. The site looked fine to me because my machine didn’t have helvetica installed.
But someone in the NYT building commented that the text looked terrible. Apparently you’ve made sure helvetica is installed on all the machines there 😉
So sick of centred layouts, much easier to pull off than a good bit of left or right align.
Funnily enough, I read this article, thinking to myself, “I don’t really think I have a go-to style.” Of course, thanks to your work, Khoi, I have started using grids pretty effectively. I had always used them for my illustrations and brand identity, but not for layout (I don’t know why). The thing I struggle with most on your list is hanging meta info. I’ve tried it on some projects because I believe it to be a very elegant solution. But I suck at it. Khoi is the master.
Eventually I will settle in to a style, but for now, I prefer to learn from the masters (Shaun’s list is extremely close to my work-in-progress).
Also, for more reading on Helvetica v Arial, check out Gruber’s rant (about halfway down) and The Scourge of Arial by Mark Simonson.
I would argue that centered layouts are the way forward. As displays get bigger people who frequent left-aligned sites are going to end up with a permanently kinked neck and a pre-disposition for looking to the left. 😉
Thanks for the insight, Khoi! Would love to hear your thoughts on baseline grids on the web sometime.
Khoi, for the Helvetica/Arial debate I usually define Helvetica Neue, then Arial, then Helvetica on my style sheets. It gets round the problem of Windows machines making the site look poo!
This is really interesting, I’ve found since I discovered your site I’ve tried to use a grid more and more.
Thanks for this post, Khoi. I’m currently working at a company (Shaun Inman’s old stomping grounds, oddly) where the rule is the glossier and shinier and bigger the better… and I keep getting asked why Helvetica (the name of which is spat like poison from the boss’s tongue) keeps showing up in my designs (as though it has no place online). Needless to say, I’m exceedingly frustrated. Your post reinforced that my aesthetic preferences (similar to the style you laid out) have a place on the web and made things (temporarily) a little less crazy here in glossytown.
Khoi,
Nice article. Just found your site and wanted to say thanks for the articles.
Chuck
Despite the previous mentions, always like seeing the grid come up.
I have to say that this is one of the first left -aligned designs where it doesn’t looked like it was built for a lower resolution. Usually when I run into them, I assume that the person just never checked what the layout would look like on a higher resolution screen. Not this one though.
Interesting to see some of what goes on behind the scene when you’re designing Koi.
That said, number 4 is a bit ambiguous. I’m unsure what you mean by Meta Information. Can you clarify a bit?
Here’s my contribution to this great topic. Its an interesting and enlightening process disecting your own process like this.
Nice post. Has to be fun writing he he?!