Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for...
Transcript of Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for...
![Page 1: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/1.jpg)
Design & Navigation |Summer 2009
Bellevue Capstone Project
![Page 2: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/2.jpg)
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."
![Page 3: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/3.jpg)
Site Structure The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi Website.
![Page 4: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/4.jpg)
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
![Page 5: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/5.jpg)
Site Map Diagram
![Page 6: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/6.jpg)
Option one: //index
Wire Frame
![Page 7: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/7.jpg)
Option one: About page > Biography
![Page 8: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/8.jpg)
Option one: Train Page > Training for marathon > Training Plans
![Page 9: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/9.jpg)
Option two: //index
![Page 10: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/10.jpg)
Option two: About > biography
![Page 11: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/11.jpg)
Option two: Train > lifestyle
![Page 12: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/12.jpg)
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:
![Page 13: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/13.jpg)
Design Specification"Choosing fonts, colors, graphics and multimedia that can be incorporated.
![Page 14: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/14.jpg)
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.
![Page 15: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/15.jpg)
Font Selection
Sample fonts in paragraph
![Page 16: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/16.jpg)
Color Options
Creating two color palettes as options for the website.
![Page 17: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/17.jpg)
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 18: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/18.jpg)
Page Mock Up"Page mock up of Patrick Muturi website.
![Page 19: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/19.jpg)
Page Mock Up
Main website proposal for pmmarathon.com. Option One.
![Page 20: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/20.jpg)
Page Mock Up
Main website proposal for pmmarathon.com. Option two.
![Page 21: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/21.jpg)
Second Page Level Mock Up
Option One
![Page 22: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/22.jpg)
Second Page Level Mock Up
Option Two
![Page 23: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/23.jpg)
Third Level Page Mock Up
Option One
![Page 24: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/24.jpg)
Third Level Page Mock Up
Option Two
![Page 25: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/25.jpg)
Next Up "Discuss about the next class session.
![Page 26: Design & Navigation |Summer 2009 · The Site map/storyboard, wireframe, and navigation plan for Patrick Muturi ... standard fonts to avoid unwanted default font from the user computer.](https://reader035.fdocuments.in/reader035/viewer/2022070914/5fb4fccfc2dd4a29ca776e57/html5/thumbnails/26.jpg)
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.