1. Graphics for the Web AO2

2. Objectives  Become familiar with the unit.  Understand the importance of planning graphics  Know what is meant by file types and limitations

3. File Types and Limitations  Think about all the different ways you can get online?  You demand graphics to load quickly. You expect to not wait!  The bigger files are, the longer they will take to load.  You need to have the most optimised files, so they load quickly.  File Types and Bottleneck Guide File Types and Bottleneck Guide

4. Planning  Planning is really important when creating graphics to make sure they are fir for purpose and suitable for the audience.  E.g. How would you make a menu suitable for children to find games of different types ?  E.g. How would you make a banner suitable to attract 18-25 yr olds to buy a new mobile phone?  HOUSE-STYLE is CRUCIAL – You must decide on 2-3 colours for Blue Star and STICK with them. What colours do you think they should be?

5. Detailed Planning  A detailed plan should let a third party (i.e. someone other than you) to be able to make a menu, button or banner without ever speaking to you.  It should include details of:  The colour of the text  Position of the text  Size of the text  Quality of the graphic  DPI (72dpi for the web, 300dpi for print)  File type(s) (GIF, JPEG, PNG, HTML, PNG) with reasons.  File size - how will you keep the file small  Interactivity - how will a user use the graphic Let’s look at an example

6. Navigation Menu  What things are typically on a Navigation Menu for a phone company?  Let’s concept map how this, and what graphics / dropdowns you could have.  Write this down as a class!

7. Buttons  What buttons could you have?  What graphics could you have with them?  What colour could the NORMAL, OVER and DOWN states be?  Let’s concept map what buttons you could have and the states you could use.  Write this down as a class!

8. Banner  What is typically on a banner?  What graphics could you have on it?  What animation could you add?  What interactivity could you add?  Let’s concept map these ideas.  Write this down as a class!

9. AO2 Task  In this task you need to write DETAILED plans for each of your menu, buttons and banners.  Use the help site to guide you.  To check if it is detailed – give your plan to someone, ask them for feedback.  Let’s look at the site instructions. Let’s look at the site instructions.