College TV Site Brief

The aim of this assignment is to create a working College TV website and Flash player for videos in order to pass or partially pass the units that this includes I must;
Re-write the brief in my own words (identifing the target audience)
Produce a time plan detailing when tasks will be completed by.
Conduct research to inspire initial ideas for the site. (In the form of a research file, printed blog post or a mood board)
Produce a selection of initial ideas at between A4 and A3.
Develop initial ideas at between A4 and A3.
Review initial ideas and development of those ideas.(By annotating, Video Presentation, Viva Voce or printed blog posts attached to the work)
Create the college TV website and the Flash video player for the site
Test the created site and all of it's components;
Record problems and plan changes to the site
Create backups of the files and the site throughout
Produce a final evaluation making sure to include pre production and production.
Review the finished product by comparing to the original intention, appropriateness to target audience, the technical qualities and the aesthetics of the site, the content of the site and its style.

The target audience of the College Tv site is people interested in applying to Stephensons College (job or student) and Students currently at the college.

Don't Make Me Think

• The purpose of google is to aid people in finding information on a variety of topics.
• The site wants the user to type in what they are looking for so that google can meet its purpose.
• It is obvious what the sites purpose is and what it wants the user to do.
• Out of 10 with 10 being complicated and requireing a lot of thought its about a 1 or 2.
  

Websites PNG32

Narnia Site

The Narnia Website uses several PNG32 images; the PNG32 images are identifiable by their transparent backgrounds.
These include the characters and objects i.e. menus.
When the site loads these images come onto the screen over the background separately indicating multiple PNG32 files.
The background could also have been done using PNG format however it would more likely be PNG24.

Seek the Signs .com and .co.uk

The Seeker site also uses PNG32 files this is more visible in the .co.uk version.
PNG32 files on the Seeker site include the celtic symbol on the menu of both the .com and .co.uk site as well as the menu/description to the right of the screen on the .co.uk site.
Both sites include visual feedback.
On the Seeker site this is used in combination with the PNG32 celtic menu at the bottom which responds by expanding on the over state.
This could have been created by creating a button and then altering the over state of the object to a movie clip.
Other visual feedback includes the highlighting of objects in the over state this could have been done in a similar way to the celtic menu but altering the background and text colours.
There are also multiple seperate movie files.

Flash Video Coding

http://dansinteractive.blogspot.com/2008_08_01_archive.html

Folder System

Principles of Interactive Media

Visual Treatment

Accessibility

Some disabilities can make it harder for a person to access interactive media these include vision impairments, hearing impairments and dyslexia.
This is because the person needs to read words, see pictures or icons, and hear sound in order to use Interactive Media.
This means that interactive media should be designed so that it is accessible as much as possible, to people with vision impairment, hearing impairment and dyslexia.
As Designer it is important to take into consideration the following points;

• Vision impaired users in general need bigger text in a plain font, with enough contrast between the colour of the text and the colour of the background.
  This site would be considered not accessible to a person with vision impairment, (http://pixelcentric.net/interface.php)
• Hearing impaired people may not be able to understand sounds or speech properly.
  To make Interactive Media accessible to hearing impaired users the text should be given alongside any important audio information. This could mean displaying the text that is being spoken along with the audio track, or by including subtitles when video is being used.
• Dyslexic people are affected by many of the same things that affect vision impaired users. This means taking similar steps as you would have to take with vision impaired users e.g. bigger text in a plain font, with enough contrast between the colour of the text and the colour of the background.

The issue of accessibility can also be solved by having multiple versions of the same site an example of this is the BBC News site which has a text only version.
(BBC News, http://news.bbc.co.uk/text%20text%20only.stm)
The site is a good example of accessibility because it caters to the needs of people with vision impairments and dyslexia by having larger text which contrasts against the background of the site.

Colour Theory

Colour theory has numerous points these include;

• The colour wheel which is divided into temperatures cool, cold, warm and hot, this means that colours e.g. blue can be used to cool down a warm image or a warm colour e.g. red can be used to warm a cold image.
• The colour wheel consists of primary colours red, blue, yellow, secondary colours orange purple and green created by mixing primary colours and finally tertiary colours which are colours created by mixing tertiary colours.
• Complimentary colours which are colours that are opposite on the colour wheel. Contrasting colours e.g. black and white.
• Colours in common which are the colours that are next to complimentary colours green and purple are colours in common with blue.
• Each colour consists of a hue (the pure colour), a tint which is a lighter shade of the hue created by adding white to the hue, and a shade which is a darker shade of the hue created by adding black to the hue.
• Colour theory also includes saturation which can be used to remove the colours of an image to create a grey scale image.

Use of Images and Composition

Use of images and composition covers a number of points over the coming section I will attempt to explain some of these and give relevant examples;

• The Rule of Thirds

The Rule of Thirds can be linked with layout and involves dividing the page into thirds vertically and horizontally so that the picture is divided into nine separate sections.
The Rule identifies four important areas that a designer should consider placing images on these points are at the intersecting lines.
This is because people are usually drawn to these areas rather than to the centre of the page.
The theory is that if you place points of interest in the intersections or along the lines that the image, design or photo has the appearance of being more balanced.

• Depth of Field

The Depth of Field is defined as the as the portion of a image, screen or subject that is appears sharp in the image, screen or subject.
So in conclusion it is generally to with focus on a subject.
An example of a shallow Depth of Field can be seen in figure (a) below.

(a)

(Wikipedia, http://en.wikipedia.org/wiki/File:DOF-ShallowDepthofField.jpg)

Balance

Unless a Publication is in colour, white, black and grey are the only tones on the page. Blank areas are considered as white space, images/graphics as black space and text as grey space.
The aim of a designer is to balance these tones on each page.
For example to much white space can make it difficult for readers to follow the flow of a site, document, etc.
Too many images and graphics give the site or document the appearance of being dark and busy, and too much text can be discouraging even for people interested in a subject.
Each of the tones is equally important they are only important in relation to each other. White space is only useful if contrasted with black and grey space, the same applies for black space and grey space.

Layout and Interface Design

Usability

Usability describes the overall user experience with interactive media.
A description of usability is:
"Usability is a term used to denote the ease with which people can employ a particular tool or other human-made object (in this case, your website) in order to achieve a particular goal." (http://styleguide.caltech.edu/navigation)
Usability is connected with design, accessibility, language, layout, navigation etc.
Bad decisions by a designer in any of those areas can lead to poor usability for certain user groups.

Language and Terminology

Terminology refers to the language used to describe a certain thing or an action.
For example most people would be unfamiliar with the term “expunge”, though it is used on some web based email programs, more common terms would be delete or erase.
Taking this into consideration it is important to use language and terminology that the user group will be comfortable using.
“You can do this by observing conventions or standards with which the users may already be familiar.” (http://iteachinteractive.blogspot.com/search?updated-max=2009-01-08T08%3A42%3A00-08%3A00&max-results=7)

Effective Use of Layout

Layout is concerned with the organisation of information on the screen; it includes position of the title or heading, location of navigation options and how images are used in combination with text.
However layout is not only concerned with the organisation of information on the screen but how it is presented.
It is important as a designer to consider the layout so that users become familiar with how a website works, and are not required to re-learn the layout on every page.
An example would be setting all the navigation options on one side of the page.

Use of Navigation

Navigation is the system implemented to allow users to “move around” within interactive media

Navigation can be organized into primary, secondary and tertiary.

A good explanation of this is:

"Primary navigation is defined as the navigation which appears on every page of the site. Primary navigation divides all your content up in to sections, all of which are navigable from anywhere in the site."Secondary navigation occurs when primary sections of the site have enough content to warrant navigation within that section. The same applies to tertiary navigation"(http://styleguide.caltech.edu/navigation)