About the Project

This site prototype, on early 20th Century typography, was an assignment for our typography class. The parameters were to create four page layouts: a Home Page, and a page each on typography in the 20s, 30s, and 40s. The layouts could feature any aspect at all from these periods - content was left totally to our discretion - but we were to research it thoroughly and had to be able to defend our choices.

This project really turned my crank! I have an abiding fascination and appreciation of typefaces and letterforms, beginning with an interest in calligraphy. And early to mid-twentieth century design is one of my favourite periods of design. It should be noted that many of the most famous typographers from this period - Hermann Zapf and Rudolph Koch, among others - are also beloved and respected in the calligraphy world.

About the Approach

The prototype was created in Freehand, using the software's grids to establish an organized and consistent look. The retro radio, which houses the navigation, makes use of several of Freehand's newer effects, including the fisheye lens and the live raster effects' Gaussian blur.

I focused on giving each era a look indicative of that period. I used the right 2/3 of the page to portray this style. The descriptive text, which is also integrated into this design, also uses a font that is either from that era or reminiscent of it, and the font/s used are listed, for the benefit of my readers. Within the design, I incorporate the key words that, to me, are the essence of that style or capture the important new developments pioneered in that era.

Despite the different styles used for each era, there are several unifying elements. The left column is consistent in all the pages - only the style of the numbers '2', '3', and '4' change. This features a timeline of important type and design developments from that period. On the bottom of every page, on the yellow ground, is a list of the major typefaces that came out of that period, and the typographer who created these. On the top right, the bold yellow "typography" helps to unify and ground each page.