web site development

Web Site Development

TGJ 3M1

Personal Portfolio… Showcase of your projects from

this course. Should be designed to reflect

something about you and your personality!

Include the following… Splash Page Home Page/About Me page Com Tech page Project Page

Navigation Bars A set of hyperlinks that give users a

way to display pages. A web site usually contains more

than one type of navigation bar.

Top Global Navigation Bar

Top Global Navigation Bar

Contains links to each page on the first and second levels of the web site.

Shouldn’t contain more than 8 links.

Bottom Global Navigation Bar

Bottom Global Navigation Bar

This bar should only use text links in a small size.

Should contain all links to all of the pages in the web site if possible.

Local Navigation Bar

Local Navigation Bar Can also be positioned under the

Global Navigation Bar. Typically contains links to the child

pages of the current page. Can also contain links to same-level

pages.

Breadcrumb Trail/Path

Breadcrumb Trail/Path Displays the page names, from the

home page to the current page. Each of the names acts as a link to

that page. It allows the user to easily backtrack

through the site.

Links to Home Page Should always be a link on each

page to the home page. Always located in the breadcrumb

trail and in the bottom global navigation bar.

Logo at top of page typically links to home page.

Navigation Structure… Organization of a web site is called a

navigation structure. Navigation

structure for East Side Mario’s has 3 levels of pages.

East Side Mario’s

Navigation Structure:

Parent and child pages

Design Concepts:

Appropriateness Elements in the web site should

match the purpose and target audience.

Design Concepts:

Consistency Page layout should be similar for

each page. User quickly becomes familiar with

the site and can navigate easily. Use consistency in the way you deal

with links.

Design Concepts:

Usability Users need to find information that

is useful to them. Avoid wordiness and keep text short. Allow for seamless navigation.

Design Considerations:

Text Try not to use more than two fonts. Don’t place text over busy

backgrounds. Don’t centre body copy text. DON’T USE ALL CAPITALS IN YOUR

BODY COPY. IT’S HARD TO READ!

Design Considerations:

Colour Use of “heavy” backgrounds distract

the user. Solid coloured text on solid coloured

backgrounds work best. Limit colour scheme to 3-4 colours. Keep colour scheme consistent

throughout web site.