Presentation is loading. Please wait.

Presentation is loading. Please wait.

We Are Learning To (WALT): Plan our web graphics What I am Looking For (WILF): 4 Plans – Button Planning – Navigation Bar Planning – Roll Over Button.

Similar presentations


Presentation on theme: "We Are Learning To (WALT): Plan our web graphics What I am Looking For (WILF): 4 Plans – Button Planning – Navigation Bar Planning – Roll Over Button."— Presentation transcript:

1

2 We Are Learning To (WALT): Plan our web graphics What 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.

3 PassMeritDistinction 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.

4 AO2 Button Planning Roll Over Button Planning Advertising Banner Planning Navigation Bar Planning

5 We Are Learning To (WALT): Plan our Home Button What I am Looking For (WILF): Home Button Planning Information Home Button Planning Sketch

6 Example UpOverDown 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

7 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 left Link: index.html Alt: Home Size: 200 * 150 px

8 Complete: – Home_Button_Planning_Information.doc – This is the information relating to your website (this can be based on a real company or a fictional comapny of your choice)Home_Button_Planning_Information.doc – Home_Button_Planning_Sketch.doc – This is the actual sketch of the Home Button. You can do this on the computer using MS Word Drawing tools (schematic) or you can sketch by hand. You need to include the information we have just discussed. Home_Button_Planning_Sketch.doc Locations: – http://st-james-ict.wikispaces.com > Unit 21 – Web Graphics > AO2 http://st-james-ict.wikispaces.com – S > ICT > KS4 > National Cert > Unit 21 > AO2

9 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.

10 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?

11 First Option Illustration Second Option Illustration HomeAboutProductsClientsContactLinks Link: index.html Alt: Home HomeAboutProductsClientsContactLinks The CompanyLink:the_company.html The StaffLink:the_staff.html Link: about.html Alt: About

12 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.

13 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 – 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?

14 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).

15 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.

16 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? – 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?

17 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

18 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 corner Image of black and white shoe in bottom right corner. Orange Star in middle with bevel and shadow Text information: Calibri font, white, centered, size 18 pt. Click here for more links to sale.html and has SALE alt text. 50% off Sale All T-shirts, Skirts, Belts and shoes Click here for more 50% off Sale All T-shirts, Skirts, Belts and shoes Click here for more

19 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)

20 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.)

21 Scene 1.Components used: Images: Image of white t-shirt Orange text with inner bevel. Animation techniques used: Motion tween Zoom 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.


Download ppt "We Are Learning To (WALT): Plan our web graphics What I am Looking For (WILF): 4 Plans – Button Planning – Navigation Bar Planning – Roll Over Button."

Similar presentations


Ads by Google