Portfolio: Thurston: The Western Web Series

Summary

I designed and developed the web site for Thurston: The Western Web Series. The web site hosts Thurston's episodes and information about the show. It mixes period design of the Old West 'wanted' poster and modern content management of WordPress.

Backstory

Thurston is an online drama series set in the fictional frontier town of Thurston. The series first launched on The SFN Online Television Network, a content syndication site.

Thurston's viewers increased. The SFN and Thurston's producers felt the series needed its own site for marketing purposes. Later, after the site and series were established, Thurston’s producers decided to break from The SFN and host their own content using embedded Vimeo videos.

Problem

The site needed to present:

  • Series' episodes
  • News and press releases
  • Awards nominated and received
  • Information about the characters, cast and crew
  • Way to contact the producers

The site's design needed to evoke the spirit of the old West and reflect the branding established in the series’ video titles.

The site's content needed to be easy to update without touching code. Some types of site content--episodes and award--required special handling. Thurston's Facebook conversations also needed to tie-in with the site.

Problem solving

UX

The most important content of the site was the episode. The featured episode was given top billing on the home page and episodes' page. A screen shot from the episode advertised the episode. The screenshot, episode title or ‘View episode’ movie ticket linked users to the video, embedded using the Vimeo player.

Labels for content collections needed to fit with the ‘Old west’ theme and be easily interpreted by users. We used the term ‘Inhabitants’ to highlight the show's characters as members of the Thurston community. The term ‘Dispatch,’ a common newspaper masthead, represented the news/press section of the site. The label ‘Town Gossip’ bridged the gap from old to new and represented the Facebook feed on the home page.

Visual

The design concept was the Old West "wanted" poster. Posters and newspapers were two methods for communicating news to the community and we looked at both of those as concepts for the site. Late 19th-century American newspapers crammed as much content into as little space as possible, with little sense of hierarchy and few illustrations. The "wanted" poster concept captured Thurston's soap opera romance, villainy and heroism nuance better than the newspaper alternative.

Materials

Visual details were based around the idea of a poster, tattered by the elements and nailed to a rough, wood-paneled wall outside a general store or post office where people gathered to discuss the goings-ons in the community.

The initial design had light gray paper, thinking that the series took place in the late 1860s, before wood pulp paper became common. Feedback suggested the paper needed to look “more yellowed,” like paper left out in the sun.

Typography and ornament

Thurston’s brand was already established in the episodes' titling sequence. “Thurston” was set using the typeface Bleeding Cowboy, a derivative Oklahoma. Typefaces needed to be historically appropriate and readable on the screen.

Research into late-19th century typography brought up some interesting options and some limitations:

  • Western printers composed publications using multiple, different typefaces.
  • Some typefaces from the period withstood the test of time (Clarendon) and some did not (Hobo).
  • Sans-serif typefaces weren't invented yet. This was one significant typography challenge: find a screen-readable sans-serif typeface that worked with the period typefaces.
  • Ornamentation was limited to engravings or wood block carvings. High-end production might have used stone lithography, but that was rarely found among frontier town printers.

The typefaces that made the final cut:

  • Clarendon LT Standard Bold for headers
  • Cabin Regular and Bold flavors for body copy
  • Bleeding Cowboy for the Thurston logotype
  • Oklahoma for the “movie ticket”
  • Adobe’s Wood Type Ornaments, converted to outlines and used as graphics

Build

The Thurston producers needed to update their site’s content without noodling with code. WordPress was selected for it’s easy-to-navigate admin area.

Thurston’s theme is custom-built. It includes two custom post types for episodes and awards.

This project was the first time I used the SMCSS methodology to organize the CSS for the stylesheet.

The theme is not responsive. When the site was developed, responsive design was still a new-ish concept. The producers felt their audience were not likely to access the site via a mobile device. We decided to shelve making the site responsive.

Reflection

This was one of my favorite projects to work on. I enjoyed delving into a design direction I had not tried before.

This project required some research into late 1800s design history. I learned more about historical typography and some other history of the era (paper making, postal service, period newspapers, and some frontier history). Learning about new topics one of my favorite things about web design and one of the things that keeps me going to the next project.

I feel this was a successful project. Looking back on it since its launch, I still enjoy how the site turned out.

The producers were also pleased with the result, particularly WordPress' easy to use interface.

More like this: