Colour theory

When designing your website it is important that you consider what colours your using. Colour cobination is a really important part of colour theory and designing your website. If your using lot of different colours, it could make your page look too busy and that can make it hard for the audience to find the information their looking for. On the other hand if your not using enough colours, it can make your page look boring which could make the website look less appealing the the audience.

A common rule is to use 3 colours.

First of you should have a primary colour, which is the main colour your going to be using. Then you should apply a "secondary colour" as this colour should be chosen that it backs up your primary colour well. Then you should have a "highlight colour" which is used to emphasize certain parts of the page. The highlight colour is the colour that contracts more with the primary and secondary colour, but it should only be used with moderation.

Analog colours are the colours that sit on the side of any other colour, the secondry colour is normally an analog colour.
Complementary colours are colours that stand out and contrast against eachother. Often complementary colours are used as highlight colours.
Using split complementary colours can give your design a high level of contrast but not as exstreme as complementary colours alone.
Triad colours are used when you want to have a design that is colourful but balanced.

Photography, Composition and Non Verbal communication

Good design elements

Eyeflow - Elements in the picture that guide the viewer's eye through the whole frame.




Dominant element - In Photography 'Dominant elements' there is normally one subject for the photo. The subject may be either a one object, or a number of objects.




Simplicity - Only what is essential to the picture is included in the actual image.





The Rule of Thirds - When taking a photo, having the main subject in the centre of the photo with lots of background space is the most common way to take a photo but it's the least appealing way. Using a grid you can choose where to crop your photo to make it look more interesting that the audience will find the photos more appealing.






Diagonal rule - According to the diagonal rule the important parts of the picture should be placed along these diagonals, waterways, and fences placed diagonally, are generally perceived as more dynamic than horizontally.








Non Verbal Communication
It's important to take pictures can communicate many things to the audience. In a photo its important about what message you are trying to give off to the audience.

Expression is importantand is 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.
It's also important to take notice of what your model in your photo would be wearing as the clothes communicate with the audience.
Touch- ritualistic touching (products) conveys emotion and manner. Grasping and holding is functional is important.
Body movements also important, it relates to the function your model/actor is doing.

Positional communication

Reciprocal- relationship with two people in which each person is the centre of the other’s attention.
Divergent- both actors/models attention is diverted towards something else.
Object- the attention of each person is focused towards the same thing.
Semi-reciprocal- one actors/models attention is focused on the actors, whose attention is somewhere else.

I haven't used my own pictures as this is only research.

Planning and Research

The layout of these charity websites are all very similar and all have some sort of pictures on them. There is a minimal amount of information that is important. All four websites i have looked at have a great use of colour and are eye catching that all go together. The colours on the websites are not too "in your face" and don't clash which makes the websites appealing to the audience. The main colours used on these websites are blue, red, green, yellow with black text. The target audiences for these websites are parents and children. The use of navigation is really good as nearly all four have pictures around the navigation bars. Also all the navigations bars are highlighted and are easily found on the websites.
Photo's and pictures are used really well as i've already mentioned that there are cartoon drawings and pictures around places like the navigation bar and around the top of the home page which will catch the audiences attention.
The text is used really well as there is only next that is needed on there, sometimes websites can put too much text on and tend to "waffle" which can bore the audience. So it's important to be straight to the point and explain well.
The logo's are mainly text that has being characterised and made eye catching by using bright colours and large text. Short and simple words are best for logos.
The over all design of the websites are all very eye catching and more importantly they all appeal to their target audiences and will keep the audience interested and give them the information they need.

Charity website design

These screen shots are screen shots of my rough design of a website i designed to learn the basic's on how to design a website. Doing this will benefit me when i come to designing my charity website. I think i did well for my first attempt at designing a website but i think there is room for improvement, esspecially pieces like the logo. I think the logo could have been more detailed and more recogition that it is a primary school logo. Also i think i could have used more colours that dark blue with black writing but i think i did well when it came to information about the school and the layout of the front page and the fonts and font sizes i used were well chosen. I think if i had used more pictures it would have made my rough design more appealing to an audience and would have shown them more qualities of the school. I didn't use my own photos because this research. The target audience for my rough design is parents and children.

Research and Planning: Logo design

Photo's will be up soon etc.

Preliminary task

Layout

These two wesites are both education websites, but one if a primary school for young children and the other is a college website for young adults. The layouts in both of the websites are very similar. They both have a large picture on the right hand side and a navigation bar on the left hand side. Both logo's are in the top left hand corner and at the bottom of the home page there are links and contact information.
Use of colour

The use of colour in both websites are completely different to eachother. The primary school website is bright blue and the picture is outlines with a yellow frame. There is also a lighter bright blue used for the back ground. The writing is white and it contrasts well on a bright blue back ground as it's easy to read off.

The college website has a white/bluey back ground, and a dark blue strip across the top of the website which remains on every other page. The navigation bar is a purple/bluey colour and the writing is black writing on the light back grounds and white writing on the darker backgrounds.
The target audience

Both websites show clearly what their target audience is aimed at. The primary school one is aimed at parents and adults, and maybe some children, and it stands out and catches people's eye. The college website is aimed at young adults/adults so it doesnt have to be quite as catchy as its not a childrens college.
Ease of use/navigation

The navigation bar in both websites are on the left hand side and it is made easy to use, and you can clearly see how it works.
Photos and images

The use of images were used well, they both had a large image on the right hand side of the home page, which makes both websites stand out and eye catching. The college picture on the actual website was a slide show of photo's and one was of the school, and the primary school photo is a picture of the school. Putting a picture of the premesis is showing users what the places look like, so they can see if it appeals to them.
Use of text

The use of text on the primary school website was used well as there wasn't too much text on the home page, sometimes too much text can put people off as they don't want the hassle of having to take in a lot of information all at once. On the other hand the college home page had more information on, which isn't nessassarily a bad thing as there wasn't a great amount.

Logos

The primary school logo is of a flag and then across the flag the name of the school is written in yellow writing. The logo is eye catching, and is a similar sort of design to other primary school logos i have seen. The college logo wasn't quite as eye catching, it's a white square with a tick in it with writing saying "Lincoln College".

The overall design of both websites would be rather appealing to their target audiences, i think that they have great design conventions and have used sensible colour choices and the over all design.

Good web design and conventions

A convention is either colours, shapes, fonts, layouts or patterns that have become so reconizable over the years that they connote things that don't actually have to say what it's use is, and there is hundreds of them. For example a yellow triangle on a road sign stands for 'warning', which has crossed over to become the convention in software.
Design conventions are usful because over time it becomes easier to design a website by using these conventions because people now reconize what each convention sign means over time. Also, design conventions not only make designing a website easier, it also makes it easier for the users using the website.
Design conventions should be used all the time, because it's like not putting a disabled sign on a disabled toilet door.

Some examples of design conventions

If you see a set of words seperated by "" , vertical lines at the bottom of a web page, you automaticly think that they are a set of links within the web site you're on.

An area of screen that looks like a button (raised or rectangular) will conventionally perform an action when clicked with the mouse.