Channel Project- Web Design

As our idea was mimicking a travel agency, myself and Jaymi researched many different travel agency websites, such as British Airways  (http://www.britishairways.com/travel/home/public/en_gb) and Thomas Cook (http://www.thomascook.com/). From these websites we found a common theme was the use of beautiful photography on the home page in order to attract the audience, and we also noticed prominent colours were blue and white. We believed Thomas Cook’s website was more aesthetically pleasing as there was less information and text on the home page, and the layout was much more simple than the British Airways website.

It was obvious to myself and Jaymi that we wanted to use the colours blue and white and they are simple and clean.We decided on a gradient instead in order to give a ‘sky’ look to the webpages. We made a gradient background the exact size of the webpages as we did not want the page to be bigger than screen size, so the user would not have to scroll up or down.

gradient

We decided to add the colour orange to the navigation bar and footer which would be present on every page on the website, this is because it is a prominent colour in the logo and it also contrasts with the blue. We rounded off the corners of the navbar as it was more aesthetically pleasing in my opinion. The logo was created my Bob in our group, and it contains the image of two suns, this is due to one of the distinct features of our planet is that it has two suns. He used a futuristic type face called ‘Neuropol’ which was downloaded from dafont.com. Myself and Jaymi wanted to use the same font for the navigation bar and footer of our website, however this wasn’t possible as we could only embed google fonts, and if we were to use this font it would be replaced by a standard font such as Arial on every computer than does not have Neuropol installed. We decided to find a very similar font on Google fonts an use this instead. I believe we found a very good match, which keeps within the futuristic theme.

home

On our homepage we added a simple jquery slider plug in downloaded from the internet. We saw that most websites of similar purposes had photography of their holiday destination on the homepage, therefore we decided to do the same. We used photo’s taken in Swanage and Weymouth. A lot of the images were of sandy beaches and beautiful scenery, implying that our planet was a beautiful place to live. We also wanted to add a countdown timer showing how long people had left to pick which planet they would like to live on. We tried to download a jquery plug in, however the coding was very complex and we couldn’t get it to operate on our website, so instead we watched a few tutorials on youtube on how to make countdown timers ourselves, using a simple code we made the timer on Adobe Flash. The positive side of this was that we had a working countdown timer that could be viewed on our webpage from desktop computers and macs, however the negative was that the timer would not work on mobile or tablet devices, as most do not have Flash installed.

about

For our about page we had written a small background story about how the planet was founded, and why it is such a great opportunity to leave Earth and live on Alpha Centauri. We wanted to keep the page simple so we added one image, this was a mockup news article made by Luke in our group, which presented an image of when Mr Centauri first landed on our planet. In the background of the image used you can see two suns, this is because it is the main distinguishable feature of Alpha Centauri.

overlapping

I edited the images taken from the footage of the actors playing ‘Centaurians’, citizens of Alpha Centauri, and used photoshop to make the colours of the makeup more vibrant and prominent. I decided to make simple citizen cards showing that they are citizens of Alpha Centauri. I made the card using Adobe Illustrator, and gave it the same simple colour scheme of blue and white, however instead of just a gradient I created a mosaic effect. These cards were to be presented on the ‘Sign Up’ page, where people would sign up to live on our planet.

formsignup

The sign up page followed the same theme, and contained a sign up form which we created using php. The form was very simple and contained basic information. If we had more time we would have added more sections to the form, making it slightly more specific and less general.

video

Lastly, we decided or the video gallery to resent the videos in a table like manner. When the videos are clicked on they enlarge to a full screen player giving the audience better visual. We embedded the videos in our html code instead of using Flash as not all platforms contained Flash. If we had more time we would have added more information to the page, such as titles and posters to each video.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s