Design & Navigation |Summer 2009

Bellevue Capstone Project

Site Structure "The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi Website. "

Design Specification"Choosing fonts, colors, graphics and multimedia that can be incorporated. "

Page Mock up"Page mock up of Patrick Muturi website."

Next Up"Discuss about the next class session."

Site Structure The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi Website.

Site Map

Index About Biography Accomplishments Gallery Blog Train Lifestyle Training for Marathon Training Plans Running Half-Marathon Running Full Marathon Networking What you need Finding Resources Contact Site Map

Summary of Sitemap for Patrick Muturi Website Structure

Site Map Diagram

Option one: //index

Wire Frame

Option one: About page > Biography

Option one: Train Page > Training for marathon > Training Plans

Option two: //index

Option two: About > biography

Option two: Train > lifestyle

Navigation Plan

Pmmarathon.com will use page-top nav bar as the global navigation. Example: http://www.burpee.com

As for the local navigation, we will implement the left-hand panel. Example: http://www.cnn.com

The blog feature will use breadcrumbs, to show the hierarchical information, which users access by following conceptual path deeper and deeper into the site, this includes single page posts of the blog. Example:

Design Specification"Choosing fonts, colors, graphics and multimedia that can be incorporated.

Font Selection

Selections on the font for the website:

Arial and Verdana are two standard fonts in the web that are available all across computers wide world.

It is important to choose standard fonts to avoid unwanted default font from the user computer.

For the site building, we will avoid using unique fonts, so that it will increase speed of the website.

Font Selection

Sample fonts in paragraph

Color Options

Creating two color palettes as options for the website.

Color Selection

Selecting the final color palette for the website

Monochromatic colors are chosen by client because it is the characteristic approach that we envision pmmarathon.com will move forward.

Characteristics of Monochromatic colors:

Bold Stability Longevity Calm and Peace Constant Confident Strong Authoritative Substantial Simplicity

Page Mock Up"Page mock up of Patrick Muturi website.

Page Mock Up

Main website proposal for pmmarathon.com. Option One.

Page Mock Up

Main website proposal for pmmarathon.com. Option two.

Second Page Level Mock Up

Option One

Second Page Level Mock Up

Option Two

Third Level Page Mock Up

Option One

Third Level Page Mock Up

Option Two

Next Up "Discuss about the next class session.

Building pmmarathon.com Website

Upon building the website, pmmarathon.com will pay attention on how the XHTML and CSS were written and validated.

Usability Testing Plan from different users

Selecting Publishing plan

Domain name and web-hosting registration

All topics will be discuss in the next class session.