OPTC Draft Designs
Posted on | April 3, 2009 by carolyn
Peter McKinnon has prepared three variations on a base concept for consideration by the OPTC Web Team. These are subtle changes on a basic theme. I then took the base concept and created a rough draft of what the Home page might look like if some of the features and elements from the RFP were incorporated into Peter’s concept.
Since an image upload module hasn’t been incorporated into the OPTC Forum yet, I decided to use my site for posting the images. You can click on the thumbnail images to see them full size. Please add your comments on the OPTC Forum.
Home Page Layout #1
Version #1 has a dark green leaf pattern background, evergreen tree icons with the current page dark green and the inactive header navigation links grayed. There’s a delicate light blue gradation from the top of the content box (“the page”) to the bottom.
It includes the basic wide beauty shot with the image icons below. Clicking on the image icons will change the large image. This will be a standard feature in all of the layouts presented.
Home Page Layout #2
Version #2 has a softer green leaf pattern background, a solid white content box, and no icons separating the header navigation links.
One advantage to a solid color background is download speed. Not everyone will have highspeed access and limiting the number of background & icon images improves download performance. It’s always a balance between performance and “curb appeal”. Some thought should be given as to what graphic elements are worth the performance price. Ideally, something should be downloaded quickly to indicate there’s more to come. I will talk with Erik and the Freelock coders to determine what options might be available to prevent site abandonment during downloads.
Home Page Layout #3
Version #3 again uses the softer green leaf pattern background with a solid light blue background for the content box (“page”) and a calligraphic-style tree icon to separate the header navigation links. Additional content, such as the Welcome text has a solid white background to add structure and organization.
These are the 3 versions Peter McKinnon sent me for your consideration.
I had a few issues to bring up (such as the issue of remembering download optimization especially for folks not on high-speed access; granted not your primary audience but something I wanted everyone to keep in mind) and I wanted to give the Web Team an idea of what the design might look like incorporating some of the elements and features described in the RFP such as list of the events for the month, blog entries, special features and things that visitors would be looking for such as weather, contact information (I’m thinking this would be a link to a page listing all of the partner sites and contact info), and so forth. I took a few bits from the sites like travelnevada.com that folks have mentioned and incorporated some of that information and created a variation on Peter McKinnon’s Version #2.
Cooper’s Variation With Feature Elements
One thing I was a bit concerned about was maximizing the real estate “above the fold” (i.e., before the visitor has to scroll down). By aligning the header navigation links to the right, I was able to move them up in line with the OPTC logo. I also added a sub-navigation below the search box for some secondary info that visitors might want to reach quickly like contact info, weather and such. I also added the RSS subscription link to the header, since you’ll want to build some RSS subscribers and track them via Feedburner.
A map to help orient visitors had been discussed, so I swiped one off the internet and placed it so that the top would be viewable above the fold. This should encourag visitors to scroll down and see the rest of the page. By numbering the partner locations and making the numbers link to area pages I thought it gave a strong, easy-to-understand visual navigation while putting the various sites — and the distances to be covered — in perspective. But other folks may feel differently.
The RFP mentioned a listing of the current months events on the home page, so I added that (with a call to action for ordering or downloading the brochures and maps). There was also a discussion in the RFP about a changing list of “Our Favorites” or “Featured Activities”, so I thought “hey, why not combine the terms?” and created the Featured Favorites which could be set up to change either on each visit to the page or as desired. And finally, the RFP mentioned having a listing of posts from the blog, but I called it “Recently Added” because it could actually be a list of titles for recently added content such as new travel blog entries, new itineraries, new events, or whatever. It could also be where the text about the Olympic Peninsula could go. You’ll want some text that list all the partner locations and the primary cities for search engine optimization purposes, but really very few people will read much of the text. People scan text on the internet, primarily looking to see if it will answer their questions or contains the information they are looking for.
Another issue I want to bring up is maintaining a distinct and consistent navigation system, specifically color-coding links. As Steve Krug points out in “Don’t Make Me Think,” web site visitors want to be able to identify links versus non-linking text at a glance. So if green is going to be the link color, I recommend using another color for the headers and other text. I just grabbed the blue from the OPTC logo, but it can be anything, even the same color as the body text only bigger.
Anyway, I just wanted to give everyone a feel for the possibilities for home page elements. And a big thank you to Peter McKinnon for his patience in my mangling his designs. I look forward to the discussion on the OPTC Forum.









