Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Simple for Sale: 37signals
The masters par excellence of HTMinimaLism are the Chicago designers of 37signals. Their site reads like a manifesto of the HTMinimaList style (see Figure 2). 37signals.com does contain a rather extensive portfolio, but instead of focusing on the company's past achievements, the site focuses on a boldly opinionated set of "signals," 37 koans of wisdom that define the firm's design approach. For instance, an excerpt from Signal 25 reads:
){kind=link}
Just Because You Can, Doesn't mean you should.
Sure, there are times when light type on a dark background is appropriate, but we don't think "it just looks cool" is reason enough.
37signals believes that "hip" and "legible" don't have to be mutually exclusive. We love "cool" as much as the next person, but we also realize that part of our job is to make people's lives easier, not harder.
Figure 2 37signals.com.
37signals.com is HTMinimaLism in its purest form. Notice the abundance of whitespace, not just on the core page, but throughout the entire site. There are 46 links on the core page (about as many as amazon.com has "above the fold"). That's a lot of links, and yet 37signals.com is not cluttered. The only GIF is the tiny logo in the top-right corner, weighing in at an anorexic 396 bytes. The colored dots throughout the site are not GIFs. They are actually HTML bullets (•) tweaked via CSS. The fattest image on the entire site is still only 6.6K.
The core page looks as good at 800 x 600 as it does at 1000 x 800. It even looks good at 640 x 480. All of this is due to liquid table design, which allows the page to resize as needed without wrecking the layout. The HTMinimaList thinks of his Web page not as a static magazine page, but as a fluid entity that morphs to accommodate the limitations and preferences of its viewer. The trick is to structure your pages so that they look good regardless of the user's operating system, screen size, number of available colors, and so on. Note that your pages don't have to look the same in all these different environments. (They won't. They can't.) They just have to look good. For an insightful explanation of the liquid design philosophy, read John Allsopp's "A Dao of Web Design."
The second-level pages at 37signals (see Figure 3) are as impressive as the site's core page. Still uncluttered, they nevertheless present the visitor with four distinct ways to explore the site:
){kind=link}
You can click on the Home option in the bottom menu to return back to the core page and surf from there.
You're given a pull-down link menu of all 37 signals, with brief descriptions of each.
You're given the numbers 1 through 37 in a sidebar calendar menu, in case you want to hop straight to a specific signal. This clustered series of plain HTML numbers adds an intriguing visual element and reinforces the concept of the site.
Most useful, you are given Prev and Next links in the sidebar menu, facilitating an easy sequential perusal of the signals, which is probably the way most people wind up surfing the site on their first visit.
Figure 3 37signals.com (level 2).
The sidebar calendar menu provides the added function of graying out visited links, which is especially helpful when you're just hopping around, so you can tell where you've already been.
All in all, 37signals is compelling, humorous, straightforward, helpful, and fast-loading. Its design is as refreshing as the prose of the signals themselves. A prospective client should come away from 37signals.com thinking, "These guys really know their stuff." And that, of course, is the purpose of site.
37signals proves that usability need not be ugly. This site is an aesthetic treat, particularly in comparison to the generic undesign of Jakob Nielsen's useit.com (see Figure 4). Nielsen marginally achieves his safe goal to design in a way that doesn't draw attention away from his content. Contrarily, 37signals surpasses its more ambitious goal to design in a way that overtly enhances its content.
){kind=link}
Figure 4 useit.com.