Graphics for the Web

AO2

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

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

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?

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

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!

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!

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!

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.