HBO Voyeur

www.hbovoyeur.com

US cable network Home Box Office have recently launched an ambitous interactive video-based website. The concept was a multimedia experience that gives you a peek into what happens behind the countless windows we pass everyday.

The set up of the website is a single camera angle facing the front of an apartment block. Your cursor allows you to click on one of the eight rooms which will take away the walls of the apartment to reveal a cross-section of the building and the action taking place inside. The idea is that the story lines are simply action (no dialogue) but leave the audience wanting to know more. It is also possible to show all the video story lines at once as shown in the video below:

The site itself is a really good example of how video footage is becoming the next stage in website design and also shows how an audience can interact with a video website. It is also an interesting way of gaining a wider audience and providing a whole new slant on 'watching' something but at the same time is a little too perverse for my liking. The story lines do, however, make an interesting point about the fact that when people think no one is looking they are capable of things that are socially unexceptable, dark and impulsive. Please let me know what you think of this site.

Eco-Ego Website

http://www.marukin-ad.co.jp/ecoego/

Welcome to the world of eco-ego. This web-based game was produced for the purpose of having you learn "environmental protection that we can do immediately" while enjoying it. The natural environments change depending on our action. In the world where main character "Cocolon" lives, please experience that things. A point of the game is to keep the balance of "ecology" and "ego". You control the actions of the character via the orange panel at the top-right of the screen.

During your experience of the site Cocolon will need to eat, brush his teeth, go to the market etc. Every time you have a choice between an easy solution and the most ecological solution. For example, the screen-shot below shows how the audience is presented witht the task of separating the rubbish into the appropriate bins...

Also, the below screen-shot demonstrates how the environment surrounding Cocolon's home is affected by his actions. When the air-conditioning is on puffs of smoke appearfrom the factory chimney and all the birds and flowers die...


I think this is a really nice site that may be good for children to try and demonstrate that simple things like separating rubbish or cycling rather than getting in a car does make a difference. However, this site presents a problem for me. Although the intentions are honest its demonstration of environmental impact is exaggerated and doesn't take into account a sceptical older audience. On the other hand, this site shows how digital design can reach an audience in a new way rather than presenting them with the same old information (which alienates the audience).

Cicatriz Website

www.cicatriz.se

Here is another interesting concept for an online clothing site. Cicatriz.se has a fully intergated flash shop telling you what is in stock as well as showcasing the latest product range in a series of low-res videos set up in a grid (above).

Although the videos are low-res there are some really nice little features. For example, on the second video of the top row the model has been filmed pretending to pull the logo off of his T-shirt, a heavily pixelated version of the logo is tracked into the blank space. The end result is a blatent awareness that the visual is not meant to be taken seriously but instead shows the quirky nature of the brand as well as emphasising a selling point of the garment. Another nice feature is the planning of the website. The films fit into a timeline meaning that the play in an order, this allows for more visual tricks (i.e. creating the illusion that an item of clothing is being past between videos on two different rows by filming dropping a garment in one video and receiving the same garment from above in the other video).

Vision Streetwear Website

www.visionstreetwear.com

This is a good example of a full video website and how a apparel website can stay true to its essence. As the first page loads a pink spraypaint mark appears and drips down the page, straight away even this suggests the type of audience they are aiming for (young adults, rebellion, graffitti culture etc).

In addition to the loading percentage the website also provides you with a statement 'While you wait: 2 hectares of the worlds forests have disappeared,' however, the amount changes as the page loads and increases more and more. This is a simple idea but I really liked the delivery, it is the last place you would expect a message like that but it really works and will help to create awareness in a youngeraudience. Also, the delivery plays on the fact that you have to wait (converting the main weakness of the website into a feature), because the website is predominantly video it takes slightly longer to load - the 'while you wait' factoids are received by a captive audeince and use the amount of time a page takes to load to quantify another message.

Once the main website has loaded the entire background becomes a space for low-res videos to be streamed showing what the brand is about (skateboarding, music and the trends surrounding youth culture). The logo and navigation devices are static and in the foreground, made visible by spraypaint (also static). The entire website has a 'fanzine' influence and is an adaptation on the trend itself (derived from punk rock).

Another fantastic element of this website is the way the product is represented and really ties in the reason for having a video website. Instead of having a photo of the shoe they are selling or an expensive photoshoot with models posing Vision have instead used low-res videos close-ups of people's feet as they walk, run, and skateboard. This emphasises the brand and the fact they are more about the sport and lifestyle than other brands. They sell apparel for real people to be used in the real world. Personally I feel this is a really innovative way of showing a product and helps to strengthen the brand as well. Below are some examples of the the low-res videos of people wearing the product (the video still in the background).

A rhythm of lines (website)

www.rhythmoflines.co.uk

As part of the 'rhythm of line campaign for the Audi A5 design company GT have developed a website where you can draw your own lines and create your own car shapes and then view them from various angles:

"We ask the audience to create their own rhythm of lines."

This is another example of how digital technology has advanced to allow the audience to have a new way to interact with the brand.

Battle for the Bronchs!

www.battleforthebronchs.com.au

This is a perfect example of how the digital side of design can be used in a new and interesting way, an interactive website utilizing video footage and flash gaming to create awareness about Asthma. Above is the teaser trailer for the website.

The main concept behind this website is a campaign by GlaxoSmithKline and Asthmascore to create awareness about the issues surrounding Asthma. Tequila (Australia) developed a video comic strip with characters such as Alvie Olie, Deep Bref and Hack Wheezer set in the fictional city 'The Bronchs'. The narrative involves the 'hero' Alvie Olie and his 'mentor'Deep Bref battling against the evil Hack Wheezer and his Trigger gang (The Trigger gang all have names of things that can set-off a person's Asthma). The purpose of this site is to reach young people who may be unaware of the symptoms of Asthma without boring them with facts and figures.

I really like the use of the comic strip format because it is naturally set out into scenes and has a narrative story throughout. This lends itself well to film; each box can have a different camera angle and show the perspective of the surrounding area in different ways. The actors have been filmed infront of a green screen and then still illustrations have been super-imposed as the background. The film sequences begin as stills (above) like a page from a comic strip but then each box will increase to full size (in turn) and play the section of film allocated to that box (as shown below). The end result is a flow of film in a narrative order as well as some secondary animation - sound effects and scaling as a visual aid. Although the narrative is weak and the characters not very interesting it still gets a definate message across and is alot more successful in delivering the message than a leaflet would be.


Also, the film/ comic strip is split into four main chapters, each one covering the idea of breathing and the need for air. Even the controls can be powered by the sound of your own breathing down a microphone. This enhances the level of interactivity with the story and allows the audience to engage with the concept on another level.

Leo Burnett Website

www.leoburnett.com

I was browsing the internet and found the Leo Burnett website. I really like the way the website works; the site begins as a signature (above) that falls apart into different components that eventually become links.

A really nice addition to this is the fact that your cursor is the pencil and your movements on the website become a continuous pencil line...

Wrapping Paper

After looking at the Design team's blog I decided to enter Tigerprint's web-based wrapping paper competition. Tigerprint were after something unusual and creative so I used some of my pattern work from last year to create a floral influenced theme with a retro feel to it.



You can enter the competition here.

Stranger Than Fiction Website

Stranger Than Fiction

As video streaming and broadband become more accessable websites can achieve much more than in previous years. A good example of this is the mini-site for the recent film Stranger Than Fiction.

The Flash site uses the concept of the film (a narrator telling the story of a supposedly fictional character) to enhance the experience of the audience. Video blogs are used as well to get an almost 'behind the scenes' look at the film.

One aspect of the website I really like is that as the intro to the site is loading you are introduced to the main character of the film (Harold) who acts as the loading bar. Also, as Harold loads the narrative voice from the film describes Harold's feelings (much like in the film) introducing sound to the site as well as strengthening the concept of the film.

BAU-DA DESIGN LAB

www.bauda.com

After looking at the Audioslave video I discovered designer P.R. Brown and his company Bau-Da Design lab. The website is definately worth a look. It is really simple but the hand-rendered site really works and gives you an insight into the way the company may work.

I also had a look at some of the Graphic Design they had to offer and I found a book cover for Dita Von Teese's book. Because the book is in two parts Bau-da have utilized both the conventional front and back cover to create two front covers (so when the book is turned over it reveals the other cover).

The thing I like about the cover is its use of photography and composition to almost suggest a split personality. The colour schemes used on the respective covers have been carefully chosen. The Burlesque photograph portrays 'candy' colours that suggest a playfulness and an innocence whereas the Fetish cover portays a much darker scene.