Tuesday 28 January 2014

Assignment 2- Design a Website


Introduction

My website is about Penguins, the website will have 5 pages consisting of simple information about penguins. I have to make sure that the website is easy to use, fun to look at as well as colourful as the target audience for my website is kids.






Purpose

The purpose of the website is to provide simple information about Penguins; the aim is to provide easy to understand information, with a fun and interactive website.

Audience

My target audience is kids, therefore the website has to be colourful, easy and fun to use. The website will focus on fun information which will be easy to remember.

Content

There are going to be 5 pages included in the website:

Introduction= a little introductions about penguins, a little about different species of penguins and what animal category they come in.

Fun facts= 10 fun and short facts about penguins, these will be short and simple to understand as well as fun to read.

Habitat= Information about what kind of habitat the penguins live in, for example where different type of penguins live as different type of penguins live in different habitats.

Diet= If there is any special diets for penguins, for example what they eat in the wild as well as what they eat in captivity. For example food preferences and resources, method of collecting and eating food and food intake.

Photographs= at least 10 pictures of penguins, these will include where penguins live, what they eat etc.

Navigation

All of the pages will connected to the Home Page, the home page is also connected to the logo, so when the user clicks on the logo, it will take the user to the home page.

In the diagram below, it shows that all the pages are linked to the home page, so on every page there will be a link that will take the user back to the home page. As well as all the pages will be interlinked, therefore just like the home page, there will be a link on every page that will be linked to the other pages making it easier to navigate around the website.


















Colours

Complementary colours

Hex= 5300B2 - Background

Hex= 5300B2 - Font

I chose to use these colours as they are complementary colours, meaning they are opposite on the colour wheel. This means I will have a light (yellow) background and dark (purple) font, making it easier to read as well as it making it bright and colourful as my target audience is kids.














Fonts

(<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>)

I choose 'Audiowide, 1 Style by Astigmatic' by Google fonts, as the website is for kids; therefore I decided to have a font that will be fun to look at and fun to read.

Logo

I produced this logo in Adobe Illustrator, I took an image from Google and using the 'pen' tool; I traced around it and added colours to it. Since the website is aimed at kids I made the logo look animated as it would be more attractive to kids.


Web Design 

Page 1- Home Page

I decided to have the home simple yet attractive, therefore I used bright colours with images in the pages, however kept the page very easy to use. I kept the navigation on the left side of every page to make the design consistent. I choose to use purple and yellow as the main colours for all of the pages as they are complementary colours which makes it easier to read for kids as well as keeping it vibrant and colourful, which is important to keep the attention on kids. I added 2 pictures as kids don't tend to read a lot but instead look at pictures and draw conclusions from there and the logo is kept in the left upper corner.



Page 2- Diet

I kept this page very similar to the 'Home Page' as I wanted to make the design consistent, so kids don't get confused and think that they are on a different website. There is a heading of 'Diet' which marks what the webpage is about. The navigation is still on the left and there is a little bit of text about the diet of penguins. There are also 2 pictures; these are different to the ones on the 'Home Page'.


 


Page 3- Habitat

Page 3 is similar to 'Home Page' and Page 2. The title is in the heading box and the navigation is still on the left. The same colours are used but different images are used. This page is about the habitat of penguins, it gives some facts about penguin’s habitat.



Page 4- Fun Facts

The fourth page consists of 7 fun facts about penguins. They are listed on the left side and next to them there are 2 pictures. The layout of the page is the same, with the navigation on the left with purple and yellow being the main colours.




Page 5- Photographs

This page consists of 6 pictures, these vary, however all relate to penguins. The page layout is still the same, with the logo in the left corner, the use of purple and yellow, with the navigation on the left hand side.



Images

I will be using a total of 16 pictures; I will be using the 'Alt' tag to add description to the images.

Image References
Image 1- http://bit.ly/1doEpob
Image 2- http://bit.ly/1bqcXd2
Image 3- http://bit.ly/1ePQbsS
Image 4- http://bit.ly/1fKmFIa
Image 5- http://bit.ly/LL3Eed
Image 6- http://bit.ly/1aYMJ3x
Image 7- http://bit.ly/1ioWbx0
Image 8- http://bit.ly/1bmsVSd
Image 9- http://bit.ly/1doECaW
Image 10- http://bit.ly/1bZ88V2
Image 11- http://bit.ly/1bZ8drF
Image 12- http://bit.ly/1doECaW
Image 13- http://bit.ly/1fKnMHJ
Image 14- http://bit.ly/MrjiLX
Image 15- http://bit.ly/1bZ8w5P
Image 16- http://bit.ly/1cQoIdS

Logo



For the logo, I used Illustrator; the pen tool helped me to draw over the original image, and then I used the fill tool to add colours into the shapes to complete my logo.

Interactivity
The naviagtion will be interactive, this will allow users to click on any of the buttons and it will take the user to that page.
The logo will also be interactive, this means that if the user clicks on the logo; it will take them to the home page as it will be linked to the 'Home Page'.
References

http://mind42.com/
Name- Mind42
Date- 07/01/2014
Time- 12.35


https://kuler.adobe.com/#create/color-wheel/
Name- Adobe Kuler
Date- 08/01/2014
Time- 12.50

Name- QSEE
Date- 14/01/2014
Time- 12.35

http://www.google.com/fonts#QuickUsePlace:quickUse/Family:Audiowide
Google Fonts
Date- 28/01/2014
Time- 2:51