This site was designed to (mostly) communicate concepts via text. Each design decision was guided by this objective.
Two people I greatly admire in the field of communication are Edward Tufte [1] and Massimo Vignelli [2]. Edward Tufte has written extensively about Information Design [3], the practice of presenting information in a way that fosters efficient and effective understanding. The structure of this site is guided by his observations regarding information transfer. Massimo Vignelli's work as a graphic designer should be instantly recognizable to anyone who has seen a subway map or a corporate logo in the last half of the 20th century. Later in life, Vignelli published a design manifesto which included a great deal of practical guidance. This site is greatly influenced by "The Vignelli Canon." [4]
So, why is this site so plain? It is plain so it does not distract from the experience of reading text.
The rest of this text describes individual decisions I made to produce a well-designed site.
If you read Vignelli's Canon, one of the first bits of concrete advice he gives is to think about how text is laid out on the page and to view the page as a grid of columns and rows. Free space should be added so the eye can easily comprehend the structure of the print. An example given is to break up an A4 sized page along three columns and six rows with ample gutters and margins. Blocks of text, headers and images are all to be aligned on this grid. (See page 36 of the Canon [4].)
There's a tension between the designer's intent and the reader's need. Often, the designer is attempting to make something "beautiful" while the reader is just trying to make sense of the page. We're on a re-sizable web page, not a fixed printed page, so we have a slightly different design problem than the one Vignelli was addressing. We could use a "two-thirds" width offset to one side, as Vignelli recommends, but I think that would seem idiosyncratic to web readers.
Instead, I limited the maximum width of the text to a multiple of the font size. The larger you make the print, the wider the max width becomes. If you expand the width of the page, the text stops expanding at some point. This is to maintain ease of reading. Research on how much easier narrow columns of text are to read is a little inconsistent, but a study by Beymer, Russell and Orton [5] seems to support the notion that narrow columns are better.
I would like to say that I studied the research at length to find the optimal margin size, but that's not what happened. In a pique of practicality, I simply looked at various paperback books and made the columns on this site about the same size.
Vignelli's advice is to limit the number of typefaces. Vignelli recommends Garamond, Bodoni, Century Expanded and Helvetica. (See page 54 of the Canon [4].) I opted for Times New Roman due to its ubiquity.
This is a site that has several code examples, and I thought about selecting a specific typeface for the monospace font family, but testing revealed popular browsers selected a specific monospace typeface that was good enough to not warrant extra effort. But get in contact if that's not your experience.
By default, all non-preformatted text blocks are fill-justified. This is a slight contrivance, but I prefer the look of it. I find ragged, non-justified edges slightly confusing to my eye. I believe this is a justifiable design decision since most of the content on this site is (somewhat) long form text. I have seen plenty of counter-examples, but they tend to use font sizes that are larger than what I use here and use slightly thinner columns than I want to use.
Related to justification is line height. I looked at the default line heights for Chrome, Safari and Firefox for their default Times New Roman typeface. The text looked slightly scrunched. I opened up the line height to 125% of the default and got a reasonably easy to read result. I hope you agree.
This site has two major types of pages: context pages and content pages. The main index page (follow the "Meadhbh Hamrick's Web Site" link at the bottom of the page) is a good example of a context page. This page is an example of a content page.
Content pages are intended to be as distraction free as possible. The text is what we're focusing on and anything that distracts you reading is de-emphasized. You'll notice I even relegate outbound links to a References section. Links are rendered in gray instead of the usual blue.
Context pages are there to help the reader understand where they are on the site and the relationship between different pages and sections. Links on context pages are blue and aren't segregated into a separate section. There's an interesting paper by Tuch, et al. [6] which talks about rationalizing aesthetic judgments for web pages. It's partially responsible for stylistic differences between context and content pages; worth reading if you're into this kind of thing.
Each page has a simple, yet distinctive header.
If you look at the source of this page, you'll see I use a <title> element instead of a <h1> element.
I hope this works better with accessibility technology.
Each page also has a footer the reader can use to understand the context of the page: what section it exists in and when it was last modified.
Finally, I have as my inspiration, "The World's First Web Page" [7], originally hosted at CERN, but now available at w3.org as a historical artifact.
I have tried to make the HTML of this site simple and human-readable. If you look at this site, you should notice a few things:
<section> element.
Each section has an anchor so I can reference sections directly.
For example, the link <a href="#03_Typefaces">Typefaces</a> will take you up to the Typefaces section.
There you have it. This site is designed to be easy to read and to not be complicated. I don't depend on too many web browser defaults because as often as not, they're sub-optimal for a text focused site.
I've introduced a few semantic contrivances: context pages vs. content pages, for example. And I've tried to segregate outbound links in a reference section.
It's designed to be a simple site, and I hope the design does not overshadow the content.