It should be obvious to most readers of this blog that Basic Maths, the WordPress theme that Allan Cole and I released recently (and available here), is a direct descendant of the overall look and feel of Subtraction.com. There’s a good reason for this: over the years, I’ve been asked countless times by others if they can use the Subtraction.com ‘theme,’ even though none existed — even if it did, I would have been inclined to say no, wanting to preserve its uniqueness for myself. So when I sat down to design Basic Maths, the aim was to create something that would satisfy this desire to have something Subtraction.com-like in the marketplace — not a clone, but a reinterpretation. As reinterpretations go, it’s pretty straightforward, I think. Nevertheless, I thought it would be interesting to showcase some of the steps in its design evolution, and how I arrived at the theme as it stands today.
Show Your Work
The core of the Subtraction.com is of course the grid structure, which is composed of eight 95-pixel wide units each separated by 10-pixel wide gutters and forming four columns. In my first pass at designing Basic Maths (its working title was ‘Simple Maths,’ by the way) I tried to repurpose that same grid structure, which is a bit of a shortcut that I take all time simply because I find that it often works well, I’ve done the work to figure it out already and see little reason to reinvent the wheel each time.
In this case, I found that I needed to add a ninth unit, both to take more advantage of the width of modern browsers (Subtraction.com is rather narrow) and because I wanted two full columns of sidebars.
There were at least two design details that I had in mind from the start. The first was the table of contents-style tags/categories display that I feature at the bottom of most every page of Subtraction.com (shown in the left column in these mock-ups). Incorporating some version of that feature seemed like a fair way of offering some of the distinctive visual components of Subtraction.com to potential buyers without giving away the whole franchise, so to speak.
The second was some kind of simple, one-click setting that would allow users to overhaul the minimalist color scheme easily. Though Subtraction.com uses only black, the logic of a color system is nevertheless there — all links and highlights get the same treatment. So it was straightforward to translate that into a single point-of-control color setting; in these comps I tried to switch up the colors regularly to make sure that pretty much any color would make sense and look decent.
In this first round, I also played with the ability to house a large-scale image at the top of the home page, a common visual feature of not just Subtraction.com but blogs everywhere.
The result, I think, was really dissatisfying. To be honest, I’m not a fan of throwing amateur images at the top of blogs. I think if you’re going to put an image in such a prominent spot, it should be a really good one — chosen not just with a photographer’s eye but a designer’s eye, too. Most of the blogs that do this out there just don’t do it very well, in my opinion. What’s more, I realized that if I were to build this feature into the template, users would more less be obliged to use some kind of big image even if they didn’t have a good one to use; the effect would essentially be promoting the use of underwhelming photos at the top of blogs. That wasn’t a consequence that I was particularly excited about, so I ultimately discarded the image altogether.
This first pass turned out to be quite strongly reminiscent of Subtraction.com, which made me feel a bit uncomfortable. It certainly wasn’t my goal to propagate an army of what would basically appear to be Subtraction.com knock-offs. Rather I wanted something evocative of it, but distinctive on its own and able to stand on its own merits. So I tried to strike out a little further in the second round of design explorations.
In retrospect, I quite like the look of this mock-up, but it was a failure to me on at least two counts. First, it violated my rule for always placing the search box in its ‘natural position’ at the top right of the screen. This design guideline is certainly a debatable one, but I always find that you can’t go wrong putting the search feature in that position nearly as often as you might putting search anywhere else. Almost as a matter of principle, I wanted this theme to place its search box in the ‘right’ position.
My second criticism was that the tag/category display in the left-hand column was starting to overwhelm what should have been the central focus of the page: the column of blog posts themselves that runs down the middle. I’ve never really been a fan of what amounts to visually trapping the main content column between two sidebars of peripheral content; I generally think that content needs to breathe on one side or the other, if possible.
My next mock-up tried to remedy that dynamic by putting all of the sidebar content on the far right., as shown here.
There are pluses and minuses to this approach, and I ultimately returned to a version of this in the final theme. But at least in this mock-up, the net effect was to produce what felt to me like a profoundly unbalanced layout, so unbalanced that I felt the need to throw in a generic logotype on the top right. Of course, the assumption that a Basic Maths user would have as visually effective and counter-balancing a logo as this big dark circle was as unrealistic as assuming they’d have terrific photography, so I nixed this too.
Finally, in the next round, I started to hone in on a more workable solution. This mock-up shows most of the basic elements of the final theme: category/tags display across the top, a mostly untouched left-hand column of white space, and a sidebar on the right.
Now the dynamic felt essentially correct, but some re-calibration of the elements was necessary in order to achieve the right balance. Primarily, the negative space in the left column, the primary purpose of which is aesthetic, effectively ‘bleeds’ into the main column thanks to the somewhat fanciful ‘hanging’ style of the date stamps. The effect is to consume way more white space than is necessary.
My solution was to reconfigure the relationship between the date stamps and the headlines, enlarging the latter a bit and tucking the former into the header area of each post, and letting the paragraphs of each blog post run wider.
Here, then, visual balance was restored, but a new problem presented itself: the measure of each line of text started to run quite long, longer than I thought was comfortable to read.
I also began to wonder if the layout would be sufficiently accommodating to a wide range of needs. While I liked the simplicity of this mock-up, I started to feel that the navigation and tag/category display at the top seemed a bit anemic; they’d probably be fine for most users, but for a particularly prolific blogger, they would quickly feel limiting. The far-right column too seemed like it would be quite narrow to folks who like to trick out their WordPress blog with various widgets, and there are more than a few of those folks out there. What’s more, it occurred to me that it would be difficult to incorporate advertising into this layout.
Having come all this way with the same basic grid structure as I started out with, I began to wonder if it was the right one at all. Ultimately, I decided my concerns were valid enough to warrant switching over to a new grid altogether. This time I opted for eleven 80-pixel-wide units, again each separated by 10-pixel-wide gutters.
A side note on the grid: I know it’s unorthodox to use an odd number of units — eleven here, nine before — when building a typographic grid, but this is where I differ from grid traditionalists. Print designers have the luxury of creating grids with essentially unlimited resolution; the Web offers a much more restrictive resolution reality in which it’s effectively impossible to divide a canvas into a smaller unit of measurement than a pixel. This tends to frustrate most attempts to build grids the way traditionalists recommend, as the math just doesn’t bear out. My workaround to this is simple: use the number of units and columns that you need to use, and sleep easy at night.
This new grid allowed me to create space for more navigation elements at the top, to add a fourth column of tags, and to shorten the measure of the main text column so that it would be significantly more comfortable to read. Theoretically, it would even allow an enterprising blogger to run large display advertising in the right-hand columns, if she was willing to roll up her sleeves and do a bit of CSS work.
One complaint I’ve heard consistently about this layout is that with two sidebar columns capable of holding plenty of widgets, the overall page can look quite busy. Though I’d like to be able to impose some kind of control over that area, I ultimately felt like it would prove more useful to more bloggers to allow them to configure as many or as few widgets there as they like. By the way, there seems to be some misapprehension that all of the widgets displayed on the Basic Maths demo are mandatory; they are not. A blogger can place as many or as few widgets as she wants, and it’s the blogger who owns responsibility for how clean or cluttered the page looks.
There you have it folks: the evolution of Basic Maths — so far. It’s just the start, as Allan and I have plans to build upon this framework with future releases, both major and minor. Stay tuned. And if you haven’t already, buy your copy here.
+