Hey there —

This is my old site. If you'd like to see what I'm up to now head to http://www.goldenkrishna.com

Thanks!

Website

StevePre

Website for 70s running icon.

Process

(This redesign is still in progress.)

I created StevePre.com to honor running icon Steve Prefontaine. The cult hero held the American record for every track race over a mile when he died in a car accident at the age of 24 in 1975.

In 1997, as a high school cross country runner, I was fascinated with Prefontaine. So, when my dial-up internet provider offered its users free web space, I used it to create a dedication site to Prefontaine. I was armed with little: Microsoft Paint, Word and no experience in web design.

Within a few months, however, the message board had hundreds of posts. By 2001, The Eugene Register-Guard had featured the site on the front page of its sports section and Runner’s World had named StevePre.com “Best of the Web.”

In 2008, now a trained graphic designer, I decided to return to the community that had encouraged my early work. First, I wrote and designed StevePre: The Unfinished Story of Running Icon Steve Prefontaine. A month after its release, it was in Amazon.com’s Top 100 biographies and Barnes & Noble ordered copies.

In the fall of 2009, I began redesigning StevePre.com away from its Microsoft Paint graphics. I invited Art Director’s Club Young Gun Peter Kaplan and Otis web design professor Roman Jaster to critique my work and guide me along my self-directed project.

Goal-Setting

StevePre.com Goals

In a lecture at IxDA Interaction 09, Luke Wroblewski described a redesign of Yahoo! as centered around a single idea: “a dashboard for the web.” It’s brevity could be easily communicated across many designers and developers.

Luke’s lecture influenced me to set clear goals for the redesign of StevePre.com, which gave me a checklist for my work. Furthermore, sharing them through a collaborative website helped Roman and Peter provide a better critique.

User-Based Scenarios

User Scanerio Sketches

Who uses StevePre.com? What are their common tasks at the site?

While working at Cooper, a San Francisco firm that specializes in usability for interactive products, I learned methodologies to design thoughtful user experiences. Inspired by their process, I structured my redesign around user scenarios.

I created personas to represent the majority of vistors, listed their common tasks, brainstormed designs to help them easily accomplish those tasks and then translated those ideas into scenarios.

Compositional Sketching

Compositional Sketches

Compositional and formal qualities are essential to controlling hierarchy and garnering visual interest, so I converted the lines and boxes of the scenario sketches into compositional sketches.

Furthermore, guided by advice given by Jason Santa Maria at an SVA lecture in 2009, I didn’t want pages to be generic content dumps with a header and body copy, but rather formally-specific to the content. To give the site an overall point of view, I came up with a list of traits to describe the visual story told at StevePre.com: legendary, inspiring, powerful and tenacious.

Color and Type Palettes

Compositional Sketches

From the compositional sketches, I started loose, digital iterations of the pages within each scenario. This was good because staying loose helped me a wide range of visually appealing pages. But, working quickly and loose I created colors spread across a large range of hue, value and tone; and type styles of all sorts.

To solve this problem, I created type and color palettes. Controlling fonts from Typekit along with a color palette and an added grid based on an appropriate column width for body copy, gave type and color styles specific, consistent meaning across the site.

preview

Details

Year: 2009

Size: N/A

More Views

This is an active project and the following screeenshots are subject to change.

Homepage

Homepage: Those familiar with the site tend to start at the forum page to connect with other fans, while first-time visitors who want to discover more about Steve Prefontaine tend to at this logical first stop: the homepage. To guide them through the site and teach them about Prefontaine, I designed text and visual summaries of his life. The introductory text is a quick summary with links to discover more information, and a timeline provides an easy-to-grasp visual overview.

Bill Bowerman

Article: Information about Steve Prefontaine’s coach and Nike co-founder Bill Bowerman is visually grabbing for a youth audience and expresses the attitude of Pre’s story.

Tools

Article Tools (Detail): StevePre.com is commonly used as a resource for junior high and high school student papers about a hero or a person of inspiration. To help out those students, a drop down tools menu provides resources like the page as a downloadable PDF and an MLA citation.

Quotes

Quotes Page: Frequently requested inspirational quotes from Steve Prefontaine and Bill Bowerman unfolding in various typographic illustrations as the user scrolls downward.

Forum

Forum: Heavy users of the site tend to bypass the homepage and start at this forum page, which is a hub for community talk about Prefontaine and running.

Forum Detail

Forum (Detail): Frequent visitors read the forum daily. For a quick glance over new topics, message previews along with the number of replies are shown next to topic titles.