Well that’s a lot of pages (Website paper design 1)

This is a set of pages that show the potential new BBC layout. This is the site layout:

BBC_Hierarchy

Each page in the hierarchy above is shown in detail below. Note that some components that do work on the current site (cue sheet navigation, descriptive text) are pasted in as place holders. The store is a copy of the Garmin-Sharp Cycling Team apparel store. The Join/Renew page is a hacked-up screenshot of the Sierra Club’s site. The dynamic items are assumed to be JavaScript implemented using the YUI library, which will connect to a MySQL back-end accessible through servlets running under a Tomcat instance. Maps will most likely be handled through RideWithGPS, with whom I am currently in discussions with about accessing their API:

Home/Splash page

Splash / Home Page

Splash / Home Page

Join/Renew

Join / Renew

Join / Renew

About

About

Store

Store

Member Pages

Member

Member

MemberClubInfo

MemberClubInfo

MemberCueLibrary

MemberCueLibrary

MemberForums

MemberForums

MemberGroups

MemberGroups

MemberProfile

MemberProfile

MemberRides

MemberRides

New Rider Pages

New Rider

NewRider

New Rider Descriptions

NewRiderDescription

New Rider Events

NewRiderEvents

New Rider Instructional

NewRiderInstructional

New Rider Rides

NewRiderRides

Visitor Pages

Visitor

Visitor

Visitor Ride Descriptions

VisitorRideDescriptions

Visitor “Ride Our Best”

VisitorRideOurBest

Visitor Rides

VisitorRides

Reflections:

This was very useful. I’m curious to see if the hand-drawn nature of the pages will have any effect on the BBC board. As is probably pretty apparent, I wound up using Photoshop to combine and modify elements. I tried to keep it quick-and-dirty, though the ease of screenshots over drawing something was too hard to resist sometimes.

That being said, sitting down with a pencil and paper was very helpful for me in the initial thinking about the site. I must have done 5 or 6 attempts at the home page before things started clicking. I’m not sure if the process would have been as relaxed if I had been using Photoshop from the start. As I became more confident with where I was going, I wound up drawing less and less and using Photoshop more. At this point though, I feel like it might be a really nice thing to use these pages as the basis for a wireframe and see how navigation around the site feels.

I will be using this framework to brief the BBC board, as well as describe what’s going on with the site mechanics with the RideWithGPS developers. I’ll add to this when I get some impressions.

Advertisements
This entry was posted in Assignments, Interfaces, UI. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s