OEP Website - Completed

I almost forgot to post the link to view Villains in it's entirety.

Without further ado...

Villains

@

OEP Web Dev - User testing and Browser Testing

Having just come back from our peer review session I found it really useful. Not only because you are able to see the "finished" works of what everybody else has been getting on with and learn about how they did something, but because you can learn from them about your work too.

In all, I am pleased with the status of my site now, compared to a few days ago. It has "character" said one feedback comment, and I agree now. The typefaces/colour scheme all feed into one sort of unified identity for the site. I am also really pleased that I altered the heading logos. It just goes to show that playing around can lead to successful results. All the more reason to do as many variations as possible!

I knew the navigation method wouldn't please everybody, and sure enough I got a couple of comments regarding the "strange" positioning, but on the flip side, a few identified with it and found it "easy to use".

I have always been torn over the roll over eyes banner. I didn't know if I should provide some instruction as an indication that there is interaction available. Sure enough, I could have achieved this through using the comic book caption box, but then I didn't want to spoil the surprise factor either. In the end, I think I am going to leave it un instructioned, in respect of my artistic integrity!

Importantly though, I found some pointers from which to improve my site, from the feedback.

I learnt that the main pop up on the index page, due to it's trigger button location, kept issuing a new pop up repeatedly, because the mouse remained in the same area as the trigger. I forecasted two ways of addressing thing. One, I could make it MouseEvent.CLICK, rather than the current MouseEvent.MOUSE_OVER. The other option, was to make use a little more Javascript code in the Flash trigger button action script and move the location of the pop up window completely over the trigger, thereby removing the chances of repeatedly launching new popups. Being as a pop up is in it's very nature, a pop up, I didn't want to have to make the trigger require a click, hence I went with using the Javascript approach, and it now works well. 

To double check this, I have used all the browsers available at my disposal (IE7, Firefox 3, Google Chrome, Opear) to do some cross platform testing. 

 

  

Luckily, everything works across the board, layouts did not go awry, the images were all correctly aligned, and it all remains smack bang in the centre of the browser window. The only tiny downside is nowadays browsers block popups on behalf of their user, to avoid annoying them. This remained true for my own popup, so I will include a readme note in the root folder to warn my assessors of this. 

The only thing I am left to do now is to compile my evaluation document (I sure have enough content on this here blog to get going with!) and hopefully tie up the last loose end which concerns the php and getting it to relay the feedback response, to the actual comic book page.

@

OEP Web dev - W3C Validation

I knew right from the start that if there was some sort of challenge to do with completing this website, I would persevere to achieve it. And as of now, I just have!

W3C Validation: XHTML 1.0 Strict!

Needless to say, it wasn't 100% straight forward. I initially expected numerous errors to pop up, but in fact I got just two. The easy one was to remove a redundant closing tag. The main problem however revolved around border="0". Those of you who are keen will notice that I got this tip from Sarah to remove the purple and blue hyperlink effects from the links. Such a tag now though is considered archaic and non conventional, so I had to alter it somehow.

I tried different approaches that people had suggested online, all of which concerned using CSS. The first border: 0px none I attached to the specific div tags and it worked on two of the pages but then wouldn't work on the third. Mysterious. After a good fifteen minutes trying different things I was almost close to closing Dreamweaver. I did another search and reluctantly tried out img {border: none}. This removes borders for all images, bar those that has a set border already. This was a last ditch attempt cos as far as I was aware, that tag would remove all borders from all of the images and I couldn't have that when the comic panels needed black borders! Luckily though, the tag has worked it's magic and Villains is now validated! The sacrifice is having CSS internal, with the html, rather than external, because it just will not play ball.

All being told, that's another box on my to do list ticked.

@

OEP Web Dev - Interface analysis (Constantine & Lockwood)

We are required to analyse/review/evaluate interaction using the Constantine and Lockwood principles for our three page site. So without further ado, I introduce the principles vs Villains.

The structure principle

For the structure, I have gone against the norms and used a right hand navigation scheme. This may seem odd in terms of typical website conventions, but being a comic, I wanted to try and replicate a digital version, so the right hand links are as if they were pages in the comic that the user can flick to.

The actual content on the pages are displayed using panels, a staple feature of a comic book. I learnt from a review I did about the energy saving trust that I found it better that all their information seemed housed in one box. As a result, I replicated this on the Get Villains page. The user enters their details in a single box, no sprawling all over the page. Clear and concise instead.

The simplicity principle

I tried to be inventive with the titles I encorporated in my site whilst maintaining relatively simple lexis. Get Villains, as a title, I don't think could be anymore obvious. If they recognise from the homepage that VIllains is mimicing a comic book, (and I have used pretty standard elements such as the 6x6 grid, comic book fonts, speech bubbles) then understanding should proceed from there.

The feedback principle

As I mentioned in my last post, a key user feature is letting the user know what is happening, or where they are. Henceforth, I adapted my page logos to be more informative and title the page, whilst also defining the right hand navigation to display the current page in a standout red.

Should the user not have the Flash plugin to view the banners, I have provided alternate content, in the form of a simple message and graphic which upon clicking takes them to the Adobe site to download the Flash player plugin.

For the contact details submit form, I made sure that it presents a response once they have pushed Submit, either telling them of an error, or if the information has been successfully sent. Not knowing would just leave the user in limbo and break an expectation that has been built up from previous experience elsewhere on the web, where they learn of the outcome of submitting information.

The reuse principle

I maintained the same colour scheme throughout, and consistency in the layout. Likewise, the logo at the top of each page holds the same Villain image, but with additional information a top so to aid in consistency.

At one point in development the pages were of slightly different sizes in width by a few pixels or so, so whilst clicking through, subconciously, it may have started to irritate. (Only the keen eyed though!) However, I remedied this by using the exact same figures throughout, meaning it consistently remains in the same place on the page.

Furthermore, even the most minute change in the placing of a div tag can get on my nerves, so the hyperlinks on the right hand side, remain place perfect, no nudging (hopefully!) the only alteration being that they change colour.

The tolerance principle

The only section relating to tolerance I can find on my site is in terms of the user data entry. For their email address, for example, I didn't go too specific with the coding making sure that they have entered the correct symbols in the correct space etc. (I am aware that spammers abuse such a gap in the system, and would obviously implement tight data type entry should this site be for real, along with possibly including CAPTCHA.) However, for this NTU server site, I have made it so that they have to enter something in the fields, inputting nothing is rejected!

@

Useful CSS information

The following link provides useful tips for when trying to please all the different browsers, where CSS is concerned.

http://www.richinstyle.com/masterclass/crossbrowser.html#embed

@

OEP Web dev - the making stage #2

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, 1^st 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.

@

OEP Web dev - the making stage

With under a week to go, I noticed my Gantt chart said that I should be finally implementing all the html, CSS and Flash in Dreamweaver.

Normally if I just sit down and get to it, I can make an entire piece, so this was the approach I had here - sit down, do it, and then the next day, go back and start perfecting.

In all, being a relative novice to Dreamweaver, I tried three different layout methods - frustrating yes, but a learning process nonethless. The first was slicing a Photoshop mock up for the layout and then inserting this into Dreamweaver. This works relatively simply and on clicking the button in Dreamweaver you do think what a cool shortcut. However I could see gaps in where I hadn't correctly sliced and some extended slices that I definitely didn't want.

Furthermore, if I wanted to alter the size by even a pixel it threw everything else out of order. So out the window went that layout technique.

The next method I thought I could try trusty old tables. OK, they're not cutting edge and tend to be sneered upon but surely tables ranks higher than a FrontPage website for kudos, right? Again, I set everything up, inserted all my pictures and noted is was better than the Photoshop automated approach, yet, I wanted to place some content exactly, or absolutely as Dreamweaver calls it and failed to successfully pull this off within my table. I inserted an AP div tag, it looked alright, but then on switching to the browser revealed it to be a no no.

So again, another technique was ditched.

The last method I tried I have always been slightly fearful of - div tags (&CSS). Everytime I tried to get my head round using an external document, along with div tags I couldn't see it through. However, after following a tutorial, remembering that code view does have it's benefits cos you can move things anywhere you like within there, whereas within the design view it can be restricted, I have actually succeeded.

It's good to learn some tricks of the trade, such as having a body div which you format text setup to centre and it will move everything to the centre of the user's browser. Furthermore, with CSS in Dreamweaver having it's own WYSIWYG approach, it really isn't as gruelling as I expected! However, at this stage, it remained internal CSS.

So, with a basic but finished product, I switched off ...

@

Constantine and Lockwood principles for a flashy site

We were shown a presentation about user interface/interaction in the Interaction seminar with David. Five useful principles were introduced which can help us effectively analyse a site for it's successfulness in the above mentioned arena.

Now I have gone onto the web and done a quick analysis using their principles for www.thoughtpile.org , which comes courtesy of the daily FWA.

Constantine and Lockwood have provided a number of ways to way look at a site to assess it's usability.

The structure principle

There is a consistent feel to the structure for this site. Seperate links are placed at intervals around the outside of the screen. More content can be accessed via the funky design, which you can always alter to be close up or further away. This unique design does sort of appease the structure principle because the orange dots are grouped in twos or threes, and with this being the case, the content they hold is sort of interrelated.

The simplicity principle

At first you do think what is this animation that's coming at me, but on playing with the scroll wheel, you learn that it enables you to zoom in or out accordding to what you want to see. Once clicking on a node, it does seem slightly ambiguous as to what it is telling you, but icons are used, and with symbols such as a heart or a plus or a minus, it does lead you towards an understanding. This is confirmed by applying more information once you roll over one of the buttons.

The feedback principle

With the addition of further information on rollover it minimises doing something without understanding the consequences.

The tolerance principle

The site does feel thought out. In the email address registration part, again, it is considerate of errors when entering email addresses etc.

The reuse principle

The design is consistent throughout, with the node structure taking the main format. It makes it slightly more interesting by when clicking upon a certain sector, it pans to a different point of view. But the colouring is consistent, you become accustomed to expecting orange to have some additional content behind it.

It is these principles that I will need to consider my site in too, once it is nearing completion, so if I do find anything out of order, I can then fix it.

@

Factually based, fancifully based web analysis

I initially expected this site to be a boring fact based affair, but actually should have known better. What with the Curve being a new entertainment and arts venue, they too have quite a good looking, fanciful attempt at a site.

http://www.curveonline.co.uk/curve.php?pgid=0

The opening page looks Flash based, but on the whole, actually isn't! It visually represents the physical location, and manages to advertise a lot of it's events with sliding billboards, bus stop poster, an air balloon and street lighting with advertising. The navigation you are primarily aware of leads with visual cues (normally a good thing) however if I wanted to find something specific then I think I might initally be a little confused over where I should click - you don't necessarily know where all these hidden links are. Luckily, they the creators have installed a more traditional nav bar at the top of the page. After all, this venue will attract a range of visitors and so it seems logical to encorporate the more traditional nav that traditional users will be familiar with.



One negative I do have though is that it doesn't feel as efficient as it could be. You click the navigation at the top to then have to choose another sector further down the page within a graphical link to get more information. Consistency issue perhaps?

There is consistency with their colour scheme of purple, pink, and once you become aware that important bits of information around the site are pink, you then know what to roughly be looking for, colour wise. There is a lot of information on the site, and it encorporates all the typical features of an e-commerce like site: it has a buy tickets section, mailing list section. It even touts a virtual tour but I couldn't find the expected 3D click through experience I've seen before on the web.

On the whole, the introductory image of the Curve venue made me excited, but on going through it doesn't seem as honed as I would expect. Too much mouse moving to me means not well placed content/links.

--

Moving onto a factually based site, the saving energy trust site has a lot of information to disseminate. Being something of an official body, they make it clear that they have Accessibilty catered for and cater for a minimum of AA compliance.

http://www.energysavingtrust.org.uk/

Nonetheless it still knows how to do it in a modern, good looking way. The colours are quite vivid, and well thought through - greens and blues - natural colours. You can tell it has a quality feel about it, by recognising this.



It is all housed within one square box and feels quite refined - you don't have scroll several pages down to be able to see everything. However, there does feel to be A LOT of links.

Once on a specific page, the navigation is what we expect - tabs at the top, left hand nav bar for more information. There are a few images which act as quick signs to show the user what content is being featured on that page. For example, an open fridge door represents the section on fridges!



One thing I like is that there seems to be information for every aspect of what a user could want. Helpful tips through to Government legislature. A phone helpline is displayed boldy on every single page, in the exact same place. This sort of consistency bodes well to me.

It is of the time, having RSS feeds options, along with registration option to sign up for mailed information. Personally, I like their confidence by providing the option to contact them and comment about the site. I often find that where user feedback has been sort, the site functions far better. This is important. Even though not required, I'ml going to run some user testing on my own OEP Website.

This like though turns into a criticism too though - the sheer abundance of information. I went on the site and found something, and then on restarting, going from the homepage again trying to find that page was difficult. Luckily there is a search box which heads the page.

On the whole though, for an information site, I actually prefer this to the Curve one. It seems better quality, and it's creators more aware of an amateur user first visitng their site and wanting to navigate in a way they expect to.

@

OEP Web Dev - Typewriter popup

From the hand drawn design I created earlier, the typewriter one stood out as a decent effort for a popup. It could incorporate animation, interaction and be purposeful - advertising the comic. The Film 4 one did this, and I thought it a successful piece.

To begin, I photoshopped a desk and background adopting the gloomy look, as a placeholder for the typewriter. The filter that I have been applying throughout is Artististic Cutout. I applied this to the typewriter image and after altering the levels found what best represented the sort of cartoon image. 

The brief mentions the importance of image quality. Admittedly if you were to scrutinise the typewriter you may deem it to be of inferior quality. However, this isn't due to poor compression, but instead the filter applied makes it appear aged and the application of it's colour intermittent. It sounds mad, but this is intentional in keeping with the type of comic book images.

I thought a good way to inform the user there is some interaction needed to move the progress along (above the information of the caption box), I added a typewriter click sound for the button's over state. It was tempting to take a lazy approach and just use that one same sound thereafter, when clicking, to imitate the typewriter as it displays it's message. However, I used Audacity to alter the pitch several times meaning you now hear various intonations. It just seems more realistic now.

The main issue that I encountered whilst making the Flash piece was to replicate a realistic motion effect from the paper floating through the air and transforming into the comic. Flash likes to tween in a clock wise method, meaning that on several attempts, the paper would spin around like a Catherine Wheel, not a piece of paper! 

It resulted in Flash crashing on numerous times - I don't think it could process what I was asking it to do. The last time I did something like this was in 3D Max and so perhaps I over estimated the software's capabilities.

 

I believe I have managed to get around this problem somewhat by adding what is known as a Shape Hint. It helps Flash know what line/corner should/shouldn't be moved at a certian time. In all, it makes for a better shape tween. Now I find the animation to be much more fluid and progresses from one thing to the other in an aesthetically pleasing way. 

It's a slight shame about how I had to encorporate the actual Villains imagery on the final section of the paper tween. I envisioned it twisting round and revealing part by part the new information, but as I mentioned above, the program just wasn't playing ball for me.

The last thing that I think is important for a pop up banner in particular, is to have some sort of link to where it wants to direct you to. -You don't want to advertise and then not provide a hand in getting to the sponsors site! Henceforth, after a little trial and error, "click here" now takes them in the main browser window to page 3.

Of all the banners I think I like this one the best. It looks gloomy, I like the comic book feel with the captions box, and also after varying the sounds for the typewriter clicks it is actually more authentic and should make the user want to continue interacting with it with the appearance of the text on the paper. I actually quite like making Flash banners!

@

OEP Web dev - Push the button banner

The last banner to create I really liked, in it's paper base premise. I think I gained some sort of inspiration from the TV adverts, where you get lots of competing signs at the same time, all informing/instructing of something.

 

I had provisioned in my wireframe design (page3) for the banner to be a horizontal one, and on looking at the banner sizes available throughout the web found the biggest to be a leaderboard (728x90) but this isn't available in Flash, so it leads me to think that could be an American sized banner.

The next available one is called a 'full' banner but I think that term should be applied loosely as it's only 468x60. I understand that most people don't want adverts to take over the content space for normal websites, but in our context, the banners feed into the main piece. It seems a shame to have to use such a minimal sized horizontal banner.

Soooo, I decided that the only way to progress was to alter the wireframe. The wide skyscraper banner is quite a decent size at 160x600 and therefore wouldn't look too much out of place on the html page.

The altered wireframe can now be seen below:

With this vertical portrait-like set up, I started creating in Flash. 

--

Initially I had visioned a banner in colour, with red triangle warning signs, yellow hazard ones, for example. Also, being a fan of web2.0 visuals, I was keen to use gradients as I feel they just look nicer on the eye rather than a flat colour.

However, on producing this first mock-up, I noticed it just wasn't in keeping with the site. The brief is clear in mentioning that the banners should be cohesive with the rest of the site's design and so this particular banner wouldn't really fit in terms of that. 

As a result, I started from scratch again and instead opted for a greyscale colour palette. This consisted of white, black and grey!

It was much easier to recognise this variation would gel with the rest of the site that will be surrounding it. I like the variation in the shapes, we have boxes, circles, hexagons, triangles. Furthermore, the addition of the red beacon (coloured to signify it's importance, just as Frank Miller did in Sin City) gives it quite an arty/sophisticated feel, I think due to it's limited colour palette. 

The next decision I had to determine was how to animate the button so as to be noticeable. 

 

This first one I changed in it's brightness setting. However, I discarded this idea as it appeared too washed out. The next one I tried to incorporate Miller's specific choice of yellow, but such a colour didn't seem to fit in the with the red and greyscale as well. Henceforth, I decided to tone the button to change between a normal red and a much more rich one. It is a subtle animation but I think aesthetically it all looks very pleasing. (I think I was again subliminally persuaded, this time by the Film 4 banner!)

Overall, I particularly like the humourous side to this piece. The 'push the button', 'do no push' signs at the start seems akin to comic book jokes. Another typical comic book feature is the ka-boom explosion which I tried to replicate, however the motion tweening did prove slightly difficult to get to sync together well.

@

OEP Web dev - Eyes banner

The first banner that the user will discreetly be shown is the creepy masked eyes. 

When I thought up this idea, I intended for the eyes to be shut and then awake of their own accord, to look around, before menancingly look straight at the camera/user. 

With it being video, I wasn't as free to experiment with Photoshop styles, true there is After Effects, but I decided to try and replicate the style the rest of the site has, using the tools on offer to me.

I sampled three different contrasts:

I opted for the middle one, as it really is the middle of the other two. The last one is perhaps too dark and could mean that the user wouldn't be able to fully experience the clip, as in, looking at it, it seems hard to see, it takes effort. Meanwhile, the first one just seems a little too much on the light side being just a straight forward colour to black and white conversion. If that was to be put alongside the the mock ups I made for the comic book panels, it may seem a little too alien. Hence, the middle one seems to me to be a happy medium.

When I actually implemented the design into Flash, I spotted that this banner too could have an opportunity to incoporate a form of interaction. Rather than just being a looping banner which may instantly stop the user paying attention, I thought that if I was to adopt a MOUSE_OVER effect, which starts the video, that would be better. Due to the positioning of the banner, the user won't instantly notice it is one, and then when their mouse goes over, it should create a form of surprise. A creepy surprise, that is in keeping with the whole site, I hope!

--

So, when trying to implement this roll over effect I had a few problems. Firstly, my action scripting wouldn't activate on mouse over. I had no complier errors, but it just wouldn't respond. I eventually got over this by layering an empty button over, which does function correctly.

Secondly, Flash automates videos to return to their starting frame at the end of the video. I wished for it to hold on the eyes open scene at the end. After several different attempts, such as using a static image of the eyes open, inserting code to pause it for a couple of seconds, or even reducing the frames per second at a certain point, I eventually realised I could just stop the video on the last frame but one. Then, if the mouse then waves over again, it returns to the start and plays once more. Altogether this banner now works just as I envisioned. 

As a side, one thing that has turned out well is the size of the file. The video started off at 28MB, so I was a little apprehensive as to whether I'd succeed in reducing it down. However, after deleting the audio, resizing the actual on screen image and encoding using the Flash CS3 video importer, the file is now a rather small 328KB! This figure is miles away from the 5-10MB limit for the site.

I'll be back to post soon about the other banner...

@

Bannerblog examples

Kind of like an FWA for banners, bannerblog documents all online advertisements that companies are employing agencies to make. 

I think this first banner is ingenius. 

http://www.bannerblog.com.au/2007/07/rural_channel_pig.php 

It is so simple in premise but also technically quite simple - and yet it does it's job well. There is humour, there is likeability in the pig and there is a degree of interaction. Some might see it as too simple a creation, but I think it gets it's message across well. The only downside is that I didn't initially notice the plug - it's not as clear as it could be hidden in the grass.

--

This next one to promote the Da Vinci Code movie actually helped me choose one of the banners from my designs, and shows it could work and be effective. 

http://www.bannerblog.com.au/2006/06/the_da_vinci_code_ey.php 

The use of the eyes at the start is quite malicious, definitely being quite creepy/scary. This is exactly the sort of tone I want to set for my banners. Henceforth, I'll be using my twitching eye design!

--

Film 4 (or agency Profero) surprised me with their attempt at a banner. 

http://www.bannerblog.com.au/2008/01/film_4_heist.php

It succeeds on every level. It is eye catching due to the initial back and white setting, it is dynamic when it snaps to colour along with the movement and explosion in the scene. It breaks the boundaries when the car skids outside the banner area, almost proceeds to hit us but then quickly swerves to reveal a wipe on effect for the Film 4 content - this being the informational/promotion side to the banner. The best one I may have seen, it seems to tick all the boxes for a successful, interesting banner.

--

Last but not least, I thought this ITV Rugby cleverly mixes video with graphics (video being an area I think more and more banners will be heading towards). 

http://www.bannerblog.com.au/2007/09/itv_ruby.php

This, like the Film 4 one, represents thinking outside of the box (OK, I know, another pun!) by literally breaking out of the boxed boundaries. I'm sure I'd be able to make something like that too.

@