Unit21 AO2

Learning/Lesson Objectives

We Are Learning To (WALT):• Plan our web graphicsWhat I am Looking For (WILF):• 4 Plans

– Button Planning– Navigation Bar Planning– Roll Over Button Planning– Advertising Planning (Static or Animated.)

• Information on the aim, audience, house style, software (techniques), position, size.

• Information on the colours, text, images, link location and alt text.

Assessment CriteriaPass Merit Distinction

•Candidates will produce basic sketch diagrams for three different types of graphic. •Some details of target audience and purpose are identified.

•Candidates will produce detailed sketch diagrams for three different types of graphic. •Details of target audience and purpose are identified. •A house style is identified and adhered to and there is some consideration of size.

•Candidates will produce detailed sketch diagrams for three different types of graphic, giving comprehensive details of what they plan to create. •Details of target audience and purpose are identified. • A suitable house style is identified and adhered to and size is considered.

AO2 Navigation

Example

Up Over Down

Button Planning

• You need to design your home button that will be used as part of your navigation bar.

• For the over and down state you need to make slight changes. (Change the colour, add a glow, change the text size, etc).

Home HomeHome Home

Button Planning• You need to add information on the following:

– Button information – any colours you have used, the shape of the button, any images used, any effects used (bevel, glow, shadow, etc)

– Text information – font used, font size, alignment (left, center, right), colour, effects (glow, shadow, etc)

– Link information – pagename.html– Alt text – text that will be displayed in small yellow box

on over and down state.– Size – size of the button (150*150px, 200*200px, etc)

Up State - Example

Button: Blue rectangle with inner bevel and dark blue outline. Image of computer with mortarboard aligned right.Text: White text in Calibri font, size 18 pt, aligned leftLink: index.htmlAlt: HomeSize: 200 * 150 px

Navigation Bar Planning

• You need to design a navigation bar that has a minimum of 3 buttons and maximum of 6 buttons.

• You must use at least one drop-down menu.

• You need to document the link information, alt text information and use colour & borders.

Navigation Bar Planning

• You need to add information on the following:– Aim/Purpose

• Allows users to navigate website• Allows users to find the information they want

– Target Audience – this will be the same for all of your web graphics. (Gender, Age, Income levels, Location, Hobbies, etc)

– House style – what colours will you use? What fonts will you use? What alignment will you use? WHY WILL YOU USE THESE?

– Software (Techniques) – Macromedia Fireworks 8, Techniques: Bevel, glow, shadow, etc.

– Position & Size – Where will you position your navigation bar? How big will your navigation be?

Navigation Bar Planning Example

First Option Illustration

Second Option Illustration

Home About Products Clients Contact Links

Link: index.htmlAlt: Home

Home About Products Clients Contact Links

The Company Link:the_company.html

The Staff Link:the_staff.html

Link: about.htmlAlt: About

Roll Over Button Planning

• You need to design 3 roll over buttons for your website.

• They must be in independent of your navigation bar but can link to 3 of the pages used in your navigation bar.

• They need to be large and catch the users attention as they will act as quick links.

Roll Over Button Planning• You need to add information on the following:

– Aim/Purpose• Allow users to navigate to specific areas of the website• Help promote/advertise specific areas of a website• Act as a visual navigation system





Roll Over Button Planning• You need to design your buttons that will used as

quick links.• For the over and down state you need to make

slight changes. (Change the colour, add a glow, change the text size, etc).

• You need to describe the graphic information – shape of button, colours used, effects used (bevel, glow, shadow, etc), images used.

• You need to describe the text information – font used, font size, font style (bold, italic, underlined, etc), font colour, alignment (left, center, right), font effects (shadow, glow, etc).

Advertising Banner Planning

• You have 2 options:1.Static advertising banner– This will be created in Macromedia

Fireworks 8 and will contain at least 1 hyperlink.

2.Animated advertising banner.– This will be created in Macromedia Flash

8 and will use various animation techniques such as motion tweens, shape tweens, fades, zooms and frame by frame animation.

Static Advertising Banner• You need to add information on the following:

– Aim/Purpose• Provide information about a product/event/website• Change behaviour – Anti-drinking/Anti-smoking• Attract attention/traffic – Bright, colourful banners with animation, video and sound can grab your attention

and influence you to visit a website/link• Persuade user to purchase a product• Persuade user to join something. – Gym/fan club/school/newsletter• Entertain/Engage – is the banner interactive?





Static Advertising Banner

• You need to sketch your advertising banner showing exactly what text, images and colour you will use.

• You also need to describe the components you will use:– Image information – any images you use, any

colours you will use, any effects you will use (glow, shadow, bevel, etc), alignment

– Text information – font types, font sizes, font styles (bold, italic, underlined), alignment

Static Advertising BannerExample

Components used:

Image information:Image of white t-shirt in top left corner.Image of pink skirt in top right corner.Image of grey belt in bottom left cornerImage of black and white shoe in bottom right corner.Orange Star in middle with bevel and shadowText information:Calibri font, white, centered, size 18 pt. Click here for more links to sale.html and has SALE alt text.

50% off SaleAll T-shirts, Skirts, Belts and shoes

Click here for more

Animated Advertising Banner

• Client name – this is the name of the client you are making your advertising for. (Your website name).– Aim/Purpose

• Provide information about a product/event/website• Change behaviour – Anti-drinking/Anti-smoking• Attract attention/traffic – Bright, colourful banners with animation, video and sound can grab your attention

and influence you to visit a website/link• Persuade user to purchase a product• Persuade user to join something. – Gym/fan club/school/newsletter• Entertain/Engage – is the banner interactive?

• Target audience - this will be the same for all of your web graphics. (Gender, Age, Income levels, Location, Hobbies, etc)

• Length of sequence – how many seconds is your animation going to be?

• Screen dimensions – how big will your animation be? Will it be horizontal (800*200 px), will it be vertical (200 * 600 px) or will it be a rectangle (500 * 400 px)

Animated Advertising Banner

• You need to sketch each scene of your advertising banner showing exactly what text, images and colour you will use.

• You also need to describe the components you will use:– Images – any images you use, any colours you will

use, any effects you will use (glow, shadow, bevel, etc), alignment

– Animation Techniques – motion tween, rotate, fade, zoom, shape tween, frame by frame.

– Action – explain what will happen in each scene (e.g – The t-shirt will motion tween from left to right and the text will zoom into the center.)

Animated Advertising BannerExample

Scene 1. Components used:Images:Image of white t-shirtOrange text with inner bevel.Animation techniques used:Motion tweenZoom in

Action: white shirt motion tweens from left to right and stops. Orange text with inner bevel zooms in from center. Finishing size of text is 54 pt and in Calibri font.

Education

Unit21 AO2