Creation – NavigationLesson 18

Lesson Goals

Understand the importance of a good navigation system

Know how to make navigation appear interactive

Be able to create a navigation bar or button set

#navigation#button

Assessment Criteria

The assessment criteria for this part of the unit is as follows:

LO3 – Create a new functional multi-page websiteP3 Demonstrate web authoring skills by creating a new competent functional

multi-page website that includes:• Consistent style across pages• Text and graphics• Method of user feedback

M2 Demonstrate proficient design skills. The new multi-page website produced is suitable for the target audience and includes rich media. The website produced is generally of a good technical standard.

D2 Make appropriate use of optimisation techniques and site management tools. The website produced is generally of a high technical standard.

Navigation

The navigation structure of a website should be easy to understand and allow a user access to each of the main areas of your website.

A good navigation bar or button set will look consistent and attractive and it should also fit in with the overall style of your website.

#navigation#button

Know ways of displaying interactionBe able to create a navigation bar

InteractionHow can we make a navigation bar appear interactive?

ColourUsing a different share or contrasting colour

You can indicate that a user is interacting with your navigation by:

Interaction

StyleAdjusting the button style or font style

SizeIncreasing or decreasing font or button size

#navigation#button

Know ways of displaying interactionBe able to create a navigation bar

Sometimes a navigation bar will make use of a combination of these methods to show interaction.

Text ExamplesKnow ways of displaying interactionBe able to create a navigation bar

Button ExamplesKnow ways of displaying interactionBe able to create a navigation bar

Non-StandardKnow ways of displaying interactionBe able to create a navigation bar

Other ButtonsWhere else might you need some type of navigation on your site?

Navigation

The navigation on your site may also come from other areas such as:

Text LinksHyperlinked words

within an area of text

Image LinksUsing an image on a page as a

hyperlink elsewhere

Site LogoMaking the site logo a

hyperlink to the homepage

DownloadUsing a button or text link within a paragraph of text

Know ways of displaying interactionBe able to create a navigation bar

Your Task

Create a suitable navigation bar or set of buttons for your website by using Adobe Fireworks: Text Images Interaction Colour Scheme Consistent Style

Create additional buttons for navigation that isn’t part of your navigation bar e.g. Social Media.

#navigation#button

Know ways of displaying interactionBe able to create a navigation bar