Tuesday, December 05, 2006

Project 404: Revising pages 2

While I changed many of the pages in a similar way, as described in the previous entry, possibly the biggest change (and the one that took the longest) was the "loading" page.

The concept of this page was a loading page that never actually loads (something dial up users are VERY familar with, as more and more websites are being aimed at broadband connections). The first version looked like this:



To be honest, I didn't put much thought into why I chose the circles. I guess it could be perceived as representing "going around in circles", suggesting there is no end, no way out (much like Project 404 in fact). Circles seem to be used a lot for "waiting", for example, the "page loading" icon in the top right hand corner of Firefox. Maybe this comes from clock faces and hands?

The colours are the kind of generic colours you often see on loading animations. Not grey, but not really exciting. How many hours have I wasted watching boring animations like this?

There were several things I didn't like about this page:
  1. The colours didn't really link to any other part of the site

  2. There was no "progress" bar to inform the less observant viewer that the page had "stopped" loading

  3. The link to the next page was VERy hard to find

  4. The link to the next page was hard to click when you had managed to find it



I generally felt that the loading animation I had made for the Flash version of Project 404 was much more successful than this original one, so I decided to rework this animation and make it part of the new Project 404.

First, this meant changing the background colour to white - the default colour for Flash and web pages anyway, and also a symbol of blankness, no idea etc. I used default black for the text, but the loading bar is a slightly lighter grey (so it can be seen).

The final result looks like this:



The link to the next page is in the same place it was before; a hidden rollover that causes the word "not" to appear, changing the sentence from "patience is a virtue" to patience is not a virtue".

After looking at this animation and comparing it to what I wrote in the previous entry about the importance of default fonts, I have decided to redo the fonts (urgh, 700 keyframes, fun)

However, this causes a problem. In Flash, I cannot just set the font properties to use a default font face like I can using HTML, I have to choose a font from the list available. This is problematic because the default fonts in Firefox and Internet Explorer are different, meaning that in one browser, the font wuld not match the rest of the website. So Times New Roman vs Arial...

Arial is clearer and easier to read than TNR. Also, TNR is over used and therefore disliked. As a Firefox user, I would also be more inclined to use the default font for Firefox (Arial). HOWEVER...

TNR is the default font for many programs (e.g. word) - that's probably why it's hated so much. Therefore, it is the standard default, and would be more suitable to use for my site where I want to use minimal formatting. In addition, it is the default of Internet Explorer, and as much as I hate IE, it still has the highest percentage of users, meaning that the animation would still appear to be using the default font to the majority of viewers.

This is the primary reason for me choosing Times New Roman as the font in the loading animation. Here is what it looks like after all the modifications:


Comments: Post a Comment



<< Home

This page is powered by Blogger. Isn't yours?