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.
+
I like mockup number 4 (with that circle logo) 🙂 More balanced to my eyes.
What I really like about the previous iteration, with the green circle in the top right, is that the heading is aligned with the content below.
It allows for easy skimming down the page, placing more emphasis on the combination of title and content instead of date. When it comes to blogs, I think it’s reasonable to assume that the top most entry is the newest, thus negating the emphasis of a timestamp.
What was your thinking on that change?
I love Basic Maths. But the font stack you have used for body text doesn’t seem genuine because Arial and Verdana has different x-heights and one can’t fit in place of another. Helvetica would have been better option.
What do you say?
My only big gripe about Basic Maths is the awful, awful alignment of the post titles with — er — nothing.
Yes, technically and theoretically they ARE aligned with a grid column, but they’re not aligned with anything pertinent or relevant or important to themselves. They’re just there, not aligned with the edges of the articles but not centered either, hanging out (seemingly) arbitrarily in space.
If it were me — and here I should tell you that “me” is a moron with delusions of grandeur who hasn’t designed anything noteworthy and should be ashamed to even post here — I would have kept this version and moved the “Comments” and “Continue” links to bottom of the article’s date column.
One thing I would have liked is the ability to post 640 wide video. As it stands any video needs to be downsized to 620. A 93 + 10 grid?
Er, I mean 83 + 10. You can see my maths is very advanced.
This is truly masterpiece of grid blog design. I love fine tuned grid.
But I specially love the content text. Probably many will ask what so special about the content text, plain one colored Arial. The answer is the leading (line-height) is perfect and it works for smaller and larger (In the News) columns. Recently for one of my project Azbuka I did some research realizing that the universal number that relay works for leading (line-height in CSS) is 1.618 or the golden proportion. Basic Maths uses 12px/20px (1.666) combination witch is close to the golden proportion.
Again great work!
Great overview, Khoi. I found myself agreeing with many of your reasons for ditching certain elements. The logo on the right, in particular, would’ve thrown things off for me.
I hope theme sales are going well.
Thank you for this post. I like how you’ve shown your thought process. As a programmer, it’s nice to see the thinking behind the layout.
One question I have is around the basic assumptions about the “Basic Maths User”. Who do you think is most likely to use this theme? What kind of effort do you expect them to expend to be able to fit content such as photos and videos into this layout?
That… is… so… HOTT…
Beautifully done. Only thing I’d try is tucking the date stamps into the rightmost column and aligning the titles with the left of the body.
Man, I love a good grid. Thanks.
Nicely done, mate.
In the name of constructive criticism, the final iteration you chose does seem more balanced, but perhaps at the expense of being a little less adventurous.
Grids can be a cage or a set of monkey bars. I’d argue the tiniest amount of imbalance is what makes a design ‘swing’ to life within a grid.
Side note: It’s particularly refreshing to hear people from the States call it ‘math*s*’ rather than ‘math’. *thumbs up*
This was a great article not just for the insight into your process but the overall explanation of each decision.
I wonder since you like the grid system if you have tried 960.gs it has come to be very useful to me and has a few limitations but can ultimately help guide great design.
Nice job.
The mixture of copyright notice, GPL licensing and large “buy now” button have me a bit confused… is the entirety (source, styles, etc.) GPL or just portions?
Victor: the GPL ensures freedom in how you use a product, but doesn’t mandate that products licensed under it are free. We wanted to make Basic Maths GPL-friendly, but at the same time we wanted to earn some money for our efforts, too. Hope that helps.
Chris: I haven’t tried 960.gs yet, though I’ve seen it. I tend to be a creature of habit when it comes to putting together my grids, and prefer to do it by hand/the hard way. However if it works for your needs, more power to you then.
Great write-up! As a designer with 30-years-plus of work behind me, I really appreciate the use of grids.
BTW your remark about odd-numbered grids not being very common is not completely true. We call those x-and-a-half-grids. And they are very useful for layouts with notes, multiple columns and such. A great example is the encyclopedia Wim Crouwel designed, but there are also a lot of magazines and newspapers using it.
My wish list? A simple way to define whether captions and such are displayed as caps only or oldfashioned C+lc (and every variation inbetween)Ё
AFAIUI & TINLA—It’s legal to resell (higher, lower or same price) or give away gratis copies of Basic Maths after you buy it, as long as you provide source code and other details in the GPL. Good luck.
Hi Khoi, looks very good. I did have a question for you. Do you know if F8 was based off Subtraction.com? I’ve seen it around and I always think of you when I see it. Cheers.
Very nice walkthrough of the process. I like the end result so much I bought it 🙂
And since for that reason I have used the theme a little by now I can say it is very nice as a blog theme. It is lacking in the pages department though, imho. If the blog pages can look busy with all widgets active then pages can look very spartan. The cool thing is that the theme and grid provides a good base to build custom page templates on. Something I will get to soon I hope.
@Chris: in my opinion it’s closer from HemingwayExЁ
By the way, Basic Maths has grown on me and I bought it yesterday!
I still don’t know if I’ll use it like it is but maybe I’ll reuse some code. I also like Neutica+ that I bought too.
My ideal theme would be something between the two 😉 but I need a different format.
Anyway you two guys are among the most gifted web designers that I know of providing some of the best designs I could find (in fact I couldn’t find anything of the same quality)!
I have a question for you: why Basic Maths is not based on Thematic like Neutica+?
Is it because because you started to work on Simple Math much before? Or is it because you preferred to start your own framework like you seem to refer to it that way?
And what will happen if I begin to use it as a framework and do much changing when upgrade time has come? No Child theme?
Or should I use Thematic as a base?
Happy customer here 🙂
I’ve always loved this style, and being able to use it guilt-free for $45 is a no-brainer.
I also wonder about updates, though. I’ve already tweaked in a couple of places, and wonder how that will all work?
@MiC Thanks for checking out Basic Maths AND Neutica+!
I’de just like to chime in on your Thematic versus Љfrom scratch’ development question.
As you may or may not know I am a HUGE Thematic fan boy and i’m not ashamed to admit it. 😉 I think it’s a really great framework for developing themes, blogs and sites at lightning speed and efficiency while maintaining strong markup.
When Khoi first showed me his design, I initially thought that Thematic would be perfect for the job. However, after spending some time analyzing the way the content is structured in Basic Maths, Thematic started to seem like Љover-kill.’ Here’s why:
A great thing about Thematic is that if you need to change mark-up, you can do so through hooks and filters. This works great when you need to change entry title formatting or comment form structures, etc. But what happens when you need to change smaller markup structures that don’t yet have a hook or filter associated with it in Thematic? ie: filtering Edit links on pages or adding an action to an area that doesn’t yet have a hook. Granted, I probably could have figured out a way to force the current Thematic markup to handle Khoi’s intricate design, but that would have led to a lot of unnecessary markup, and A LOT of unnecessary hooks and filters (Hence the term overkill — That functions.php file would have been gigantic!) Khoi’s design feels very light and sensible but with a really strong attention to detail. I felt that the coding needed to reflect that as closely as possible — if possible.
Also, we didn’t exactly start this thing scratch nor is it intended to be a Framework. The initial markup structures were based on good ole’ Sandbox. Half way through the project, Ian started blogging about the “WordPress Theme Tutorial.” We ended up including a lot of the best Љpractice’ ideas from that series as well.
Regarding Neutica+, the original Neutica was the first them I had ever released to the public and it was really just a sandbox modification. It is MUCH simpler in markup compared to Basic Maths. Revamping it and using Thematic as a base was much more appropriate in this situation. Neutica+ was mostly just a really big CSS challenge.
Lastly, I STRONGLY suggest making changes to Basic Maths using child themes. Child themes don’t always need to be built on top of frameworks. Any theme can work as a parent theme. Ideally, you should always use child themes to make changes to any theme so that you can always stay up to date with the latest versions without losing edits. Ian has a really great post about it here. (@Jonathan, take note.)
(Didn’t expect this comment to be this long when I started writing it :-/)
My $0.02,
Allan
I agree mockup #4 with the circle logo looks good. #5 too. However, your judgement is excellent so I’d happily recommend this system to anyone or try it myself if I get around to it.
(It’s tricky to decide what platform to build a portfolio site on. I love the tags this provides and the grid is fantastic. But i like the simplicity of indexhibit too, i’ve grown familiar with it. Then there’s text pattern and a number of other things.)
Don’t worry about this project diluting your brand. When Daniel Eatock made indexhibit open source, it was the best thing he ever could have done for his brand. (Besides make tons of other great work.) His presence is clear whenever I see his tool being used.
Creating a platform for people’s self expression is probably the ultimate thing to do
culturally. This is partly why apple is so sucessful.
So, well done! =)
Funny, reading the story of this theme, makes me much more inclined to buy it. I’m really considering it now after looking through all the thought and changes you made in trying to get the balance of this theme perfect.
I love the clean lines and typography, but also I’m delighted to see that even a world-class designer like Khoi Vinh is charging $45 for a grid whose baselines don’t align at all. Here’s a screengrab (Firefox 3.5.5, also verified in Safari 4) with many of the baselines highlighted. As you can see, some of them match up within 3-4 pixels, close enough to look aligned if you step back a little from the screen, but hardly any of them actually align correctly. How come vertical alignment of different font sizes is so difficult with CSS?
I was one who asked for the wordpress theme lol. But the grid structure was good =)