Yesterday, We Are Pixel8 were happy to launch a website for one of our strategic partners, Six11Ink. Now that the site is live and in the wild, I thought it would be interesting, if not cathartic, to share some of the design inspiration and processes that went into this project. I hope you enjoy this post as I will try to write at least one about each of the projects we work on.

The design mantra? Retro & Vintage.

Having already designed the logo for the client, I had a clear understanding of what I visually wanted to achieve with the website. The keywords I was working with were retro, clean and vintage. Since the client’s services center around copy writing and content strategies, it really didn’t make sense to design an image heavy website that would distract from the content.

Obviously retro and vintage is something that is quite trendy these days and I didn’t want to over do it. The site needed to remain tasteful and speak in the owner’s voice and not my own. And, though I steered the direction the site would eventually take, each and every part of the site defines and personality trait of the owner, down to the raven as favicon.

My sources of Inspiration

During a particular conversation with the client, I started talking about the usage of hand drawn graphic ornaments that were prevalent in printed materials during the 19th and early 20th century. I wanted to experiment with some of these elements and bring them into the site somehow. The graphics, which would be kept to a minimum, would compliment the paper texture (mimicking the paper stock that was used during this time period) created for the tiling background.

I found endless inspiration in old text books, encyclopedias and first edition novels printed between 1800 and 1920. I started to collect all of these images and made a “mood board” that would assist me during sketching and mocking up. I loved the hand drawn etchings, the use of typography to create contrasts between type and the beautiful ornaments to dress it all up.

Hand drawn etchings

The hand drawn etchings I found in first edition novels were key points of inspiration that would lead me to the scans used as icons to differentiate each page.

Inspiration from vintage textbooks

I liked the idea of not only using these etchings, but putting them into context on the site. This would afford me the chance to have some fun with jQuery during development.

Graphic Ornaments & Typographical Variations

The use of graphic ornaments during this period were commonplace and generally used as dividers between text elements on a page or simply as ornaments in the header/footer area of a page. Also characteristic of this era in print was how typography was used to separate different areas of a page and create a hierarchy of information. This was sometimes achieved with the use of all capital letters, increasing the spacing between characters evenly with tracking or a combination of the two. I replicated the effect using the text-transform declaration and changing the letter-spacing in the CSS.

Inspiration from those who came before me

I am definitely not the first to “have at it” with this style of design. There are a slew of talented designers who have been drawn to these elements and have incorporated a variation, if not all, of these components in their own website designs in the past. In my travels for research and inspiration I also found these to be influential and my hat is tipped to all of these designers.

1. Simon Collison
2. The New York Moon
3. The Dollar Dreadful Family Library
4. The Blizzards
5. Bearskinrug
6. The Ernest Hemingway Collection

Having fun with @font-face

I have been looking for a chance to use the @font-face declaration for some time now. The fact that it is a cross browser solution for adding rich typography to a web design has always piqued my interest. The impediment, for me, has always been the limited amount of typefaces that are freely available to use with the declaration and I never wanted to use the technique to show how “cool” I am (which I definitely am not). I needed a beautiful font and the implementation needed to make sense for the overall design.

The Six11Ink website afforded me the opportunity to finally get my hands dirty with the technique. The mock ups contained the use of League Gothic, made available by The League of Moveable Type, for the headers and page titles. This revival typeface was used in the logo and really played into the retro theme of the site. Plus, I wanted the visual contrast between a condensed, heavy sans-serif font for headlines and a serif font for body copy.

But, throughout the design process, I was wondering how I would preserve these elements once I moved into development. At first, I thought about using the image replacement technique. This would be excellent for a static website, but I couldn’t use this technique for blog posts where content is created dynamically. So, that solution was immediately abandoned with the exception of the home page heading.

Then, I was resigned to use either sIFR or Cufon as a solution. I have never worked with Cufon and wasn’t quite ready to have to learn how to on the fly. I’ve worked with sIFR before and it definitely doe the trick. But, what happens when the user is browsing with a browser that doesn’t support Flash or has javascripts disabled? All of my beautiful type will fall back to a browser safe font in the font stack. I definitely didn’t want that.

Then I wondered whether League Gothic, since it was a free download, would be available to use with the @font-face declaration? After a quick Google search I found that, not only is it available for use, but Font Squirrel even provides all of the necessary file types needed for the declaration to work in the major browsers!

Now that I have dipped my toe into the @font-face pool, I am addicted. It was not only very easy to put to use, but quite liberating. I honestly cannot wait for another project to use this declaration on in the future.

A sprinkle of jQuery for personality

I will admit that the use of jQuery for the “Did you know?” tabs in the footer of each page was a bit grandiose on my part. I wanted to inject a little personality into the site and create a connection between the etchings and their usage and placement within the site itself. During my research, I found some interesting facts about the butterfly, quill, telephone and typewriter that I didn’t know about and thought it would be interesting to share with everyone else.

This wasn’t integral to the site itself, so I opted to turn this into a “show & tell” element that would be hidden until the user chose to interact with the tab. I thought it would be entertaining but know that it is completely self serving in the end. I just hope others find it as charming as I did.

Conclusion

I have to thank the founder of Six11Ink, Jeanette Fernandez, for allowing me such freedoms in the design and development of her site. Her unwavering trust allowed me to experiment and play around with ideas and concepts that I would not normally with another client. Definitely give the site a spin and let me know what you think. I am proud of the outcome but am always interested in constructive criticism.

Launch Website →