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.