Spiderwick Cronicles Website

This website is really fun to play around with, all the links respond on roll over with a sound as well as some sort of image change. The navigation bar is clear across the top of the screen and nice imagery taken from the movie is used throughout.

The Gallery in this website is really nice, the images are in a book and you click on one that you want to look at and it will enlarge for you to get a better look.
The Downloads link takes you to this page which i thought was brilliant as a way to promote the film via the website. You can download posters of the movie, get an email version of the actors signatures, get applications for you mobile phone as well as for your PC.

The characters info page is really good, it has lots of information on the actors used in the film but it also has info on the crew members and production notes which has interesting background info.

There is continuity throughout this website, it is really good to look at and easy to use, altogether, a great website.

Professor Layton Website

Here is a look at the website promoting popular Nintendo DS game, Professor Layton and the Curious Village. I really enjoyed going this website as I love the game and it allows you to play some of the puzzles through the website and learn more about the world created in the game. It is quite a interactive website in that the user has a lot of control. Even on the initial loading page, the user's attention is kept (if only for a little bit) by the fact that the loading symbol moves around the screen as you move the cursor.
I thought this was a nice touch.

When the home page to the site loads, it is really easy for the user to navigate, a navigation bar is clearly placed across the top of the page but an alternative navigation bar is used on the page in the form of photographs that become moving image on Roll Over. A caption then comes up telling the user which page this link will take them to.
Another part of the gallery that I enjoyed playing with was the characters page which allowed you to select the characters from the scene ans they would come to the front with a short description of who they are.

Fixed Webpage

As you can see in this image, the content is fixed so when the browser size is reduced, it does not squeeze itself into the new dimentions. This method of coding is easier to code but also is a dis-advantage to users with varying screen sizes.

Fluid Webpage example

Because the coding for this webpage uses % in the size settings, the text in the page is fluid. This is an advantage as it can be adapted to different screen sizes, therefore more people can use your website. The image above shows that when the browser is thinned, the text moves to fit in that browser.

A HTML Webpage

Here is a HTML webpage designed via Notepad:
Now I need to make this using CSS

Design Idea 4

Here is another design for the look of my website, I have decided to think a bit more simple for now. I am really happy with the look of this, the navigation bar is simple buttons, I guess I can develop this further to add more imagery into the design.

Design Idea 3

I have tried to make the other images look like the navigation bar but it doesn't look good like this so I think i will keep it how it was or perhaps I will play around with the settings to make it look more illustrated.

Design Idea 2

I have made the navigation bar a stack of books, I really like this idea but I would have to re-design the other images used on the page for the style to remain consistent.
It would be great if when the user clicks on the book button, the book opened up, or the books could be blank at the side and open up on roll over to say where the link will take you.

Design Idea 1

The stairs on the left will be a kind of navigation bar to the other floors (pages) The text will be a few words about the Nottingham store.

Baileys Website

Found myself on the baileys website recently and was pleasantly surprised with it, really enjoyed the page loading bar which is like a liquid filling a book. When the 'lounge' does load, it is designed like a pop up story book, which looks and interacts really well. The only think I could say is that i would make the navigation bar at the bottom a bit bigger, and add more sections for me to play with!

Colours I do and dont like together

Brown is my favourite colour, that doesn't mean that every website I produce in the future is going to be brown but when asked what my favourite colour combination is I automatically thought of this:

And when playing around with a few different combinations were loads of horrible choices so this was just one of them:

Colour Changes

I chose to change the Ikea Logo, originally the Ikea logo is vibrant, clear and attractive:


Now it is not very nice to look at, I think also that the use of pink might deter some men from associating with the company. Due the colours chosen, lines are not as clean in the logo anymore:


Also. when when colours are changed it can often remove all associations with what it stands for:


What was instantly recognisable as the first aid sign could now be a symbol for anything

Colour Wheel with #

Great colour selction wheel to use found at: http://ficml.org/jemimap/style/color/wheel.html

Color Codes

Here is a quick link to a color chart:
http://www.html.net/tutorials/html/lesson7_216websafecolourchart.asp

Image Loop On Click

This code will loop through my four images on the mouse click.

AV for intro

I have made a short piece of stopmotion that I plan to use in the intro to my Waterstones website.

First Layout Drawings and Wireframe

A wire frame of a website is used when planning the basic layout, it represents where logos, images and text will be put. I have found that wire framing is a very useful development technique.

First Doodles

My Network Map

When looking into web design companies in and around Warrington I was surprised to see that there were so many, this is a great advantage for me if I am to try for a placement near my home town; Warrington.