However, on returning to my site, I felt really underwhelmed, and actually thought that the design idea I had in my head was far better than what was sitting in front of me.
It just seemed bland. And also not finetuned enough for my liking. So, I set about tarting it up.
Firstly, I've taken the time to compress the images so to ensure a quick loading site - you don't need a resolution of 2000 squared when your image panels are only 300 x 288. And what better way to present them but by adding borders, akin to that of a comic book.
One problem I am aware of it that Firefox doesn't display a border over a SWF. This therefore also makes the panel look off kilter, and in a clean grid like layout that I've used, this is unwelcome.
Although we are being assessed using Firefox, I knew that I should at least try elsewhere. Most unusually, Internet Explorer wins one over Firefox and displays borders, whilst also maintaining the tight regimented structure.
Another thing that just seemed to be lacking was the flat, plain white background. Something I did last year in Identities was to use an image of paper textures and it instantly lifts the piece giving it a nicer, more realistic feel. Using this method again, I'm far happier with the look now.
It did take some trial adjustments though. At one point it seemed too bright, making it uncomfortable to look at the content on screen. Meanwhile the scrunches were initally too over powering and distracted too much away from the content. I feel now I have struck the right balance.
Using this paper background has caused some difficulties however. I am using a round label like button to launch my popup. Being a swf, as far as I'm aware there isn't a transparency option for the canvas layer. True, you can add a line of code (wmode="transparent") but this won't work in my piece as I'm seeking strict XHTML1.0 validation and so am using SWFObject javascript.
It is admittedly really hard to tell, but I ended up getting round this by adding a swatch of the scumpled paper to a bottom layer on the swf.
UPDATE 9/12/08 Following David's session today where he showed up how to encorporate the Java customisable popup, I have managed to use both SWFObject and Javascript newwindow function to get the popup to popup, whilst still abiding by the W3C rules. I had originally managed it with the AS3 code, but thereafter it was a case of setting the browser to allow the content, not the coding that was wrong! I did have to read up on the differences between _self / _blank, but it's all in done and dusted now!
As can be seen from the above picture too, I'm having trouble with the default colourisation for hyperlinks. You can change it to all colours under the sun but there is not the option to remove them, as in an alpha channel level of 0. I know that you want to make your hyperlinks visible, but surely the hand pointer can suffice? This problem still needs to be addressed, but for now, they remain white, not purple or blue!
UPDATE again! Courtesy of Sarah, setting the hyperlink with a border of 0 removes them. Just leaving the option box empty includes them! It seems strange, but at least it works now. Bravo!
I wanted to make it slightly more user friendly in terms of accessibilty by having an alternate available should the user not have Flash plugin. I considered a jpeg still, or just a line of text saying get Flash. But conveniently, there is a simple line of code that will provide a logo and hyperlink to the Adobe download site.
I've also decided that it would be a good idea to colour the page link that the user is on red, so that it is another distinction as to their whereabouts within the site. This all comes from reading up on user feedback, and one thing they like to know is where they are, in the grand scheme of things (BARFIELD, L., 2003, Design for New Media: Interaction Design for Multimedia and the Web, 1st Ed., (sl): Addison Wesley)
As another consequence of this, I've also made some changes to the logo. Rather than one logo that is just copied throughout the site, I've vamped it up a bit for the main page, adding a nice wet look to it, in Photoshop, courtesy of the outer glow effect. Furthermore, I realised that the header of the page could be more detailed, so I added more detail!
As with design, it's better to make variations, which indeed I have done:
I wanted to maintain the gritty, rugged look of Villains, and knew that for highlighting the words it was an easy choice to use red. I have opted for the last one, with the fingertips typeface. It associates with criminal activity etc, with the red making for quite a good reference to blood.
Now the user knows what page they are on, both by the red coloured link, but also topping the page, again in strong, stand out red, it informs them too. This should start on it's way in pleasing Constantine and Lockwood.
My next post should be concerned with analysing my own site in terms of the above linked principles.
@
No comments:
Post a Comment