Aaron Bell

From my research for inspiration, I found two sites in particular: Wilson Miner (http://wilsonminer.com) and Jason Santa Maria (http://jasonsantamaria.com/).

Miner’s site is greatly inspired by Joseph Müller-Brockmann’s Stadttheater concert poster. I was amazed by the quality of his grid and clean lines, but what really caught my eye was his single post layout and in particular the hierarchy and text size. His body copy is set at roughly 16px, with headers up to 3em in size. The rationale for this is that on a computer screen, 16px text is roughly the same size physically as 11pt body copy due to the difference in viewing distance. As I am often frustrated by websites that set their text smaller than 10px, this concept really resonated.

Jason Santa Maria’s site sets itself up with a basic container capable of something different on every page. One of the aspects of web design that constantly frustrated him was that most designs are meant to be templates and thus the design becomes secondary to the content rather than an active partner. His goal was to create a means by which each article could take on a life of its own and to bring back art direction, converting the template-driven web into something more akin to a magazine. The end result is fascinating. One is never sure how the site will look and it is always interesting to see how content is presented. For my own site, I wanted to be able to do something similar, pulling in unique CSS stylesheets for individual articles but decided that would be out of scope for a first pass and could be added later. Besides that, I also found inspiration in the footer on his site keeps visitors on the site by providing interesting information and his ubiquitous navigation bar across the top.

This project was also an opportunity to experiment with TypeKit, a new mechanism for using different typefaces on the web without cross-browser compatibility issues. I looked through their options at the time (as a member of the free private beta, there were not many choices) and found only two that I was interested in using—Droid and Droid Sans. Designed specifically to be used on Google’s Android phone for menus, browsers and any other screen text, I found that they worked well for my purposes. Wilson Miner similarly uses Palatino for body text and Helvetica bold for links—a simple shift that clearly identifies links among text.

In application, I found TypeKit surprisingly easy to implement. The one aspect that still troubles me is the fact that the fonts are hosted externally. I don’t like the idea of losing control of an aspect of my design choice to a third-party website and would rather maintain the fonts on my own server. To that end, I look forward to seeing further implementation of WOFF. The release of Firefox 3.6 was very exciting and even moreso that many foundries are now offering license options. All in all, this is a very exciting time for type on the web.

The site design ultimately resolved around the body copy. At 16px, it would need to have enough room to feel comfortable and balanced on the page. Setting a 12 column grid across the page, I initially set seven columns on the right side for body copy, but found the line length to be too long and cut it down to six. Next, I worked to create a hierarchy to the type based around body copy size; thus, meta data is set at 13px, the intro / hook paragraph is at 24px and the main titles are 34px.

As one’s eye most often starts in the upper left of the page, I placed the title there surrounded by plenty of white space. Then, one’s eye is drawn to the intro paragraph on the right as it has been placed on the same initial baseline as the title and is the second largest type on the page. Immediately below is the beginning of the main content block. Off to the side and out of the way is the meta data, but it lines up with the top line of the body text, maintaining the grid.

After establishing the grid and general feel to the copy blocks, I went about building in the rest of the pages. There was something missing though. I felt the site needed a visual aesthetic beyond just that of text. My answer was at Briar Press (http://www.briarpress.org/), a letterpress community that maintains a collection of Cuts & Caps that can be used for personal projects.

A fan of letterpress, I had known of Briar Press for some time but had not fully explored the collection. Luckily, I was able to find an image appropriate for each of the different sections of my site and their addition gave the site a particular character and friendliness.

After the design was completed, I faced the challenge of actually building the code and making sure everything worked as I wanted. While building the static HTML & CSS pages was not to be a problem for me, the back-end development of the site would force me to learn new ways of working with Wordpress and PHP, a programming language of which I only have some knowledge. One area with which I had particular trouble was development of the portfolio section. As Wordpress is designed to handle blogs, setting up the “Articles” section was easy, but I could not use the same blog system to run the portfolio section as well, due to problems caused by intermingling the two dis-parate sections into the same database table. Instead, I repurposed Wordpress’ page functionality to store the portfolio pieces. Despite the various challenges I faced during development, I’m proud to say that I was able to produce every piece of functionality.

I feel that this site was a turning point for me where I felt my abilities as a graphic designer and typographer truly came together to produce an attractive site with good typographic sensibilities. Unlike ones I have designed and built in the past, this site is one that I am happy to show and am proud of the work I did to create the final product.