Evaluation Of My Website Project.

The First Thing I wanted to do as part of evaluation was too get peoples quick thoughts on my website. If you think about it the average user isn't going to spend more then three and a half minutes on my website and most of this will be watching the trailer, because of this the design as too look good and related to the movie right from the start. I did a quick fire questions quiz that visitors could complete without taking too long out of there day, below are the results that I got.

I also asked the people doing My questionnaire I had one question simply asking if they could improve one thing about my Website, What would it be? These were the results that I got from people. Some of the feedback I got from this I admit wasn't very useful for example "It's lacking something isn't useful at all I'd like to know what it's missing. Something a few people did say though was that the website could do with some more features especially as a lot of areas are lacking some detail and are blank. Apparently there were quite a few spelling mistakes as well which is something a lot of people think could be improved.

In my opinion the navigation of the website is simple to use and does what it needs to do. Everything is in the navigation at the top of the page and the navigation appears on every page. No comments were made on the navigation bar so therefore it must of been okay. A lot of people liked the design and the colours of the website as they give off the same creepy and errie feel that the film has. 

One of the most annoying mistakes which I made during the whole project was an error which I had made on the banner of the website. 

Across the entire website Coraline Has been spelt incorrectly. This unfortunately is something that I didn't notice until I was writing about the assets I had been making. It would take a lot of time to go back and fix it as I would have to replace every single image page including all the slicing and I would also have to redo all the Dreamweaver stuff. If I had enough time I would of gone back and fixed it but as I didn't I couldn't.

The trailer is something most users looked for on a film related website because of this it's the first thing they see on my website as an attempt to pull them into seeing the film. 

The Strengths & Weaknesses Of My Website.  

Strengths:

I think the biggest strength of my website is the design of it. The colours and the fonts I used really bring out the film and it doesn't look messy or tacky. It all fits where it should. I also think the written assets I made are a positive thing because I wrote them myself and it gives my own opinions better. The layout of the website is good with everything being under the main navigation and banner. A good example to show the good layout is on the Cast & Crew page. 

 

As you can see in the image above, all the images are the same different between each other as well as the text to go with each picture are all on the same level as each other. This is a good design for my website too have as well it looks more formal which is the approach I go for. 

The last strengths I can think of is that everything on the website works that needs too, All of the links on the website work correctly, all of the images show up correctly and don't take too long to show up. 

Weaknesses: 

The Biggest weakness in my website is the spelling error that's in my banner. A big weakness I think is that I think my website is lacking detail, for example I think there could be more information on the story Page. I also think that if I had time I would include a pop up thing that would pop up with information about each cast or crew member, because this isn't here I think the page is lacking information. 

Key skill's:

• HTML coding was used in my website within the making on Dreamweaver as well as part of my testing and practising. 
• Adobe Illustrator & Photoshop skills to make and edit the assets.
• Slicing Skills on Photoshop.

Testing & Comparing My Website - 10/03/2016.

How does my website compare to my original designs? 

Originally this was the design that I had done on paper that I was going for as well as the design at the electronic version of it that I made on Illustrator.

Below is how the homepage ended out. In my opinion it is quite similar to how I planned it to be. The only minor difference is that the website text is above the trailer instead of underneath. 

.

The banner is something which I had originally designed on paper as well, However it ended up

looking nothing like that when I made it. The one that I drew on paper had big yellow text in it with no empty space for anything else. I think the main reason I didn't end up making it like that was because I didn't like it taking the whole space or the colour scheme of it. The banner I went for had a gorgeous brownish colour to it with A coraline like font that I had downloaded from the internet.

The buttons ending up being the same as I had originally designed other then the fact I changed the
bright blue colour to a similar brown to match the banner and I decided to go for a creepy font that I downloaded from the internet instead of the Arial font I designed with.

How did my initial research help in the design of my website?

The first main thing that I did was include a trailer in the centre of the homepage, from my research people said that the trailer was the most important thing they were looking for on a movie website because of this I made sure it was one of the first things the visitor saw when going to my website. When I did my initial research I also found out that a lot of people wanted to read a short bit about the story or who was in the film. So in my website I made sure there that there was a page which a brief bit written about the story including some screenshots from the film.

Checking & Creating The Pages Withen Photoshop. 3/3/2016

Targets I thing's I want to get done within a week:

• All my assets completed.
• As much as possible for my Photoshop pages.

At this point of time all my assets for my website have been completed. There's a possibility I might add more assets whilst i'm making the pages however this is what I've got so far. 

• All The Buttons Made For The navigation.
• The website banner.
• Screenshots from the film.
• Photographs of some of the crew members and cast.
• Some film posters of films that Focus Features have made.
• Images of shop items
• My own written plot summery.
• A Small critics review that I wrote.
• A brief piece of text I wrote to go on the Cast & Crew pages
• A list of the cast and crew pages.

After collecting the assets I opened photoshop to create my homepage as well as a default page which I could use to easily start of a new page whilst keeping the design the same. I set the photoshop document up as a "Web Most Common" Preset (1366*768 Pixels). And dragged the banner of the site to the top of the page. I needed a main background for the site and to make one I removed the text of the banner as well as the buttons and increased the size. I then added a colour overlay to it so it came across darker. I then added a lightish blue squere behind the buttons and used the smudge and blur tool to blend them in with the banner and the main background. 

That completes the main default page that I needed so I saved it as a PSD and then created a new one for it to make the homepage. The homepage was a simple one with just a trailer in the center of the screen. All I needed was a box to mark where it would go as it would be actually added later in Adobe Dreamweaver. Later on when the page was finished I decided to add some text above the trailer. I had to make sure I sliced up the right parts of the image. For example the banner around each buttons and around the marked box. This is important it's done right for the links to work correctly.

I then started making the story page which was all text based and then doing the film screenshots page as well and so forth completing the other pages. All the other pages didn't take to long to complete as I already had the Default page which I could use.

Below is a screenshot of the slicing I had done for the Cast & Crew page.

After that the page is done and I need to save it for it too work probably it needs to be saved in a certain way.

When the webpage is saved this way Photoshop creates a HTML document as well as an Images folder to go with it. Each of the images in the folder is the individual slices. Eventually I had completed all the webpage designs on Photoshop And saved them correctly all in one folder.

Afterwards I needed to go into Adobe Dreamweaver and put it all together and into an actual website.
On each page I had to link all the banner buttons to the corresponding pages. This will be the main navigation of the website so it needs to work correctly. This is done by right clicking the buttons, selecting make link and then selecting the correct webpage for it to link too.

The trailer which I marked out in Photoshop was created by selecting the image and going to the code view and replacing the HTML coding for the image with the trailer embedding code from YouTube. I also wanted to add my own favicon on the website so I opened Photoshop with a canvas size of 16 x 16 pixels and created a blue Coraline button then added a line of coding to the top of each page to make it work. All you had to do was to save it was simply hit save as all you doing within Dreamweaver is editing the all ready made HTML file. Once all the buttons had been linked up that pretty much made the website complete.

Photoshop & Dreamweaver Techniques Screenshot's: 

Creating a color overlay for the background.

The various layers used for the main website background.

Using Adobe Illustrator to create my buttons for my website.

Line Number 6 on Dreamweaver is the coding which I added to include the Favicon on Dreamweaver.

An Update Of Where We Are, 29/02/2016.

Asset Making

So last week we started making all the assets that need to go on our website. I began with making the assets that would appear on most pages. So the banner and the buttons. The buttons on my webpage needed to have two versions. One where the buttons were normal and a second where the buttons looked like they had been pressed. To make this effect I set the colour of the button slightly darker then the normal ones. To make the buttons I found and downloaded a font off the internet. The font I
used was called October Crow I used it because it gave a special eerie effect to the webpage it's self and goes with the theme of the website.

I made another two versions of the buttons before this however they didn't work out how I personally wanted. The first one had a colour that was simply disgusting, the second version has the same background however the font was rubbish hence why I looked online for a better one.

 

I then proceed to making a banner of for the website. This is the one that would appear on the top of the website with the film name on it. This was designed by me using Adobe Illustrator and  then Adobe Photoshop to put the layers together. This is the outcome of the banner in photoshop.

The Coraline like font I had downloaded off the internet. This gave an excellent feel towards the website as it shown off the errieness of the website more. The Buttons Were the letter eye's which I made bigger and then rubbed the lower bits so it was just the button. I did this also for the Favicon I made for my website, It being just a blue button. 

I also needed to get some additional assets of the internet for my website. An example of some of them that I needed is a photo of the cast members for the Cast & Crew and pictures of the DVD cases for the shop page. I also needed to make a couple of written things for some pages. For example I wrote my own summery about the story to go one the story page.