Photography, Composition and Non Verbal communication

Part of putting my charity website together i will need to include my own photograhs or my own graphic work. Before taking my own photographs to include in my charities website, I will need to follow some good rules and basic principles of good photography that will make my website look good and eye-catching. As this is part of my research task I have used some of my own photos and some I have found examples off the internet. For me to create my website I will definitely have to use my own original photography.
-------------------------------------------------------------------------------------------------------------
Eye flow
-------------------------------------------------------------------------------------------------------------
Eye flow is a great technique to use when taking a photography. It is a technique used to make the viewer's eye travel along through the photograph and viewing the entire scene. The elements in the scene guide the audience through the entire photograph.

-------------------------------------------------------------------------------------------------------------

Dominant element
-------------------------------------------------------------------------------------------------------------

Usually there is one main subject to the image. The subject may be either a single object, or a relationship. The dominant element is the center of visual interest in a photo.
-------------------------------------------------------------------------------------------------------------
Simplicity
-------------------------------------------------------------------------------------------------------------
The technique of simplicity is used to achieve the effect of singling out an item or items from their surrounding. Only what is essential to the scene is included in the final image.

-------------------------------------------------------------------------------------------------------------

Balance
-------------------------------------------------------------------------------------------------------------

It may be symmetric or asymmetric, subtle or obvious.
-------------------------------------------------------------------------------------------------------------
The Rule of Thirds
-------------------------------------------------------------------------------------------------------------








In the first photo the dog is almost dead center, with a lot of wasted room on just about all sides. While this may be one of the most common ways to take a portrait, it’s also the most common way to take an uninteresting photo.









The second photo is the same image however this time it is cropped and makes use of the rule of thirds, the dog in this photo there is not as much wasted room, the dog's head is at the top right of the frame, and thus more of the dog's body can be seen. It also gives a sense of height. The dog is off-center, which not only adds a significant amount of interest and mystique, but directs your attention very clearly to the dog, as well as allowing you to see the background.









The basis of the ages-old Rule of Thirds is that if you were to divide a frame into thirds, both ways, the points of intersection are the points where your subject should be placed in order to be most interesting. The subject’s eyes are directly lined up with the intersecting points. Any one of those four points is a great place to frame your subject.
More examples that have been improved using the Rule of Thirds:
-------------------------------------------------------------------------------------------------------------
Diagonal rule
-------------------------------------------------------------------------------------------------------------
One side of the picture is divided into two, and then each half is divided into three parts. The adjacent side is divided so that the lines connecting the resulting points form a diagonal frame. According to the Diagonal Rule, important elements of the picture should be placed along these diagonals:

Linear elements, such as roads, waterways, and fences placed diagonally, are generally perceived as more dynamic than horizontally placed ones:
-------------------------------------------------------------------------------------------------------------
Non Verbal Communication
-------------------------------------------------------------------------------------------------------------
How we position and direct models in our pictures can communicate many things to the audience.

Expression - Based on conventionalised cultural codes, instantly recognisable.
Eye contact - directly towards the consumer (appealing to them) or involved within the scene of the ad.

Pose- Static or active often corresponds to expression. Can also be a symbol of status.
Clothes - Important as they communicate to the audience.
Touch - Ritualistic touching (cosmetics) conveys emotion and manner. Grasping and holding is functional.
Body movement - Relates to the function that the actor is doing.
-------------------------------------------------------------------------------------------------------------
Positional communication
-------------------------------------------------------------------------------------------------------------
Relationships between actors within the frame, the direction they are facing, the height of each can show relationships and status.

Reciprocal - A two-way relationship in which each person is the centre of the other’s attention.
Divergent - Each person’s attention is diverted towards something different.
Object - The attention of each person is directed towards the same object.
Semi-reciprocal - One person’s attention is concentrated on the other, whose attention is elsewhere.

Colour Theory

Colour Theory is a set of principles used to create harmonious color combinations. Colour relationships can be visually represented with a color wheel — the color spectrum wrapped onto a circle.

Colour combination is really the most important part of colour theory and designing with colors, and also the hardest. It always comes down to your personal judgement and how you look at colors. There are some rules that can be used to make a color combination that is interesting and pleasing to the eye. One rule in these matters is to use three colours.

Too many colours will make the page feel too busy and it usually makes it harder for the viewer to find the information he or she wants. It is also more tiring to the eyes. A page with too few colors, on the other hand, risks being seen as a bit boring, and can lose attention of the audience but this need not always be the case.

Primary colour: This is the main colour of the page. It will occupy most of the area and set the tone for the design as a whole.

Secondary colour: This is the second colour on the page, and it is usually there to "back up" the primary color. It is usually a colour that is pretty close to the primary colour.

Highlight colour: This is a colour that is used to emphasize certain parts of the page. It is usually a color which constrasts more with the primary and secondary colours, and as such, it should be used with moderation. It is common to use a complimentary or split-complimentary colour for this (see below).
-------------------------------------------------------------------------------------------------------------
Colour Wheel
-------------------------------------------------------------------------------------------------------------
The colour wheel is very useful when you want to combine colors in a way that is pleasing.



-------------------------------------------------------------------------------------------------------------
Analog Colours
-------------------------------------------------------------------------------------------------------------
The analog colours have colours that are adjacent to each other on the colour wheel. One colour is used as a dominant colour while others are used to enrich the scheme.

-------------------------------------------------------------------------------------------------------------
Complementary Colours
-------------------------------------------------------------------------------------------------------------
The complementary colours consists of two colours that are opposite each other on the colour wheel. This scheme looks best when you place a warm colour against a cool colour, for example, red versus green-blue. This scheme is intrinsically high-contrast.

-------------------------------------------------------------------------------------------------------------
Split Complementary Colours
-------------------------------------------------------------------------------------------------------------
Split complementary is a variation of the standard complementary scheme. It uses a colour and the two colours adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.

-------------------------------------------------------------------------------------------------------------
Triad Colours
-------------------------------------------------------------------------------------------------------------
Triad colours uses three colours equally spaced around the colour wheel. This scheme is popular among artists because it offers strong visual contrast while retaining harmony and colour richness. The triadic scheme is not as contrasting as the complementary scheme, but it looks more balanced and harmonious.

-------------------------------------------------------------------------------------------------------------
Colours for my Charity website
-------------------------------------------------------------------------------------------------------------
For my charity website I am using an indigo colour with a light blue colour on a white background. From looking at colour theory and the colour wheel I have reserched into analogo colours for my designs. Their is one main blue which is indigo and a lighter blue as the secondary colours. I think blue is a colour to use the RSPCA, PDSA and blue cross website all use blue. Because i'm gonna be using a white bacground i want to fill the website pages with information and lots of colourful photographs. My navigation bar which I will be constructing will be indigo with white glowing writing to make it more interesting so it is not a boring website. From researching into other websites and looking at their colour schemes I can see they get audience and use the colours I want to use for my own charity website. My indigo colour could represent sadness of pets needing care because they have not been looked after very well or they have been treated cruely and need desperate vet care, then need to be rehomed to a better family who will take better care of the pets. The blue may make the photos stand out more from just using the one colour.

Main Task: Charity or Issue, Target Audience and Logo research

For part of my main tash I will research into a charity or issue that I can base my website on. I have chosen to base my charity or issue on an animal charity.
-------------------------------------------------------------------------------------------------------------
RSPCA
-------------------------------------------------------------------------------------------------------------

The RSPCA is the oldest and best-known animal welfare organisation. They're best known for their rescue and rehoming work with cats and dogs, but they respond to all animals in need, not just other pets but also wildlife, farm animals and laboratory animals. I have chosen the RSPCA this charity of issue for my main task. I have chosen the RSPCA because it is a well known charity and helps rescue and rehome anilmals.

-------------------------------------------------------------------------------------------------------------
Video Clip
-------------------------------------------------------------------------------------------------------------
I have researched into other charites adverts on youtube and the RSPCA's own website for video clips which I can relate to my own website.It shows clips of the animals that have been saved by the RSPCA and does a sad story of how and where they were abandoned.
http://www.youtube.com/watch?v=_ARjGqmEuAo&feature=player_detailpage

-------------------------------------------------------------------------------------------------------------
Similar Charities
-------------------------------------------------------------------------------------------------------------
The Blue Cross UK: Animal Welfare Charity, Animal Hospitals, Animal Adoption

Animal welfare charity, with animal hospitals and animal adoption services. The Blue Cross is a registered UK animal welfare charity. Their aims are to:
- Ensure the welfare of animals by providing practical care.
- Highlight the benefits of companionship between animals and people.
- Promote a sense of respect and responsibility towards animals in the community
-------------------------------------------------------------------------------------------------------------
Video Clip
-------------------------------------------------------------------------------------------------------------
I have researched into other charites adverts on youtube and the Blue Cross own website for video clips which I can relate to my own website. This video not only appears on youtube but its own website also. If you watch it has the logo at the very beginning of the clip to show and familarize who they're.
http://www.youtube.com/watch?v=2jNvzLYYNCk&feature=player_embedded

Dogs Trust

The UK's largest dog welfare charity, outreach programs, education, information, dogs for rehoming, legislation and campaigning. Founded in 1891, Dogs Trust (formerly the National Canine Defence League) is the largest dog welfare charity in the UK. Their mission is to bring about the day when all dogs can enjoy a happy life, free from the threat of unnecessary destruction.
-------------------------------------------------------------------------------------------------------------
Video Clip
-------------------------------------------------------------------------------------------------------------
I have researched into other charites adverts on youtube and the Dogs Trust own website (http://www.dogstrust.org.uk/) for video clips which I can relate to my own website.
http://www.youtube.com/watch?feature=player_detailpage&v=PCV_koyJ1Fk

PDSA

The PDSA provides free veterinary services for the pets of needy owners in the UK. Their mission is to care for the pets of people in need by providing free veterinary services to their sick and injured animals and promoting responsible pet ownership.
-------------------------------------------------------------------------------------------------------------
Video Clip
-------------------------------------------------------------------------------------------------------------
I have researched into other charites adverts on youtube and the PDSA own website for video clips which I can relate to my own website. The logo is shown in the top left corner always.
http://www.youtube.com/watch?v=aumsAosJzWQ&feature=player_detailpage

WWF

WWF is:
- The world’s leading independent environmental organisation.
- A truly global network, working in more than 90 countries.
- A challenging, constructive, science-based organisation that addresses issues from the survival of species and habitats to climate change, sustainable business and environmental education.
- A charity dependent upon its five million supporters worldwide - some 90 per cent of our income derives from voluntary sources such as people and the business community.
- An organisation that makes a difference.
-------------------------------------------------------------------------------------------------------------
Video Clip
-------------------------------------------------------------------------------------------------------------
I have researched into other charites adverts on youtube and the WWF own website for video clips which I can relate to my own website. The logo is shown in the top left corner and at the end of the clip. This advert is quick, simple, gets its point across, gives the right and appropriate information e.g. number to call and is entertaining with all the clips of animals and the fast music.
http://www.youtube.com/watch?v=sOp9l_rEy7o

-------------------------------------------------------------------------------------------------------------
Target Audience
-------------------------------------------------------------------------------------------------------------
My website's target audience will be aimed at people who are interested in saving and rescuing animals. This may be that the audience would want to help to rehome an animal giving them a better life from what the animal's life was like before they got rescued. Also donating money towards the charity ro help them animals in need. Also the audience could be interested in preventing what cruel things happen to animals and attend campaigns. To appeal to my target audience I need to design my website in a fun, colourful and picture full website. Pictures will very much appeal to the audience. The colours need to co-ordinate but stand out at the same time. Also design my layout with the headings I need to talk about on my website. Also a clear navigation of the website would be helpful so it's easy to use for the audience. Videos featuring on the websites or television are very eye-catching and more enteraining than just all writing and information. A video gets the point across and is quick and simple and you can see the real thing for yourself.
-------------------------------------------------------------------------------------------------------------
Charity Logos
-------------------------------------------------------------------------------------------------------------
RSPCA Logo

The logo has the letters RSPCA which stands for Royal Society for the Prevention of Cruelty to Animals (RSPCA). It is bold and recognisable and only uses twocolours which doesn't make it look to busy.

Blue Cross Logo

The logo uses two colours and gives the name of the charity which makes it recognisable to the audience with the name underneath the logo.

DogsTrust Logo

The entire logo is used to convey the meaning intended and avoid tarnishing or misrepresenting the intended image. The significance of the logo is to help the reader identify the organization, assure the readers that they have reached the right article containing critical commentary about the organization, and illustrate the organization's intended branding message in a way that words alone could not convey. The logo has an image of a dog on a bright yellown background only using two colours which makes it eye catching and recognisable to the audience.

PDSA Logo

Like the RSPCA logo it shows the letters PDSA which stands for People's Dispensary for Sick Animals (PDSA) The font is one colour and has a slogan under the logo, 'For pets in need of vets'. Also it rhymes. It is also recognisable to the audience.

WWF Logo

WWF's panda logo is recognised worldwide as a symbol of conservation and sustainable development. It is bold and black and white. WWF stands for World Wide Fund for Nature (WWF). It is well recognised and a well known charity.
-------------------------------------------------------------------------------------------------------------
What makes a good logo?
-------------------------------------------------------------------------------------------------------------
From my examples that I have collected from current charity websites I can describe in detail on what makes a good logo. To make/design a good logo I think it needs to be relevant to indusrty/company/website. It needs to be memorable and so it can be recognised when people see it, so coulours need to stand out to the audience. A good logo can describe the company. Some logos can look good when they are simple and can be effective without colour. A logo needs to be good because it is promoting a brand recognition. The logo is used so the audience can recognise it wherever they may see it. A good, eye-catching logo can make a big impact on the website. A good logo should be aimed directly at the target audience. Not to much colour should be used when designing as it looks better with only using 1-3 colours in a good logo. Most logos are shown in the top left corner of the website to make it recognisale to the audience this is one rule of a convention.

Prelimary Primary School Website

I have created a primary school website with 4 pages which include a home, welcome, subjects and a classes page. I have made it easy to navigate with a navigation bar on the left hand-side of the screen listed with each page the audience can visit to get information about the school. Below is my webiste, I have print screened each page and will now annotate my pages.
-------------------------------------------------------------------------------------------------------------
Home Page
-------------------------------------------------------------------------------------------------------------

The header of this page shows the school name. It has a little welcome with a bit of information about the school. There is a picture of school children running round having fun. However, these are not my own pictures so I will take into consideration of using my own photographs for my charity website. At the bottom of the page I have shown logos of the school achievements which makes the school look good to the audience. Pages are listed below (Latest News, Parental Information, Events and Achievements). These pages I should have maybe listed on every page so it is easy to access or go back to. I didn't include a video on my website but it doesn't matter to much. A video could have helped the website look better so I will take this into consideration for next time. I did create a school logo but it did not scan very well so I left it off the website, I will need to put some type of logo on my next website to make the website recognisable. A logo makes the website look good.
-------------------------------------------------------------------------------------------------------------
Welcome Page
-------------------------------------------------------------------------------------------------------------

This page includes a full welcome but this time from the school's headteacher. Again it lists the navigation bar on the left hand-side and the list and achievements at the bottom of the page. The message from the headteacher helps make the school look good aswell. With the headteachers words about the school the audience can trust the website and the headteachers view about the school.
-------------------------------------------------------------------------------------------------------------
Subjects Page
-------------------------------------------------------------------------------------------------------------

On this page I have listed all the subjects that are included in St. Andrews Primary school. Each subject would have a little information about what the pupils will be doing in each keystage. There also is a picture of one example of some art work. This page could have used more colour and pictures.
-------------------------------------------------------------------------------------------------------------
Classes Page
-------------------------------------------------------------------------------------------------------------

This page has each year listed, (Year 3, 4, 5 + 6). These are for parents to look at certain year in which their child participate in. They can see what that certain year includes and what will be achieved in that year. Each year shows the teachers that teach in that year and which classes are which. The classes will say what that class are doing at the moment. I added a few cartoon pictures but it would have looked better to use my own. I think I could have done more as there is a lot of white space which looks a bit boring.

From looking at the positives and negatives of my created primary school website I can resolve these problems when I come to making my charity website. I think for a first time designing a website I successfully related to my target audience. The target audience mainly being the parents of students. However, it can target to the kids aswell, if I made a kids page with games. My design is successful of using the school colours and being easy to navigate.I think the target audience would find this primary school webiste useful to find information they need. Or if they want to know what their children are studying or learning they can easily access the website and find out.

Website Storyboard

I have created a website storyboard. I have planned out the home page, a welcome page, and a subjects and years page.
-------------------------------------------------------------------------------------------------------------
Home Page
-------------------------------------------------------------------------------------------------------------
On the hompage I have planned to have the logo in the top left hand corner so the school website can be noticed by it's logo. The naviagtion bar is also on the left hand-side and is planned to have many pages to go to, to give the audience as much information as they need. Also it will be clear and easy to use and access other pages easily, so even the young students can use it. I have put a header on every page with the school name shown. There is a picture shown of students looking happy having fun to encourage parents for their child to come attend this primary school. The writing says a small welcome and the latest event thats been happening underneath the photo.
-------------------------------------------------------------------------------------------------------------
Welcome Page
-------------------------------------------------------------------------------------------------------------
A big, warming welcome message to mainly parents from the headteacher of the primary school and a picture next to it of the headteacher. Under shows what happens at the school and latest news, events, parental information, achievements and a picture slideshow showing the events.
-------------------------------------------------------------------------------------------------------------
Subjects Page
-------------------------------------------------------------------------------------------------------------
This page includes all the subjects taught at the primary school, what teachers teach it and all the information about the subject. Subjects include art, french, history, ICT, literacy, numeracy, music, geography, PE and games, science, religious education, design and tecnology. These are listed on the subjects page so the audience can click on each subject to find out more information about that subject. It gives the audiencer a taster of what activities are included in each subject. This is appealing to the audience as they may want their child to take part in this area of subjects.
-------------------------------------------------------------------------------------------------------------
Years Page
-------------------------------------------------------------------------------------------------------------
Primary school Year 3 - Year 6. Each year is listed. Each year page will supply the audience with information such as the teachers, the lesson, the curriculum, projects, clubs and trips for example. It will also give information on what the children will learn and achieve.
-------------------------------------------------------------------------------------------------------------
Below are my rough desings for my primary school website. My designs show each of my 4 pages for the school's website. This includes the; Home Page, Welcome Page, Subjects Page and Years Page. These are some drawn up rough designs which I tend to work off to create my website and make it look as good or better than my rough designs.
-------------------------------------------------------------------------------------------------------------
Home Page
-------------------------------------------------------------------------------------------------------------

The Home Page design displays the navigation bar, with effected writing on which page you are on, a small welcome, picture, logo and the name of the school. The effected writing is clear for the audience to know which page they are on. The navigation bar makes it clear for the audience to navigate around the website. Pictures, and bright colours are eye-catching and very effective for representing the school and making it look good with the target audience of parents wanting to place their child in this school. The logo and school name make the website recognisable and well-known.
-------------------------------------------------------------------------------------------------------------
Welcome Page
-------------------------------------------------------------------------------------------------------------

The Welcome Page design displays the navigation bar, with effected writing on which page you are on, a big welcome from the headteacher, the headteacher's picture, logo and the name of the school. Also below is more information about latest news, achievements and events. With a headteacher's comment and view of the school it makes the website look good and gives a good impression to the target audience. More links to go on can make it clearer and easier for the audience to go on such as the latest news, events and achievements. Achievements are a great way to show high impressions of the school.
-------------------------------------------------------------------------------------------------------------
Subjects Page
-------------------------------------------------------------------------------------------------------------

The Subjects Page design displays the navigation bar, with effected writing on which page you are on, list of subjects that are available in the school, pictures, logo and the name of the school. The list of subjects enables the audience to research mre into what the subjects include, pictures of students learning are also very effective.
-------------------------------------------------------------------------------------------------------------
Years Page
-------------------------------------------------------------------------------------------------------------

The Years Page design displays the navigation bar, with effected writing on which page you are on, list of years between 3 and 6, pictures, logo and the name of the school. Listing the different years gives more information abut what is included in that year for the audience and pictures showing what activites are involved e.g. school trips.

Research and Planning- Preliminary Task Designing

-------------------------------------------------------------------------------------------------------------
What is the websites purpose?
-------------------------------------------------------------------------------------------------------------
The websites purpose is to give information and knowledge to the target audience about the school. It has to be clear and user-friendly so the audience doesn't have trouble using the site. It's purpose is to advise children or parents to come to their primary school.
-------------------------------------------------------------------------------------------------------------
Who are the audience of the website?
-------------------------------------------------------------------------------------------------------------
The audience for this website is aimed at students, parents, oncoming students and staff. Parents may be interested in whats the latest news and event going on at the school. Parents of children who are looking at secondary schools may help their child chose what school they want to go to through looking at the school website. Staff may use the website to put information on the website for example about the subjects or courses. Oncoming new students may be interested in using the website for any games they may find the website really fun and be interested in the school.
-------------------------------------------------------------------------------------------------------------
What does the website have to communicate?
-------------------------------------------------------------------------------------------------------------
This website has to communicate to the audience. It has to encourage new students in coming to this school by giving them a fantastic welcome. Not only does it have to encourage the students but the parents of the students also. It has to communicate that it's a great, friendly school to come to, and has high achievements and great results. It has to communicate everything about the school like; events, notices, subjects/courses, awards and achievements.
-------------------------------------------------------------------------------------------------------------
What will the personality of the website be?
-------------------------------------------------------------------------------------------------------------
The personality of this website will be fun for the kids and part formal for the amount of information being given to parents/adults.It will be fun for the kids like a few games as it's a primary school website.

Good Web Design and Conventions

-------------------------------------------------------------------------------------------------------------
What is a convention?
-------------------------------------------------------------------------------------------------------------
A convention is basically a system of guidelines that web designers follow to create a good, familiar and easy to navigate website. Conventions ensure that internet users can become familiar operating a website. Not all websites conform to the conventions that many other websites do. Some websites are layed out similar to others such as headers and navigation bars normally located at the top of the website. A navigation bar doesn't have to be at the top, it can either be at the side or the website could use a different method to guide the audience through the website. One convention might be underlining in a web site. Though links do not have to be underlined, it is generally accepted that underlined words are links. One word in a different color in a body of text also usually signals it could be a link.
-------------------------------------------------------------------------------------------------------------
Why are they useful?
-------------------------------------------------------------------------------------------------------------
Conventions are useful because when making a website people can run by the rules of the conventions. The conventions are there to make a good, easy to use website.
-------------------------------------------------------------------------------------------------------------
Do we have to use them all the time?
-------------------------------------------------------------------------------------------------------------
Not all the time. There are plenty of websites that breaks the conventions but the website can still look good and be easy to use.
-------------------------------------------------------------------------------------------------------------
What examples of conventions are found in webdesign?
-------------------------------------------------------------------------------------------------------------
Such examples of conventions are found in webdesign such as;
- A navigation bar down the left hand side of the screen or top. Most websites do this as the audience is used to the navigation bar on the left hand-side or along the top. It's easy to find and use.
- Maybe the website has it's own logo and shows it's from that company, normally shown in top of corner on left-hand side of screen.
-------------------------------------------------------------------------------------------------------------
Accessorize Website
-------------------------------------------------------------------------------------------------------------
Examples of web conventions

What bends the conventions?
- A navigation bar down the left hand side of the screen. Normally seen on most websites because the audience is used to the navigation bar on the left hand-side.
- The shop logo is in the top left hand corner of the screen. Any logo is normally on the top left hand corner of the screen so the website is recognisable and known. - It has a header that is the same on every page except if you enter monsoon's website because accessorize and monsoon are the same company.

What breaks the conventions?
- A second navigation bar along the top of the screen below the header for the audience to enter another part of the website. The monsoon side of the website.


-------------------------------------------------------------------------------------------------------------
Adidas Website
-------------------------------------------------------------------------------------------------------------
Examples of web conventions

What bends the conventions?
- Small, but not an obvious navigation bar at the top of the screen.
- The shop logo is in the top left hand corner of the screen.

What breaks the conventions?
- When you hover the mouse over the pictures they expand bigger covering other objects and adds links and information to go to.
- The navigation bar is the pictures and each different square.
- The website has a trendy look to attract the audience even though it breaks some conventions.